diff --git a/packages/library/package.json b/packages/library/package.json index 82570d6..c84a838 100644 --- a/packages/library/package.json +++ b/packages/library/package.json @@ -15,10 +15,6 @@ "./style": { "import": "./src/assets/css/tailwind.css", "types": "./src/index.d.ts" - }, - "./theme": { - "import": "./src/assets/css/tailwind.css", - "types": "./src/index.d.ts" } }, "files": [ diff --git a/packages/library/src/assets/css/nychthemeron.css b/packages/library/src/assets/css/nychthemeron.css deleted file mode 100644 index 6f1d9f0..0000000 --- a/packages/library/src/assets/css/nychthemeron.css +++ /dev/null @@ -1,169 +0,0 @@ -/* ============================================================ - nychthemeron.css - Toggle themes by setting data-theme on : - - - ============================================================ */ - -@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap'); - -/* ── HADES ───────────────────────────────────────────────── */ -[data-theme='hades'] { - /* surfaces */ - --surface-0: #18160f; - --surface-1: #28241a; - --surface-2: #2e2a1e; - --surface-3: #322e22; - --track: #32302a; - - /* borders */ - --border: #4a4538; - --border-hi: #5a5040; - --border-lo: #38342a; - - /* primary */ - --primary: #d4b278; - --primary-fg: #0e0c08; - - /* semantic */ - --warn: #e08840; /* phlegethon */ - --warn-subtle: #281808; - --warn-border: #4a2c10; - --warn-fg: #fff8e8; - - --danger: #7a1a1a; /* plague */ - --danger-subtle: #200808; - --danger-border: #3a1010; - --danger-fg: #fff8e8; - - --info: #88aec8; /* cocytus */ - --info-subtle: #101e2c; - --info-border: #1e3850; - --info-fg: #0a1828; - - --neutral: #7a6e60; /* acheron */ - --neutral-fg: #fff8e8; - - --success: #6aaa7a; /* laurel */ - --success-subtle: #0e2214; - --success-border: #1e4228; - --success-fg: #fff8e8; - - /* text */ - --text-high: #f4f0e8; - --text-body: #d0c8b8; - --text-muted: #908878; - --text-dim: #807868; - --text-label: #c0b8a8; - - /* focus ring */ - --focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.65); - - /* fonts */ - --font-serif: 'Cinzel', Georgia, serif; - --font-sans: 'IBM Plex Sans', system-ui, sans-serif; - --font-mono: 'IBM Plex Mono', monospace; -} - -/* ── APOLLO ──────────────────────────────────────────────── */ -[data-theme='apollo'] { - /* surfaces */ - --surface-0: #faf7f2; - --surface-1: #f4f0e8; - --surface-2: #eee9df; - --surface-3: #e4ddd0; - --track: #e4ddd0; - - /* borders */ - --border: #bab2a0; - --border-hi: #c0b8a8; - --border-lo: #ccc4b4; - - /* primary */ - --primary: #b8860b; - --primary-fg: #fff8e8; - - /* semantic */ - --warn: #9a6020; /* harmony */ - --warn-subtle: #fdf3e0; - --warn-border: #e8d0a0; - --warn-fg: #fff8e8; - - --danger: #7a1a1a; /* plague */ - --danger-subtle: #faeaea; - --danger-border: #c8a0a0; - --danger-fg: #fff8e8; - - --info: #3a5a8a; /* oracle */ - --info-subtle: #e8eef8; - --info-border: #b0c4e0; - --info-fg: #fff8e8; - - --neutral: #8a8070; /* marble */ - --neutral-fg: #fff8e8; - - --success: #5a7a40; /* laurel */ - --success-subtle: #eef4e8; - --success-border: #c0d4a8; - --success-fg: #fff8e8; - - /* text */ - --text-high: #1a1610; - --text-body: #3a3020; - --text-muted: #5a5040; - --text-dim: #8a8070; - --text-label: #5a5040; - - /* focus ring */ - --focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.65); - - /* fonts */ - --font-serif: 'Cinzel', Georgia, serif; - --font-sans: 'IBM Plex Sans', system-ui, sans-serif; - --font-mono: 'IBM Plex Mono', monospace; -} - -/* ── BASE RESET ──────────────────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -[class^='nych-'], -[class^='nych-']::before, -[class^='nych-']::after { - margin: 0; - padding: 0; -} - -html { - font-family: var(--font-sans); - font-size: 14px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -[class^='nych-']:focus-visible { - outline: 2px solid transparent; /* visible in forced-colors / Windows High Contrast */ - box-shadow: var(--focus-ring); -} - -body { - background-color: var(--surface-0); - color: var(--text-body); - min-height: 100vh; -} - -@keyframes nych-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -.nych-loading-icon .wreath { - transform-origin: 340px 180px; - animation: nych-spin 2s linear infinite; -} diff --git a/packages/library/src/assets/css/tailwind.css b/packages/library/src/assets/css/tailwind.css index f112166..6a20bf0 100644 --- a/packages/library/src/assets/css/tailwind.css +++ b/packages/library/src/assets/css/tailwind.css @@ -77,7 +77,7 @@ --border-lo: #38342a; --primary: #d4b278; - --primary-fg: #0e0c08; + --primary-fg: #fff8e8; --warn: #e08840; --warn-subtle: #281808; @@ -173,7 +173,7 @@ } html { font-family: var(--font-sans); - font-size: 14px; + font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/packages/library/src/assets/theme/theme.css b/packages/library/src/assets/theme/theme.css deleted file mode 100644 index 10adb38..0000000 --- a/packages/library/src/assets/theme/theme.css +++ /dev/null @@ -1,727 +0,0 @@ -@import url('../css/nychthemeron.css'); - -/* Restore serif font for nych- components even if consumer overrides html font-family */ -[class^='nych-'] { - font-family: var(--font-serif); -} - -[class^='nych-']:disabled { - cursor: not-allowed; - opacity: 0.5; -} - -[class^='nych-button'] { - padding: 7px; - border-radius: 5px; - box-shadow: 0px 0px 10px var(--text-high); - border: none; - cursor: pointer; - transition: box-shadow 0.3s ease; -} - -[class^='nych-button']:hover:not(:disabled) { - box-shadow: 0px 0px 8px var(--text-high); -} - -[class^='nych-button'][data-p~='loading'] { - display: flex; -} - -[class^='nych-button'][data-p~='loading'] span { - margin-top: 4px; -} - -[class^='nych-'][class$='-primary'] { - background-color: var(--primary); - color: var(--primary-fg); -} - -[class^='nych-'][class$='-secondary'], -[class^='nych-'][class$='-muted'] { - background-color: var(--neutral); - color: var(--neutral-fg); -} - -[class^='nych-'][class$='-info'] { - background-color: var(--info); - color: var(--info-fg); -} - -[class^='nych-'][class$='-success'] { - background-color: var(--success); - color: var(--success-fg); -} - -[class^='nych-'][class$='-warning'] { - background-color: var(--warn); - color: var(--warn-fg); -} - -[class^='nych-'][class$='-danger'], -[class^='nych-'][class$='-error'] { - background-color: var(--danger); - color: var(--danger-fg); -} - -.nych-loading-icon .wreath path { - fill: var(--primary-fg); -} - -.nych-loading-icon .wreath line { - stroke: var(--text-high); -} - -button[data-p~='loading'] > .nych-loading-icon { - margin-right: 5px; - margin-top: 0px; - height: 25px; - font-size: 12pt; -} - -[class^='nych-'][data-p~='small'] :not(svg, svg *) { - height: 15px !important; - font-size: 8pt !important; -} - -[class^='nych-'][data-p~='normal'] :not(svg, svg *) { - height: 25px !important; - font-size: 12pt !important; -} - -[class^='nych-'][data-p~='large'] :not(svg, svg *) { - height: 40px !important; - font-size: 20pt !important; -} - -/* ============================================================ - Text inputs — InputText, Textarea - ============================================================ */ -.nych-input, -.nych-textarea { - font-family: var(--font-sans); - width: 100%; - padding: 8px 11px; - color: var(--text-body); - background-color: var(--surface-1); - border: 1px solid var(--border); - border-radius: 5px; - transition: - border-color 0.2s ease, - box-shadow 0.2s ease; -} - -.nych-input::placeholder, -.nych-textarea::placeholder { - color: var(--text-dim); -} - -.nych-input:hover:not(:disabled), -.nych-textarea:hover:not(:disabled) { - border-color: var(--border-hi); -} - -.nych-input:focus, -.nych-textarea:focus { - outline: none; - border-color: var(--primary); - box-shadow: var(--focus-ring); -} - -.nych-input[data-p~='invalid'], -.nych-textarea[data-p~='invalid'] { - border-color: var(--danger); -} - -.nych-input[data-p~='small'] { - padding: 5px 8px; - font-size: 0.875rem; -} - -.nych-input[data-p~='large'] { - padding: 11px 13px; - font-size: 1.125rem; -} - -.nych-textarea { - resize: vertical; - min-height: 84px; - line-height: 1.5; -} - -/* ============================================================ - Checkbox - ============================================================ */ -.nych-checkbox, -.nych-radio { - position: relative; - display: inline-flex; - width: 20px; - height: 20px; - vertical-align: middle; -} - -.nych-checkbox-input, -.nych-radio-input { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - margin: 0; - opacity: 0; - cursor: pointer; - z-index: 1; -} - -.nych-checkbox-box, -.nych-radio-box { - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - background-color: var(--surface-1); - border: 1px solid var(--border); - transition: - background-color 0.2s ease, - border-color 0.2s ease; -} - -.nych-checkbox-box { - border-radius: 4px; -} - -.nych-radio-box { - border-radius: 50%; -} - -.nych-checkbox:hover .nych-checkbox-box, -.nych-radio:hover .nych-radio-box { - border-color: var(--border-hi); -} - -.nych-checkbox[data-p-checked='true'] .nych-checkbox-box { - background-color: var(--primary); - border-color: var(--primary); -} - -.nych-checkbox-icon { - width: 13px; - height: 13px; - color: var(--primary-fg); - fill: var(--primary-fg); - stroke: var(--primary-fg); -} - -.nych-checkbox[data-p-disabled='true'] .nych-checkbox-box, -.nych-radio[data-p-disabled='true'] .nych-radio-box { - opacity: 0.5; -} - -/* Group containers (CheckboxGroup / RadioButtonGroup) — layout only. */ -.nych-checkbox-group, -.nych-radio-group { - display: flex; - flex-direction: column; - gap: 0.6rem; -} - -.nych-checkbox-input:focus-visible + .nych-checkbox-box, -.nych-radio-input:focus-visible + .nych-radio-box { - box-shadow: var(--focus-ring); -} - -/* Keep the visually-hidden native control hidden even when disabled — the - global [class^='nych-']:disabled opacity would otherwise reveal it. */ -.nych-checkbox .nych-checkbox-input, -.nych-radio .nych-radio-input, -.nych-toggleswitch .nych-toggleswitch-input { - opacity: 0; -} - -/* ============================================================ - Radio button - ============================================================ */ -.nych-radio-icon { - width: 9px; - height: 9px; - border-radius: 50%; - background-color: transparent; - transition: background-color 0.2s ease; -} - -.nych-radio[data-p-checked='true'] .nych-radio-box { - border-color: var(--primary); -} - -.nych-radio[data-p-checked='true'] .nych-radio-icon { - background-color: var(--primary); -} - -/* ============================================================ - Toggle switch - ============================================================ */ -.nych-toggleswitch { - position: relative; - display: inline-block; - width: 44px; - height: 24px; - vertical-align: middle; -} - -.nych-toggleswitch-input { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - margin: 0; - opacity: 0; - cursor: pointer; - z-index: 1; -} - -.nych-toggleswitch-slider { - position: absolute; - inset: 0; - background-color: var(--track); - border: 1px solid var(--border); - border-radius: 999px; - transition: - background-color 0.2s ease, - border-color 0.2s ease; -} - -.nych-toggleswitch-handle { - position: absolute; - top: 50%; - left: 3px; - width: 16px; - height: 16px; - transform: translateY(-50%); - background-color: var(--text-muted); - border-radius: 50%; - transition: - left 0.2s ease, - background-color 0.2s ease; -} - -.nych-toggleswitch[data-p-checked='true'] .nych-toggleswitch-slider { - background-color: var(--primary); - border-color: var(--primary); -} - -.nych-toggleswitch[data-p-checked='true'] .nych-toggleswitch-handle { - left: 25px; - background-color: var(--primary-fg); -} - -.nych-toggleswitch-input:focus-visible + .nych-toggleswitch-slider { - box-shadow: var(--focus-ring); -} - -.nych-toggleswitch[data-p-disabled='true'] .nych-toggleswitch-slider, -.nych-toggleswitch[data-p-disabled='true'] .nych-toggleswitch-handle { - opacity: 0.5; -} - -/* ============================================================ - Select - ============================================================ */ -.nych-select { - display: inline-flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-width: 13rem; - font-family: var(--font-sans); - padding: 8px 11px; - color: var(--text-body); - background-color: var(--surface-1); - border: 1px solid var(--border); - border-radius: 5px; - cursor: pointer; - transition: - border-color 0.2s ease, - box-shadow 0.2s ease; -} - -.nych-select:hover { - border-color: var(--border-hi); -} - -.nych-select[data-p~='focus'] { - border-color: var(--primary); - box-shadow: var(--focus-ring); -} - -.nych-select[data-p~='disabled'] { - cursor: not-allowed; - opacity: 0.5; -} - -.nych-select-label { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.nych-select-label[data-p~='placeholder'] { - color: var(--text-dim); -} - -.nych-select-dropdown { - display: flex; - align-items: center; - color: var(--text-muted); -} - -.nych-select-dropdownIcon { - width: 14px; - height: 14px; -} - -.nych-select-overlay { - font-family: var(--font-sans); - margin-top: 4px; - background-color: var(--surface-2); - border: 1px solid var(--border); - border-radius: 6px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); - overflow: hidden; -} - -.nych-select-list { - list-style: none; - margin: 0; - padding: 4px; - max-height: 14rem; - overflow-y: auto; -} - -.nych-select-option { - padding: 8px 11px; - border-radius: 4px; - color: var(--text-body); - cursor: pointer; - transition: background-color 0.15s ease; -} - -.nych-select-option[data-p-focused='true'], -.nych-select-option:hover { - background-color: var(--surface-3); -} - -.nych-select-option[data-p-selected='true'] { - background-color: var(--primary); - color: var(--primary-fg); -} - -.nych-select-emptyMessage { - padding: 8px 11px; - color: var(--text-dim); -} - -/* ============================================================ - Card - ============================================================ */ -.nych-card { - display: flex; - flex-direction: column; - background-color: var(--surface-1); - border: 1px solid var(--border); - border-radius: 8px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); - overflow: hidden; - color: var(--text-body); -} - -.nych-card-header :where(img) { - display: block; - width: 100%; -} - -.nych-card-body { - display: flex; - flex-direction: column; - gap: 12px; - padding: 20px; -} - -.nych-card-caption { - display: flex; - flex-direction: column; - gap: 4px; -} - -.nych-card-title { - font-family: var(--font-serif); - font-size: 1.4rem; - letter-spacing: 0.02em; - color: var(--text-high); -} - -.nych-card-subtitle { - font-family: var(--font-sans); - font-size: 0.95rem; - color: var(--text-muted); -} - -.nych-card-content { - font-family: var(--font-sans); - line-height: 1.6; -} - -.nych-card-footer { - display: flex; - gap: 8px; - padding-top: 4px; -} - -/* ============================================================ - Message - ============================================================ */ -.nych-message { - color: var(--text-body); - background-color: var(--surface-1); - border: 1px solid var(--border); - border-left: 3px solid var(--border); - border-radius: 6px; -} - -.nych-message-content { - display: flex; - align-items: center; - gap: 10px; - padding: 11px 14px; -} - -.nych-message-icon { - display: flex; - flex-shrink: 0; - width: 18px; - height: 18px; -} - -.nych-message-text { - font-family: var(--font-sans); - line-height: 1.4; -} - -.nych-message-closeButton { - display: flex; - align-items: center; - justify-content: center; - margin-left: auto; - width: 22px; - height: 22px; - padding: 0; - color: inherit; - background: transparent; - border: none; - border-radius: 4px; - cursor: pointer; - opacity: 0.7; - transition: - opacity 0.2s ease, - background-color 0.2s ease; -} - -.nych-message-closeButton:hover { - opacity: 1; - background-color: rgba(128, 128, 128, 0.18); -} - -.nych-message-closeIcon { - width: 12px; - height: 12px; -} - -/* Severity tints are mixed from the semantic colour into the surface so they - read consistently in both the dark (Hades) and light (Apollo) themes, - rather than relying on the very-dark *-subtle tokens that muddied Hades. */ -.nych-message[data-p~='info'] { - background-color: color-mix(in srgb, var(--info) 15%, var(--surface-1)); - border-color: color-mix(in srgb, var(--info) 30%, var(--border)); - border-left-color: var(--info); -} -.nych-message[data-p~='info'] .nych-message-icon { - color: var(--info); -} - -.nych-message[data-p~='success'] { - background-color: color-mix(in srgb, var(--success) 15%, var(--surface-1)); - border-color: color-mix(in srgb, var(--success) 30%, var(--border)); - border-left-color: var(--success); -} -.nych-message[data-p~='success'] .nych-message-icon { - color: var(--success); -} - -.nych-message[data-p~='warn'] { - background-color: color-mix(in srgb, var(--warn) 16%, var(--surface-1)); - border-color: color-mix(in srgb, var(--warn) 32%, var(--border)); - border-left-color: var(--warn); -} -.nych-message[data-p~='warn'] .nych-message-icon { - color: var(--warn); -} - -.nych-message[data-p~='error'] { - background-color: color-mix(in srgb, var(--danger) 20%, var(--surface-1)); - border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); - border-left-color: var(--danger); -} -.nych-message[data-p~='error'] .nych-message-icon { - color: var(--danger); -} - -.nych-message[data-p~='secondary'] { - background-color: var(--surface-2); - border-left-color: var(--neutral); -} - -/* ============================================================ - Tag - ============================================================ */ -.nych-tag { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 8px; - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.03em; - line-height: 1; - border-radius: 4px; - background-color: var(--primary); - color: var(--primary-fg); -} - -.nych-tag[data-p~='rounded'] { - border-radius: 999px; -} - -.nych-tag-icon { - width: 12px; - height: 12px; -} - -.nych-tag[data-p~='secondary'] { - background-color: var(--neutral); - color: var(--neutral-fg); -} - -.nych-tag[data-p~='info'] { - background-color: var(--info); - color: var(--info-fg); -} - -.nych-tag[data-p~='success'] { - background-color: var(--success); - color: var(--success-fg); -} - -.nych-tag[data-p~='warn'] { - background-color: var(--warn); - color: var(--warn-fg); -} - -.nych-tag[data-p~='danger'] { - background-color: var(--danger); - color: var(--danger-fg); -} - -.nych-tag[data-p~='contrast'] { - background-color: var(--text-high); - color: var(--surface-0); -} - -/* ============================================================ - Dialog - ============================================================ */ -.nych-dialog-mask { - position: fixed; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - background-color: rgba(0, 0, 0, 0.55); -} - -.nych-dialog { - display: flex; - flex-direction: column; - max-width: 92vw; - max-height: 90vh; - color: var(--text-body); - background-color: var(--surface-1); - border: 1px solid var(--border); - border-radius: 10px; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); - overflow: hidden; -} - -.nych-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 16px 20px; - border-bottom: 1px solid var(--border-lo); -} - -.nych-dialog-title { - font-family: var(--font-serif); - font-size: 1.3rem; - letter-spacing: 0.02em; - color: var(--text-high); -} - -.nych-dialog-headerActions { - display: flex; - align-items: center; - gap: 4px; -} - -.nych-dialog-headerActions button { - display: flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - padding: 0; - color: var(--text-muted); - background: transparent; - border: none; - border-radius: 6px; - cursor: pointer; - transition: - background-color 0.2s ease, - color 0.2s ease; -} - -.nych-dialog-headerActions button:hover { - color: var(--text-high); - background-color: var(--surface-3); -} - -.nych-dialog-headerActions button svg { - width: 14px; - height: 14px; -} - -.nych-dialog-content { - font-family: var(--font-sans); - padding: 20px; - line-height: 1.6; - overflow-y: auto; -} - -.nych-dialog-footer { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 16px 20px; - border-top: 1px solid var(--border-lo); -} diff --git a/packages/library/src/components/ui/badge/index.ts b/packages/library/src/components/ui/badge/index.ts index 87e70aa..3bae142 100644 --- a/packages/library/src/components/ui/badge/index.ts +++ b/packages/library/src/components/ui/badge/index.ts @@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority' export { default as Badge } from './Badge.vue' export const badgeVariants = cva( - 'inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 text-xs font-semibold [&>svg]:size-3', + 'inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 text-xs font-serif font-semibold [&>svg]:size-3', { variants: { variant: { diff --git a/packages/library/src/components/ui/button/index.ts b/packages/library/src/components/ui/button/index.ts index 974f88d..706b0ca 100644 --- a/packages/library/src/components/ui/button/index.ts +++ b/packages/library/src/components/ui/button/index.ts @@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority' export { default as Button } from './Button.vue' export const buttonVariants = cva( - 'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg border border-transparent font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4', + 'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg border border-transparent font-serif font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4', { variants: { variant: { diff --git a/packages/playground/.storybook/preview.ts b/packages/playground/.storybook/preview.ts index bc33c3a..b2add85 100644 --- a/packages/playground/.storybook/preview.ts +++ b/packages/playground/.storybook/preview.ts @@ -1,6 +1,6 @@ import type { Preview } from '@storybook/vue3-vite' import { useGlobals } from 'storybook/preview-api' -import '@nychthemeron/library/theme' +import '@nychthemeron/library/style' const preview: Preview = { parameters: { diff --git a/packages/playground/stories/Checkbox.stories.ts b/packages/playground/stories/Checkbox.stories.ts index ac54c47..9db9bea 100644 --- a/packages/playground/stories/Checkbox.stories.ts +++ b/packages/playground/stories/Checkbox.stories.ts @@ -59,7 +59,7 @@ export const WithLabels: Story = { return { honey, wine, laurel } }, template: ` -
+
@@ -85,7 +85,7 @@ export const Group: Story = { return { honey, wine, laurel } }, template: ` -
+