@jonmilner/ui 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Badge/Badge.css +1 -1
- package/dist/Box/Box.css +1 -1
- package/dist/Button/Button.css +1 -1
- package/dist/Checkbox/Checkbox.css +1 -1
- package/dist/Chip/Chip.css +1 -1
- package/dist/Clickable/Clickable.css +1 -1
- package/dist/Dialog/Dialog.css +1 -1
- package/dist/Field/Field.css +1 -1
- package/dist/Heading/Heading.css +1 -1
- package/dist/Icon/Icon.css +1 -1
- package/dist/IconButton/IconButton.css +1 -1
- package/dist/Inline/Inline.css +1 -1
- package/dist/Menu/Menu.css +2 -2
- package/dist/Menu/client.d.mts +1 -0
- package/dist/Menu/client.mjs +91 -26
- package/dist/Menu/index.d.mts +1 -1
- package/dist/Menu/index.mjs +22 -25
- package/dist/MultiSelect/MultiSelect.css +1 -1
- package/dist/SearchField/SearchField.css +2 -2
- package/dist/Stack/Stack.css +1 -1
- package/dist/Tabs/Tabs.css +1 -1
- package/dist/Tag/Tag.css +1 -1
- package/dist/Text/Text.css +1 -1
- package/dist/TextField/TextField.css +2 -0
- package/dist/TextField/TextField.css.mjs +18 -0
- package/dist/TextField/index.d.mts +26 -0
- package/dist/TextField/index.mjs +40 -0
- package/dist/Toast/Toast.css +1 -1
- package/dist/VisuallyHidden/VisuallyHidden.css +1 -1
- package/dist/base.css +1 -1
- package/dist/docs/Field.md +1 -1
- package/dist/docs/Menu.md +2 -2
- package/dist/docs/SearchField.md +1 -1
- package/dist/docs/TextField.md +109 -0
- package/dist/docs/llms.txt +1 -0
- package/dist/docs/manifest.json +100 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.mjs +7 -6
- package/dist/popup/client.mjs +2 -1
- package/dist/styles/atoms.css +1 -1
- package/dist/styles/layers.css +1 -1
- package/dist/theme/use-theme-container.mjs +2 -1
- package/package.json +6 -1
package/dist/Badge/Badge.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}
|
package/dist/Box/Box.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.box{._11caph0{box-sizing:border-box}}
|
package/dist/Button/Button.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
|
package/dist/Chip/Chip.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}
|
package/dist/Dialog/Dialog.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}
|
package/dist/Field/Field.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}
|
package/dist/Heading/Heading.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.heading{.yaxwxv0{text-wrap:balance}}
|
package/dist/Icon/Icon.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}
|
package/dist/Inline/Inline.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.inline;
|
package/dist/Menu/Menu.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
2
|
-
@layer components.menu{
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
+
@layer components.menu{._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}
|
package/dist/Menu/client.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
|
|
2
|
+
import "./index.mjs";
|
|
2
3
|
import { Menu } from "@base-ui/react/menu";
|
|
3
4
|
//#region src/Menu/client.d.ts
|
|
4
5
|
type TriggerOwnProps = Omit<Menu.Trigger.Props, "render" | "className" | "style" | "nativeButton">;
|
package/dist/Menu/client.mjs
CHANGED
|
@@ -2,46 +2,111 @@
|
|
|
2
2
|
import { join as e } from "../styles/join.mjs";
|
|
3
3
|
import { splitStyleProps as t } from "../styles/split-style-props.mjs";
|
|
4
4
|
import { Box as n } from "../Box/index.mjs";
|
|
5
|
-
import {
|
|
6
|
-
import { positioner as
|
|
7
|
-
import { jsx as
|
|
8
|
-
import {
|
|
5
|
+
import { PopupScope as r, triggerElement as i, usePopupScope as a } from "../popup/client.mjs";
|
|
6
|
+
import { positioner as o } from "./Menu.css.mjs";
|
|
7
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
8
|
+
import { createContext as c, use as l, useCallback as u, useLayoutEffect as d, useRef as f } from "react";
|
|
9
|
+
import { Menu as p } from "@base-ui/react/menu";
|
|
9
10
|
//#region src/Menu/client.tsx
|
|
10
|
-
function
|
|
11
|
-
let { ref:
|
|
12
|
-
return /* @__PURE__ */
|
|
11
|
+
function m({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: r, handle: o, payload: c, ...l }) {
|
|
12
|
+
let { ref: u } = a();
|
|
13
|
+
return /* @__PURE__ */ s(p.Trigger, {
|
|
13
14
|
disabled: e,
|
|
14
15
|
openOnHover: t,
|
|
15
16
|
delay: n,
|
|
16
|
-
closeDelay:
|
|
17
|
-
handle:
|
|
18
|
-
payload:
|
|
19
|
-
ref:
|
|
20
|
-
render:
|
|
17
|
+
closeDelay: r,
|
|
18
|
+
handle: o,
|
|
19
|
+
payload: c,
|
|
20
|
+
ref: u,
|
|
21
|
+
render: i(l)
|
|
21
22
|
});
|
|
22
23
|
}
|
|
23
|
-
function
|
|
24
|
-
let { container: t } =
|
|
25
|
-
return /* @__PURE__ */
|
|
24
|
+
function h({ children: e }) {
|
|
25
|
+
let { container: t } = a();
|
|
26
|
+
return /* @__PURE__ */ s(p.Portal, {
|
|
26
27
|
container: t,
|
|
27
28
|
children: e
|
|
28
29
|
});
|
|
29
30
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
var g = c({ current: {
|
|
32
|
+
keyboard: !1,
|
|
33
|
+
opener: null
|
|
34
|
+
} });
|
|
35
|
+
function _({ onOpenChange: e, ...t }) {
|
|
36
|
+
let n = f({
|
|
37
|
+
keyboard: !1,
|
|
38
|
+
opener: null
|
|
39
|
+
});
|
|
40
|
+
return /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(g, {
|
|
41
|
+
value: n,
|
|
42
|
+
children: /* @__PURE__ */ s(p.Root, {
|
|
43
|
+
...t,
|
|
44
|
+
onOpenChange: (t, r) => {
|
|
45
|
+
n.current = t ? {
|
|
46
|
+
keyboard: !1,
|
|
47
|
+
opener: r.trigger ?? null
|
|
48
|
+
} : {
|
|
49
|
+
...n.current,
|
|
50
|
+
keyboard: r.event instanceof KeyboardEvent,
|
|
51
|
+
reason: r.reason
|
|
52
|
+
}, e?.(t, r);
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
}) });
|
|
56
|
+
}
|
|
57
|
+
function v({ finalFocus: e, ...n }) {
|
|
58
|
+
return /* @__PURE__ */ s(p.Positioner, {
|
|
59
|
+
...n,
|
|
33
60
|
collisionPadding: 8,
|
|
34
|
-
render: (
|
|
35
|
-
let [,
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
...
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
zIndex: "popover"
|
|
61
|
+
render: (n, { open: r }) => {
|
|
62
|
+
let [, i] = t(n);
|
|
63
|
+
return /* @__PURE__ */ s(b, {
|
|
64
|
+
...i,
|
|
65
|
+
finalFocus: e,
|
|
66
|
+
open: r
|
|
41
67
|
});
|
|
42
68
|
},
|
|
43
69
|
sideOffset: 4
|
|
44
70
|
});
|
|
45
71
|
}
|
|
72
|
+
var y = /* @__PURE__ */ new Set([
|
|
73
|
+
"trigger-hover",
|
|
74
|
+
"focus-out",
|
|
75
|
+
"outside-press"
|
|
76
|
+
]);
|
|
77
|
+
function b({ open: t, finalFocus: r, ref: i, className: c, ...p }) {
|
|
78
|
+
let { trigger: m } = a(), h = l(g), _ = f(null), v = u((e) => {
|
|
79
|
+
_.current = e;
|
|
80
|
+
let t = typeof i == "function" ? i(e) : void 0;
|
|
81
|
+
return i && typeof i != "function" && (i.current = e), () => {
|
|
82
|
+
_.current = null, typeof t == "function" ? t() : typeof i == "function" ? i(null) : i && (i.current = null);
|
|
83
|
+
};
|
|
84
|
+
}, [i]);
|
|
85
|
+
return d(() => {
|
|
86
|
+
let e = _.current;
|
|
87
|
+
if (!e) return;
|
|
88
|
+
if (t) {
|
|
89
|
+
e.inert = !1;
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
let { reason: n, keyboard: i, opener: a } = h.current, o = a?.isConnected ? a : m.current;
|
|
93
|
+
if (e.contains(e.ownerDocument.activeElement) && !r && !y.has(n ?? "") && o instanceof HTMLElement) {
|
|
94
|
+
let e = { preventScroll: !0 };
|
|
95
|
+
i && (e.focusVisible = !0), o.focus(e);
|
|
96
|
+
}
|
|
97
|
+
e.inert = !0;
|
|
98
|
+
}, [
|
|
99
|
+
t,
|
|
100
|
+
r,
|
|
101
|
+
h,
|
|
102
|
+
m
|
|
103
|
+
]), /* @__PURE__ */ s(n, {
|
|
104
|
+
...p,
|
|
105
|
+
"aria-hidden": !t || void 0,
|
|
106
|
+
className: e(o, c),
|
|
107
|
+
ref: v,
|
|
108
|
+
zIndex: "popover"
|
|
109
|
+
});
|
|
110
|
+
}
|
|
46
111
|
//#endregion
|
|
47
|
-
export {
|
|
112
|
+
export { h as MenuPortal, v as MenuPositioner, _ as MenuRootScope, m as MenuTrigger };
|
package/dist/Menu/index.d.mts
CHANGED
|
@@ -22,7 +22,7 @@ export type MenuSeparatorProps = PartProps<Menu$1.Separator.Props>;
|
|
|
22
22
|
export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
|
|
23
23
|
label: ReactNode;
|
|
24
24
|
};
|
|
25
|
-
declare function MenuRoot(
|
|
25
|
+
declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
|
|
26
26
|
declare function MenuPopup({ side, align, backgroundColor, borderRadius, boxShadow, padding, className, style, ...props }: MenuPopupProps): import("react").JSX.Element;
|
|
27
27
|
declare function MenuItem({ variant, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuItemProps): import("react").JSX.Element;
|
|
28
28
|
declare function MenuLinkItem({ href, disabled, closeOnClick, onClick, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuLinkItemProps): import("react").JSX.Element;
|
package/dist/Menu/index.mjs
CHANGED
|
@@ -2,33 +2,30 @@ import { join as e } from "../styles/join.mjs";
|
|
|
2
2
|
import { splitStyleProps as t } from "../styles/split-style-props.mjs";
|
|
3
3
|
import { Box as n } from "../Box/index.mjs";
|
|
4
4
|
import { Text as r } from "../Text/index.mjs";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { MenuPortal as l, MenuPositioner as u, MenuTrigger as d } from "./client.mjs";
|
|
5
|
+
import { item as i, linkItem as a, popup as o, separator as s } from "./Menu.css.mjs";
|
|
6
|
+
import { MenuPortal as c, MenuPositioner as l, MenuRootScope as u, MenuTrigger as d } from "./client.mjs";
|
|
8
7
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
9
8
|
import { Children as m } from "react";
|
|
10
9
|
import { Menu as h } from "@base-ui/react/menu";
|
|
11
10
|
//#region src/Menu/index.tsx
|
|
12
|
-
function g(
|
|
13
|
-
return /* @__PURE__ */ f(
|
|
14
|
-
...t,
|
|
15
|
-
children: e
|
|
16
|
-
}) });
|
|
11
|
+
function g(e) {
|
|
12
|
+
return /* @__PURE__ */ f(u, { ...e });
|
|
17
13
|
}
|
|
18
|
-
function _({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius:
|
|
14
|
+
function _({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: u = "med", padding: d = "4", className: p, style: m, ...g }) {
|
|
19
15
|
let [_, v] = t(g);
|
|
20
|
-
return /* @__PURE__ */ f(
|
|
16
|
+
return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ f(l, {
|
|
21
17
|
align: i,
|
|
18
|
+
finalFocus: v.finalFocus !== void 0 && v.finalFocus !== !0,
|
|
22
19
|
side: r,
|
|
23
20
|
children: /* @__PURE__ */ f(h.Popup, {
|
|
24
21
|
...v,
|
|
25
22
|
render: /* @__PURE__ */ f(n, {
|
|
26
23
|
backgroundColor: a,
|
|
27
|
-
borderRadius:
|
|
28
|
-
boxShadow:
|
|
24
|
+
borderRadius: s,
|
|
25
|
+
boxShadow: u,
|
|
29
26
|
padding: d,
|
|
30
27
|
..._,
|
|
31
|
-
className: e(
|
|
28
|
+
className: e(o, p),
|
|
32
29
|
style: m
|
|
33
30
|
})
|
|
34
31
|
})
|
|
@@ -42,12 +39,12 @@ function v(e) {
|
|
|
42
39
|
children: e
|
|
43
40
|
}) : e);
|
|
44
41
|
}
|
|
45
|
-
function y({ variant: r = "neutral", display:
|
|
42
|
+
function y({ variant: r = "neutral", display: a = "flex", alignItems: o = "center", gap: s = "8", minBlockSize: c = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: p, style: m, children: g, ..._ }) {
|
|
46
43
|
let [y, b] = t(_);
|
|
47
44
|
return /* @__PURE__ */ f(h.Item, {
|
|
48
45
|
...b,
|
|
49
46
|
render: /* @__PURE__ */ f(n, {
|
|
50
|
-
display:
|
|
47
|
+
display: a,
|
|
51
48
|
alignItems: o,
|
|
52
49
|
gap: s,
|
|
53
50
|
minBlockSize: c,
|
|
@@ -55,20 +52,20 @@ function y({ variant: r = "neutral", display: i = "flex", alignItems: o = "cente
|
|
|
55
52
|
borderRadius: u,
|
|
56
53
|
color: d,
|
|
57
54
|
...y,
|
|
58
|
-
className: e(
|
|
55
|
+
className: e(i, p),
|
|
59
56
|
style: m
|
|
60
57
|
}),
|
|
61
58
|
children: v(g)
|
|
62
59
|
});
|
|
63
60
|
}
|
|
64
|
-
function b({ href: r, disabled:
|
|
61
|
+
function b({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, display: l = "flex", alignItems: u = "center", gap: d = "8", minBlockSize: p = "sm", paddingInline: m = "12", borderRadius: g = "sm", color: _ = "fg", className: y, style: b, children: x, ...S }) {
|
|
65
62
|
let [C, w] = t(S);
|
|
66
63
|
return /* @__PURE__ */ f(h.LinkItem, {
|
|
67
64
|
...w,
|
|
68
|
-
"aria-disabled":
|
|
69
|
-
closeOnClick: !
|
|
70
|
-
href:
|
|
71
|
-
onClick:
|
|
65
|
+
"aria-disabled": o || void 0,
|
|
66
|
+
closeOnClick: !o && s,
|
|
67
|
+
href: o ? void 0 : r,
|
|
68
|
+
onClick: o ? void 0 : c,
|
|
72
69
|
render: /* @__PURE__ */ f(n, {
|
|
73
70
|
as: "a",
|
|
74
71
|
display: l,
|
|
@@ -79,21 +76,21 @@ function b({ href: r, disabled: i = !1, closeOnClick: s = !0, onClick: c, displa
|
|
|
79
76
|
borderRadius: g,
|
|
80
77
|
color: _,
|
|
81
78
|
...C,
|
|
82
|
-
className: e(
|
|
79
|
+
className: e(i, a, y),
|
|
83
80
|
style: b
|
|
84
81
|
}),
|
|
85
82
|
children: v(x)
|
|
86
83
|
});
|
|
87
84
|
}
|
|
88
|
-
function x({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...
|
|
89
|
-
let [l, u] = t(
|
|
85
|
+
function x({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...c }) {
|
|
86
|
+
let [l, u] = t(c);
|
|
90
87
|
return /* @__PURE__ */ f(h.Separator, {
|
|
91
88
|
...u,
|
|
92
89
|
render: /* @__PURE__ */ f(n, {
|
|
93
90
|
marginBlock: r,
|
|
94
91
|
marginInline: i,
|
|
95
92
|
...l,
|
|
96
|
-
className: e(
|
|
93
|
+
className: e(s, a),
|
|
97
94
|
style: o
|
|
98
95
|
})
|
|
99
96
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
2
|
-
@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
+
@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}
|
package/dist/Stack/Stack.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.stack;
|
package/dist/Tabs/Tabs.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}
|
package/dist/Tag/Tag.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}
|
package/dist/Text/Text.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
+
@layer components.text-field{._20at410{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._20at411{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);padding-block:0}._20at411::placeholder{color:var(--color-fg-muted);opacity:1}._20at411:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._20at411:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._20at411[aria-invalid=true]{border-color:var(--color-danger)}._20at412{block-size:var(--size-sm);padding-inline:var(--space-8)}._20at413{block-size:var(--size-med);padding-inline:var(--space-12)}._20at414{block-size:var(--size-lg);padding-inline:var(--space-16)}@media (forced-colors:active){._20at411:disabled{color:graytext;border-color:graytext}}}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import "../styles/layers.css";
|
|
2
|
+
import "./TextField.css";
|
|
3
|
+
/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
6
|
+
//#region src/TextField/TextField.css.ts
|
|
7
|
+
var t = "_20at410", n = e({
|
|
8
|
+
defaultClassName: "_20at411",
|
|
9
|
+
variantClassNames: { size: {
|
|
10
|
+
sm: "_20at412",
|
|
11
|
+
med: "_20at413",
|
|
12
|
+
lg: "_20at414"
|
|
13
|
+
} },
|
|
14
|
+
defaultVariants: {},
|
|
15
|
+
compoundVariants: []
|
|
16
|
+
});
|
|
17
|
+
//#endregion
|
|
18
|
+
export { t as hiddenLabel, n as input };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { StyleProps } from "../Box/index.mjs";
|
|
2
|
+
import { SearchFieldInputProps } from "../SearchField/client.mjs";
|
|
3
|
+
import "../SearchField/index.mjs";
|
|
4
|
+
import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
|
|
5
|
+
//#region src/TextField/index.d.ts
|
|
6
|
+
export type TextFieldInputProps = Pick<ComponentPropsWithRef<"input">, keyof SearchFieldInputProps | "inputMode" | "minLength" | "pattern">;
|
|
7
|
+
export type TextFieldProps = StyleProps & {
|
|
8
|
+
className?: string;
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
description?: ReactNode;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
error?: ReactNode;
|
|
13
|
+
hideLabel?: boolean;
|
|
14
|
+
inputProps?: TextFieldInputProps;
|
|
15
|
+
label: ReactNode;
|
|
16
|
+
name?: string;
|
|
17
|
+
onValueChange?: (value: string) => void;
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
size?: "sm" | "med" | "lg";
|
|
21
|
+
style?: CSSProperties;
|
|
22
|
+
type?: "text" | "email" | "url" | "tel";
|
|
23
|
+
value?: string;
|
|
24
|
+
};
|
|
25
|
+
export declare function TextField({ label, hideLabel, type, value, defaultValue, onValueChange, placeholder, description, error, size, disabled, required, name, inputProps, className, style, ...atoms }: TextFieldProps): import("react").JSX.Element;
|
|
26
|
+
//#endregion
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Text as e } from "../Text/index.mjs";
|
|
2
|
+
import { Field as t } from "../Field/index.mjs";
|
|
3
|
+
import { hiddenLabel as n, input as r } from "./TextField.css.mjs";
|
|
4
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
|
+
import { Input as o } from "@base-ui/react/input";
|
|
6
|
+
//#region src/TextField/index.tsx
|
|
7
|
+
function s({ label: s, hideLabel: c = !1, type: l = "text", value: u, defaultValue: d, onValueChange: f, placeholder: p, description: m, error: h, size: g = "med", disabled: _ = !1, required: v = !1, name: y, inputProps: b, className: x, style: S, ...C }) {
|
|
8
|
+
return /* @__PURE__ */ a(t, {
|
|
9
|
+
...C,
|
|
10
|
+
className: x,
|
|
11
|
+
disabled: _,
|
|
12
|
+
invalid: h != null && h !== !1 && h !== "",
|
|
13
|
+
style: S,
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ i(t.Label, {
|
|
16
|
+
className: c ? n : void 0,
|
|
17
|
+
children: s
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ i(o, {
|
|
20
|
+
...b,
|
|
21
|
+
defaultValue: d,
|
|
22
|
+
name: y,
|
|
23
|
+
onValueChange: f && ((e) => f(e)),
|
|
24
|
+
placeholder: p,
|
|
25
|
+
render: /* @__PURE__ */ i(e, {
|
|
26
|
+
as: "input",
|
|
27
|
+
className: r({ size: g }),
|
|
28
|
+
size: g
|
|
29
|
+
}),
|
|
30
|
+
required: v,
|
|
31
|
+
type: l,
|
|
32
|
+
value: u
|
|
33
|
+
}),
|
|
34
|
+
m != null && /* @__PURE__ */ i(t.Description, { children: m }),
|
|
35
|
+
/* @__PURE__ */ i(t.Error, { children: h })
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { s as TextField };
|
package/dist/Toast/Toast.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.visually-hidden{._1qk18b30{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}}
|
package/dist/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
|
|
3
3
|
|
|
4
4
|
@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
|
package/dist/docs/Field.md
CHANGED
|
@@ -14,7 +14,7 @@ Wires one form control to its label, description and error: ids, `htmlFor`, `ari
|
|
|
14
14
|
- An error about the whole form (a failed save, a network error): put it in a reserved slot at the form level, not on one field.
|
|
15
15
|
- The result of submitting the form ("Profile saved"): use `Toast`; the field's message is for that one input.
|
|
16
16
|
- A group of controls with one legend (a radio group): v0.2 adds `Fieldset`.
|
|
17
|
-
- A
|
|
17
|
+
- A single line of text, a search or a choice from a list: use `TextField`, `SearchField` or `MultiSelect`, which build on this Field.
|
|
18
18
|
|
|
19
19
|
## Rules
|
|
20
20
|
|
package/dist/docs/Menu.md
CHANGED
|
@@ -113,8 +113,8 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
|
|
|
113
113
|
## Accessibility
|
|
114
114
|
|
|
115
115
|
- The trigger has `aria-haspopup="menu"` and `aria-expanded`; the popup is `role="menu"` labelled by the trigger, items and link items are `role="menuitem"` (a link item is an `<a>` with an `href`, so the browser treats it as a link), groups are `role="group"` named by their label.
|
|
116
|
-
- Opening from the keyboard focuses the first item; from the pointer, the popup. Focus stays in the menu until it closes,
|
|
117
|
-
- A closed menu stays on the page while it fades out, but is `aria-hidden` from the moment it closes, so a menu opened during the fade (the next row's) is the only one a screen reader or a role query finds
|
|
116
|
+
- Opening from the keyboard focuses the first item; from the pointer, the popup. Focus stays in the menu until it closes. Closed by Esc, an item or `open={false}`, focus returns at once to the trigger that opened it, so a Tab pressed while it fades goes on to the control after the trigger. A press outside, a Tab out, a hover menu the pointer left, or a popup with `finalFocus` leaves focus to Base UI, which places it when the fade ends.
|
|
117
|
+
- A closed menu stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, so a menu opened during the fade (the next row's) is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click.
|
|
118
118
|
- The highlighted item gets a fill (`bgMuted` in light mode; in dark mode `bgRaised` with 10% `fg` mixed in, since `bgMuted` sits too close to the popup there), and the shared focus ring when reached from the keyboard. Under forced colors it is `Highlight` with `HighlightText`, disabled items are `GrayText` on the page's fill even when highlighted (`GrayText` pairs with `Canvas` only), and the popup keeps its border.
|
|
119
119
|
- The danger item's `danger` color passes 4.5:1 on the popup and on the highlight fill in every preset (`Menu.test.tsx` checks it, with `fg` and `fgMuted`); the word ("Delete") carries the meaning, not the color.
|
|
120
120
|
|
package/dist/docs/SearchField.md
CHANGED
|
@@ -11,7 +11,7 @@ A form field for a search query: an `<input type="search">` (role `searchbox`) w
|
|
|
11
11
|
|
|
12
12
|
## When not to use
|
|
13
13
|
|
|
14
|
-
- Any other single-line text: use
|
|
14
|
+
- Any other single-line text: use `TextField`; a search field announces itself as a search.
|
|
15
15
|
- Picking from a known list as the user types: wait for Combobox (v0.2, ADR 0026).
|
|
16
16
|
- Picking several values from a list: use `MultiSelect` or `ChipGroup`.
|
|
17
17
|
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# TextField
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
- A name, an email address, a URL, a phone number, a title: any single line of free text in a form.
|
|
10
|
+
- A settings or edit form whose fields line up with a `SearchField` or `MultiSelect`: they share the heights and the border.
|
|
11
|
+
|
|
12
|
+
## When not to use
|
|
13
|
+
|
|
14
|
+
- A query that searches or filters: use `SearchField`; it is announced as a search and has a clear button.
|
|
15
|
+
- Several lines of text: wait for a text area (planned, ADR 0026).
|
|
16
|
+
- A number with steppers or a range: wait for a number field (planned, ADR 0026).
|
|
17
|
+
- Picking from a known list as the user types: wait for Combobox (planned, ADR 0026).
|
|
18
|
+
- Picking one or several values from a list: use `MultiSelect` or `ChipGroup`.
|
|
19
|
+
- A password: TextField has no `password` type, since a password field needs a show and hide toggle of its own.
|
|
20
|
+
|
|
21
|
+
## Rules
|
|
22
|
+
|
|
23
|
+
- `label` is required and names the input, even when the design shows none: pass `hideLabel` to keep it for assistive technology and hide it from sight. Never pass an empty label, and never let `placeholder` stand in for one.
|
|
24
|
+
- `value` with `onValueChange` controls it; `defaultValue` leaves it uncontrolled. `onValueChange` gets the new string on each keystroke.
|
|
25
|
+
- `type` is `"text"` (the default), `"email"`, `"url"` or `"tel"`. It sets only the native `type`: no `autoComplete`, `inputMode` or `spellCheck` of its own. Set those through `inputProps` (`autoComplete: "email"`).
|
|
26
|
+
- `description` and `error` render below the input through `Field`; a non-empty `error` marks the field invalid (`aria-invalid`, a danger border) and joins the input's `aria-describedby`.
|
|
27
|
+
- `disabled` uses the native `disabled`: the input leaves the tab order and does not submit, with a dashed border. `required` sets the native `required`.
|
|
28
|
+
- `name` submits the value with its form. A native form reset puts an uncontrolled field back to its `defaultValue` but fires no change, so `onValueChange` misses it; control the field if the form resets and you track the value.
|
|
29
|
+
- Style props, `className` and `style` go to the `Field` around the label, input and messages, not to the input.
|
|
30
|
+
- `inputProps` reach the input: `ref`, `id`, `autoFocus`, `autoComplete`, `spellCheck`, `enterKeyHint`, `inputMode`, `maxLength`, `minLength`, `pattern`, `onKeyDown`, and only the `aria-*` valid on a text box (ADR 0110): `aria-controls`, `aria-activedescendant`, `aria-autocomplete`, `aria-placeholder`, `aria-details`, `aria-keyshortcuts`, `aria-owns`, `aria-flowto`, `aria-current`, `aria-roledescription`, `aria-busy`, `aria-live`, `aria-atomic` and `aria-relevant`. `label` owns the name, Field owns `aria-invalid`, `aria-describedby` and `aria-errormessage`, and `disabled` and `required` own their state, so those, `aria-readonly`, `aria-hidden` and the single-line input's `aria-multiline` are not among them. The type closes the set, so an object literal with another `aria-*` is a type error; nothing strips one at runtime. Hint with `placeholder`, not `aria-placeholder`: the input has a native placeholder.
|
|
31
|
+
- The field handles no keys; a consumer `onKeyDown` is passed straight through.
|
|
32
|
+
- A consumer `ref` gets the input. A consumer `id` takes over from Field's generated one at hydration, and the label follows it.
|
|
33
|
+
- The module has no hooks, so a server component can render it; `onValueChange`, and an `inputProps` `ref` or `onKeyDown`, must come from a client component.
|
|
34
|
+
|
|
35
|
+
## Do
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<TextField label="Name" name="name" required inputProps={{ autoComplete: "name" }} />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<TextField
|
|
43
|
+
label="Email"
|
|
44
|
+
type="email"
|
|
45
|
+
description="We only use it to send receipts."
|
|
46
|
+
error={errors?.email}
|
|
47
|
+
name="email"
|
|
48
|
+
inputProps={{ autoComplete: "email" }}
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<TextField
|
|
54
|
+
label="Postcode"
|
|
55
|
+
value={postcode}
|
|
56
|
+
onValueChange={setPostcode}
|
|
57
|
+
inputProps={{ autoComplete: "postal-code", maxLength: 8, spellCheck: false }}
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Don't
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
// Another name for the input: `label` names it, visible or not.
|
|
65
|
+
<TextField label="Name" inputProps={{ "aria-label": "Full name" }} />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
// The placeholder is not a name: it disappears on the first keystroke.
|
|
70
|
+
<TextField label="" placeholder="Name" />
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
// A text field for a search: SearchField is announced as one and clears with Escape.
|
|
75
|
+
<TextField label="Search issues" />
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Accessibility
|
|
79
|
+
|
|
80
|
+
- The input is a `textbox` named by the label, visible or not.
|
|
81
|
+
- Invalid adds a danger border and the error message with its icon, never color alone; disabled adds a dashed border. Every size is at least 24 px tall. Under forced colors the border, text and disabled state use system colors.
|
|
82
|
+
- `type="email"`, `"url"` and `"tel"` bring the platform's keyboard on touch devices; the role stays `textbox`.
|
|
83
|
+
|
|
84
|
+
## Props
|
|
85
|
+
|
|
86
|
+
Generated from the TypeScript types.
|
|
87
|
+
|
|
88
|
+
### TextField
|
|
89
|
+
|
|
90
|
+
| Prop | Type | Required | Description |
|
|
91
|
+
| --- | --- | --- | --- |
|
|
92
|
+
| `className` | `string` | no | |
|
|
93
|
+
| `defaultValue` | `string` | no | |
|
|
94
|
+
| `description` | `ReactNode` | no | |
|
|
95
|
+
| `disabled` | `boolean` | no | |
|
|
96
|
+
| `error` | `ReactNode` | no | |
|
|
97
|
+
| `hideLabel` | `boolean` | no | |
|
|
98
|
+
| `inputProps` | `TextFieldInputProps` | no | |
|
|
99
|
+
| `label` | `ReactNode` | yes | |
|
|
100
|
+
| `name` | `string` | no | |
|
|
101
|
+
| `onValueChange` | `((value: string) => void)` | no | |
|
|
102
|
+
| `placeholder` | `string` | no | |
|
|
103
|
+
| `required` | `boolean` | no | |
|
|
104
|
+
| `size` | `"lg" \| "med" \| "sm"` | no | |
|
|
105
|
+
| `style` | `CSSProperties` | no | |
|
|
106
|
+
| `type` | `"email" \| "tel" \| "text" \| "url"` | no | |
|
|
107
|
+
| `value` | `string` | no | |
|
|
108
|
+
|
|
109
|
+
Also accepts the style props (see `manifest.json` `styleProps`).
|
package/dist/docs/llms.txt
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
- [Tabs](Tabs.md): Switches between views that share one place on the page. The parts are `Tabs` (the root, a flex column; a row when vertical), `Tabs.List` (the `tablist`), `Tabs.Tab` (a `tab` button on `Clickable`) and `Tabs.Panel` (the `tabpanel`). Built on Base UI `Tabs` (ADR 0003, 0046): it owns the selection, one tab stop with arrow-key roving, `aria-selected`, and the ids that tie each tab to its panel. The selected tab shows an accent bar that fades and grows in (ADR 0049).
|
|
25
25
|
- [Tag](Tag.md): A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and an `lg` radius (half a one-line tag's height, so one line reads as a pill and wrapped lines stay inside the fill) around a `Text` in the `label` font. It can be read-only, a link, or removable.
|
|
26
26
|
- [Text](Text.md): The base of all visible text, and the primitive every text component builds on. Capsize trims the box to the cap height and the baseline, so the gap around text is the visible space. It takes every Box style prop (`color`, `textAlign`, margins), plus `size`, `font`, `weight`, `leading`, `truncate` and `wrap`.
|
|
27
|
+
- [TextField](TextField.md): A form field for one line of text that is not a search: an `<input>` (role `textbox`) with SearchField's look and no icon or button over it. `type` picks `text`, `email`, `url` or `tel`. Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026, 0110). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
|
|
27
28
|
- [Toast](Toast.md): Tells the user briefly about the result of an action without interrupting them: "Changes saved", "Message sent", "Couldn't upload the file". Material calls it a snackbar and Atlassian a flag. Built on Base UI's Toast, which owns the queue, the timers and swipe-to-dismiss. The parts add the look: a raised card in a stack at the bottom end corner, an icon per variant, a close button, and a slide-up-and-fade that is a plain fade under reduced motion. A toast never takes focus and moves nothing on the page.
|
|
28
29
|
- [VisuallyHidden](VisuallyHidden.md): Text that screen readers read and nobody sees: a 1px clipped box, out of the layout, still in the accessibility tree. Use it for words a sighted user gets from the layout, an icon or a color, never to hide a control or a skip link. One element, chosen with `as`, a `span` by default.
|
|
29
30
|
|
package/dist/docs/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "./manifest.schema.json",
|
|
3
3
|
"package": "@jonmilner/ui",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.3",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "AlertDialog",
|
|
@@ -1879,6 +1879,105 @@
|
|
|
1879
1879
|
"parts": [],
|
|
1880
1880
|
"exports": []
|
|
1881
1881
|
},
|
|
1882
|
+
{
|
|
1883
|
+
"name": "TextField",
|
|
1884
|
+
"styleProps": true,
|
|
1885
|
+
"props": [
|
|
1886
|
+
{
|
|
1887
|
+
"name": "className",
|
|
1888
|
+
"type": "string",
|
|
1889
|
+
"required": false
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
"name": "defaultValue",
|
|
1893
|
+
"type": "string",
|
|
1894
|
+
"required": false
|
|
1895
|
+
},
|
|
1896
|
+
{
|
|
1897
|
+
"name": "description",
|
|
1898
|
+
"type": "ReactNode",
|
|
1899
|
+
"required": false
|
|
1900
|
+
},
|
|
1901
|
+
{
|
|
1902
|
+
"name": "disabled",
|
|
1903
|
+
"type": "boolean",
|
|
1904
|
+
"required": false
|
|
1905
|
+
},
|
|
1906
|
+
{
|
|
1907
|
+
"name": "error",
|
|
1908
|
+
"type": "ReactNode",
|
|
1909
|
+
"required": false
|
|
1910
|
+
},
|
|
1911
|
+
{
|
|
1912
|
+
"name": "hideLabel",
|
|
1913
|
+
"type": "boolean",
|
|
1914
|
+
"required": false
|
|
1915
|
+
},
|
|
1916
|
+
{
|
|
1917
|
+
"name": "inputProps",
|
|
1918
|
+
"type": "TextFieldInputProps",
|
|
1919
|
+
"required": false
|
|
1920
|
+
},
|
|
1921
|
+
{
|
|
1922
|
+
"name": "label",
|
|
1923
|
+
"type": "ReactNode",
|
|
1924
|
+
"required": true
|
|
1925
|
+
},
|
|
1926
|
+
{
|
|
1927
|
+
"name": "name",
|
|
1928
|
+
"type": "string",
|
|
1929
|
+
"required": false
|
|
1930
|
+
},
|
|
1931
|
+
{
|
|
1932
|
+
"name": "onValueChange",
|
|
1933
|
+
"type": "((value: string) => void)",
|
|
1934
|
+
"required": false
|
|
1935
|
+
},
|
|
1936
|
+
{
|
|
1937
|
+
"name": "placeholder",
|
|
1938
|
+
"type": "string",
|
|
1939
|
+
"required": false
|
|
1940
|
+
},
|
|
1941
|
+
{
|
|
1942
|
+
"name": "required",
|
|
1943
|
+
"type": "boolean",
|
|
1944
|
+
"required": false
|
|
1945
|
+
},
|
|
1946
|
+
{
|
|
1947
|
+
"name": "size",
|
|
1948
|
+
"type": "\"lg\" | \"med\" | \"sm\"",
|
|
1949
|
+
"required": false,
|
|
1950
|
+
"values": [
|
|
1951
|
+
"lg",
|
|
1952
|
+
"med",
|
|
1953
|
+
"sm"
|
|
1954
|
+
]
|
|
1955
|
+
},
|
|
1956
|
+
{
|
|
1957
|
+
"name": "style",
|
|
1958
|
+
"type": "CSSProperties",
|
|
1959
|
+
"required": false
|
|
1960
|
+
},
|
|
1961
|
+
{
|
|
1962
|
+
"name": "type",
|
|
1963
|
+
"type": "\"email\" | \"tel\" | \"text\" | \"url\"",
|
|
1964
|
+
"required": false,
|
|
1965
|
+
"values": [
|
|
1966
|
+
"email",
|
|
1967
|
+
"tel",
|
|
1968
|
+
"text",
|
|
1969
|
+
"url"
|
|
1970
|
+
]
|
|
1971
|
+
},
|
|
1972
|
+
{
|
|
1973
|
+
"name": "value",
|
|
1974
|
+
"type": "string",
|
|
1975
|
+
"required": false
|
|
1976
|
+
}
|
|
1977
|
+
],
|
|
1978
|
+
"parts": [],
|
|
1979
|
+
"exports": []
|
|
1980
|
+
},
|
|
1882
1981
|
{
|
|
1883
1982
|
"name": "Toast",
|
|
1884
1983
|
"namespace": true,
|
package/dist/index.d.mts
CHANGED
|
@@ -21,9 +21,10 @@ import { SearchField, SearchFieldProps } from "./SearchField/index.mjs";
|
|
|
21
21
|
import { Stack, StackProps } from "./Stack/index.mjs";
|
|
22
22
|
import { Tabs, TabsListProps, TabsPanelProps, TabsProps, TabsTabProps } from "./Tabs/index.mjs";
|
|
23
23
|
import { Tag, TagProps } from "./Tag/index.mjs";
|
|
24
|
+
import { TextField, TextFieldInputProps, TextFieldProps } from "./TextField/index.mjs";
|
|
24
25
|
import { ToastOptions, ToastProviderProps, ToastVariant, useToast } from "./Toast/client.mjs";
|
|
25
26
|
import { Toast } from "./Toast/index.mjs";
|
|
26
27
|
import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden/index.mjs";
|
|
27
28
|
import { Theme, defineTheme } from "./theme/define-theme.mjs";
|
|
28
29
|
import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.mjs";
|
|
29
|
-
export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
|
|
30
|
+
export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextField, type TextFieldInputProps, type TextFieldProps, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
|
package/dist/index.mjs
CHANGED
|
@@ -18,9 +18,10 @@ import { SearchField as _ } from "./SearchField/index.mjs";
|
|
|
18
18
|
import { Stack as v } from "./Stack/index.mjs";
|
|
19
19
|
import { Tabs as y } from "./Tabs/index.mjs";
|
|
20
20
|
import { Tag as b } from "./Tag/index.mjs";
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
|
|
21
|
+
import { TextField as x } from "./TextField/index.mjs";
|
|
22
|
+
import { defineTheme as S } from "./theme/define-theme.mjs";
|
|
23
|
+
import { ThemeProvider as C } from "./theme/ThemeProvider.mjs";
|
|
24
|
+
import { useToast as w } from "./Toast/client.mjs";
|
|
25
|
+
import { Toast as T } from "./Toast/index.mjs";
|
|
26
|
+
import { VisuallyHidden as E } from "./VisuallyHidden/index.mjs";
|
|
27
|
+
export { s as AlertDialog, c as Badge, e as Box, i as Button, l as Checkbox, u as Chip, d as ChipGroup, t as Clickable, o as Dialog, f as Field, a as Heading, n as Icon, p as IconButton, m as Inline, h as Menu, g as MultiSelect, _ as SearchField, v as Stack, y as Tabs, b as Tag, r as Text, x as TextField, C as ThemeProvider, T as Toast, E as VisuallyHidden, S as defineTheme, w as useToast };
|
package/dist/popup/client.mjs
CHANGED
|
@@ -7,7 +7,8 @@ import { createContext as i, use as a } from "react";
|
|
|
7
7
|
//#region src/popup/client.tsx
|
|
8
8
|
var o = i({
|
|
9
9
|
container: { current: null },
|
|
10
|
-
ref: () => {}
|
|
10
|
+
ref: () => {},
|
|
11
|
+
trigger: { current: null }
|
|
11
12
|
});
|
|
12
13
|
function s({ children: e }) {
|
|
13
14
|
return /* @__PURE__ */ r(o, {
|
package/dist/styles/atoms.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer atoms{._1dkxmm00{display:none}._1dkxmm05{display:block}._1dkxmm0a{display:inline}._1dkxmm0f{display:inline-block}._1dkxmm0k{display:flex}._1dkxmm0p{display:inline-flex}._1dkxmm0u{display:grid}._1dkxmm0z{display:contents}._1dkxmm014{flex-direction:row}._1dkxmm019{flex-direction:row-reverse}._1dkxmm01e{flex-direction:column}._1dkxmm01j{flex-direction:column-reverse}._1dkxmm01o{flex-wrap:nowrap}._1dkxmm01t{flex-wrap:wrap}._1dkxmm01y{flex-grow:0}._1dkxmm023{flex-grow:1}._1dkxmm028{flex-shrink:0}._1dkxmm02d{flex-shrink:1}._1dkxmm02i{align-items:start}._1dkxmm02n{align-items:center}._1dkxmm02s{align-items:end}._1dkxmm02x{align-items:stretch}._1dkxmm032{align-items:baseline}._1dkxmm037{align-self:start}._1dkxmm03c{align-self:center}._1dkxmm03h{align-self:end}._1dkxmm03m{align-self:stretch}._1dkxmm03r{align-self:baseline}._1dkxmm03w{justify-content:start}._1dkxmm041{justify-content:center}._1dkxmm046{justify-content:end}._1dkxmm04b{justify-content:space-between}._1dkxmm04g{justify-content:space-around}._1dkxmm04l{justify-content:space-evenly}._1dkxmm04q{gap:var(--space-0)}._1dkxmm04v{gap:var(--space-1)}._1dkxmm050{gap:var(--space-2)}._1dkxmm055{gap:var(--space-4)}._1dkxmm05a{gap:var(--space-6)}._1dkxmm05f{gap:var(--space-8)}._1dkxmm05k{gap:var(--space-12)}._1dkxmm05p{gap:var(--space-16)}._1dkxmm05u{gap:var(--space-20)}._1dkxmm05z{gap:var(--space-24)}._1dkxmm064{gap:var(--space-32)}._1dkxmm069{gap:var(--space-40)}._1dkxmm06e{gap:var(--space-48)}._1dkxmm06j{gap:var(--space-64)}._1dkxmm06o{gap:var(--space-80)}._1dkxmm06t{gap:var(--space-96)}._1dkxmm06y{padding-block-start:var(--space-0)}._1dkxmm073{padding-block-start:var(--space-1)}._1dkxmm078{padding-block-start:var(--space-2)}._1dkxmm07d{padding-block-start:var(--space-4)}._1dkxmm07i{padding-block-start:var(--space-6)}._1dkxmm07n{padding-block-start:var(--space-8)}._1dkxmm07s{padding-block-start:var(--space-12)}._1dkxmm07x{padding-block-start:var(--space-16)}._1dkxmm082{padding-block-start:var(--space-20)}._1dkxmm087{padding-block-start:var(--space-24)}._1dkxmm08c{padding-block-start:var(--space-32)}._1dkxmm08h{padding-block-start:var(--space-40)}._1dkxmm08m{padding-block-start:var(--space-48)}._1dkxmm08r{padding-block-start:var(--space-64)}._1dkxmm08w{padding-block-start:var(--space-80)}._1dkxmm091{padding-block-start:var(--space-96)}._1dkxmm096{padding-block-end:var(--space-0)}._1dkxmm09b{padding-block-end:var(--space-1)}._1dkxmm09g{padding-block-end:var(--space-2)}._1dkxmm09l{padding-block-end:var(--space-4)}._1dkxmm09q{padding-block-end:var(--space-6)}._1dkxmm09v{padding-block-end:var(--space-8)}._1dkxmm0a0{padding-block-end:var(--space-12)}._1dkxmm0a5{padding-block-end:var(--space-16)}._1dkxmm0aa{padding-block-end:var(--space-20)}._1dkxmm0af{padding-block-end:var(--space-24)}._1dkxmm0ak{padding-block-end:var(--space-32)}._1dkxmm0ap{padding-block-end:var(--space-40)}._1dkxmm0au{padding-block-end:var(--space-48)}._1dkxmm0az{padding-block-end:var(--space-64)}._1dkxmm0b4{padding-block-end:var(--space-80)}._1dkxmm0b9{padding-block-end:var(--space-96)}._1dkxmm0be{padding-inline-start:var(--space-0)}._1dkxmm0bj{padding-inline-start:var(--space-1)}._1dkxmm0bo{padding-inline-start:var(--space-2)}._1dkxmm0bt{padding-inline-start:var(--space-4)}._1dkxmm0by{padding-inline-start:var(--space-6)}._1dkxmm0c3{padding-inline-start:var(--space-8)}._1dkxmm0c8{padding-inline-start:var(--space-12)}._1dkxmm0cd{padding-inline-start:var(--space-16)}._1dkxmm0ci{padding-inline-start:var(--space-20)}._1dkxmm0cn{padding-inline-start:var(--space-24)}._1dkxmm0cs{padding-inline-start:var(--space-32)}._1dkxmm0cx{padding-inline-start:var(--space-40)}._1dkxmm0d2{padding-inline-start:var(--space-48)}._1dkxmm0d7{padding-inline-start:var(--space-64)}._1dkxmm0dc{padding-inline-start:var(--space-80)}._1dkxmm0dh{padding-inline-start:var(--space-96)}._1dkxmm0dm{padding-inline-end:var(--space-0)}._1dkxmm0dr{padding-inline-end:var(--space-1)}._1dkxmm0dw{padding-inline-end:var(--space-2)}._1dkxmm0e1{padding-inline-end:var(--space-4)}._1dkxmm0e6{padding-inline-end:var(--space-6)}._1dkxmm0eb{padding-inline-end:var(--space-8)}._1dkxmm0eg{padding-inline-end:var(--space-12)}._1dkxmm0el{padding-inline-end:var(--space-16)}._1dkxmm0eq{padding-inline-end:var(--space-20)}._1dkxmm0ev{padding-inline-end:var(--space-24)}._1dkxmm0f0{padding-inline-end:var(--space-32)}._1dkxmm0f5{padding-inline-end:var(--space-40)}._1dkxmm0fa{padding-inline-end:var(--space-48)}._1dkxmm0ff{padding-inline-end:var(--space-64)}._1dkxmm0fk{padding-inline-end:var(--space-80)}._1dkxmm0fp{padding-inline-end:var(--space-96)}._1dkxmm0fu{margin-block-start:var(--space-0)}._1dkxmm0fz{margin-block-start:var(--space-1)}._1dkxmm0g4{margin-block-start:var(--space-2)}._1dkxmm0g9{margin-block-start:var(--space-4)}._1dkxmm0ge{margin-block-start:var(--space-6)}._1dkxmm0gj{margin-block-start:var(--space-8)}._1dkxmm0go{margin-block-start:var(--space-12)}._1dkxmm0gt{margin-block-start:var(--space-16)}._1dkxmm0gy{margin-block-start:var(--space-20)}._1dkxmm0h3{margin-block-start:var(--space-24)}._1dkxmm0h8{margin-block-start:var(--space-32)}._1dkxmm0hd{margin-block-start:var(--space-40)}._1dkxmm0hi{margin-block-start:var(--space-48)}._1dkxmm0hn{margin-block-start:var(--space-64)}._1dkxmm0hs{margin-block-start:var(--space-80)}._1dkxmm0hx{margin-block-start:var(--space-96)}._1dkxmm0i2{margin-block-start:auto}._1dkxmm0i7{margin-block-end:var(--space-0)}._1dkxmm0ic{margin-block-end:var(--space-1)}._1dkxmm0ih{margin-block-end:var(--space-2)}._1dkxmm0im{margin-block-end:var(--space-4)}._1dkxmm0ir{margin-block-end:var(--space-6)}._1dkxmm0iw{margin-block-end:var(--space-8)}._1dkxmm0j1{margin-block-end:var(--space-12)}._1dkxmm0j6{margin-block-end:var(--space-16)}._1dkxmm0jb{margin-block-end:var(--space-20)}._1dkxmm0jg{margin-block-end:var(--space-24)}._1dkxmm0jl{margin-block-end:var(--space-32)}._1dkxmm0jq{margin-block-end:var(--space-40)}._1dkxmm0jv{margin-block-end:var(--space-48)}._1dkxmm0k0{margin-block-end:var(--space-64)}._1dkxmm0k5{margin-block-end:var(--space-80)}._1dkxmm0ka{margin-block-end:var(--space-96)}._1dkxmm0kf{margin-block-end:auto}._1dkxmm0kk{margin-inline-start:var(--space-0)}._1dkxmm0kp{margin-inline-start:var(--space-1)}._1dkxmm0ku{margin-inline-start:var(--space-2)}._1dkxmm0kz{margin-inline-start:var(--space-4)}._1dkxmm0l4{margin-inline-start:var(--space-6)}._1dkxmm0l9{margin-inline-start:var(--space-8)}._1dkxmm0le{margin-inline-start:var(--space-12)}._1dkxmm0lj{margin-inline-start:var(--space-16)}._1dkxmm0lo{margin-inline-start:var(--space-20)}._1dkxmm0lt{margin-inline-start:var(--space-24)}._1dkxmm0ly{margin-inline-start:var(--space-32)}._1dkxmm0m3{margin-inline-start:var(--space-40)}._1dkxmm0m8{margin-inline-start:var(--space-48)}._1dkxmm0md{margin-inline-start:var(--space-64)}._1dkxmm0mi{margin-inline-start:var(--space-80)}._1dkxmm0mn{margin-inline-start:var(--space-96)}._1dkxmm0ms{margin-inline-start:auto}._1dkxmm0mx{margin-inline-end:var(--space-0)}._1dkxmm0n2{margin-inline-end:var(--space-1)}._1dkxmm0n7{margin-inline-end:var(--space-2)}._1dkxmm0nc{margin-inline-end:var(--space-4)}._1dkxmm0nh{margin-inline-end:var(--space-6)}._1dkxmm0nm{margin-inline-end:var(--space-8)}._1dkxmm0nr{margin-inline-end:var(--space-12)}._1dkxmm0nw{margin-inline-end:var(--space-16)}._1dkxmm0o1{margin-inline-end:var(--space-20)}._1dkxmm0o6{margin-inline-end:var(--space-24)}._1dkxmm0ob{margin-inline-end:var(--space-32)}._1dkxmm0og{margin-inline-end:var(--space-40)}._1dkxmm0ol{margin-inline-end:var(--space-48)}._1dkxmm0oq{margin-inline-end:var(--space-64)}._1dkxmm0ov{margin-inline-end:var(--space-80)}._1dkxmm0p0{margin-inline-end:var(--space-96)}._1dkxmm0p5{margin-inline-end:auto}._1dkxmm0pa{inline-size:var(--size-xs)}._1dkxmm0pf{inline-size:var(--size-sm)}._1dkxmm0pk{inline-size:var(--size-med)}._1dkxmm0pp{inline-size:var(--size-lg)}._1dkxmm0pu{inline-size:var(--size-xl)}._1dkxmm0pz{inline-size:auto}._1dkxmm0q4{inline-size:100%}._1dkxmm0q9{inline-size:fit-content}._1dkxmm0qe{inline-size:min-content}._1dkxmm0qj{inline-size:max-content}._1dkxmm0qo{inline-size:var(--container-prose)}._1dkxmm0qt{inline-size:var(--container-page)}._1dkxmm0qy{inline-size:var(--container-wide)}._1dkxmm0r3{block-size:var(--size-xs)}._1dkxmm0r8{block-size:var(--size-sm)}._1dkxmm0rd{block-size:var(--size-med)}._1dkxmm0ri{block-size:var(--size-lg)}._1dkxmm0rn{block-size:var(--size-xl)}._1dkxmm0rs{block-size:auto}._1dkxmm0rx{block-size:100%}._1dkxmm0s2{block-size:fit-content}._1dkxmm0s7{block-size:min-content}._1dkxmm0sc{block-size:max-content}._1dkxmm0sh{min-inline-size:var(--size-xs)}._1dkxmm0sm{min-inline-size:var(--size-sm)}._1dkxmm0sr{min-inline-size:var(--size-med)}._1dkxmm0sw{min-inline-size:var(--size-lg)}._1dkxmm0t1{min-inline-size:var(--size-xl)}._1dkxmm0t6{min-inline-size:auto}._1dkxmm0tb{min-inline-size:100%}._1dkxmm0tg{min-inline-size:fit-content}._1dkxmm0tl{min-inline-size:min-content}._1dkxmm0tq{min-inline-size:max-content}._1dkxmm0tv{min-inline-size:var(--container-prose)}._1dkxmm0u0{min-inline-size:var(--container-page)}._1dkxmm0u5{min-inline-size:var(--container-wide)}._1dkxmm0ua{max-inline-size:var(--size-xs)}._1dkxmm0uf{max-inline-size:var(--size-sm)}._1dkxmm0uk{max-inline-size:var(--size-med)}._1dkxmm0up{max-inline-size:var(--size-lg)}._1dkxmm0uu{max-inline-size:var(--size-xl)}._1dkxmm0uz{max-inline-size:auto}._1dkxmm0v4{max-inline-size:100%}._1dkxmm0v9{max-inline-size:fit-content}._1dkxmm0ve{max-inline-size:min-content}._1dkxmm0vj{max-inline-size:max-content}._1dkxmm0vo{max-inline-size:var(--container-prose)}._1dkxmm0vt{max-inline-size:var(--container-page)}._1dkxmm0vy{max-inline-size:var(--container-wide)}._1dkxmm0w3{min-block-size:var(--size-xs)}._1dkxmm0w8{min-block-size:var(--size-sm)}._1dkxmm0wd{min-block-size:var(--size-med)}._1dkxmm0wi{min-block-size:var(--size-lg)}._1dkxmm0wn{min-block-size:var(--size-xl)}._1dkxmm0ws{min-block-size:auto}._1dkxmm0wx{min-block-size:100%}._1dkxmm0x2{min-block-size:fit-content}._1dkxmm0x7{min-block-size:min-content}._1dkxmm0xc{min-block-size:max-content}._1dkxmm0xh{max-block-size:var(--size-xs)}._1dkxmm0xm{max-block-size:var(--size-sm)}._1dkxmm0xr{max-block-size:var(--size-med)}._1dkxmm0xw{max-block-size:var(--size-lg)}._1dkxmm0y1{max-block-size:var(--size-xl)}._1dkxmm0y6{max-block-size:auto}._1dkxmm0yb{max-block-size:100%}._1dkxmm0yg{max-block-size:fit-content}._1dkxmm0yl{max-block-size:min-content}._1dkxmm0yq{max-block-size:max-content}._1dkxmm0yv{color:var(--color-bg)}._1dkxmm0yw{color:var(--color-bg-muted)}._1dkxmm0yx{color:var(--color-bg-raised)}._1dkxmm0yy{color:var(--color-fg)}._1dkxmm0yz{color:var(--color-fg-muted)}._1dkxmm0z0{color:var(--color-border)}._1dkxmm0z1{color:var(--color-border-strong)}._1dkxmm0z2{color:var(--color-accent)}._1dkxmm0z3{color:var(--color-accent-fg)}._1dkxmm0z4{color:var(--color-danger)}._1dkxmm0z5{color:var(--color-danger-fg)}._1dkxmm0z6{color:var(--color-success)}._1dkxmm0z7{color:var(--color-success-fg)}._1dkxmm0z8{color:var(--color-warning)}._1dkxmm0z9{color:var(--color-warning-fg)}._1dkxmm0za{color:var(--color-focus)}._1dkxmm0zb{background-color:var(--color-bg)}._1dkxmm0zc{background-color:var(--color-bg-muted)}._1dkxmm0zd{background-color:var(--color-bg-raised)}._1dkxmm0ze{background-color:var(--color-fg)}._1dkxmm0zf{background-color:var(--color-fg-muted)}._1dkxmm0zg{background-color:var(--color-border)}._1dkxmm0zh{background-color:var(--color-border-strong)}._1dkxmm0zi{background-color:var(--color-accent)}._1dkxmm0zj{background-color:var(--color-accent-fg)}._1dkxmm0zk{background-color:var(--color-danger)}._1dkxmm0zl{background-color:var(--color-danger-fg)}._1dkxmm0zm{background-color:var(--color-success)}._1dkxmm0zn{background-color:var(--color-success-fg)}._1dkxmm0zo{background-color:var(--color-warning)}._1dkxmm0zp{background-color:var(--color-warning-fg)}._1dkxmm0zq{background-color:var(--color-focus)}._1dkxmm0zr{border-radius:var(--radius-none)}._1dkxmm0zs{border-radius:var(--radius-sm)}._1dkxmm0zt{border-radius:var(--radius-med)}._1dkxmm0zu{border-radius:var(--radius-lg)}._1dkxmm0zv{border-radius:var(--radius-xl)}._1dkxmm0zw{border-radius:var(--radius-full)}._1dkxmm0zx{box-shadow:var(--shadow-sm)}._1dkxmm0zy{box-shadow:var(--shadow-med)}._1dkxmm0zz{box-shadow:var(--shadow-lg)}._1dkxmm0100{position:static}._1dkxmm0101{position:relative}._1dkxmm0102{position:absolute}._1dkxmm0103{position:fixed}._1dkxmm0104{position:sticky}._1dkxmm0105{z-index:var(--z-index-base)}._1dkxmm0106{z-index:var(--z-index-raised)}._1dkxmm0107{z-index:var(--z-index-dropdown)}._1dkxmm0108{z-index:var(--z-index-sticky)}._1dkxmm0109{z-index:var(--z-index-overlay)}._1dkxmm010a{z-index:var(--z-index-modal)}._1dkxmm010b{z-index:var(--z-index-popover)}._1dkxmm010c{z-index:var(--z-index-toast)}._1dkxmm010d{z-index:var(--z-index-tooltip)}._1dkxmm010e{overflow:visible}._1dkxmm010f{overflow:hidden}._1dkxmm010g{overflow:clip}._1dkxmm010h{overflow:auto}._1dkxmm010i{text-align:start}._1dkxmm010j{text-align:center}._1dkxmm010k{text-align:end}@media (width>=40em){._1dkxmm01{display:none}._1dkxmm06{display:block}._1dkxmm0b{display:inline}._1dkxmm0g{display:inline-block}._1dkxmm0l{display:flex}._1dkxmm0q{display:inline-flex}._1dkxmm0v{display:grid}._1dkxmm010{display:contents}._1dkxmm015{flex-direction:row}._1dkxmm01a{flex-direction:row-reverse}._1dkxmm01f{flex-direction:column}._1dkxmm01k{flex-direction:column-reverse}._1dkxmm01p{flex-wrap:nowrap}._1dkxmm01u{flex-wrap:wrap}._1dkxmm01z{flex-grow:0}._1dkxmm024{flex-grow:1}._1dkxmm029{flex-shrink:0}._1dkxmm02e{flex-shrink:1}._1dkxmm02j{align-items:start}._1dkxmm02o{align-items:center}._1dkxmm02t{align-items:end}._1dkxmm02y{align-items:stretch}._1dkxmm033{align-items:baseline}._1dkxmm038{align-self:start}._1dkxmm03d{align-self:center}._1dkxmm03i{align-self:end}._1dkxmm03n{align-self:stretch}._1dkxmm03s{align-self:baseline}._1dkxmm03x{justify-content:start}._1dkxmm042{justify-content:center}._1dkxmm047{justify-content:end}._1dkxmm04c{justify-content:space-between}._1dkxmm04h{justify-content:space-around}._1dkxmm04m{justify-content:space-evenly}._1dkxmm04r{gap:var(--space-0)}._1dkxmm04w{gap:var(--space-1)}._1dkxmm051{gap:var(--space-2)}._1dkxmm056{gap:var(--space-4)}._1dkxmm05b{gap:var(--space-6)}._1dkxmm05g{gap:var(--space-8)}._1dkxmm05l{gap:var(--space-12)}._1dkxmm05q{gap:var(--space-16)}._1dkxmm05v{gap:var(--space-20)}._1dkxmm060{gap:var(--space-24)}._1dkxmm065{gap:var(--space-32)}._1dkxmm06a{gap:var(--space-40)}._1dkxmm06f{gap:var(--space-48)}._1dkxmm06k{gap:var(--space-64)}._1dkxmm06p{gap:var(--space-80)}._1dkxmm06u{gap:var(--space-96)}._1dkxmm06z{padding-block-start:var(--space-0)}._1dkxmm074{padding-block-start:var(--space-1)}._1dkxmm079{padding-block-start:var(--space-2)}._1dkxmm07e{padding-block-start:var(--space-4)}._1dkxmm07j{padding-block-start:var(--space-6)}._1dkxmm07o{padding-block-start:var(--space-8)}._1dkxmm07t{padding-block-start:var(--space-12)}._1dkxmm07y{padding-block-start:var(--space-16)}._1dkxmm083{padding-block-start:var(--space-20)}._1dkxmm088{padding-block-start:var(--space-24)}._1dkxmm08d{padding-block-start:var(--space-32)}._1dkxmm08i{padding-block-start:var(--space-40)}._1dkxmm08n{padding-block-start:var(--space-48)}._1dkxmm08s{padding-block-start:var(--space-64)}._1dkxmm08x{padding-block-start:var(--space-80)}._1dkxmm092{padding-block-start:var(--space-96)}._1dkxmm097{padding-block-end:var(--space-0)}._1dkxmm09c{padding-block-end:var(--space-1)}._1dkxmm09h{padding-block-end:var(--space-2)}._1dkxmm09m{padding-block-end:var(--space-4)}._1dkxmm09r{padding-block-end:var(--space-6)}._1dkxmm09w{padding-block-end:var(--space-8)}._1dkxmm0a1{padding-block-end:var(--space-12)}._1dkxmm0a6{padding-block-end:var(--space-16)}._1dkxmm0ab{padding-block-end:var(--space-20)}._1dkxmm0ag{padding-block-end:var(--space-24)}._1dkxmm0al{padding-block-end:var(--space-32)}._1dkxmm0aq{padding-block-end:var(--space-40)}._1dkxmm0av{padding-block-end:var(--space-48)}._1dkxmm0b0{padding-block-end:var(--space-64)}._1dkxmm0b5{padding-block-end:var(--space-80)}._1dkxmm0ba{padding-block-end:var(--space-96)}._1dkxmm0bf{padding-inline-start:var(--space-0)}._1dkxmm0bk{padding-inline-start:var(--space-1)}._1dkxmm0bp{padding-inline-start:var(--space-2)}._1dkxmm0bu{padding-inline-start:var(--space-4)}._1dkxmm0bz{padding-inline-start:var(--space-6)}._1dkxmm0c4{padding-inline-start:var(--space-8)}._1dkxmm0c9{padding-inline-start:var(--space-12)}._1dkxmm0ce{padding-inline-start:var(--space-16)}._1dkxmm0cj{padding-inline-start:var(--space-20)}._1dkxmm0co{padding-inline-start:var(--space-24)}._1dkxmm0ct{padding-inline-start:var(--space-32)}._1dkxmm0cy{padding-inline-start:var(--space-40)}._1dkxmm0d3{padding-inline-start:var(--space-48)}._1dkxmm0d8{padding-inline-start:var(--space-64)}._1dkxmm0dd{padding-inline-start:var(--space-80)}._1dkxmm0di{padding-inline-start:var(--space-96)}._1dkxmm0dn{padding-inline-end:var(--space-0)}._1dkxmm0ds{padding-inline-end:var(--space-1)}._1dkxmm0dx{padding-inline-end:var(--space-2)}._1dkxmm0e2{padding-inline-end:var(--space-4)}._1dkxmm0e7{padding-inline-end:var(--space-6)}._1dkxmm0ec{padding-inline-end:var(--space-8)}._1dkxmm0eh{padding-inline-end:var(--space-12)}._1dkxmm0em{padding-inline-end:var(--space-16)}._1dkxmm0er{padding-inline-end:var(--space-20)}._1dkxmm0ew{padding-inline-end:var(--space-24)}._1dkxmm0f1{padding-inline-end:var(--space-32)}._1dkxmm0f6{padding-inline-end:var(--space-40)}._1dkxmm0fb{padding-inline-end:var(--space-48)}._1dkxmm0fg{padding-inline-end:var(--space-64)}._1dkxmm0fl{padding-inline-end:var(--space-80)}._1dkxmm0fq{padding-inline-end:var(--space-96)}._1dkxmm0fv{margin-block-start:var(--space-0)}._1dkxmm0g0{margin-block-start:var(--space-1)}._1dkxmm0g5{margin-block-start:var(--space-2)}._1dkxmm0ga{margin-block-start:var(--space-4)}._1dkxmm0gf{margin-block-start:var(--space-6)}._1dkxmm0gk{margin-block-start:var(--space-8)}._1dkxmm0gp{margin-block-start:var(--space-12)}._1dkxmm0gu{margin-block-start:var(--space-16)}._1dkxmm0gz{margin-block-start:var(--space-20)}._1dkxmm0h4{margin-block-start:var(--space-24)}._1dkxmm0h9{margin-block-start:var(--space-32)}._1dkxmm0he{margin-block-start:var(--space-40)}._1dkxmm0hj{margin-block-start:var(--space-48)}._1dkxmm0ho{margin-block-start:var(--space-64)}._1dkxmm0ht{margin-block-start:var(--space-80)}._1dkxmm0hy{margin-block-start:var(--space-96)}._1dkxmm0i3{margin-block-start:auto}._1dkxmm0i8{margin-block-end:var(--space-0)}._1dkxmm0id{margin-block-end:var(--space-1)}._1dkxmm0ii{margin-block-end:var(--space-2)}._1dkxmm0in{margin-block-end:var(--space-4)}._1dkxmm0is{margin-block-end:var(--space-6)}._1dkxmm0ix{margin-block-end:var(--space-8)}._1dkxmm0j2{margin-block-end:var(--space-12)}._1dkxmm0j7{margin-block-end:var(--space-16)}._1dkxmm0jc{margin-block-end:var(--space-20)}._1dkxmm0jh{margin-block-end:var(--space-24)}._1dkxmm0jm{margin-block-end:var(--space-32)}._1dkxmm0jr{margin-block-end:var(--space-40)}._1dkxmm0jw{margin-block-end:var(--space-48)}._1dkxmm0k1{margin-block-end:var(--space-64)}._1dkxmm0k6{margin-block-end:var(--space-80)}._1dkxmm0kb{margin-block-end:var(--space-96)}._1dkxmm0kg{margin-block-end:auto}._1dkxmm0kl{margin-inline-start:var(--space-0)}._1dkxmm0kq{margin-inline-start:var(--space-1)}._1dkxmm0kv{margin-inline-start:var(--space-2)}._1dkxmm0l0{margin-inline-start:var(--space-4)}._1dkxmm0l5{margin-inline-start:var(--space-6)}._1dkxmm0la{margin-inline-start:var(--space-8)}._1dkxmm0lf{margin-inline-start:var(--space-12)}._1dkxmm0lk{margin-inline-start:var(--space-16)}._1dkxmm0lp{margin-inline-start:var(--space-20)}._1dkxmm0lu{margin-inline-start:var(--space-24)}._1dkxmm0lz{margin-inline-start:var(--space-32)}._1dkxmm0m4{margin-inline-start:var(--space-40)}._1dkxmm0m9{margin-inline-start:var(--space-48)}._1dkxmm0me{margin-inline-start:var(--space-64)}._1dkxmm0mj{margin-inline-start:var(--space-80)}._1dkxmm0mo{margin-inline-start:var(--space-96)}._1dkxmm0mt{margin-inline-start:auto}._1dkxmm0my{margin-inline-end:var(--space-0)}._1dkxmm0n3{margin-inline-end:var(--space-1)}._1dkxmm0n8{margin-inline-end:var(--space-2)}._1dkxmm0nd{margin-inline-end:var(--space-4)}._1dkxmm0ni{margin-inline-end:var(--space-6)}._1dkxmm0nn{margin-inline-end:var(--space-8)}._1dkxmm0ns{margin-inline-end:var(--space-12)}._1dkxmm0nx{margin-inline-end:var(--space-16)}._1dkxmm0o2{margin-inline-end:var(--space-20)}._1dkxmm0o7{margin-inline-end:var(--space-24)}._1dkxmm0oc{margin-inline-end:var(--space-32)}._1dkxmm0oh{margin-inline-end:var(--space-40)}._1dkxmm0om{margin-inline-end:var(--space-48)}._1dkxmm0or{margin-inline-end:var(--space-64)}._1dkxmm0ow{margin-inline-end:var(--space-80)}._1dkxmm0p1{margin-inline-end:var(--space-96)}._1dkxmm0p6{margin-inline-end:auto}._1dkxmm0pb{inline-size:var(--size-xs)}._1dkxmm0pg{inline-size:var(--size-sm)}._1dkxmm0pl{inline-size:var(--size-med)}._1dkxmm0pq{inline-size:var(--size-lg)}._1dkxmm0pv{inline-size:var(--size-xl)}._1dkxmm0q0{inline-size:auto}._1dkxmm0q5{inline-size:100%}._1dkxmm0qa{inline-size:fit-content}._1dkxmm0qf{inline-size:min-content}._1dkxmm0qk{inline-size:max-content}._1dkxmm0qp{inline-size:var(--container-prose)}._1dkxmm0qu{inline-size:var(--container-page)}._1dkxmm0qz{inline-size:var(--container-wide)}._1dkxmm0r4{block-size:var(--size-xs)}._1dkxmm0r9{block-size:var(--size-sm)}._1dkxmm0re{block-size:var(--size-med)}._1dkxmm0rj{block-size:var(--size-lg)}._1dkxmm0ro{block-size:var(--size-xl)}._1dkxmm0rt{block-size:auto}._1dkxmm0ry{block-size:100%}._1dkxmm0s3{block-size:fit-content}._1dkxmm0s8{block-size:min-content}._1dkxmm0sd{block-size:max-content}._1dkxmm0si{min-inline-size:var(--size-xs)}._1dkxmm0sn{min-inline-size:var(--size-sm)}._1dkxmm0ss{min-inline-size:var(--size-med)}._1dkxmm0sx{min-inline-size:var(--size-lg)}._1dkxmm0t2{min-inline-size:var(--size-xl)}._1dkxmm0t7{min-inline-size:auto}._1dkxmm0tc{min-inline-size:100%}._1dkxmm0th{min-inline-size:fit-content}._1dkxmm0tm{min-inline-size:min-content}._1dkxmm0tr{min-inline-size:max-content}._1dkxmm0tw{min-inline-size:var(--container-prose)}._1dkxmm0u1{min-inline-size:var(--container-page)}._1dkxmm0u6{min-inline-size:var(--container-wide)}._1dkxmm0ub{max-inline-size:var(--size-xs)}._1dkxmm0ug{max-inline-size:var(--size-sm)}._1dkxmm0ul{max-inline-size:var(--size-med)}._1dkxmm0uq{max-inline-size:var(--size-lg)}._1dkxmm0uv{max-inline-size:var(--size-xl)}._1dkxmm0v0{max-inline-size:auto}._1dkxmm0v5{max-inline-size:100%}._1dkxmm0va{max-inline-size:fit-content}._1dkxmm0vf{max-inline-size:min-content}._1dkxmm0vk{max-inline-size:max-content}._1dkxmm0vp{max-inline-size:var(--container-prose)}._1dkxmm0vu{max-inline-size:var(--container-page)}._1dkxmm0vz{max-inline-size:var(--container-wide)}._1dkxmm0w4{min-block-size:var(--size-xs)}._1dkxmm0w9{min-block-size:var(--size-sm)}._1dkxmm0we{min-block-size:var(--size-med)}._1dkxmm0wj{min-block-size:var(--size-lg)}._1dkxmm0wo{min-block-size:var(--size-xl)}._1dkxmm0wt{min-block-size:auto}._1dkxmm0wy{min-block-size:100%}._1dkxmm0x3{min-block-size:fit-content}._1dkxmm0x8{min-block-size:min-content}._1dkxmm0xd{min-block-size:max-content}._1dkxmm0xi{max-block-size:var(--size-xs)}._1dkxmm0xn{max-block-size:var(--size-sm)}._1dkxmm0xs{max-block-size:var(--size-med)}._1dkxmm0xx{max-block-size:var(--size-lg)}._1dkxmm0y2{max-block-size:var(--size-xl)}._1dkxmm0y7{max-block-size:auto}._1dkxmm0yc{max-block-size:100%}._1dkxmm0yh{max-block-size:fit-content}._1dkxmm0ym{max-block-size:min-content}._1dkxmm0yr{max-block-size:max-content}}@media (width>=48em){._1dkxmm02{display:none}._1dkxmm07{display:block}._1dkxmm0c{display:inline}._1dkxmm0h{display:inline-block}._1dkxmm0m{display:flex}._1dkxmm0r{display:inline-flex}._1dkxmm0w{display:grid}._1dkxmm011{display:contents}._1dkxmm016{flex-direction:row}._1dkxmm01b{flex-direction:row-reverse}._1dkxmm01g{flex-direction:column}._1dkxmm01l{flex-direction:column-reverse}._1dkxmm01q{flex-wrap:nowrap}._1dkxmm01v{flex-wrap:wrap}._1dkxmm020{flex-grow:0}._1dkxmm025{flex-grow:1}._1dkxmm02a{flex-shrink:0}._1dkxmm02f{flex-shrink:1}._1dkxmm02k{align-items:start}._1dkxmm02p{align-items:center}._1dkxmm02u{align-items:end}._1dkxmm02z{align-items:stretch}._1dkxmm034{align-items:baseline}._1dkxmm039{align-self:start}._1dkxmm03e{align-self:center}._1dkxmm03j{align-self:end}._1dkxmm03o{align-self:stretch}._1dkxmm03t{align-self:baseline}._1dkxmm03y{justify-content:start}._1dkxmm043{justify-content:center}._1dkxmm048{justify-content:end}._1dkxmm04d{justify-content:space-between}._1dkxmm04i{justify-content:space-around}._1dkxmm04n{justify-content:space-evenly}._1dkxmm04s{gap:var(--space-0)}._1dkxmm04x{gap:var(--space-1)}._1dkxmm052{gap:var(--space-2)}._1dkxmm057{gap:var(--space-4)}._1dkxmm05c{gap:var(--space-6)}._1dkxmm05h{gap:var(--space-8)}._1dkxmm05m{gap:var(--space-12)}._1dkxmm05r{gap:var(--space-16)}._1dkxmm05w{gap:var(--space-20)}._1dkxmm061{gap:var(--space-24)}._1dkxmm066{gap:var(--space-32)}._1dkxmm06b{gap:var(--space-40)}._1dkxmm06g{gap:var(--space-48)}._1dkxmm06l{gap:var(--space-64)}._1dkxmm06q{gap:var(--space-80)}._1dkxmm06v{gap:var(--space-96)}._1dkxmm070{padding-block-start:var(--space-0)}._1dkxmm075{padding-block-start:var(--space-1)}._1dkxmm07a{padding-block-start:var(--space-2)}._1dkxmm07f{padding-block-start:var(--space-4)}._1dkxmm07k{padding-block-start:var(--space-6)}._1dkxmm07p{padding-block-start:var(--space-8)}._1dkxmm07u{padding-block-start:var(--space-12)}._1dkxmm07z{padding-block-start:var(--space-16)}._1dkxmm084{padding-block-start:var(--space-20)}._1dkxmm089{padding-block-start:var(--space-24)}._1dkxmm08e{padding-block-start:var(--space-32)}._1dkxmm08j{padding-block-start:var(--space-40)}._1dkxmm08o{padding-block-start:var(--space-48)}._1dkxmm08t{padding-block-start:var(--space-64)}._1dkxmm08y{padding-block-start:var(--space-80)}._1dkxmm093{padding-block-start:var(--space-96)}._1dkxmm098{padding-block-end:var(--space-0)}._1dkxmm09d{padding-block-end:var(--space-1)}._1dkxmm09i{padding-block-end:var(--space-2)}._1dkxmm09n{padding-block-end:var(--space-4)}._1dkxmm09s{padding-block-end:var(--space-6)}._1dkxmm09x{padding-block-end:var(--space-8)}._1dkxmm0a2{padding-block-end:var(--space-12)}._1dkxmm0a7{padding-block-end:var(--space-16)}._1dkxmm0ac{padding-block-end:var(--space-20)}._1dkxmm0ah{padding-block-end:var(--space-24)}._1dkxmm0am{padding-block-end:var(--space-32)}._1dkxmm0ar{padding-block-end:var(--space-40)}._1dkxmm0aw{padding-block-end:var(--space-48)}._1dkxmm0b1{padding-block-end:var(--space-64)}._1dkxmm0b6{padding-block-end:var(--space-80)}._1dkxmm0bb{padding-block-end:var(--space-96)}._1dkxmm0bg{padding-inline-start:var(--space-0)}._1dkxmm0bl{padding-inline-start:var(--space-1)}._1dkxmm0bq{padding-inline-start:var(--space-2)}._1dkxmm0bv{padding-inline-start:var(--space-4)}._1dkxmm0c0{padding-inline-start:var(--space-6)}._1dkxmm0c5{padding-inline-start:var(--space-8)}._1dkxmm0ca{padding-inline-start:var(--space-12)}._1dkxmm0cf{padding-inline-start:var(--space-16)}._1dkxmm0ck{padding-inline-start:var(--space-20)}._1dkxmm0cp{padding-inline-start:var(--space-24)}._1dkxmm0cu{padding-inline-start:var(--space-32)}._1dkxmm0cz{padding-inline-start:var(--space-40)}._1dkxmm0d4{padding-inline-start:var(--space-48)}._1dkxmm0d9{padding-inline-start:var(--space-64)}._1dkxmm0de{padding-inline-start:var(--space-80)}._1dkxmm0dj{padding-inline-start:var(--space-96)}._1dkxmm0do{padding-inline-end:var(--space-0)}._1dkxmm0dt{padding-inline-end:var(--space-1)}._1dkxmm0dy{padding-inline-end:var(--space-2)}._1dkxmm0e3{padding-inline-end:var(--space-4)}._1dkxmm0e8{padding-inline-end:var(--space-6)}._1dkxmm0ed{padding-inline-end:var(--space-8)}._1dkxmm0ei{padding-inline-end:var(--space-12)}._1dkxmm0en{padding-inline-end:var(--space-16)}._1dkxmm0es{padding-inline-end:var(--space-20)}._1dkxmm0ex{padding-inline-end:var(--space-24)}._1dkxmm0f2{padding-inline-end:var(--space-32)}._1dkxmm0f7{padding-inline-end:var(--space-40)}._1dkxmm0fc{padding-inline-end:var(--space-48)}._1dkxmm0fh{padding-inline-end:var(--space-64)}._1dkxmm0fm{padding-inline-end:var(--space-80)}._1dkxmm0fr{padding-inline-end:var(--space-96)}._1dkxmm0fw{margin-block-start:var(--space-0)}._1dkxmm0g1{margin-block-start:var(--space-1)}._1dkxmm0g6{margin-block-start:var(--space-2)}._1dkxmm0gb{margin-block-start:var(--space-4)}._1dkxmm0gg{margin-block-start:var(--space-6)}._1dkxmm0gl{margin-block-start:var(--space-8)}._1dkxmm0gq{margin-block-start:var(--space-12)}._1dkxmm0gv{margin-block-start:var(--space-16)}._1dkxmm0h0{margin-block-start:var(--space-20)}._1dkxmm0h5{margin-block-start:var(--space-24)}._1dkxmm0ha{margin-block-start:var(--space-32)}._1dkxmm0hf{margin-block-start:var(--space-40)}._1dkxmm0hk{margin-block-start:var(--space-48)}._1dkxmm0hp{margin-block-start:var(--space-64)}._1dkxmm0hu{margin-block-start:var(--space-80)}._1dkxmm0hz{margin-block-start:var(--space-96)}._1dkxmm0i4{margin-block-start:auto}._1dkxmm0i9{margin-block-end:var(--space-0)}._1dkxmm0ie{margin-block-end:var(--space-1)}._1dkxmm0ij{margin-block-end:var(--space-2)}._1dkxmm0io{margin-block-end:var(--space-4)}._1dkxmm0it{margin-block-end:var(--space-6)}._1dkxmm0iy{margin-block-end:var(--space-8)}._1dkxmm0j3{margin-block-end:var(--space-12)}._1dkxmm0j8{margin-block-end:var(--space-16)}._1dkxmm0jd{margin-block-end:var(--space-20)}._1dkxmm0ji{margin-block-end:var(--space-24)}._1dkxmm0jn{margin-block-end:var(--space-32)}._1dkxmm0js{margin-block-end:var(--space-40)}._1dkxmm0jx{margin-block-end:var(--space-48)}._1dkxmm0k2{margin-block-end:var(--space-64)}._1dkxmm0k7{margin-block-end:var(--space-80)}._1dkxmm0kc{margin-block-end:var(--space-96)}._1dkxmm0kh{margin-block-end:auto}._1dkxmm0km{margin-inline-start:var(--space-0)}._1dkxmm0kr{margin-inline-start:var(--space-1)}._1dkxmm0kw{margin-inline-start:var(--space-2)}._1dkxmm0l1{margin-inline-start:var(--space-4)}._1dkxmm0l6{margin-inline-start:var(--space-6)}._1dkxmm0lb{margin-inline-start:var(--space-8)}._1dkxmm0lg{margin-inline-start:var(--space-12)}._1dkxmm0ll{margin-inline-start:var(--space-16)}._1dkxmm0lq{margin-inline-start:var(--space-20)}._1dkxmm0lv{margin-inline-start:var(--space-24)}._1dkxmm0m0{margin-inline-start:var(--space-32)}._1dkxmm0m5{margin-inline-start:var(--space-40)}._1dkxmm0ma{margin-inline-start:var(--space-48)}._1dkxmm0mf{margin-inline-start:var(--space-64)}._1dkxmm0mk{margin-inline-start:var(--space-80)}._1dkxmm0mp{margin-inline-start:var(--space-96)}._1dkxmm0mu{margin-inline-start:auto}._1dkxmm0mz{margin-inline-end:var(--space-0)}._1dkxmm0n4{margin-inline-end:var(--space-1)}._1dkxmm0n9{margin-inline-end:var(--space-2)}._1dkxmm0ne{margin-inline-end:var(--space-4)}._1dkxmm0nj{margin-inline-end:var(--space-6)}._1dkxmm0no{margin-inline-end:var(--space-8)}._1dkxmm0nt{margin-inline-end:var(--space-12)}._1dkxmm0ny{margin-inline-end:var(--space-16)}._1dkxmm0o3{margin-inline-end:var(--space-20)}._1dkxmm0o8{margin-inline-end:var(--space-24)}._1dkxmm0od{margin-inline-end:var(--space-32)}._1dkxmm0oi{margin-inline-end:var(--space-40)}._1dkxmm0on{margin-inline-end:var(--space-48)}._1dkxmm0os{margin-inline-end:var(--space-64)}._1dkxmm0ox{margin-inline-end:var(--space-80)}._1dkxmm0p2{margin-inline-end:var(--space-96)}._1dkxmm0p7{margin-inline-end:auto}._1dkxmm0pc{inline-size:var(--size-xs)}._1dkxmm0ph{inline-size:var(--size-sm)}._1dkxmm0pm{inline-size:var(--size-med)}._1dkxmm0pr{inline-size:var(--size-lg)}._1dkxmm0pw{inline-size:var(--size-xl)}._1dkxmm0q1{inline-size:auto}._1dkxmm0q6{inline-size:100%}._1dkxmm0qb{inline-size:fit-content}._1dkxmm0qg{inline-size:min-content}._1dkxmm0ql{inline-size:max-content}._1dkxmm0qq{inline-size:var(--container-prose)}._1dkxmm0qv{inline-size:var(--container-page)}._1dkxmm0r0{inline-size:var(--container-wide)}._1dkxmm0r5{block-size:var(--size-xs)}._1dkxmm0ra{block-size:var(--size-sm)}._1dkxmm0rf{block-size:var(--size-med)}._1dkxmm0rk{block-size:var(--size-lg)}._1dkxmm0rp{block-size:var(--size-xl)}._1dkxmm0ru{block-size:auto}._1dkxmm0rz{block-size:100%}._1dkxmm0s4{block-size:fit-content}._1dkxmm0s9{block-size:min-content}._1dkxmm0se{block-size:max-content}._1dkxmm0sj{min-inline-size:var(--size-xs)}._1dkxmm0so{min-inline-size:var(--size-sm)}._1dkxmm0st{min-inline-size:var(--size-med)}._1dkxmm0sy{min-inline-size:var(--size-lg)}._1dkxmm0t3{min-inline-size:var(--size-xl)}._1dkxmm0t8{min-inline-size:auto}._1dkxmm0td{min-inline-size:100%}._1dkxmm0ti{min-inline-size:fit-content}._1dkxmm0tn{min-inline-size:min-content}._1dkxmm0ts{min-inline-size:max-content}._1dkxmm0tx{min-inline-size:var(--container-prose)}._1dkxmm0u2{min-inline-size:var(--container-page)}._1dkxmm0u7{min-inline-size:var(--container-wide)}._1dkxmm0uc{max-inline-size:var(--size-xs)}._1dkxmm0uh{max-inline-size:var(--size-sm)}._1dkxmm0um{max-inline-size:var(--size-med)}._1dkxmm0ur{max-inline-size:var(--size-lg)}._1dkxmm0uw{max-inline-size:var(--size-xl)}._1dkxmm0v1{max-inline-size:auto}._1dkxmm0v6{max-inline-size:100%}._1dkxmm0vb{max-inline-size:fit-content}._1dkxmm0vg{max-inline-size:min-content}._1dkxmm0vl{max-inline-size:max-content}._1dkxmm0vq{max-inline-size:var(--container-prose)}._1dkxmm0vv{max-inline-size:var(--container-page)}._1dkxmm0w0{max-inline-size:var(--container-wide)}._1dkxmm0w5{min-block-size:var(--size-xs)}._1dkxmm0wa{min-block-size:var(--size-sm)}._1dkxmm0wf{min-block-size:var(--size-med)}._1dkxmm0wk{min-block-size:var(--size-lg)}._1dkxmm0wp{min-block-size:var(--size-xl)}._1dkxmm0wu{min-block-size:auto}._1dkxmm0wz{min-block-size:100%}._1dkxmm0x4{min-block-size:fit-content}._1dkxmm0x9{min-block-size:min-content}._1dkxmm0xe{min-block-size:max-content}._1dkxmm0xj{max-block-size:var(--size-xs)}._1dkxmm0xo{max-block-size:var(--size-sm)}._1dkxmm0xt{max-block-size:var(--size-med)}._1dkxmm0xy{max-block-size:var(--size-lg)}._1dkxmm0y3{max-block-size:var(--size-xl)}._1dkxmm0y8{max-block-size:auto}._1dkxmm0yd{max-block-size:100%}._1dkxmm0yi{max-block-size:fit-content}._1dkxmm0yn{max-block-size:min-content}._1dkxmm0ys{max-block-size:max-content}}@media (width>=64em){._1dkxmm03{display:none}._1dkxmm08{display:block}._1dkxmm0d{display:inline}._1dkxmm0i{display:inline-block}._1dkxmm0n{display:flex}._1dkxmm0s{display:inline-flex}._1dkxmm0x{display:grid}._1dkxmm012{display:contents}._1dkxmm017{flex-direction:row}._1dkxmm01c{flex-direction:row-reverse}._1dkxmm01h{flex-direction:column}._1dkxmm01m{flex-direction:column-reverse}._1dkxmm01r{flex-wrap:nowrap}._1dkxmm01w{flex-wrap:wrap}._1dkxmm021{flex-grow:0}._1dkxmm026{flex-grow:1}._1dkxmm02b{flex-shrink:0}._1dkxmm02g{flex-shrink:1}._1dkxmm02l{align-items:start}._1dkxmm02q{align-items:center}._1dkxmm02v{align-items:end}._1dkxmm030{align-items:stretch}._1dkxmm035{align-items:baseline}._1dkxmm03a{align-self:start}._1dkxmm03f{align-self:center}._1dkxmm03k{align-self:end}._1dkxmm03p{align-self:stretch}._1dkxmm03u{align-self:baseline}._1dkxmm03z{justify-content:start}._1dkxmm044{justify-content:center}._1dkxmm049{justify-content:end}._1dkxmm04e{justify-content:space-between}._1dkxmm04j{justify-content:space-around}._1dkxmm04o{justify-content:space-evenly}._1dkxmm04t{gap:var(--space-0)}._1dkxmm04y{gap:var(--space-1)}._1dkxmm053{gap:var(--space-2)}._1dkxmm058{gap:var(--space-4)}._1dkxmm05d{gap:var(--space-6)}._1dkxmm05i{gap:var(--space-8)}._1dkxmm05n{gap:var(--space-12)}._1dkxmm05s{gap:var(--space-16)}._1dkxmm05x{gap:var(--space-20)}._1dkxmm062{gap:var(--space-24)}._1dkxmm067{gap:var(--space-32)}._1dkxmm06c{gap:var(--space-40)}._1dkxmm06h{gap:var(--space-48)}._1dkxmm06m{gap:var(--space-64)}._1dkxmm06r{gap:var(--space-80)}._1dkxmm06w{gap:var(--space-96)}._1dkxmm071{padding-block-start:var(--space-0)}._1dkxmm076{padding-block-start:var(--space-1)}._1dkxmm07b{padding-block-start:var(--space-2)}._1dkxmm07g{padding-block-start:var(--space-4)}._1dkxmm07l{padding-block-start:var(--space-6)}._1dkxmm07q{padding-block-start:var(--space-8)}._1dkxmm07v{padding-block-start:var(--space-12)}._1dkxmm080{padding-block-start:var(--space-16)}._1dkxmm085{padding-block-start:var(--space-20)}._1dkxmm08a{padding-block-start:var(--space-24)}._1dkxmm08f{padding-block-start:var(--space-32)}._1dkxmm08k{padding-block-start:var(--space-40)}._1dkxmm08p{padding-block-start:var(--space-48)}._1dkxmm08u{padding-block-start:var(--space-64)}._1dkxmm08z{padding-block-start:var(--space-80)}._1dkxmm094{padding-block-start:var(--space-96)}._1dkxmm099{padding-block-end:var(--space-0)}._1dkxmm09e{padding-block-end:var(--space-1)}._1dkxmm09j{padding-block-end:var(--space-2)}._1dkxmm09o{padding-block-end:var(--space-4)}._1dkxmm09t{padding-block-end:var(--space-6)}._1dkxmm09y{padding-block-end:var(--space-8)}._1dkxmm0a3{padding-block-end:var(--space-12)}._1dkxmm0a8{padding-block-end:var(--space-16)}._1dkxmm0ad{padding-block-end:var(--space-20)}._1dkxmm0ai{padding-block-end:var(--space-24)}._1dkxmm0an{padding-block-end:var(--space-32)}._1dkxmm0as{padding-block-end:var(--space-40)}._1dkxmm0ax{padding-block-end:var(--space-48)}._1dkxmm0b2{padding-block-end:var(--space-64)}._1dkxmm0b7{padding-block-end:var(--space-80)}._1dkxmm0bc{padding-block-end:var(--space-96)}._1dkxmm0bh{padding-inline-start:var(--space-0)}._1dkxmm0bm{padding-inline-start:var(--space-1)}._1dkxmm0br{padding-inline-start:var(--space-2)}._1dkxmm0bw{padding-inline-start:var(--space-4)}._1dkxmm0c1{padding-inline-start:var(--space-6)}._1dkxmm0c6{padding-inline-start:var(--space-8)}._1dkxmm0cb{padding-inline-start:var(--space-12)}._1dkxmm0cg{padding-inline-start:var(--space-16)}._1dkxmm0cl{padding-inline-start:var(--space-20)}._1dkxmm0cq{padding-inline-start:var(--space-24)}._1dkxmm0cv{padding-inline-start:var(--space-32)}._1dkxmm0d0{padding-inline-start:var(--space-40)}._1dkxmm0d5{padding-inline-start:var(--space-48)}._1dkxmm0da{padding-inline-start:var(--space-64)}._1dkxmm0df{padding-inline-start:var(--space-80)}._1dkxmm0dk{padding-inline-start:var(--space-96)}._1dkxmm0dp{padding-inline-end:var(--space-0)}._1dkxmm0du{padding-inline-end:var(--space-1)}._1dkxmm0dz{padding-inline-end:var(--space-2)}._1dkxmm0e4{padding-inline-end:var(--space-4)}._1dkxmm0e9{padding-inline-end:var(--space-6)}._1dkxmm0ee{padding-inline-end:var(--space-8)}._1dkxmm0ej{padding-inline-end:var(--space-12)}._1dkxmm0eo{padding-inline-end:var(--space-16)}._1dkxmm0et{padding-inline-end:var(--space-20)}._1dkxmm0ey{padding-inline-end:var(--space-24)}._1dkxmm0f3{padding-inline-end:var(--space-32)}._1dkxmm0f8{padding-inline-end:var(--space-40)}._1dkxmm0fd{padding-inline-end:var(--space-48)}._1dkxmm0fi{padding-inline-end:var(--space-64)}._1dkxmm0fn{padding-inline-end:var(--space-80)}._1dkxmm0fs{padding-inline-end:var(--space-96)}._1dkxmm0fx{margin-block-start:var(--space-0)}._1dkxmm0g2{margin-block-start:var(--space-1)}._1dkxmm0g7{margin-block-start:var(--space-2)}._1dkxmm0gc{margin-block-start:var(--space-4)}._1dkxmm0gh{margin-block-start:var(--space-6)}._1dkxmm0gm{margin-block-start:var(--space-8)}._1dkxmm0gr{margin-block-start:var(--space-12)}._1dkxmm0gw{margin-block-start:var(--space-16)}._1dkxmm0h1{margin-block-start:var(--space-20)}._1dkxmm0h6{margin-block-start:var(--space-24)}._1dkxmm0hb{margin-block-start:var(--space-32)}._1dkxmm0hg{margin-block-start:var(--space-40)}._1dkxmm0hl{margin-block-start:var(--space-48)}._1dkxmm0hq{margin-block-start:var(--space-64)}._1dkxmm0hv{margin-block-start:var(--space-80)}._1dkxmm0i0{margin-block-start:var(--space-96)}._1dkxmm0i5{margin-block-start:auto}._1dkxmm0ia{margin-block-end:var(--space-0)}._1dkxmm0if{margin-block-end:var(--space-1)}._1dkxmm0ik{margin-block-end:var(--space-2)}._1dkxmm0ip{margin-block-end:var(--space-4)}._1dkxmm0iu{margin-block-end:var(--space-6)}._1dkxmm0iz{margin-block-end:var(--space-8)}._1dkxmm0j4{margin-block-end:var(--space-12)}._1dkxmm0j9{margin-block-end:var(--space-16)}._1dkxmm0je{margin-block-end:var(--space-20)}._1dkxmm0jj{margin-block-end:var(--space-24)}._1dkxmm0jo{margin-block-end:var(--space-32)}._1dkxmm0jt{margin-block-end:var(--space-40)}._1dkxmm0jy{margin-block-end:var(--space-48)}._1dkxmm0k3{margin-block-end:var(--space-64)}._1dkxmm0k8{margin-block-end:var(--space-80)}._1dkxmm0kd{margin-block-end:var(--space-96)}._1dkxmm0ki{margin-block-end:auto}._1dkxmm0kn{margin-inline-start:var(--space-0)}._1dkxmm0ks{margin-inline-start:var(--space-1)}._1dkxmm0kx{margin-inline-start:var(--space-2)}._1dkxmm0l2{margin-inline-start:var(--space-4)}._1dkxmm0l7{margin-inline-start:var(--space-6)}._1dkxmm0lc{margin-inline-start:var(--space-8)}._1dkxmm0lh{margin-inline-start:var(--space-12)}._1dkxmm0lm{margin-inline-start:var(--space-16)}._1dkxmm0lr{margin-inline-start:var(--space-20)}._1dkxmm0lw{margin-inline-start:var(--space-24)}._1dkxmm0m1{margin-inline-start:var(--space-32)}._1dkxmm0m6{margin-inline-start:var(--space-40)}._1dkxmm0mb{margin-inline-start:var(--space-48)}._1dkxmm0mg{margin-inline-start:var(--space-64)}._1dkxmm0ml{margin-inline-start:var(--space-80)}._1dkxmm0mq{margin-inline-start:var(--space-96)}._1dkxmm0mv{margin-inline-start:auto}._1dkxmm0n0{margin-inline-end:var(--space-0)}._1dkxmm0n5{margin-inline-end:var(--space-1)}._1dkxmm0na{margin-inline-end:var(--space-2)}._1dkxmm0nf{margin-inline-end:var(--space-4)}._1dkxmm0nk{margin-inline-end:var(--space-6)}._1dkxmm0np{margin-inline-end:var(--space-8)}._1dkxmm0nu{margin-inline-end:var(--space-12)}._1dkxmm0nz{margin-inline-end:var(--space-16)}._1dkxmm0o4{margin-inline-end:var(--space-20)}._1dkxmm0o9{margin-inline-end:var(--space-24)}._1dkxmm0oe{margin-inline-end:var(--space-32)}._1dkxmm0oj{margin-inline-end:var(--space-40)}._1dkxmm0oo{margin-inline-end:var(--space-48)}._1dkxmm0ot{margin-inline-end:var(--space-64)}._1dkxmm0oy{margin-inline-end:var(--space-80)}._1dkxmm0p3{margin-inline-end:var(--space-96)}._1dkxmm0p8{margin-inline-end:auto}._1dkxmm0pd{inline-size:var(--size-xs)}._1dkxmm0pi{inline-size:var(--size-sm)}._1dkxmm0pn{inline-size:var(--size-med)}._1dkxmm0ps{inline-size:var(--size-lg)}._1dkxmm0px{inline-size:var(--size-xl)}._1dkxmm0q2{inline-size:auto}._1dkxmm0q7{inline-size:100%}._1dkxmm0qc{inline-size:fit-content}._1dkxmm0qh{inline-size:min-content}._1dkxmm0qm{inline-size:max-content}._1dkxmm0qr{inline-size:var(--container-prose)}._1dkxmm0qw{inline-size:var(--container-page)}._1dkxmm0r1{inline-size:var(--container-wide)}._1dkxmm0r6{block-size:var(--size-xs)}._1dkxmm0rb{block-size:var(--size-sm)}._1dkxmm0rg{block-size:var(--size-med)}._1dkxmm0rl{block-size:var(--size-lg)}._1dkxmm0rq{block-size:var(--size-xl)}._1dkxmm0rv{block-size:auto}._1dkxmm0s0{block-size:100%}._1dkxmm0s5{block-size:fit-content}._1dkxmm0sa{block-size:min-content}._1dkxmm0sf{block-size:max-content}._1dkxmm0sk{min-inline-size:var(--size-xs)}._1dkxmm0sp{min-inline-size:var(--size-sm)}._1dkxmm0su{min-inline-size:var(--size-med)}._1dkxmm0sz{min-inline-size:var(--size-lg)}._1dkxmm0t4{min-inline-size:var(--size-xl)}._1dkxmm0t9{min-inline-size:auto}._1dkxmm0te{min-inline-size:100%}._1dkxmm0tj{min-inline-size:fit-content}._1dkxmm0to{min-inline-size:min-content}._1dkxmm0tt{min-inline-size:max-content}._1dkxmm0ty{min-inline-size:var(--container-prose)}._1dkxmm0u3{min-inline-size:var(--container-page)}._1dkxmm0u8{min-inline-size:var(--container-wide)}._1dkxmm0ud{max-inline-size:var(--size-xs)}._1dkxmm0ui{max-inline-size:var(--size-sm)}._1dkxmm0un{max-inline-size:var(--size-med)}._1dkxmm0us{max-inline-size:var(--size-lg)}._1dkxmm0ux{max-inline-size:var(--size-xl)}._1dkxmm0v2{max-inline-size:auto}._1dkxmm0v7{max-inline-size:100%}._1dkxmm0vc{max-inline-size:fit-content}._1dkxmm0vh{max-inline-size:min-content}._1dkxmm0vm{max-inline-size:max-content}._1dkxmm0vr{max-inline-size:var(--container-prose)}._1dkxmm0vw{max-inline-size:var(--container-page)}._1dkxmm0w1{max-inline-size:var(--container-wide)}._1dkxmm0w6{min-block-size:var(--size-xs)}._1dkxmm0wb{min-block-size:var(--size-sm)}._1dkxmm0wg{min-block-size:var(--size-med)}._1dkxmm0wl{min-block-size:var(--size-lg)}._1dkxmm0wq{min-block-size:var(--size-xl)}._1dkxmm0wv{min-block-size:auto}._1dkxmm0x0{min-block-size:100%}._1dkxmm0x5{min-block-size:fit-content}._1dkxmm0xa{min-block-size:min-content}._1dkxmm0xf{min-block-size:max-content}._1dkxmm0xk{max-block-size:var(--size-xs)}._1dkxmm0xp{max-block-size:var(--size-sm)}._1dkxmm0xu{max-block-size:var(--size-med)}._1dkxmm0xz{max-block-size:var(--size-lg)}._1dkxmm0y4{max-block-size:var(--size-xl)}._1dkxmm0y9{max-block-size:auto}._1dkxmm0ye{max-block-size:100%}._1dkxmm0yj{max-block-size:fit-content}._1dkxmm0yo{max-block-size:min-content}._1dkxmm0yt{max-block-size:max-content}}@media (width>=80em){._1dkxmm04{display:none}._1dkxmm09{display:block}._1dkxmm0e{display:inline}._1dkxmm0j{display:inline-block}._1dkxmm0o{display:flex}._1dkxmm0t{display:inline-flex}._1dkxmm0y{display:grid}._1dkxmm013{display:contents}._1dkxmm018{flex-direction:row}._1dkxmm01d{flex-direction:row-reverse}._1dkxmm01i{flex-direction:column}._1dkxmm01n{flex-direction:column-reverse}._1dkxmm01s{flex-wrap:nowrap}._1dkxmm01x{flex-wrap:wrap}._1dkxmm022{flex-grow:0}._1dkxmm027{flex-grow:1}._1dkxmm02c{flex-shrink:0}._1dkxmm02h{flex-shrink:1}._1dkxmm02m{align-items:start}._1dkxmm02r{align-items:center}._1dkxmm02w{align-items:end}._1dkxmm031{align-items:stretch}._1dkxmm036{align-items:baseline}._1dkxmm03b{align-self:start}._1dkxmm03g{align-self:center}._1dkxmm03l{align-self:end}._1dkxmm03q{align-self:stretch}._1dkxmm03v{align-self:baseline}._1dkxmm040{justify-content:start}._1dkxmm045{justify-content:center}._1dkxmm04a{justify-content:end}._1dkxmm04f{justify-content:space-between}._1dkxmm04k{justify-content:space-around}._1dkxmm04p{justify-content:space-evenly}._1dkxmm04u{gap:var(--space-0)}._1dkxmm04z{gap:var(--space-1)}._1dkxmm054{gap:var(--space-2)}._1dkxmm059{gap:var(--space-4)}._1dkxmm05e{gap:var(--space-6)}._1dkxmm05j{gap:var(--space-8)}._1dkxmm05o{gap:var(--space-12)}._1dkxmm05t{gap:var(--space-16)}._1dkxmm05y{gap:var(--space-20)}._1dkxmm063{gap:var(--space-24)}._1dkxmm068{gap:var(--space-32)}._1dkxmm06d{gap:var(--space-40)}._1dkxmm06i{gap:var(--space-48)}._1dkxmm06n{gap:var(--space-64)}._1dkxmm06s{gap:var(--space-80)}._1dkxmm06x{gap:var(--space-96)}._1dkxmm072{padding-block-start:var(--space-0)}._1dkxmm077{padding-block-start:var(--space-1)}._1dkxmm07c{padding-block-start:var(--space-2)}._1dkxmm07h{padding-block-start:var(--space-4)}._1dkxmm07m{padding-block-start:var(--space-6)}._1dkxmm07r{padding-block-start:var(--space-8)}._1dkxmm07w{padding-block-start:var(--space-12)}._1dkxmm081{padding-block-start:var(--space-16)}._1dkxmm086{padding-block-start:var(--space-20)}._1dkxmm08b{padding-block-start:var(--space-24)}._1dkxmm08g{padding-block-start:var(--space-32)}._1dkxmm08l{padding-block-start:var(--space-40)}._1dkxmm08q{padding-block-start:var(--space-48)}._1dkxmm08v{padding-block-start:var(--space-64)}._1dkxmm090{padding-block-start:var(--space-80)}._1dkxmm095{padding-block-start:var(--space-96)}._1dkxmm09a{padding-block-end:var(--space-0)}._1dkxmm09f{padding-block-end:var(--space-1)}._1dkxmm09k{padding-block-end:var(--space-2)}._1dkxmm09p{padding-block-end:var(--space-4)}._1dkxmm09u{padding-block-end:var(--space-6)}._1dkxmm09z{padding-block-end:var(--space-8)}._1dkxmm0a4{padding-block-end:var(--space-12)}._1dkxmm0a9{padding-block-end:var(--space-16)}._1dkxmm0ae{padding-block-end:var(--space-20)}._1dkxmm0aj{padding-block-end:var(--space-24)}._1dkxmm0ao{padding-block-end:var(--space-32)}._1dkxmm0at{padding-block-end:var(--space-40)}._1dkxmm0ay{padding-block-end:var(--space-48)}._1dkxmm0b3{padding-block-end:var(--space-64)}._1dkxmm0b8{padding-block-end:var(--space-80)}._1dkxmm0bd{padding-block-end:var(--space-96)}._1dkxmm0bi{padding-inline-start:var(--space-0)}._1dkxmm0bn{padding-inline-start:var(--space-1)}._1dkxmm0bs{padding-inline-start:var(--space-2)}._1dkxmm0bx{padding-inline-start:var(--space-4)}._1dkxmm0c2{padding-inline-start:var(--space-6)}._1dkxmm0c7{padding-inline-start:var(--space-8)}._1dkxmm0cc{padding-inline-start:var(--space-12)}._1dkxmm0ch{padding-inline-start:var(--space-16)}._1dkxmm0cm{padding-inline-start:var(--space-20)}._1dkxmm0cr{padding-inline-start:var(--space-24)}._1dkxmm0cw{padding-inline-start:var(--space-32)}._1dkxmm0d1{padding-inline-start:var(--space-40)}._1dkxmm0d6{padding-inline-start:var(--space-48)}._1dkxmm0db{padding-inline-start:var(--space-64)}._1dkxmm0dg{padding-inline-start:var(--space-80)}._1dkxmm0dl{padding-inline-start:var(--space-96)}._1dkxmm0dq{padding-inline-end:var(--space-0)}._1dkxmm0dv{padding-inline-end:var(--space-1)}._1dkxmm0e0{padding-inline-end:var(--space-2)}._1dkxmm0e5{padding-inline-end:var(--space-4)}._1dkxmm0ea{padding-inline-end:var(--space-6)}._1dkxmm0ef{padding-inline-end:var(--space-8)}._1dkxmm0ek{padding-inline-end:var(--space-12)}._1dkxmm0ep{padding-inline-end:var(--space-16)}._1dkxmm0eu{padding-inline-end:var(--space-20)}._1dkxmm0ez{padding-inline-end:var(--space-24)}._1dkxmm0f4{padding-inline-end:var(--space-32)}._1dkxmm0f9{padding-inline-end:var(--space-40)}._1dkxmm0fe{padding-inline-end:var(--space-48)}._1dkxmm0fj{padding-inline-end:var(--space-64)}._1dkxmm0fo{padding-inline-end:var(--space-80)}._1dkxmm0ft{padding-inline-end:var(--space-96)}._1dkxmm0fy{margin-block-start:var(--space-0)}._1dkxmm0g3{margin-block-start:var(--space-1)}._1dkxmm0g8{margin-block-start:var(--space-2)}._1dkxmm0gd{margin-block-start:var(--space-4)}._1dkxmm0gi{margin-block-start:var(--space-6)}._1dkxmm0gn{margin-block-start:var(--space-8)}._1dkxmm0gs{margin-block-start:var(--space-12)}._1dkxmm0gx{margin-block-start:var(--space-16)}._1dkxmm0h2{margin-block-start:var(--space-20)}._1dkxmm0h7{margin-block-start:var(--space-24)}._1dkxmm0hc{margin-block-start:var(--space-32)}._1dkxmm0hh{margin-block-start:var(--space-40)}._1dkxmm0hm{margin-block-start:var(--space-48)}._1dkxmm0hr{margin-block-start:var(--space-64)}._1dkxmm0hw{margin-block-start:var(--space-80)}._1dkxmm0i1{margin-block-start:var(--space-96)}._1dkxmm0i6{margin-block-start:auto}._1dkxmm0ib{margin-block-end:var(--space-0)}._1dkxmm0ig{margin-block-end:var(--space-1)}._1dkxmm0il{margin-block-end:var(--space-2)}._1dkxmm0iq{margin-block-end:var(--space-4)}._1dkxmm0iv{margin-block-end:var(--space-6)}._1dkxmm0j0{margin-block-end:var(--space-8)}._1dkxmm0j5{margin-block-end:var(--space-12)}._1dkxmm0ja{margin-block-end:var(--space-16)}._1dkxmm0jf{margin-block-end:var(--space-20)}._1dkxmm0jk{margin-block-end:var(--space-24)}._1dkxmm0jp{margin-block-end:var(--space-32)}._1dkxmm0ju{margin-block-end:var(--space-40)}._1dkxmm0jz{margin-block-end:var(--space-48)}._1dkxmm0k4{margin-block-end:var(--space-64)}._1dkxmm0k9{margin-block-end:var(--space-80)}._1dkxmm0ke{margin-block-end:var(--space-96)}._1dkxmm0kj{margin-block-end:auto}._1dkxmm0ko{margin-inline-start:var(--space-0)}._1dkxmm0kt{margin-inline-start:var(--space-1)}._1dkxmm0ky{margin-inline-start:var(--space-2)}._1dkxmm0l3{margin-inline-start:var(--space-4)}._1dkxmm0l8{margin-inline-start:var(--space-6)}._1dkxmm0ld{margin-inline-start:var(--space-8)}._1dkxmm0li{margin-inline-start:var(--space-12)}._1dkxmm0ln{margin-inline-start:var(--space-16)}._1dkxmm0ls{margin-inline-start:var(--space-20)}._1dkxmm0lx{margin-inline-start:var(--space-24)}._1dkxmm0m2{margin-inline-start:var(--space-32)}._1dkxmm0m7{margin-inline-start:var(--space-40)}._1dkxmm0mc{margin-inline-start:var(--space-48)}._1dkxmm0mh{margin-inline-start:var(--space-64)}._1dkxmm0mm{margin-inline-start:var(--space-80)}._1dkxmm0mr{margin-inline-start:var(--space-96)}._1dkxmm0mw{margin-inline-start:auto}._1dkxmm0n1{margin-inline-end:var(--space-0)}._1dkxmm0n6{margin-inline-end:var(--space-1)}._1dkxmm0nb{margin-inline-end:var(--space-2)}._1dkxmm0ng{margin-inline-end:var(--space-4)}._1dkxmm0nl{margin-inline-end:var(--space-6)}._1dkxmm0nq{margin-inline-end:var(--space-8)}._1dkxmm0nv{margin-inline-end:var(--space-12)}._1dkxmm0o0{margin-inline-end:var(--space-16)}._1dkxmm0o5{margin-inline-end:var(--space-20)}._1dkxmm0oa{margin-inline-end:var(--space-24)}._1dkxmm0of{margin-inline-end:var(--space-32)}._1dkxmm0ok{margin-inline-end:var(--space-40)}._1dkxmm0op{margin-inline-end:var(--space-48)}._1dkxmm0ou{margin-inline-end:var(--space-64)}._1dkxmm0oz{margin-inline-end:var(--space-80)}._1dkxmm0p4{margin-inline-end:var(--space-96)}._1dkxmm0p9{margin-inline-end:auto}._1dkxmm0pe{inline-size:var(--size-xs)}._1dkxmm0pj{inline-size:var(--size-sm)}._1dkxmm0po{inline-size:var(--size-med)}._1dkxmm0pt{inline-size:var(--size-lg)}._1dkxmm0py{inline-size:var(--size-xl)}._1dkxmm0q3{inline-size:auto}._1dkxmm0q8{inline-size:100%}._1dkxmm0qd{inline-size:fit-content}._1dkxmm0qi{inline-size:min-content}._1dkxmm0qn{inline-size:max-content}._1dkxmm0qs{inline-size:var(--container-prose)}._1dkxmm0qx{inline-size:var(--container-page)}._1dkxmm0r2{inline-size:var(--container-wide)}._1dkxmm0r7{block-size:var(--size-xs)}._1dkxmm0rc{block-size:var(--size-sm)}._1dkxmm0rh{block-size:var(--size-med)}._1dkxmm0rm{block-size:var(--size-lg)}._1dkxmm0rr{block-size:var(--size-xl)}._1dkxmm0rw{block-size:auto}._1dkxmm0s1{block-size:100%}._1dkxmm0s6{block-size:fit-content}._1dkxmm0sb{block-size:min-content}._1dkxmm0sg{block-size:max-content}._1dkxmm0sl{min-inline-size:var(--size-xs)}._1dkxmm0sq{min-inline-size:var(--size-sm)}._1dkxmm0sv{min-inline-size:var(--size-med)}._1dkxmm0t0{min-inline-size:var(--size-lg)}._1dkxmm0t5{min-inline-size:var(--size-xl)}._1dkxmm0ta{min-inline-size:auto}._1dkxmm0tf{min-inline-size:100%}._1dkxmm0tk{min-inline-size:fit-content}._1dkxmm0tp{min-inline-size:min-content}._1dkxmm0tu{min-inline-size:max-content}._1dkxmm0tz{min-inline-size:var(--container-prose)}._1dkxmm0u4{min-inline-size:var(--container-page)}._1dkxmm0u9{min-inline-size:var(--container-wide)}._1dkxmm0ue{max-inline-size:var(--size-xs)}._1dkxmm0uj{max-inline-size:var(--size-sm)}._1dkxmm0uo{max-inline-size:var(--size-med)}._1dkxmm0ut{max-inline-size:var(--size-lg)}._1dkxmm0uy{max-inline-size:var(--size-xl)}._1dkxmm0v3{max-inline-size:auto}._1dkxmm0v8{max-inline-size:100%}._1dkxmm0vd{max-inline-size:fit-content}._1dkxmm0vi{max-inline-size:min-content}._1dkxmm0vn{max-inline-size:max-content}._1dkxmm0vs{max-inline-size:var(--container-prose)}._1dkxmm0vx{max-inline-size:var(--container-page)}._1dkxmm0w2{max-inline-size:var(--container-wide)}._1dkxmm0w7{min-block-size:var(--size-xs)}._1dkxmm0wc{min-block-size:var(--size-sm)}._1dkxmm0wh{min-block-size:var(--size-med)}._1dkxmm0wm{min-block-size:var(--size-lg)}._1dkxmm0wr{min-block-size:var(--size-xl)}._1dkxmm0ww{min-block-size:auto}._1dkxmm0x1{min-block-size:100%}._1dkxmm0x6{min-block-size:fit-content}._1dkxmm0xb{min-block-size:min-content}._1dkxmm0xg{min-block-size:max-content}._1dkxmm0xl{max-block-size:var(--size-xs)}._1dkxmm0xq{max-block-size:var(--size-sm)}._1dkxmm0xv{max-block-size:var(--size-med)}._1dkxmm0y0{max-block-size:var(--size-lg)}._1dkxmm0y5{max-block-size:var(--size-xl)}._1dkxmm0ya{max-block-size:auto}._1dkxmm0yf{max-block-size:100%}._1dkxmm0yk{max-block-size:fit-content}._1dkxmm0yp{max-block-size:min-content}._1dkxmm0yu{max-block-size:max-content}}}
|
package/dist/styles/layers.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer tokens,reset,atoms,components;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jonmilner/ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"THIRD_PARTY_NOTICES.md"
|
|
@@ -102,6 +102,10 @@
|
|
|
102
102
|
"types": "./dist/Tag/index.d.mts",
|
|
103
103
|
"default": "./dist/Tag/index.mjs"
|
|
104
104
|
},
|
|
105
|
+
"./TextField": {
|
|
106
|
+
"types": "./dist/TextField/index.d.mts",
|
|
107
|
+
"default": "./dist/TextField/index.mjs"
|
|
108
|
+
},
|
|
105
109
|
"./icons": {
|
|
106
110
|
"types": "./dist/icons/index.d.mts",
|
|
107
111
|
"default": "./dist/icons/index.mjs"
|
|
@@ -162,6 +166,7 @@
|
|
|
162
166
|
"typecheck": "tsc -p tsconfig.json",
|
|
163
167
|
"test": "playwright install --only-shell chromium && vp test run",
|
|
164
168
|
"metrics": "node scripts/import-styles.ts",
|
|
169
|
+
"metrics:atoms": "node scripts/atoms-usage.ts",
|
|
165
170
|
"size": "size-limit",
|
|
166
171
|
"size:history": "node scripts/size-history.ts",
|
|
167
172
|
"check:publint": "publint --strict",
|