@vygruppen/spor-react 13.3.1 → 13.4.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, List as List$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, Link, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Tag, ListItem as ListItem$1, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
-import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ErrorFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ErrorFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, CloseOutline18Icon, SearchOutline24Icon, SearchOutline18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React14 from 'react';
 import React14__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
@@ -680,74 +680,52 @@ var badgeRecipie = defineRecipe({
       neutral: {
         backgroundColor: "surface",
         color: "text",
-        "& svg": {
-          color: "icon"
-        }
+        "& svg": { color: "icon" }
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
-        "& svg": {
-          color: "icon.neutral"
-        }
+        "& svg": { color: "icon.neutral" }
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
-        "& svg": {
-          color: "icon.success"
-        }
+        "& svg": { color: "icon.success" }
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
-        "& svg": {
-          color: "icon.info"
-        }
+        "& svg": { color: "icon.info" }
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
-        "& svg": {
-          color: "icon.warning"
-        }
+        "& svg": { color: "icon.warning" }
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
-        "& svg": {
-          color: "icon.notice"
-        }
+        "& svg": { color: "icon.notice" }
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
-        "& svg": {
-          color: "icon.caution"
-        }
+        "& svg": { color: "icon.caution" }
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
-        "& svg": {
-          color: "icon.critical"
-        }
+        "& svg": { color: "icon.critical" }
       },
       brightRed: {
-        backgroundColor: {
-          _light: "brightRed",
-          _dark: "brightRed"
-        },
-        color: {
-          _light: "pink",
-          _dark: "pink"
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "pink"
-          }
-        }
+        backgroundColor: { _light: "brightRed", _dark: "brightRed" },
+        color: { _light: "pink", _dark: "pink" },
+        "& svg": { color: { _light: "pink", _dark: "pink" } }
+      },
+      disabled: {
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        "& svg": { color: "icon.disabled" }
       }
     },
     size: {
@@ -773,11 +751,7 @@ var badgeRecipie = defineRecipe({
         borderRadius: "xs"
       }
     },
-    attached: {
-      true: {
-        borderBottomRadius: "none"
-      }
-    },
+    attached: { true: { borderBottomRadius: "none" } },
     inverted: { true: {} }
   },
   defaultVariants: {
@@ -791,60 +765,27 @@ var badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkBlue",
-          _dark: "lightBlue"
-        },
-        color: {
-          _light: "icyBlue",
-          _dark: "royal"
-        },
-        "& svg": {
-          color: {
-            _light: "royal",
-            _dark: "icyBlue"
-          }
-        }
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        "& svg": { color: { _light: "royal", _dark: "icyBlue" } }
       }
     },
     {
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkTeal",
-          _dark: "seaMist"
-        },
-        color: {
-          _light: "mint",
-          _dark: "jungle"
-        },
-        "& svg": {
-          color: {
-            _light: "mint",
-            _dark: "jungle"
-          }
-        }
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        "& svg": { color: { _light: "mint", _dark: "jungle" } }
       }
     },
     {
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "carbon",
-          _dark: "platinum"
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey"
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey"
-          }
-        }
+        backgroundColor: { _light: "carbon", _dark: "platinum" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     },
     {
@@ -852,80 +793,36 @@ var badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "coffee",
-          _dark: "blonde"
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee"
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee"
-          }
-        }
+        backgroundColor: { _light: "coffee", _dark: "blonde" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
     {
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "bronze",
-          _dark: "banana"
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee"
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee"
-          }
-        }
+        backgroundColor: { _light: "bronze", _dark: "banana" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
     {
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "wood",
-          _dark: "champagne"
-        },
-        color: {
-          _light: "bisque",
-          _dark: "wood"
-        },
-        "& svg": {
-          color: {
-            _light: "bisque",
-            _dark: "wood"
-          }
-        }
+        backgroundColor: { _light: "wood", _dark: "champagne" },
+        color: { _light: "bisque", _dark: "wood" },
+        "& svg": { color: { _light: "bisque", _dark: "wood" } }
       }
     },
     {
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "burgundy",
-          _dark: "lightRed"
-        },
-        color: {
-          _light: "pink",
-          _dark: "maroon"
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "maroon"
-          }
-        }
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        "& svg": { color: { _light: "pink", _dark: "maroon" } }
       }
     },
     {
@@ -933,20 +830,9 @@ var badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "ink",
-          _dark: "white"
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey"
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey"
-          }
-        }
+        backgroundColor: { _light: "ink", _dark: "white" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     }
   ]
