@m3-baseui/react-vanilla-extract 1.4.0 → 2.0.0

package/dist/index.js

@@ -1,53 +1,53 @@
 "use client";
 import './index.css';
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, cx, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
+import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, cx, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
 export { ITEM_LEADING_VARIANTS, LIST_LEADING_VARIANTS, Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-// src/button.ts
-var button = createRuntimeFn({ defaultClassName: "_1pz31tl0", variantClassNames: { variant: { filled: "_1pz31tl1", tonal: "_1pz31tl2", outlined: "_1pz31tl3", elevated: "_1pz31tl4", text: "_1pz31tl5" } }, defaultVariants: { variant: "filled" }, compoundVariants: [] });
+// src/components/button/button.ts
+var button = createRuntimeFn({ defaultClassName: "_1kd1ms00", variantClassNames: { variant: { filled: "_1kd1ms01", tonal: "_1kd1ms02", outlined: "_1kd1ms03", elevated: "_1kd1ms04", text: "_1kd1ms05" } }, defaultVariants: { variant: "filled" }, compoundVariants: [] });
 
-// src/button.ts
+// src/components/button/button.ts
 var Button = createButton(({ variant }) => button({ variant }));
-var iconButton = createRuntimeFn({ defaultClassName: "_123n98o5", variantClassNames: { variant: { standard: "_123n98o6", filled: "_123n98o7", tonal: "_123n98o8", outlined: "_123n98o9" }, selected: { true: "_123n98oa", false: "_123n98ob" }, size: { xs: "_123n98o0", s: "_123n98o1", m: "_123n98o2", l: "_123n98o3", xl: "_123n98o4" }, width: { narrow: "_123n98oh", "default": "_123n98oi", wide: "_123n98oj" } }, defaultVariants: { variant: "standard", size: "s", width: "default" }, compoundVariants: [[{ size: "xs", width: "narrow" }, "_123n98ok"], [{ size: "xs", width: "default" }, "_123n98ol"], [{ size: "xs", width: "wide" }, "_123n98om"], [{ size: "s", width: "narrow" }, "_123n98on"], [{ size: "s", width: "default" }, "_123n98oo"], [{ size: "s", width: "wide" }, "_123n98op"], [{ size: "m", width: "narrow" }, "_123n98oq"], [{ size: "m", width: "default" }, "_123n98or"], [{ size: "m", width: "wide" }, "_123n98os"], [{ size: "l", width: "narrow" }, "_123n98ot"], [{ size: "l", width: "default" }, "_123n98ou"], [{ size: "l", width: "wide" }, "_123n98ov"], [{ size: "xl", width: "narrow" }, "_123n98ow"], [{ size: "xl", width: "default" }, "_123n98ox"], [{ size: "xl", width: "wide" }, "_123n98oy"], [{ variant: "standard", selected: true }, "_123n98oz"], [{ variant: "filled", selected: false }, "_123n98o10"], [{ variant: "tonal", selected: false }, "_123n98o11"], [{ variant: "outlined", selected: true }, "_123n98o12"]] });
+var iconButton = createRuntimeFn({ defaultClassName: "_1k5uet55", variantClassNames: { variant: { standard: "_1k5uet56", filled: "_1k5uet57", tonal: "_1k5uet58", outlined: "_1k5uet59" }, selected: { true: "_1k5uet5a", false: "_1k5uet5b" }, size: { xs: "_1k5uet50", s: "_1k5uet51", m: "_1k5uet52", l: "_1k5uet53", xl: "_1k5uet54" }, width: { narrow: "_1k5uet5h", "default": "_1k5uet5i", wide: "_1k5uet5j" } }, defaultVariants: { variant: "standard", size: "s", width: "default" }, compoundVariants: [[{ size: "xs", width: "narrow" }, "_1k5uet5k"], [{ size: "xs", width: "default" }, "_1k5uet5l"], [{ size: "xs", width: "wide" }, "_1k5uet5m"], [{ size: "s", width: "narrow" }, "_1k5uet5n"], [{ size: "s", width: "default" }, "_1k5uet5o"], [{ size: "s", width: "wide" }, "_1k5uet5p"], [{ size: "m", width: "narrow" }, "_1k5uet5q"], [{ size: "m", width: "default" }, "_1k5uet5r"], [{ size: "m", width: "wide" }, "_1k5uet5s"], [{ size: "l", width: "narrow" }, "_1k5uet5t"], [{ size: "l", width: "default" }, "_1k5uet5u"], [{ size: "l", width: "wide" }, "_1k5uet5v"], [{ size: "xl", width: "narrow" }, "_1k5uet5w"], [{ size: "xl", width: "default" }, "_1k5uet5x"], [{ size: "xl", width: "wide" }, "_1k5uet5y"], [{ variant: "standard", selected: true }, "_1k5uet5z"], [{ variant: "filled", selected: false }, "_1k5uet510"], [{ variant: "tonal", selected: false }, "_1k5uet511"], [{ variant: "outlined", selected: true }, "_1k5uet512"]] });
 
-// src/icon-button.ts
+// src/components/icon-button/icon-button.ts
 var IconButton = createIconButton(
   ({ variant, selected, size, width }) => iconButton({ variant, selected, size, width })
 );
 
-// src/switch.css.ts
-var iconChecked = "b1i7f82";
-var iconUnchecked = "b1i7f83";
-var root = "b1i7f80";
-var thumb = "b1i7f81";
+// src/components/switch/switch.css.ts
+var iconChecked = "_1cdfdw02";
+var iconUnchecked = "_1cdfdw03";
+var root = "_1cdfdw00";
+var thumb = "_1cdfdw01";
 
-// src/switch.ts
+// src/components/switch/switch.ts
 var Switch = createSwitch({ root, thumb, iconChecked, iconUnchecked });
 
-// src/checkbox.css.ts
-var icon = "_1h6eon52";
-var indicator = "_1h6eon51";
-var root2 = "_1h6eon50";
+// src/components/checkbox/checkbox.css.ts
+var icon = "ur4v6t2";
+var indicator = "ur4v6t1";
+var root2 = "ur4v6t0";
 
-// src/checkbox.ts
+// src/components/checkbox/checkbox.ts
 var Checkbox = createCheckbox({ root: root2, indicator, icon });
 
-// src/radio.css.ts
-var group = "_3yfmj82";
-var indicator2 = "_3yfmj81";
-var root3 = "_3yfmj80";
+// src/components/radio/radio.css.ts
+var group = "_1q60te62";
+var indicator2 = "_1q60te61";
+var root3 = "_1q60te60";
 
-// src/radio.ts
+// src/components/radio/radio.ts
 var Radio = createRadio({ root: root3, indicator: indicator2 });
 var RadioGroup = createRadioGroup(group);
-var avatar = "_1sqif107";
-var check = "_1sqif100";
-var chip = createRuntimeFn({ defaultClassName: "_1sqif101", variantClassNames: { variant: { assist: "_1sqif102", suggestion: "_1sqif103", input: "_1sqif104", filter: "_1sqif105" }, elevated: { true: "_1sqif106" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
-var icon2 = createRuntimeFn({ defaultClassName: "_1sqif108", variantClassNames: { variant: { assist: "_1sqif109", suggestion: "_1sqif10a", input: "_1sqif10b", filter: "_1sqif10c" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
-var remove = "_1sqif10d";
+var avatar = "_1140317";
+var check = "_1140310";
+var chip = createRuntimeFn({ defaultClassName: "_1140311", variantClassNames: { variant: { assist: "_1140312", suggestion: "_1140313", input: "_1140314", filter: "_1140315" }, elevated: { true: "_1140316" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
+var icon2 = createRuntimeFn({ defaultClassName: "_1140318", variantClassNames: { variant: { assist: "_1140319", suggestion: "_114031a", input: "_114031b", filter: "_114031c" } }, defaultVariants: { variant: "assist" }, compoundVariants: [] });
+var remove = "_114031d";
 
-// src/chip.ts
+// src/components/chip/chip.ts
 var Chip = createChip(({ variant, elevated }) => ({
   root: chip({ variant, elevated }),
   remove,
@@ -56,16 +56,16 @@ var Chip = createChip(({ variant, elevated }) => ({
   icon: icon2({ variant })
 }));
 
-// src/tooltip.css.ts
-var actions = "_18z37wz6";
-var arrow = "_18z37wz1";
-var popup = "_18z37wz0";
-var richArrow = "_18z37wz3";
-var richPopup = "_18z37wz2";
-var subhead = "_18z37wz4";
-var supportingText = "_18z37wz5";
+// src/components/tooltip/tooltip.css.ts
+var actions = "rfvalm6";
+var arrow = "rfvalm1";
+var popup = "rfvalm0";
+var richArrow = "rfvalm3";
+var richPopup = "rfvalm2";
+var subhead = "rfvalm4";
+var supportingText = "rfvalm5";
 
-// src/tooltip.ts
+// src/components/tooltip/tooltip.ts
 var Tooltip = createTooltip({ popup, arrow });
 var RichTooltip = createRichTooltip({
   popup: richPopup,
@@ -75,19 +75,19 @@ var RichTooltip = createRichTooltip({
   actions
 });
 
-// src/dialog.css.ts
-var actions2 = "_1x88mtg9";
-var backdrop = "_1x88mtg0";
-var close = "_1x88mtga";
-var description = "_1x88mtg7";
-var divider = "_1x88mtg8";
-var header = "_1x88mtg4";
-var icon3 = "_1x88mtg5";
-var popupBasic = "_1x88mtg2 _1x88mtg1";
-var popupFullscreen = "_1x88mtg3 _1x88mtg1";
-var title = "_1x88mtg6";
-
-// src/dialog.ts
+// src/components/dialog/dialog.css.ts
+var actions2 = "_3juy6f9";
+var backdrop = "_3juy6f0";
+var close = "_3juy6fa";
+var description = "_3juy6f7";
+var divider = "_3juy6f8";
+var header = "_3juy6f4";
+var icon3 = "_3juy6f5";
+var popupBasic = "_3juy6f2 _3juy6f1";
+var popupFullscreen = "_3juy6f3 _3juy6f1";
+var title = "_3juy6f6";
+
+// src/components/dialog/dialog.ts
 var Dialog = createDialog({
   backdrop,
   popup: ({ fullscreen }) => fullscreen ? popupFullscreen : popupBasic,
@@ -100,17 +100,17 @@ var Dialog = createDialog({
   close
 });
 
-// src/menu.css.ts
-var checkboxItem = "_1r1oyqt6";
-var groupLabel = "_1r1oyqt3";
-var item = "_1r1oyqt1";
-var itemIndicator = "_1r1oyqt5";
-var popup2 = "_1r1oyqt0";
-var radioItem = "_1r1oyqt7";
-var separator = "_1r1oyqt2";
-var submenuTrigger = "_1r1oyqt4";
-
-// src/menu.ts
+// src/components/menu/menu.css.ts
+var checkboxItem = "_1fs19uv1";
+var groupLabel = "_1del1lt2";
+var item = "_17bsuxr0";
+var itemIndicator = "_1fs19uv2";
+var popup2 = "_1del1lt0";
+var radioItem = "_1fs19uv1";
+var separator = "_17bsuxr1";
+var submenuTrigger = "_17bsuxr2";
+
+// src/components/menu/menu.ts
 var Menu = createMenu({
   popup: popup2,
   item,
@@ -121,13 +121,13 @@ var Menu = createMenu({
   radioItem,
   itemIndicator
 });
-var indicator3 = createRuntimeFn({ defaultClassName: "_3vr6xb5", variantClassNames: { variant: { primary: "_3vr6xb6", secondary: "_3vr6xb7" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
-var list = "_3vr6xb1";
-var panel = "_3vr6xb8";
-var root4 = "_3vr6xb0";
-var tab = createRuntimeFn({ defaultClassName: "_3vr6xb2", variantClassNames: { variant: { primary: "_3vr6xb3", secondary: "_3vr6xb4" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
+var indicator3 = createRuntimeFn({ defaultClassName: "_1it3wlb5", variantClassNames: { variant: { primary: "_1it3wlb6", secondary: "_1it3wlb7" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
+var list = "_1it3wlb1";
+var panel = "_1it3wlb8";
+var root4 = "_1it3wlb0";
+var tab = createRuntimeFn({ defaultClassName: "_1it3wlb2", variantClassNames: { variant: { primary: "_1it3wlb3", secondary: "_1it3wlb4" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
 
-// src/tabs.ts
+// src/components/tabs/tabs.ts
 var Tabs = createTabs((variant) => ({
   root: root4,
   list,
@@ -136,18 +136,18 @@ var Tabs = createTabs((variant) => ({
   panel
 }));
 
-// src/slider.css.ts
-var control = "_52wif31";
-var indicator4 = "_52wif33";
-var root5 = "_52wif30";
-var thumb2 = "_52wif34";
-var tick = "_52wif37";
-var tickList = "_52wif36";
-var track = "_52wif32";
-var value = "_52wif35";
-var valueLabel = "_52wif38";
-
-// src/slider.ts
+// src/components/slider/slider.css.ts
+var control = "g5sl181";
+var indicator4 = "g5sl183";
+var root5 = "g5sl180";
+var thumb2 = "g5sl184";
+var tick = "g5sl187";
+var tickList = "g5sl186";
+var track = "g5sl182";
+var value = "g5sl185";
+var valueLabel = "g5sl188";
+
+// src/components/slider/slider.ts
 var Slider = createSlider({
   root: root5,
   control,
@@ -160,67 +160,97 @@ var Slider = createSlider({
   valueLabel
 });
 
-// src/select.css.ts
-var groupLabel2 = "_1b1a46l8";
-var icon4 = "_1b1a46l2";
-var item2 = "_1b1a46l4";
-var itemIndicator2 = "_1b1a46l7";
-var popup3 = "_1b1a46l3";
-var scrollDownArrow = "_1b1a46l6";
-var scrollUpArrow = "_1b1a46l5";
-var trigger = "_1b1a46l0";
-var value2 = "_1b1a46l1";
-
-// src/select.ts
-var Select = createSelect({
-  trigger,
-  value: value2,
-  icon: icon4,
-  popup: popup3,
-  item: item2,
-  itemIndicator: itemIndicator2,
-  groupLabel: groupLabel2,
-  scrollUpArrow,
-  scrollDownArrow
-});
+// src/components/select/select.css.ts
+var field = "_1qkm50o6";
+var fieldIcon = "_1qkm50og";
+var fieldInputWrap = "_1qkm50o9";
+var fieldLabel = "_1qkm50od";
+var fieldLabelVariant = { filled: "_1qkm50oe", outlined: "_1qkm50of" };
+var fieldLeadingIcon = "_1qkm50oh";
+var fieldRoot = "_1qkm50o5";
+var fieldSupporting = "_1qkm50oi";
+var fieldSupportingText = "_1qkm50oj";
+var fieldValue = "_1qkm50oa";
+var fieldValueVariant = { filled: "_1qkm50ob", outlined: "_1qkm50oc" };
+var fieldVariant = { filled: "_1qkm50o7", outlined: "_1qkm50o8" };
+var groupLabel2 = "_1del1lt2";
+var icon4 = "_1qkm50o2";
+var item2 = "_1fs19uv0";
+var itemIndicator2 = "_1fs19uv2";
+var popup3 = "_1del1lt1";
+var scrollDownArrow = "_1qkm50o4";
+var scrollUpArrow = "_1qkm50o3";
+var trigger = "_1qkm50o0";
+var value2 = "_1qkm50o1";
+
+// src/components/select/select.ts
+var Select = createSelect(
+  {
+    trigger,
+    value: value2,
+    icon: icon4,
+    popup: popup3,
+    item: item2,
+    itemIndicator: itemIndicator2,
+    groupLabel: groupLabel2,
+    scrollUpArrow,
+    scrollDownArrow
+  },
+  // Exposed Dropdown Menu anchor (issue #96): the field state lives on the
+  // trigger, so the label float / focus border resolve via `${field}[data-*]`.
+  ({ variant }) => ({
+    root: fieldRoot,
+    field: cx(field, fieldVariant[variant]),
+    inputWrap: fieldInputWrap,
+    value: cx(fieldValue, fieldValueVariant[variant]),
+    label: cx(fieldLabel, fieldLabelVariant[variant]),
+    icon: fieldIcon,
+    leadingIcon: fieldLeadingIcon,
+    supporting: fieldSupporting,
+    supportingText: fieldSupportingText
+  })
+);
 
-// src/textfield.css.ts
-var counter = "_1dqesowe";
-var field = "_1dqesow1";
-var fieldVariant = { filled: "_1dqesow2", outlined: "_1dqesow3" };
-var icon5 = "_1dqesowb";
-var input = "_1dqesow5";
-var inputVariant = { filled: "_1dqesow6", outlined: "_1dqesow7" };
-var inputWrap = "_1dqesow4";
-var label = "_1dqesow8";
-var labelVariant = { filled: "_1dqesow9", outlined: "_1dqesowa" };
-var root6 = "_1dqesow0";
-var supporting = "_1dqesowc";
-var supportingText2 = "_1dqesowd";
-
-// src/textfield.ts
+// src/components/textfield/textfield.css.ts
+var counter = "ww81luf";
+var field2 = "ww81lu1";
+var fieldVariant2 = { filled: "ww81lu2", outlined: "ww81lu3" };
+var icon5 = "ww81lub";
+var iconButton2 = "ww81luc";
+var input = "ww81lu5";
+var inputVariant = { filled: "ww81lu6", outlined: "ww81lu7" };
+var inputWrap = "ww81lu4";
+var label = "ww81lu8";
+var labelVariant = { filled: "ww81lu9", outlined: "ww81lua" };
+var root6 = "ww81lu0";
+var supporting = "ww81lud";
+var supportingText2 = "ww81lue";
+
+// src/components/textfield/textfield.ts
 var TextField = createTextField(({ variant }) => ({
   root: root6,
-  field: cx(field, fieldVariant[variant]),
+  field: cx(field2, fieldVariant2[variant]),
   inputWrap,
   input: cx(input, inputVariant[variant]),
   label: cx(label, labelVariant[variant]),
   leadingIcon: icon5,
   trailingIcon: icon5,
+  leadingIconButton: iconButton2,
+  trailingIconButton: iconButton2,
   supporting,
   supportingText: supportingText2,
   counter
 }));
 
-// src/navigation-bar.css.ts
-var icon6 = "_1oj6paf4";
-var iconWrap = "_1oj6paf2";
-var indicator5 = "_1oj6paf3";
-var item3 = "_1oj6paf1";
-var label2 = "_1oj6paf5";
-var root7 = "_1oj6paf0";
+// src/components/navigation-bar/navigation-bar.css.ts
+var icon6 = "_4xntnf4";
+var iconWrap = "_4xntnf2";
+var indicator5 = "_4xntnf3";
+var item3 = "_4xntnf1";
+var label2 = "_4xntnf5";
+var root7 = "_4xntnf0";
 
-// src/navigation-bar.ts
+// src/components/navigation-bar/navigation-bar.ts
 var NavigationBar = createNavigationBar({
   root: root7,
   item: item3,
@@ -229,55 +259,61 @@ var NavigationBar = createNavigationBar({
   icon: icon6,
   label: label2
 });
-var fab = createRuntimeFn({ defaultClassName: "_11t8aaa4", variantClassNames: { size: { small: "_11t8aaa0", regular: "_11t8aaa1", large: "_11t8aaa2", extended: "_11t8aaa3" }, color: { surface: "_11t8aaa9", primary: "_11t8aaaa", secondary: "_11t8aaab", tertiary: "_11t8aaac" } }, defaultVariants: { size: "regular", color: "surface" }, compoundVariants: [] });
+var fab = createRuntimeFn({ defaultClassName: "_1lttcmh6", variantClassNames: { size: { small: "_1lttcmh7", medium: "_1lttcmh8", large: "_1lttcmh9" }, variant: { standard: "_1lttcmha", extended: "_1lttcmhb" }, color: { primary: "_1lttcmhc", secondary: "_1lttcmhd", tertiary: "_1lttcmhe" } }, defaultVariants: { size: "small", variant: "standard", color: "primary" }, compoundVariants: [[{ size: "small", variant: "standard" }, "_1lttcmh0"], [{ size: "medium", variant: "standard" }, "_1lttcmh1"], [{ size: "large", variant: "standard" }, "_1lttcmh2"], [{ size: "small", variant: "extended" }, "_1lttcmh3"], [{ size: "medium", variant: "extended" }, "_1lttcmh4"], [{ size: "large", variant: "extended" }, "_1lttcmh5"]] });
 
-// src/fab.ts
-var Fab = createFab(({ size, color }) => fab({ size, color }));
-var item4 = createRuntimeFn({ defaultClassName: "_1vyg8hz2 _1vyg8hz1", variantClassNames: { color: { surface: "_1vyg8hz3", primary: "_1vyg8hz4", secondary: "_1vyg8hz5", tertiary: "_1vyg8hz6" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
-var popup4 = "_1vyg8hz0";
+// src/components/fab/fab.ts
+var Fab = createFab(({ size, color, variant }) => fab({ size, color, variant }));
+var item4 = createRuntimeFn({ defaultClassName: "_187aacd2 _187aacd1", variantClassNames: { color: { primary: "_187aacd3", secondary: "_187aacd4", tertiary: "_187aacd5" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
+var popup4 = "_187aacd0";
 
-// src/fab-menu.ts
-var FabMenu = createFabMenu(({ size, color }) => fab({ size, color }), {
+// src/components/fab-menu/fab-menu.ts
+var FabMenu = createFabMenu(({ size, color, variant }) => fab({ size, color, variant }), {
   popup: popup4,
   item: (color) => item4({ color })
 });
-var divider2 = createRuntimeFn({ defaultClassName: "n9bqce0", variantClassNames: { orientation: { horizontal: "n9bqce1", vertical: "n9bqce2" }, inset: { full: "n9bqce3", inset: "n9bqce4", middle: "n9bqce5" } }, defaultVariants: { orientation: "horizontal", inset: "full" }, compoundVariants: [[{ orientation: "horizontal", inset: "inset" }, "n9bqce6"], [{ orientation: "horizontal", inset: "middle" }, "n9bqce7"], [{ orientation: "vertical", inset: "inset" }, "n9bqce8"], [{ orientation: "vertical", inset: "middle" }, "n9bqce9"]] });
+var divider2 = createRuntimeFn({ defaultClassName: "_1ooi3hf0", variantClassNames: { orientation: { horizontal: "_1ooi3hf1", vertical: "_1ooi3hf2" }, inset: { full: "_1ooi3hf3", inset: "_1ooi3hf4", middle: "_1ooi3hf5" } }, defaultVariants: { orientation: "horizontal", inset: "full" }, compoundVariants: [[{ orientation: "horizontal", inset: "inset" }, "_1ooi3hf6"], [{ orientation: "horizontal", inset: "middle" }, "_1ooi3hf7"], [{ orientation: "vertical", inset: "inset" }, "_1ooi3hf8"], [{ orientation: "vertical", inset: "middle" }, "_1ooi3hf9"]] });
 
-// src/divider.ts
+// src/components/divider/divider.ts
 var Divider = createDivider(({ inset, orientation }) => divider2({ inset, orientation }));
 
-// src/progress.css.ts
-var circularIndicator = "_1dp13497";
-var circularRoot = "_1dp13495";
-var circularTrack = "_1dp13496";
-var linearIndicator = "_1dp13494";
-var linearRoot = "_1dp13492";
-var linearTrack = "_1dp13493";
+// src/components/progress/progress.css.ts
+var circularIndicator = "o1tshvb";
+var circularRoot = "o1tshv9";
+var circularTrack = "o1tshva";
+var linearIndicator = "o1tshv7";
+var linearIndicatorSecondary = "o1tshv8";
+var linearRoot = "o1tshv5";
+var linearTrack = "o1tshv6";
 
-// src/progress.ts
+// src/components/progress/progress.ts
 var Progress = createProgress({
-  linear: { root: linearRoot, track: linearTrack, indicator: linearIndicator },
+  linear: {
+    root: linearRoot,
+    track: linearTrack,
+    indicator: linearIndicator,
+    indicatorSecondary: linearIndicatorSecondary
+  },
   circular: { root: circularRoot, track: circularTrack, indicator: circularIndicator }
 });
 
-// src/loading-indicator.css.ts
-var contained = "_1lfskkf2";
-var indicator6 = "_1lfskkf3";
-var root8 = "_1lfskkf1";
+// src/components/loading-indicator/loading-indicator.css.ts
+var contained = "ugpyd62";
+var indicator6 = "ugpyd63";
+var root8 = "ugpyd61";
 
-// src/loading-indicator.ts
+// src/components/loading-indicator/loading-indicator.ts
 var LoadingIndicator = createLoadingIndicator(({ contained: contained2 }) => ({
   root: contained2 ? cx(root8, contained) : root8,
   indicator: indicator6
 }));
-var content = "_3g3dnl9";
-var headline = "_3g3dnla";
-var item5 = createRuntimeFn({ defaultClassName: "_3g3dnl2", variantClassNames: { lines: { "1": "_3g3dnl3", "2": "_3g3dnl4", "3": "_3g3dnl5" }, interactive: { true: "_3g3dnl6", false: "_3g3dnl7" } }, defaultVariants: { lines: 1, interactive: false }, compoundVariants: [] });
-var itemBase = "_3g3dnl1";
-var leading = "_3g3dnl8";
-var root9 = "_3g3dnl0";
-var supporting2 = "_3g3dnlb";
-var trailing = "_3g3dnlc";
+var content = "_6p257t9";
+var headline = "_6p257ta";
+var item5 = createRuntimeFn({ defaultClassName: "_6p257t2", variantClassNames: { lines: { "1": "_6p257t3", "2": "_6p257t4", "3": "_6p257t5" }, interactive: { true: "_6p257t6", false: "_6p257t7" } }, defaultVariants: { lines: 1, interactive: false }, compoundVariants: [] });
+var itemBase = "_6p257t1";
+var leading = "_6p257t8";
+var root9 = "_6p257t0";
+var supporting2 = "_6p257tb";
+var trailing = "_6p257tc";
 var List = createList({
   root: root9,
   item: ({ lines, interactive }) => ({
@@ -290,14 +326,14 @@ var List = createList({
   })
 });
 
-// src/snackbar.css.ts
-var action = "_1tfknov5";
-var close2 = "_1tfknov6";
-var content2 = "_1tfknov2";
-var description2 = "_1tfknov4";
-var root10 = "_1tfknov1";
-var title2 = "_1tfknov3";
-var viewport = "_1tfknov0";
+// src/components/snackbar/snackbar.css.ts
+var action = "lt472p5";
+var close2 = "lt472p6";
+var content2 = "lt472p2";
+var description2 = "lt472p4";
+var root10 = "lt472p1";
+var title2 = "lt472p3";
+var viewport = "lt472p0";
 var Snackbar = createSnackbar({
   viewport,
   root: root10,
@@ -308,14 +344,14 @@ var Snackbar = createSnackbar({
   close: close2
 });
 
-// src/item.css.ts
-var content3 = "_17nusht2";
-var headline2 = "_17nusht4";
-var leading2 = "_17nusht1";
-var overline = "_17nusht3";
-var root11 = "_17nusht0";
-var supporting3 = "_17nusht5";
-var trailing2 = "_17nusht6";
+// src/components/item/item.css.ts
+var content3 = "uumpjc2";
+var headline2 = "uumpjc4";
+var leading2 = "uumpjc1";
+var overline = "uumpjc3";
+var root11 = "uumpjc0";
+var supporting3 = "uumpjc5";
+var trailing2 = "uumpjc6";
 var Item = createItem({
   root: root11,
   leading: leading2,
@@ -325,27 +361,27 @@ var Item = createItem({
   supporting: supporting3,
   trailing: trailing2
 });
-var badge = createRuntimeFn({ defaultClassName: "qbfs5r0", variantClassNames: { size: { small: "qbfs5r1", large: "qbfs5r2" } }, defaultVariants: {}, compoundVariants: [] });
+var badge = createRuntimeFn({ defaultClassName: "_14harik0", variantClassNames: { size: { small: "_14harik1", large: "_14harik2" } }, defaultVariants: {}, compoundVariants: [] });
 
-// src/badge.ts
+// src/components/badge/badge.ts
 var Badge = createBadge({
   root: ({ size }) => badge({ size })
 });
-var card = createRuntimeFn({ defaultClassName: "_1bwrznn0", variantClassNames: { variant: { elevated: "_1bwrznn1", filled: "_1bwrznn2", outlined: "_1bwrznn3" }, interactive: { true: "_1bwrznn4", false: "_1bwrznn5" } }, defaultVariants: { variant: "elevated", interactive: false }, compoundVariants: [[{ variant: "elevated", interactive: true }, "_1bwrznn6"]] });
+var card = createRuntimeFn({ defaultClassName: "sb77qx0", variantClassNames: { variant: { elevated: "sb77qx1", filled: "sb77qx2", outlined: "sb77qx3" }, interactive: { true: "sb77qx4", false: "sb77qx5" } }, defaultVariants: { variant: "elevated", interactive: false }, compoundVariants: [[{ variant: "elevated", interactive: true }, "sb77qx6"]] });
 
-// src/card.ts
+// src/components/card/card.ts
 var Card = createCard({
   root: ({ variant, interactive }) => card({ variant, interactive })
 });
 
-// src/segmented-button.css.ts
-var check2 = "ne7szb2";
-var icon7 = "ne7szb3";
-var item6 = "ne7szb1";
-var label3 = "ne7szb4";
-var root12 = "ne7szb0";
+// src/components/segmented-button/segmented-button.css.ts
+var check2 = "gsfjq22";
+var icon7 = "gsfjq23";
+var item6 = "gsfjq21";
+var label3 = "gsfjq24";
+var root12 = "gsfjq20";
 
-// src/segmented-button.ts
+// src/components/segmented-button/segmented-button.ts
 var SegmentedButton = createSegmentedButton({
   root: root12,
   item: item6,
@@ -354,22 +390,22 @@ var SegmentedButton = createSegmentedButton({
   label: label3
 });
 
-// src/button-group.css.ts
-var connected = "ja34ba2";
-var root13 = "ja34ba0";
-var standard = "ja34ba1";
+// src/components/button-group/button-group.css.ts
+var connected = "_4ah2nv2";
+var root13 = "_4ah2nv0";
+var standard = "_4ah2nv1";
 
-// src/button-group.ts
+// src/components/button-group/button-group.ts
 var variantClass = { standard, connected };
 var ButtonGroup = createButtonGroup(({ variant }) => cx(root13, variantClass[variant]));
-var chevron = "_1457ms3f";
-var group2 = "_1457ms30";
-var item7 = "_1457ms3h";
-var leading3 = createRuntimeFn({ defaultClassName: "_1457ms33 _1457ms31", variantClassNames: { variant: { filled: "_1457ms34", tonal: "_1457ms35", outlined: "_1457ms36", elevated: "_1457ms37", text: "_1457ms38" } }, defaultVariants: {}, compoundVariants: [] });
-var popup5 = "_1457ms3g";
-var trailing3 = createRuntimeFn({ defaultClassName: "_1457ms39 _1457ms32", variantClassNames: { variant: { filled: "_1457ms3a", tonal: "_1457ms3b", outlined: "_1457ms3c", elevated: "_1457ms3d", text: "_1457ms3e" } }, defaultVariants: {}, compoundVariants: [] });
-
-// src/split-button.ts
+var chevron = "ngu6v2f";
+var group2 = "ngu6v20";
+var item7 = "ngu6v2h";
+var leading3 = createRuntimeFn({ defaultClassName: "ngu6v23 ngu6v21", variantClassNames: { variant: { filled: "ngu6v24", tonal: "ngu6v25", outlined: "ngu6v26", elevated: "ngu6v27", text: "ngu6v28" } }, defaultVariants: {}, compoundVariants: [] });
+var popup5 = "ngu6v2g";
+var trailing3 = createRuntimeFn({ defaultClassName: "ngu6v29 ngu6v22", variantClassNames: { variant: { filled: "ngu6v2a", tonal: "ngu6v2b", outlined: "ngu6v2c", elevated: "ngu6v2d", text: "ngu6v2e" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/split-button/split-button.ts
 var SplitButton = createSplitButton({
   group: group2,
   leading: (variant) => leading3({ variant }),
@@ -378,14 +414,14 @@ var SplitButton = createSplitButton({
   popup: popup5,
   item: item7
 });
-var headline3 = "_1ptmpsj3";
-var item8 = "_1ptmpsj4";
-var label4 = "_1ptmpsj6";
-var leading4 = "_1ptmpsj5";
-var root14 = createRuntimeFn({ defaultClassName: "_1ptmpsj0", variantClassNames: { variant: { standard: "_1ptmpsj1", modal: "_1ptmpsj2" } }, defaultVariants: { variant: "standard" }, compoundVariants: [] });
-var trailing4 = "_1ptmpsj7";
-
-// src/navigation-drawer.ts
+var headline3 = "_8ua4h83";
+var item8 = "_8ua4h84";
+var label4 = "_8ua4h86";
+var leading4 = "_8ua4h85";
+var root14 = createRuntimeFn({ defaultClassName: "_8ua4h80", variantClassNames: { variant: { standard: "_8ua4h81", modal: "_8ua4h82" } }, defaultVariants: { variant: "standard" }, compoundVariants: [] });
+var trailing4 = "_8ua4h87";
+
+// src/components/navigation-drawer/navigation-drawer.ts
 var NavigationDrawer = createNavigationDrawer({
   root: ({ variant }) => root14({ variant }),
   headline: headline3,
@@ -394,13 +430,13 @@ var NavigationDrawer = createNavigationDrawer({
   label: label4,
   trailing: trailing4
 });
-var headline4 = createRuntimeFn({ defaultClassName: "jnp3607", variantClassNames: { variant: { small: "jnp3608", center: "jnp3609", medium: "jnp360a", large: "jnp360b" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
-var leading5 = "jnp3606";
-var root15 = createRuntimeFn({ defaultClassName: "jnp3600", variantClassNames: { variant: { small: "jnp3601", center: "jnp3602", medium: "jnp3603", large: "jnp3604" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
-var row = "jnp3605";
-var trailing5 = "jnp360c";
+var headline4 = createRuntimeFn({ defaultClassName: "kzqa437", variantClassNames: { variant: { small: "kzqa438", center: "kzqa439", medium: "kzqa43a", large: "kzqa43b" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
+var leading5 = "kzqa436";
+var root15 = createRuntimeFn({ defaultClassName: "kzqa430", variantClassNames: { variant: { small: "kzqa431", center: "kzqa432", medium: "kzqa433", large: "kzqa434" } }, defaultVariants: { variant: "small" }, compoundVariants: [] });
+var row = "kzqa435";
+var trailing5 = "kzqa43c";
 
-// src/top-app-bar.ts
+// src/components/top-app-bar/top-app-bar.ts
 var TopAppBar = createTopAppBar(({ variant }) => ({
   root: root15({ variant }),
   row,
@@ -409,24 +445,24 @@ var TopAppBar = createTopAppBar(({ variant }) => ({
   trailing: trailing5
 }));
 
-// src/bottom-app-bar.css.ts
-var actions3 = "_1lj3j9f1";
-var fab2 = "_1lj3j9f2";
-var root16 = "_1lj3j9f0";
+// src/components/bottom-app-bar/bottom-app-bar.css.ts
+var actions3 = "_9wwk2d1";
+var fab2 = "_9wwk2d2";
+var root16 = "_9wwk2d0";
 
-// src/bottom-app-bar.ts
+// src/components/bottom-app-bar/bottom-app-bar.ts
 var BottomAppBar = createBottomAppBar({ root: root16, actions: actions3, fab: fab2 });
 
-// src/navigation-rail.css.ts
-var header2 = "w6243j1";
-var icon8 = "w6243j5";
-var iconWrap2 = "w6243j3";
-var indicator7 = "w6243j4";
-var item9 = "w6243j2";
-var label5 = "w6243j6";
-var root17 = "w6243j0";
+// src/components/navigation-rail/navigation-rail.css.ts
+var header2 = "_1ngiacc1";
+var icon8 = "_1ngiacc5";
+var iconWrap2 = "_1ngiacc3";
+var indicator7 = "_1ngiacc4";
+var item9 = "_1ngiacc2";
+var label5 = "_1ngiacc6";
+var root17 = "_1ngiacc0";
 
-// src/navigation-rail.ts
+// src/components/navigation-rail/navigation-rail.ts
 var NavigationRail = createNavigationRail({
   root: root17,
   header: header2,
@@ -437,15 +473,15 @@ var NavigationRail = createNavigationRail({
   label: label5
 });
 
-// src/bottom-sheet.css.ts
-var backdrop2 = "fam1rf0";
-var description3 = "fam1rf5";
-var handle = "fam1rf3";
-var popup6 = "fam1rf2";
-var title3 = "fam1rf4";
-var viewport2 = "fam1rf1";
+// src/components/bottom-sheet/bottom-sheet.css.ts
+var backdrop2 = "_1chb310";
+var description3 = "_1chb315";
+var handle = "_1chb313";
+var popup6 = "_1chb312";
+var title3 = "_1chb314";
+var viewport2 = "_1chb311";
 
-// src/bottom-sheet.ts
+// src/components/bottom-sheet/bottom-sheet.ts
 var BottomSheet = createBottomSheet({
   backdrop: backdrop2,
   viewport: viewport2,
@@ -454,15 +490,15 @@ var BottomSheet = createBottomSheet({
   title: title3,
   description: description3
 });
-var backdrop3 = "d9o4yx0";
-var close3 = "d9o4yx8";
-var description4 = "d9o4yx7";
-var header3 = "d9o4yx5";
-var popup7 = createRuntimeFn({ defaultClassName: "d9o4yx2", variantClassNames: { variant: { modal: "d9o4yx3", standard: "d9o4yx4" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
-var title4 = "d9o4yx6";
-var viewport3 = "d9o4yx1";
-
-// src/side-sheet.ts
+var backdrop3 = "_6kc7960";
+var close3 = "_6kc7968";
+var description4 = "_6kc7967";
+var header3 = "_6kc7965";
+var popup7 = createRuntimeFn({ defaultClassName: "_6kc7962", variantClassNames: { variant: { modal: "_6kc7963", standard: "_6kc7964" } }, defaultVariants: { variant: "modal" }, compoundVariants: [] });
+var title4 = "_6kc7966";
+var viewport3 = "_6kc7961";
+
+// src/components/side-sheet/side-sheet.ts
 var SideSheet = createSideSheet({
   backdrop: backdrop3,
   viewport: viewport3,
@@ -473,20 +509,20 @@ var SideSheet = createSideSheet({
   close: close3
 });
 
-// src/search.css.ts
-var bar = "b8ymue0";
-var clear = "b8ymue3";
-var empty = "b8ymue8";
-var groupLabel3 = "b8ymuea";
-var icon9 = "b8ymue1";
-var input2 = "b8ymue2";
-var item10 = "b8ymue6";
-var itemIndicator3 = "b8ymue7";
-var list2 = "b8ymue5";
-var popup8 = "b8ymue4";
-var separator2 = "b8ymue9";
-
-// src/search.ts
+// src/components/search/search.css.ts
+var bar = "_1iwu0j10";
+var clear = "_1iwu0j13";
+var empty = "_1iwu0j18";
+var groupLabel3 = "_1iwu0j1a";
+var icon9 = "_1iwu0j11";
+var input2 = "_1iwu0j12";
+var item10 = "_1iwu0j16";
+var itemIndicator3 = "_1iwu0j17";
+var list2 = "_1iwu0j15";
+var popup8 = "_1iwu0j14";
+var separator2 = "_1iwu0j19";
+
+// src/components/search/search.ts
 var Search = createSearch({
   bar,
   icon: icon9,
@@ -501,28 +537,28 @@ var Search = createSearch({
   groupLabel: groupLabel3
 });
 
-// src/date-picker.css.ts
-var calendar = "_1vbcevx0";
-var day = "_1vbcevx7";
-var field2 = "_1vbcevxa";
-var fieldIcon = "_1vbcevxc";
-var grid = "_1vbcevx4";
-var header4 = "_1vbcevx1";
-var input3 = "_1vbcevxb";
-var modalActions = "_1vbcevxi";
-var modalBackdrop = "_1vbcevxe";
-var modalHeader = "_1vbcevxg";
-var modalHeadline = "_1vbcevxh";
-var modalPopup = "_1vbcevxf";
-var monthLabel = "_1vbcevx3";
-var navButton = "_1vbcevx2";
-var popup9 = "_1vbcevxd";
-var weekday = "_1vbcevx6";
-var weekdays = "_1vbcevx5";
-var yearButton = "_1vbcevx9";
-var yearGrid = "_1vbcevx8";
-
-// src/date-picker.ts
+// src/components/date-picker/date-picker.css.ts
+var calendar = "vdfl610";
+var day = "vdfl617";
+var field3 = "vdfl61a";
+var fieldIcon2 = "vdfl61c";
+var grid = "vdfl614";
+var header4 = "vdfl611";
+var input3 = "vdfl61b";
+var modalActions = "vdfl61i";
+var modalBackdrop = "vdfl61e";
+var modalHeader = "vdfl61g";
+var modalHeadline = "vdfl61h";
+var modalPopup = "vdfl61f";
+var monthLabel = "vdfl613";
+var navButton = "vdfl612";
+var popup9 = "vdfl61d";
+var weekday = "vdfl616";
+var weekdays = "vdfl615";
+var yearButton = "vdfl619";
+var yearGrid = "vdfl618";
+
+// src/components/date-picker/date-picker.ts
 var DatePicker = createDatePicker({
   calendar,
   header: header4,
@@ -534,9 +570,9 @@ var DatePicker = createDatePicker({
   day,
   yearGrid,
   yearButton,
-  field: field2,
+  field: field3,
   input: input3,
-  fieldIcon,
+  fieldIcon: fieldIcon2,
   popup: popup9,
   modalBackdrop,
   modalPopup,
@@ -545,26 +581,28 @@ var DatePicker = createDatePicker({
   modalActions
 });
 
-// src/time-picker.css.ts
-var colon = "_1xr2p7a3";
-var dial = "_1xr2p7a6";
-var dialCenter = "_1xr2p7a9";
-var dialHand = "_1xr2p7a8";
-var dialNumber = "_1xr2p7a7";
-var field3 = "_1xr2p7a2";
-var header5 = "_1xr2p7a1";
-var inputBox = "_1xr2p7ab";
-var inputCaption = "_1xr2p7ac";
-var inputs = "_1xr2p7aa";
-var period = "_1xr2p7a5";
-var periods = "_1xr2p7a4";
-var root18 = "_1xr2p7a0";
-
-// src/time-picker.ts
+// src/components/time-picker/time-picker.css.ts
+var colon = "_19fi9au4";
+var dial = "_19fi9au7";
+var dialCenter = "_19fi9aua";
+var dialHand = "_19fi9au9";
+var dialNumber = "_19fi9au8";
+var display = "_19fi9au2";
+var field4 = "_19fi9au3";
+var header5 = "_19fi9au1";
+var inputBox = "_19fi9auc";
+var inputCaption = "_19fi9aud";
+var inputs = "_19fi9aub";
+var period = "_19fi9au6";
+var periods = "_19fi9au5";
+var root18 = "_19fi9au0";
+
+// src/components/time-picker/time-picker.ts
 var TimePicker = createTimePicker(() => ({
   root: root18,
   header: header5,
-  field: field3,
+  display,
+  field: field4,
   colon,
   periods,
   period,
@@ -576,16 +614,16 @@ var TimePicker = createTimePicker(() => ({
   inputBox,
   inputCaption
 }));
-var toolbar = createRuntimeFn({ defaultClassName: "_1a8bqtt0", variantClassNames: { variant: { standard: "_1a8bqtt1", vibrant: "_1a8bqtt2" }, orientation: { horizontal: "_1a8bqtt3", vertical: "_1a8bqtt4" } }, defaultVariants: { variant: "standard", orientation: "horizontal" }, compoundVariants: [] });
+var toolbar = createRuntimeFn({ defaultClassName: "_1lu5gnh0", variantClassNames: { variant: { standard: "_1lu5gnh1", vibrant: "_1lu5gnh2" }, orientation: { horizontal: "_1lu5gnh3", vertical: "_1lu5gnh4" } }, defaultVariants: { variant: "standard", orientation: "horizontal" }, compoundVariants: [] });
 
-// src/toolbar.ts
+// src/components/toolbar/toolbar.ts
 var Toolbar = createToolbar(
   ({ variant, orientation }) => toolbar({ variant, orientation })
 );
-var item11 = createRuntimeFn({ defaultClassName: "dkoi9n4", variantClassNames: { variant: { "multi-browse": "dkoi9n5", hero: "dkoi9n6", "full-screen": "dkoi9n7" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
-var root19 = createRuntimeFn({ defaultClassName: "dkoi9n0", variantClassNames: { variant: { "multi-browse": "dkoi9n1", hero: "dkoi9n2", "full-screen": "dkoi9n3" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+var item11 = createRuntimeFn({ defaultClassName: "iao39e4", variantClassNames: { variant: { "multi-browse": "iao39e5", hero: "iao39e6", "full-screen": "iao39e7" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
+var root19 = createRuntimeFn({ defaultClassName: "iao39e0", variantClassNames: { variant: { "multi-browse": "iao39e1", hero: "iao39e2", "full-screen": "iao39e3" } }, defaultVariants: { variant: "multi-browse" }, compoundVariants: [] });
 
-// src/carousel.ts
+// src/components/carousel/carousel.ts
 var Carousel = createCarousel((variant) => ({
   root: root19({ variant }),
   item: item11({ variant })