@vygruppen/spor-react 13.3.1 → 13.4.0

package/dist/index.cjs

@@ -699,74 +699,52 @@ var badgeRecipie = react.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: {
@@ -792,11 +770,7 @@ var badgeRecipie = react.defineRecipe({
         borderRadius: "xs"
       }
     },
-    attached: {
-      true: {
-        borderBottomRadius: "none"
-      }
-    },
+    attached: { true: { borderBottomRadius: "none" } },
     inverted: { true: {} }
   },
   defaultVariants: {
@@ -810,60 +784,27 @@ var badgeRecipie = react.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" } }
       }
     },
     {
@@ -871,80 +812,36 @@ var badgeRecipie = react.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" } }
       }
     },
     {
@@ -952,20 +849,9 @@ var badgeRecipie = react.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" } }
       }
     }
   ]
@@ -2148,10 +2034,10 @@ var ColorModeButton = function ColorModeButton2({
 };
 var FloatingLabel = ({
   ref,
+  css,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { ref, ...props, css: floatingLabelStyles });
+}) => /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { ref, ...props, css: [floatingLabelStyles, css] });
 var floatingLabelStyles = react.defineStyle({
-  paddingX: 3,
   fontWeight: "normal",
   pointerEvents: "none",
   zIndex: "docked",
@@ -2159,22 +2045,13 @@ var floatingLabelStyles = react.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__ */ jsxRuntime.jsx(react.Field.Label, { ...props, css: labelStyles });
+var Label = ({ css, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { ...props, css: [labelStyles, css] });
 var labelStyles = react.defineStyle({
   fontWeight: "normal",
   paddingBottom: 1,
   paddingX: 1,
-  fontSize: ["mobile.xs", "desktop.xs"],
   color: "text",
   pointerEvents: "none",
   zIndex: "docked",
@@ -2217,10 +2094,11 @@ var Field3 = ({
     shouldFloat,
     labelAsChild,
     gap,
+    size = "md",
     ...rest
   } = props;
   const recipe = react.useSlotRecipe({ key: "field" });
-  const styles = recipe();
+  const styles = recipe({ size });
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { ref, width: "100%", ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       react.Field.Root,
@@ -2234,7 +2112,7 @@ var Field3 = ({
         id,
         gap,
         children: [
-          label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { asChild: labelAsChild, "aria-hidden": true, children: renderLabelWithIndicator(label, labelAsChild) }),
+          label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { asChild: labelAsChild, "aria-hidden": true, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
           children,
           label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(
             FloatingLabel,
@@ -2242,6 +2120,7 @@ var Field3 = ({
               "data-float": shouldFloat ? true : void 0,
               asChild: labelAsChild,
               "aria-hidden": true,
+              css: styles.label,
               children: renderLabelWithIndicator(label, labelAsChild)
             }
           ),
@@ -2249,7 +2128,7 @@ var Field3 = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", color: "text.subtle", children: helperText })
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { "data-part": "helperText", css: styles.helperText, children: helperText })
   ] });
 };
 var FieldErrorText = ({
@@ -3627,10 +3506,11 @@ var Input = ({
   hidden,
   fontSize,
   labelAsChild,
+  size = "md",
   ...props
 }) => {
   const recipe = react.useRecipe({ key: "input" });
-  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const [recipeProps, restProps] = recipe.splitVariantProps({ size, ...props });
   const styles = recipe(recipeProps);
   const labelId = React14.useId();
   const inputRef = React14.useRef(null);
@@ -3643,6 +3523,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__ */ jsxRuntime.jsxs(
     Field3,
     {
@@ -3653,21 +3544,28 @@ var Input = ({
       errorText,
       id: props.id,
       labelAsChild,
-      label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { id: labelId, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
-        label
-      ] }),
+      label: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Flex,
+        {
+          id: labelId,
+          paddingX: startElement && size === "sm" ? 1 : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
+            label
+          ]
+        }
+      ),
       floatingLabel: true,
       shouldFloat,
+      size,
       children: [
         startElement && /* @__PURE__ */ jsxRuntime.jsx(
           react.InputElement,
           {
-            pointerEvents: "none",
-            paddingX: 2,
             "aria-hidden": "true",
-            fontSize: fontSize ?? "mobile.md",
             "aria-labelledby": labelId,
+            paddingX: 2,
+            fontSize: fontSize ?? fontSizeBySize[size],
             children: startElement
           }
         ),
@@ -3678,25 +3576,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__ */ jsxRuntime.jsx(
           react.InputElement,
           {
-            placement: "end",
             paddingX: 2,
-            fontSize: fontSize ?? "mobile.md",
+            placement: "end",
+            fontSize: fontSize ?? fontSizeBySize[size],
             children: endElement
           }
         )
@@ -4182,7 +4080,8 @@ var Combobox2 = (props) => {
           }
         ) : rightIcon,
         placeholder: "",
-        "data-attachable": true
+        "data-attachable": true,
+        size: "md"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
@@ -4830,6 +4729,7 @@ var PasswordInput = ({
     onVisibleChange,
     label,
     startElement,
+    size = "md",
     ...rest
   } = props;
   const [visible, setVisible] = react.useControllableState({
@@ -4858,9 +4758,11 @@ var PasswordInput = ({
             event.preventDefault();
             setVisible(!visible);
           },
+          size,
           children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
         }
       ),
+      size,
       ...rest
     }
   );
@@ -4875,7 +4777,6 @@ var VisibilityTrigger = ({
       ref,
       type: "button",
       fontWeight: "normal",
-      size: "sm",
       borderRadius: "sm",
       marginRight: 1,
       ...props,
@@ -4937,6 +4838,7 @@ var CountryCodeSelect = ({
       lazyMount: true,
       "aria-label": t(texts18.countryCode),
       sideRadiusVariant: "rightSideSquare",
+      size: props.size,
       role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
@@ -4962,7 +4864,8 @@ var PhoneNumberInput = ({
     optional,
     allowedCountryCodes,
     invalid,
-    errorText
+    errorText,
+    size = "md"
   } = props;
   const { t } = useTranslation();
   const label = externalLabel ?? (optional ? t(texts19.phoneNumberOptional) : t(texts19.phoneNumber));
@@ -4993,7 +4896,7 @@ var PhoneNumberInput = ({
         variant,
         allowedCountryCodes,
         "data-state": "on",
-        invalid
+        size
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5001,6 +4904,7 @@ var PhoneNumberInput = ({
       {
         ref,
         type: "tel",
+        size,
         ...props,
         value: value.nationalNumber,
         invalid,
@@ -5056,7 +4960,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__ */ jsxRuntime.jsx(
     Input,
@@ -5064,8 +4968,9 @@ var SearchInput = ({
       ref,
       type: "search",
       variant,
+      size,
       ...props,
-      startElement: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.SearchOutline24Icon, { color: "icon" }),
+      startElement: size == "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.SearchOutline24Icon, { color: "icon" }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.SearchOutline18Icon, { color: "icon" }),
       endElement: clearButton && /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
         {
@@ -5073,7 +4978,7 @@ var SearchInput = ({
           type: "button",
           size: "sm",
           "aria-label": t(texts20.reset),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {}),
+          icon: size == "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline18Icon, {}),
           onClick: onReset
         }
       ),
@@ -5101,6 +5006,7 @@ var Select = ({
 }) => {
   const {
     variant = "core",
+    size = "md",
     children,
     positioning,
     label,
@@ -5110,8 +5016,6 @@ var Select = ({
     css,
     ...rest
   } = props;
-  const recipe = react.useSlotRecipe({ key: "select" });
-  const styles = recipe({ variant });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field3,
     {
@@ -5128,12 +5032,12 @@ var Select = ({
           ref,
           positioning: { sameWidth: true, ...positioning },
           variant,
-          css: styles.root,
+          size,
           position: "relative",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: !!label }) }),
-            label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, size, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: !!label }) }),
+            label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { baseStyle: css, children })
           ]
         }
       )
@@ -5155,16 +5059,14 @@ var SelectItem = ({
   ...props
 }) => {
   const { item, children, description, ...rest } = props;
-  const recipe = react.useSlotRecipe({ key: "select" });
-  const styles = recipe();
   const selectContext = react.useSelectContext();
   const multiple = selectContext.multiple;
   const isSelected = selectContext.value.includes(item.value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, css: styles.item, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, children: [
     multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemText, { display: "flex", children }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
+      description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "item-description", children: description })
     ] }),
     !multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CheckmarkFill18Icon, {}) })
   ] });
@@ -5182,24 +5084,16 @@ var SelectItemGroup = function SelectItemGroup2({
 };
 var SelectTrigger = function SelectTrigger2({
   ref,
+  size = "md",
   ...props
 }) {
   const { children, clearable, ...rest } = props;
-  const recipe = react.useSlotRecipe({ key: "select" });
-  const styles = recipe();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Control, { ...rest, css: styles.control, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Select.Trigger, { ref, css: styles.trigger, children }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      react.Select.IndicatorGroup,
-      {
-        css: styles.indicatorGroup,
-        "data-part": "indicator-group",
-        children: [
-          clearable && /* @__PURE__ */ jsxRuntime.jsx(SelectClearTrigger, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.indicator, "data-part": "indicator", children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Control, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Select.Trigger, { ref, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Select.IndicatorGroup, { "data-part": "indicator-group", children: [
+      clearable && /* @__PURE__ */ jsxRuntime.jsx(SelectClearTrigger, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "indicator", children: size == "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill18Icon, {}) })
+    ] })
   ] });
 };
 var SelectClearTrigger = function SelectClearTrigger2({
@@ -5236,7 +5130,7 @@ var SelectValueText = function SelectValueText2({
       ...rest,
       ref,
       placeholder,
-      paddingTop: withPlaceholder ? "4" : "0",
+      "data-with-placeholder": withPlaceholder || void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(react.Select.Context, { children: (select) => {
         const items = select.selectedItems;
         if (items.length === 0)
@@ -5244,7 +5138,7 @@ var SelectValueText = function SelectValueText2({
         if (children)
           return children(items);
         if (multiple) {
-          return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 0.5, marginBottom: 1, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 0.5, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
               size: "sm",
@@ -7403,10 +7297,6 @@ var inputRecipe = react.defineRecipe({
     transitionDuration: "fast",
     color: "text",
     position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
     _disabled: {
       backgroundColor: "surface.disabled",
       outline: "1px solid",
@@ -7469,10 +7359,25 @@ var inputRecipe = react.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 = react.defineRecipe({
@@ -8046,12 +7951,10 @@ var selectAnatomy = anatomy.createAnatomy("select").parts(
   "root",
   "trigger",
   "indicatorGroup",
-  "indicator",
-  "selectContent",
+  "content",
   "item",
   "control",
   "itemText",
-  "itemDescription",
   "itemGroup",
   "itemGroupLabel",
   "label",
@@ -8679,7 +8582,6 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      padding: 0.5,
       borderRadius: "xs"
     },
     currentLink: {
@@ -9718,17 +9620,15 @@ var fieldSlotRecipe = react.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",
@@ -9755,6 +9655,41 @@ var fieldSlotRecipe = react.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 = react.defineSlotRecipe({
@@ -10889,7 +10824,7 @@ var menuSlotRecipe = react.defineSlotRecipe({
     variant: "core"
   }
 });
-var _a5, _b4;
+var _a5, _b4, _c2, _d2, _e, _f;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -10941,7 +10876,22 @@ var nativeSelectSlotRecipe = react.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 = react.defineSlotRecipe({
@@ -11371,14 +11321,9 @@ var selectSlotRecipe = react.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",
@@ -11389,47 +11334,46 @@ var selectSlotRecipe = react.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",
@@ -11482,9 +11426,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "surface.accent.hover",
-        outline: "2px solid core.outline",
-        outlineOffset: "2px"
+        backgroundColor: "surface.accent.hover"
       },
       _selected: {
         backgroundColor: "surface.accent"
@@ -11492,6 +11434,10 @@ var selectSlotRecipe = react.defineSlotRecipe({
       _icon: {
         width: 3,
         height: 3
+      },
+      "& [data-part='item-description']": {
+        fontSize: ["mobile.xs", "desktop.xs"],
+        color: "text.ghost"
       }
     },
     control: {
@@ -11510,7 +11456,8 @@ var selectSlotRecipe = react.defineSlotRecipe({
       }
     },
     itemText: {
-      flex: "1"
+      flex: "1",
+      alignItems: "center"
     },
     itemGroup: {
       _first: { mt: "0" }
@@ -11518,14 +11465,6 @@ var selectSlotRecipe = react.defineSlotRecipe({
     itemGroupLabel: {
       py: "1",
       fontWeight: "medium"
-    },
-    valueText: {},
-    itemDescription: {
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text.ghost",
-      "[aria-selected='true'] &": {
-        color: "text.ghost"
-      }
     }
   },
   variants: {
@@ -11546,6 +11485,10 @@ var selectSlotRecipe = react.defineSlotRecipe({
             color: "text.disabled",
             backgroundColor: "surface.disabled"
           }
+        },
+        content: {
+          outline: "2px solid",
+          outlineColor: "outline.core"
         }
       },
       floating: {
@@ -11590,7 +11533,68 @@ var selectSlotRecipe = react.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 = react.defineSlotRecipe({