@@ -2129,10 +2015,10 @@ var ColorModeButton = function ColorModeButton2({
 };
 var FloatingLabel = ({
   ref,
+  css,
   ...props
-}) => /* @__PURE__ */ jsx(Field.Label, { ref, ...props, css: floatingLabelStyles });
+}) => /* @__PURE__ */ jsx(Field.Label, { ref, ...props, css: [floatingLabelStyles, css] });
 var floatingLabelStyles = defineStyle({
-  paddingX: 3,
   fontWeight: "normal",
   pointerEvents: "none",
   zIndex: "docked",
@@ -2140,22 +2026,13 @@ var floatingLabelStyles = defineStyle({
     opacity: 0.4
   },
   pos: "absolute",
-  transition: "top 160ms ease, font-size 160ms ease",
-  top: "0.9rem",
-  color: "text",
-  fontSize: ["mobile.sm", "desktop.sm"],
-  "&[data-float]": {
-    fontSize: ["mobile.2xs", "desktop.2xs"],
-    color: "text",
-    top: "0.3rem"
-  }
+  transition: "top 160ms ease, font-size 160ms ease"
 });
-var Label = (props) => /* @__PURE__ */ jsx(Field.Label, { ...props, css: labelStyles });
+var Label = ({ css, ...props }) => /* @__PURE__ */ jsx(Field.Label, { ...props, css: [labelStyles, css] });
 var labelStyles = defineStyle({
   fontWeight: "normal",
   paddingBottom: 1,
   paddingX: 1,
-  fontSize: ["mobile.xs", "desktop.xs"],
   color: "text",
   pointerEvents: "none",
   zIndex: "docked",
@@ -2198,10 +2075,11 @@ var Field3 = ({
     shouldFloat,
     labelAsChild,
     gap,
+    size = "md",
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "field" });
-  const styles = recipe();
+  const styles = recipe({ size });
   return /* @__PURE__ */ jsxs(Stack, { ref, width: "100%", ...rest, children: [
     /* @__PURE__ */ jsxs(
       Field.Root,
@@ -2215,7 +2093,7 @@ var Field3 = ({
         id,
         gap,
         children: [
-          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, "aria-hidden": true, children: renderLabelWithIndicator(label, labelAsChild) }),
+          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, "aria-hidden": true, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
           children,
           label && floatingLabel && /* @__PURE__ */ jsx(
             FloatingLabel,
@@ -2223,6 +2101,7 @@ var Field3 = ({
               "data-float": shouldFloat ? true : void 0,
               asChild: labelAsChild,
               "aria-hidden": true,
+              css: styles.label,
               children: renderLabelWithIndicator(label, labelAsChild)
             }
           ),
@@ -2230,7 +2109,7 @@ var Field3 = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.subtle", children: helperText })
+    helperText && /* @__PURE__ */ jsx(Text, { "data-part": "helperText", css: styles.helperText, children: helperText })
   ] });
 };
 var FieldErrorText = ({
@@ -3608,10 +3487,11 @@ var Input = ({
   hidden,
   fontSize,
   labelAsChild,
+  size = "md",
   ...props
 }) => {
   const recipe = useRecipe({ key: "input" });
-  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const [recipeProps, restProps] = recipe.splitVariantProps({ size, ...props });
   const styles = recipe(recipeProps);
   const labelId = useId();
   const inputRef = useRef(null);
@@ -3624,6 +3504,17 @@ var Input = ({
     onChange: props.onChange,
     inputRef
   });
+  const fontSizeBySize = {
+    sm: "xs",
+    md: "mobile.md"
+  };
+  const elementPaddingBySize = {
+    sm: "2.3rem",
+    md: "2.6rem"
+  };
+  const elementPadding = elementPaddingBySize[size] ?? "2.6rem";
+  const paddingLeft = elementPadding;
+  const paddingRight = elementPadding;
   return /* @__PURE__ */ jsxs(
     Field3,
     {
@@ -3634,21 +3525,28 @@ var Input = ({
       errorText,
       id: props.id,
       labelAsChild,
-      label: /* @__PURE__ */ jsxs(Flex, { id: labelId, children: [
-        /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
-        label
-      ] }),
+      label: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          id: labelId,
+          paddingX: startElement && size === "sm" ? 1 : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
+            label
+          ]
+        }
+      ),
       floatingLabel: true,
       shouldFloat,
+      size,
       children: [
         startElement && /* @__PURE__ */ jsx(
           InputElement,
           {
-            pointerEvents: "none",
-            paddingX: 2,
             "aria-hidden": "true",
-            fontSize: fontSize ?? "mobile.md",
             "aria-labelledby": labelId,
+            paddingX: 2,
+            fontSize: fontSize ?? fontSizeBySize[size],
             children: startElement
           }
         ),
@@ -3659,25 +3557,25 @@ var Input = ({
             ref: inputRef,
             focusVisibleRing: "outside",
             overflow: "hidden",
-            paddingLeft: startElement ? "2.6rem" : void 0,
-            paddingRight: endElement ? "2.6rem" : void 0,
             ...restProps,
+            css: styles,
+            paddingLeft: startElement ? paddingLeft : void 0,
+            paddingRight: endElement ? paddingRight : void 0,
             className: `peer ${props.className || ""}`,
             value: isControlled ? props.value : void 0,
             onFocus: handleFocus,
             onBlur: handleBlur,
             onChange: handleChange,
             placeholder: "",
-            css: styles,
-            fontSize: fontSize ?? "mobile.md"
+            fontSize
           }
         ),
         endElement && /* @__PURE__ */ jsx(
           InputElement,
           {
-            placement: "end",
             paddingX: 2,
-            fontSize: fontSize ?? "mobile.md",
+            placement: "end",
+            fontSize: fontSize ?? fontSizeBySize[size],
             children: endElement
           }
         )
@@ -4163,7 +4061,8 @@ var Combobox2 = (props) => {
           }
         ) : rightIcon,
         placeholder: "",
-        "data-attachable": true
+        "data-attachable": true,
+        size: "md"
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
@@ -4811,6 +4710,7 @@ var PasswordInput = ({
     onVisibleChange,
     label,
     startElement,
+    size = "md",
     ...rest
   } = props;
   const [visible, setVisible] = useControllableState({
@@ -4839,9 +4739,11 @@ var PasswordInput = ({
             event.preventDefault();
             setVisible(!visible);
           },
+          size,
           children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
         }
       ),
+      size,
       ...rest
     }
   );
@@ -4856,7 +4758,6 @@ var VisibilityTrigger = ({
       ref,
       type: "button",
       fontWeight: "normal",
-      size: "sm",
       borderRadius: "sm",
       marginRight: 1,
       ...props,
@@ -4918,6 +4819,7 @@ var CountryCodeSelect = ({
       lazyMount: true,
       "aria-label": t(texts18.countryCode),
       sideRadiusVariant: "rightSideSquare",
+      size: props.size,
       role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
@@ -4943,7 +4845,8 @@ var PhoneNumberInput = ({
     optional,
     allowedCountryCodes,
     invalid,
-    errorText
+    errorText,
+    size = "md"
   } = props;
   const { t } = useTranslation();
   const label = externalLabel ?? (optional ? t(texts19.phoneNumberOptional) : t(texts19.phoneNumber));
@@ -4974,7 +4877,7 @@ var PhoneNumberInput = ({
         variant,
         allowedCountryCodes,
         "data-state": "on",
-        invalid
+        size
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4982,6 +4885,7 @@ var PhoneNumberInput = ({
       {
         ref,
         type: "tel",
+        size,
         ...props,
         value: value.nationalNumber,
         invalid,
@@ -5037,7 +4941,7 @@ var SearchInput = ({
   ...props
 }) => {
   const { t } = useTranslation();
-  const { variant = "core", onReset, label, value } = props;
+  const { variant = "core", onReset, label, value, size = "md" } = props;
   const clearButton = onReset && value;
   return /* @__PURE__ */ jsx(
     Input,
@@ -5045,8 +4949,9 @@ var SearchInput = ({
       ref,
       type: "search",
       variant,
+      size,
       ...props,
-      startElement: /* @__PURE__ */ jsx(SearchOutline24Icon, { color: "icon" }),
+      startElement: size == "md" ? /* @__PURE__ */ jsx(SearchOutline24Icon, { color: "icon" }) : /* @__PURE__ */ jsx(SearchOutline18Icon, { color: "icon" }),
       endElement: clearButton && /* @__PURE__ */ jsx(
         IconButton,
         {
@@ -5054,7 +4959,7 @@ var SearchInput = ({
           type: "button",
           size: "sm",
           "aria-label": t(texts20.reset),
-          icon: /* @__PURE__ */ jsx(CloseOutline24Icon, {}),
+          icon: size == "md" ? /* @__PURE__ */ jsx(CloseOutline24Icon, {}) : /* @__PURE__ */ jsx(CloseOutline18Icon, {}),
           onClick: onReset
         }
       ),
@@ -5082,6 +4987,7 @@ var Select = ({
 }) => {
   const {
     variant = "core",
+    size = "md",
     children,
     positioning,
     label,
@@ -5091,8 +4997,6 @@ var Select = ({
     css,
     ...rest
   } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe({ variant });
   return /* @__PURE__ */ jsx(
     Field3,
     {
@@ -5109,12 +5013,12 @@ var Select = ({
           ref,
           positioning: { sameWidth: true, ...positioning },
           variant,
-          css: styles.root,
+          size,
           position: "relative",
           children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: !!label }) }),
-            label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
-            /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
+            /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, size, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: !!label }) }),
+            label && /* @__PURE__ */ jsx(SelectLabel, { children: label }),
+            /* @__PURE__ */ jsx(SelectContent, { baseStyle: css, children })
           ]
         }
       )
@@ -5136,16 +5040,14 @@ var SelectItem = ({
   ...props
 }) => {
   const { item, children, description, ...rest } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe();
   const selectContext = useSelectContext();
   const multiple = selectContext.multiple;
   const isSelected = selectContext.value.includes(item.value);
-  return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
+  return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, children: [
     multiple && /* @__PURE__ */ jsx(Checkbox$1.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {}) }) }),
     /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
       /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
-      description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
+      description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", children: description })
     ] }),
     !multiple && /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
   ] });
@@ -5163,24 +5065,16 @@ var SelectItemGroup = function SelectItemGroup2({
 };
 var SelectTrigger = function SelectTrigger2({
   ref,
+  size = "md",
   ...props
 }) {
   const { children, clearable, ...rest } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe();
-  return /* @__PURE__ */ jsxs(Select$1.Control, { ...rest, css: styles.control, children: [
-    /* @__PURE__ */ jsx(Select$1.Trigger, { ref, css: styles.trigger, children }),
-    /* @__PURE__ */ jsxs(
-      Select$1.IndicatorGroup,
-      {
-        css: styles.indicatorGroup,
-        "data-part": "indicator-group",
-        children: [
-          clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
-          /* @__PURE__ */ jsx(Box, { css: styles.indicator, "data-part": "indicator", children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxs(Select$1.Control, { ...rest, children: [
+    /* @__PURE__ */ jsx(Select$1.Trigger, { ref, children }),
+    /* @__PURE__ */ jsxs(Select$1.IndicatorGroup, { "data-part": "indicator-group", children: [
+      clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
+      /* @__PURE__ */ jsx(Box, { "data-part": "indicator", children: size == "md" ? /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) : /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}) })
+    ] })
   ] });
 };
 var SelectClearTrigger = function SelectClearTrigger2({
@@ -5217,7 +5111,7 @@ var SelectValueText = function SelectValueText2({
       ...rest,
       ref,
       placeholder,
-      paddingTop: withPlaceholder ? "4" : "0",
+      "data-with-placeholder": withPlaceholder || void 0,
       children: /* @__PURE__ */ jsx(Select$1.Context, { children: (select) => {
         const items = select.selectedItems;
         if (items.length === 0)
@@ -5225,7 +5119,7 @@ var SelectValueText = function SelectValueText2({
         if (children)
           return children(items);
         if (multiple) {
-          return /* @__PURE__ */ jsx(Flex, { gap: 0.5, marginBottom: 1, children: items.map((item) => /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Flex, { gap: 0.5, children: items.map((item) => /* @__PURE__ */ jsx(
             Badge,
             {
               size: "sm",
@@ -7384,10 +7278,6 @@ var inputRecipe = defineRecipe({
     transitionDuration: "fast",
     color: "text",
     position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
     _disabled: {
       backgroundColor: "surface.disabled",
       outline: "1px solid",
@@ -7450,10 +7340,25 @@ var inputRecipe = defineRecipe({
           outlineColor: "outline.focus"
         }
       }
+    },
+    size: {
+      sm: {
+        paddingTop: 2,
+        height: 7,
+        fontSize: "xs",
+        paddingX: 2
+      },
+      md: {
+        paddingX: 3,
+        paddingTop: 3,
+        height: 8,
+        fontSize: "mobile.md"
+      }
     }
   },
   defaultVariants: {
-    variant: "core"
+    variant: "core",
+    size: "md"
   }
 });
 var linkRecipe = defineRecipe({
@@ -8027,12 +7932,10 @@ var selectAnatomy = createAnatomy("select").parts(
   "root",
   "trigger",
   "indicatorGroup",
-  "indicator",
-  "selectContent",
+  "content",
   "item",
   "control",
   "itemText",
-  "itemDescription",
   "itemGroup",
   "itemGroupLabel",
   "label",
@@ -8660,7 +8563,6 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      padding: 0.5,
       borderRadius: "xs"
     },
     currentLink: {
@@ -9699,17 +9601,15 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
-      // eslint-disable-next-line spor/use-semantic-tokens
-      color: "brightRed"
+      color: "outline.error"
     },
     label: {
       display: "flex"
     },
     helperText: {
-      marginTop: 2,
       color: "text.subtle",
       lineHeight: "normal",
-      fontSize: "sm"
+      fontSize: ["mobile.sm", "desktop.sm"]
     },
     errorText: {
       borderRadius: "xs",
@@ -9736,6 +9636,41 @@ var fieldSlotRecipe = defineSlotRecipe({
         pointerEvents: "none"
       }
     }
+  },
+  variants: {
+    size: {
+      sm: {
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 2,
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            top: 0
+          },
+          top: "0.5rem"
+        },
+        helperText: {
+          color: "text.subtle",
+          lineHeight: "normal",
+          fontSize: ["mobile.xs", "desktop.xs"]
+        }
+      },
+      md: {
+        label: {
+          paddingX: 3,
+          fontSize: ["mobile.sm", "desktop.sm"],
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            color: "text.subtle",
+            top: "0.3rem"
+          },
+          top: "0.9rem"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 var filterChipSlotRecipe = defineSlotRecipe({
@@ -10870,7 +10805,7 @@ var menuSlotRecipe = defineSlotRecipe({
     variant: "core"
   }
 });
-var _a5, _b4;
+var _a5, _b4, _c2, _d2, _e, _f;
 var nativeSelectSlotRecipe = defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -10922,7 +10857,22 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
           ...(_b4 = inputRecipe.variants) == null ? void 0 : _b4.variant.floating
         }
       }
+    },
+    size: {
+      sm: {
+        field: {
+          ...(_d2 = (_c2 = inputRecipe.variants) == null ? void 0 : _c2.size) == null ? void 0 : _d2.sm
+        }
+      },
+      md: {
+        field: {
+          ...(_f = (_e = inputRecipe.variants) == null ? void 0 : _e.size) == null ? void 0 : _f.md
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 var numericStepperRecipe = defineSlotRecipe({
@@ -11352,14 +11302,9 @@ var selectSlotRecipe = defineSlotRecipe({
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: 0,
-      left: 3,
       zIndex: 0,
       position: "absolute",
       color: "text",
-      marginY: 2,
-      _selected: {
-        transform: ["scale(0.825) translateY(-10px)"]
-      },
       transitionProperty: "transform",
       transitionDuration: "fast",
       transformOrigin: "top left",
@@ -11370,47 +11315,46 @@ var selectSlotRecipe = defineSlotRecipe({
       display: "flex",
       appearance: "none",
       width: "100%",
-      height: 8,
       color: "text",
-      paddingY: 1.5,
-      paddingX: 3,
       justifyContent: "space-between",
       alignItems: "center",
-      fontSize: "mobile.md",
       borderRadius: "sm",
       cursor: "pointer",
       _open: {
         "& + div": {
           transform: "rotate(180deg)"
         }
+      },
+      _active: {
+        backgroundColor: "surface"
       }
     },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
+      gap: "0.5",
       position: "absolute",
       right: "0",
       top: "0",
       bottom: "0",
       paddingX: 2,
-      pointerEvents: "none"
-    },
-    indicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: {
-        base: "text",
-        _disabled: "text.disabled",
-        _invalid: "text.highlight"
-      },
-      _icon: {
-        width: 3,
-        height: 3
+      pointerEvents: "none",
+      "& [data-part='indicator']": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: {
+          base: "text",
+          _disabled: "text.disabled",
+          _invalid: "text.highlight"
+        },
+        _icon: {
+          width: 3,
+          height: 3
+        }
       }
     },
-    selectContent: {
+    content: {
       backgroundColor: "surface",
       boxShadow: "sm",
       overflowY: "auto",
@@ -11463,9 +11407,7 @@ var selectSlotRecipe = defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "surface.accent.hover",
-        outline: "2px solid core.outline",
-        outlineOffset: "2px"
+        backgroundColor: "surface.accent.hover"
       },
       _selected: {
         backgroundColor: "surface.accent"
@@ -11473,6 +11415,10 @@ var selectSlotRecipe = defineSlotRecipe({
       _icon: {
         width: 3,
         height: 3
+      },
+      "& [data-part='item-description']": {
+        fontSize: ["mobile.xs", "desktop.xs"],
+        color: "text.ghost"
       }
     },
     control: {
@@ -11491,7 +11437,8 @@ var selectSlotRecipe = defineSlotRecipe({
       }
     },
     itemText: {
-      flex: "1"
+      flex: "1",
+      alignItems: "center"
     },
     itemGroup: {
       _first: { mt: "0" }
@@ -11499,14 +11446,6 @@ var selectSlotRecipe = defineSlotRecipe({
     itemGroupLabel: {
       py: "1",
       fontWeight: "medium"
-    },
-    valueText: {},
-    itemDescription: {
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text.ghost",
-      "[aria-selected='true'] &": {
-        color: "text.ghost"
-      }
     }
   },
   variants: {
@@ -11527,6 +11466,10 @@ var selectSlotRecipe = defineSlotRecipe({
             color: "text.disabled",
             backgroundColor: "surface.disabled"
           }
+        },
+        content: {
+          outline: "2px solid",
+          outlineColor: "outline.core"
         }
       },
       floating: {
@@ -11571,7 +11514,68 @@ var selectSlotRecipe = defineSlotRecipe({
           }
         }
       }
+    },
+    size: {
+      sm: {
+        trigger: {
+          height: 7,
+          paddingY: 1.5,
+          fontSize: "xs",
+          paddingX: 2
+        },
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          left: 2,
+          marginY: 1.5,
+          _selected: {
+            transform: ["scale(0.85) translateY(-9px)"],
+            fontSize: "desktop.2xs",
+            color: "text.subtle"
+          }
+        },
+        item: {
+          paddingX: 2,
+          paddingY: 1,
+          fontSize: "xs",
+          "& [data-part='item-description']": {
+            fontSize: ["mobile.2xs", "desktop.2xs"]
+          }
+        },
+        itemGroupLabel: {
+          py: 0.5,
+          fontSize: "xs"
+        },
+        valueText: {
+          paddingTop: 0,
+          "&[data-with-placeholder]": {
+            paddingTop: "1.5"
+          }
+        }
+      },
+      md: {
+        trigger: {
+          height: 8,
+          paddingY: 1.5,
+          paddingX: 3,
+          fontSize: "sm"
+        },
+        label: {
+          left: 3,
+          marginY: 2,
+          _selected: {
+            transform: ["scale(0.825) translateY(-10px)"]
+          }
+        },
+        valueText: {
+          "&[data-with-placeholder]": {
+            paddingTop: "4"
+          }
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 var stepperSlotRecipe = defineSlotRecipe({