@12-apps/ui 6.36.0 → 6.37.0

package/dist/{chunk-KCAW6HRO.js → chunk-3AOQBR7N.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4WCDMCIS.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 
 // src/components/feedback/ConfirmAction/ConfirmButton.tsx
 function createConfirmButton(copy, errorText) {
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-KCAW6HRO.js.map
+//# sourceMappingURL=chunk-3AOQBR7N.js.map

package/dist/{chunk-GVLZZCSX.js → chunk-4B5XUQQS.js}

@@ -1,9 +1,9 @@
 import {
   AddressFallbackField
-} from "./chunk-YESTO24O.js";
+} from "./chunk-TXEN3QJ4.js";
 import {
   AddressAutocompleteField
-} from "./chunk-7ZG7T2YN.js";
+} from "./chunk-7GHYCQCJ.js";
 import {
   useAddressAutocomplete
 } from "./chunk-WC3W36AM.js";
@@ -35,4 +35,4 @@ export {
   AddressAutocomplete,
   AddressAutocomplete_default
 };
-//# sourceMappingURL=chunk-GVLZZCSX.js.map
+//# sourceMappingURL=chunk-4B5XUQQS.js.map

package/dist/{chunk-ADHMNIWS.js → chunk-4CXEWFKO.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-ZCPSND5Y.js";
 import {
   SR_ONLY_SX
-} from "./chunk-7BZTZ2WG.js";
+} from "./chunk-VY2BMSHN.js";
 import {
   EmptyState
 } from "./chunk-HN3PZTUK.js";
@@ -117,4 +117,4 @@ export {
   FleetMap,
   FleetMap_default
 };
-//# sourceMappingURL=chunk-ADHMNIWS.js.map
+//# sourceMappingURL=chunk-4CXEWFKO.js.map

package/dist/{chunk-J4NXTSJY.js → chunk-4JFL62K3.js}

@@ -1,7 +1,7 @@
 import {
   onTrackInk,
   switchSx
-} from "./chunk-2PBT2HQH.js";
+} from "./chunk-AUSUCZYR.js";
 import {
   LABEL_GAP_UNITS,
   SWITCH_ICON_SIZES,
@@ -65,7 +65,7 @@ var SwitchIcon = ({
       sx: {
         position: "absolute",
         top: "50%",
-        ...isOn ? { left: shown ? 4 : "50%" } : { right: shown ? 4 : "50%" },
+        ...isOn ? { left: shown ? sxRem(4) : "50%" } : { right: shown ? sxRem(4) : "50%" },
         transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
         opacity: shown ? 1 : 0,
         transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
@@ -164,7 +164,7 @@ var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, description
         // The floor applies to the row the label shares with the control. A
         // description already makes the row taller than 40px, so forcing it
         // there would only add blank space.
-        ...description ? {} : { minHeight: TAP_TARGET_MIN },
+        ...description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) },
         // A disabled control's label toggles nothing, so it must not wear the
         // cursor that says it does.
         ...htmlFor && !disabled ? { cursor: "pointer" } : {}
@@ -220,4 +220,4 @@ export {
   SwitchHelper,
   SwitchRow
 };
-//# sourceMappingURL=chunk-J4NXTSJY.js.map
+//# sourceMappingURL=chunk-4JFL62K3.js.map

package/dist/chunk-4JFL62K3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport MuiSwitch from '@mui/material/Switch/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { LABEL_GAP_UNITS, SWITCH_ICON_SIZES, TAP_TARGET_MIN } from './Switch.metrics';\nimport { onTrackInk, switchSx } from './Switch.styles';\nimport type { SwitchFlags } from './Switch.styles';\nimport type { SwitchProps } from './Switch.types';\nimport { sxRem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nconst StyledSwitch = styled(MuiSwitch, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customColor',\n      'customSize',\n      'glow',\n      'glass',\n      'gradient',\n      'trackWidth',\n      'trackHeight',\n      'onText',\n      'offText',\n      'loading',\n      'ripple',\n      'pulse',\n    ].includes(prop as string),\n})<SwitchFlags>(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));\n\n/**\n * A top or bottom label stacks and aligns to the start; start/end sit the label\n * beside the control and centre it.\n */\nconst StyledLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['labelPosition', 'error'].includes(prop as string),\n})<{ labelPosition?: string; error?: boolean }>(({ theme, labelPosition, error }) => {\n  const stacked = labelPosition === 'top' || labelPosition === 'bottom';\n\n  return {\n    display: 'flex',\n    alignItems: stacked ? 'flex-start' : 'center',\n    flexDirection:\n      labelPosition === 'top' ? 'column' : labelPosition === 'bottom' ? 'column-reverse' : 'row',\n    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),\n    width: '100%',\n    ...(error && { '& .MuiTypography-root': { color: theme.palette.error.main } }),\n  };\n});\n\n/**\n * A plain wrapper over the styled row. Exporting the styled component itself\n * needs a @mui/system reference tsc calls unportable (TS2742).\n */\nconst LabelContainer: React.FC<{\n  labelPosition?: string;\n  error?: boolean;\n  children: React.ReactNode;\n}> = ({ labelPosition, error, children }) => (\n  <StyledLabelContainer labelPosition={labelPosition} error={error}>\n    {children}\n  </StyledLabelContainer>\n);\n\nexport interface SwitchIconProps {\n  icon: React.ReactNode;\n  /** True when this icon is the one the current state should show. */\n  shown: boolean;\n  animated: boolean;\n  size: string;\n  side: 'on' | 'off';\n  /** The ink for the ON icon, which sits on the brand-filled track (FUT-1924). */\n  onInk: string;\n}\n\n/**\n * One of the two icons overlaid on the track. The on icon slides to the left\n * edge when checked and the off icon to the right when unchecked; they are\n * mirror images, so they share this component rather than being written twice.\n */\nexport const SwitchIcon: React.FC<SwitchIconProps> = ({\n  icon,\n  shown,\n  animated,\n  size,\n  side,\n  onInk,\n}) => {\n  const isOn = side === 'on';\n  const translate = isOn ? 'translate(-50%, -50%)' : 'translate(50%, -50%)';\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        ...(isOn ? { left: shown ? sxRem(4) : '50%' } : { right: shown ? sxRem(4) : '50%' }),\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n        opacity: shown ? 1 : 0,\n        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,\n        pointerEvents: 'none',\n        zIndex: 2,\n        color: isOn ? onInk : 'text.secondary',\n        fontSize: sxRem(SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md),\n      }}\n    >\n      {icon}\n    </Box>\n  );\n};\n\nexport interface SwitchControlProps extends SwitchFlags {\n  checked?: boolean;\n  onChange?: SwitchProps['onChange'];\n  onIcon?: React.ReactNode;\n  offIcon?: React.ReactNode;\n  animated: boolean;\n  size: string;\n  dataTestId?: string;\n  switchRef?: React.Ref<HTMLButtonElement>;\n  /** The id the label points at — always set, so the input always has one. */\n  inputId: string;\n  /** The caller's own `inputProps`, merged rather than spread over (FUT-1905). */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** The description's id, appended to whatever the caller described it by. */\n  describedBy?: string;\n  rest: Record<string, unknown>;\n}\n\n/** The control itself: the track, and the two icons that may sit over it. */\nexport const SwitchControl: React.FC<SwitchControlProps> = ({\n  checked,\n  onChange,\n  onIcon,\n  offIcon,\n  animated,\n  size,\n  dataTestId,\n  switchRef,\n  inputId,\n  inputProps,\n  describedBy,\n  rest,\n  ...flags\n}) => {\n  const props = rest as Record<string, unknown> & { disabled?: boolean };\n  const theme = useTheme();\n  const onInk = onTrackInk(theme, flags);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n      <StyledSwitch\n        ref={switchRef}\n        {...flags}\n        checked={checked}\n        onChange={onChange}\n        disabled={Boolean(flags.loading) || props.disabled}\n        {...props}\n        /*\n          AFTER `props`, not before it (FUT-1905). `inputProps` used to be\n          written first and `{...props}` spread over it, so a caller passing\n          `inputProps` of its own silently replaced the whole object — losing\n          the `data-testid` every spec finds this control by, and the `id` the\n          label points at.\n\n          The order inside is the contract. Everything the component DEFAULTS\n          goes first, so a caller's own key still wins — that is what it could\n          do before, and a fix for a clobber must not become a clobber the\n          other way. Only the two the component OWNS come last: the `id`, which\n          already resolved the caller's spelling of it (`switchIds`), and\n          `aria-describedby`, which by then already CONTAINS whatever the\n          caller passed, in either spelling.\n        */\n        inputProps={\n          {\n            'aria-label': props['aria-label'],\n            'data-testid': dataTestId || 'switch',\n            ...inputProps,\n            id: inputId,\n            'aria-describedby': describedBy,\n          } as React.InputHTMLAttributes<HTMLInputElement>\n        }\n      />\n\n      {onIcon && (\n        <SwitchIcon\n          icon={onIcon}\n          shown={Boolean(checked)}\n          animated={animated}\n          size={size}\n          side=\"on\"\n          onInk={onInk}\n        />\n      )}\n      {offIcon && (\n        <SwitchIcon\n          icon={offIcon}\n          shown={!checked}\n          animated={animated}\n          size={size}\n          side=\"off\"\n          onInk={onInk}\n        />\n      )}\n    </Box>\n  );\n};\n\n/**\n * The helper line, which is where a validation message lands — so it is\n * `aria-describedby`'d like the description (FUT-1905).\n *\n * It carried no `id` and nothing pointed at it, which means an `error` state\n * announced as \"checkbox, checked\" and nothing else: the one sentence saying\n * WHY was on screen and outside the accessibility tree.\n */\nexport const SwitchHelper: React.FC<{\n  helperText?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  id?: string;\n}> = ({ helperText, error, dataTestId, id }) =>\n  helperText ? (\n    <FormHelperText\n      id={id}\n      error={error}\n      sx={{ mt: 1 }}\n      data-testid={dataTestId ? `${dataTestId}-helper` : 'switch-helper'}\n    >\n      {helperText}\n    </FormHelperText>\n  ) : null;\n\n/**\n * The label, WIRED to the input it names (FUT-1905).\n *\n * It used to be a `<p>` rendered as the control's sibling, with no `for`, no\n * `id` on the input and no `aria-labelledby` — so a labelled `Switch` announced\n * as \"checkbox, checked\" with no name, and clicking the words did nothing. Every\n * `Switch` in a consumer app was affected, not one call site, and the workaround\n * each had to write was a hand-typed `aria-label` duplicating the text already\n * on screen.\n *\n * A real `<label for>` fixes the name and the pointer in the same stroke, and it\n * is also the answer to the TAP TARGET: no size in `SWITCH_SIZES` clears the\n * 40px floor (`xl` is 34px tall), so the control cannot be made big enough by\n * passing a bigger `size` — instead the label becomes the target, which is how\n * this is normally solved. Hence `display: flex` and `TAP_TARGET_MIN`: the\n * label fills its half of the row and is never shorter than the floor.\n *\n * The DESCRIPTION stays outside the label and is pointed at by\n * `aria-describedby` instead: inside it, a two-line explanation would be read\n * out as part of the control's name.\n */\nconst SwitchLabel: React.FC<{\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  /** The input's id. Omitted only where there is no input to point at. */\n  htmlFor?: string;\n  descriptionId?: string;\n  disabled?: boolean;\n}> = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => (\n  <Box sx={{ flex: 1, minWidth: 0 }}>\n    <Typography\n      component=\"label\"\n      htmlFor={htmlFor}\n      variant=\"body2\"\n      fontWeight={500}\n      color={error ? 'error.main' : 'text.primary'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        // The floor applies to the row the label shares with the control. A\n        // description already makes the row taller than 40px, so forcing it\n        // there would only add blank space.\n        ...(description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) }),\n        // A disabled control's label toggles nothing, so it must not wear the\n        // cursor that says it does.\n        ...(htmlFor && !disabled ? { cursor: 'pointer' } : {}),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-label` : 'switch-label'}\n    >\n      {label}\n    </Typography>\n    {description && (\n      <Typography\n        id={descriptionId}\n        variant=\"caption\"\n        color={error ? 'error.main' : 'text.secondary'}\n        sx={{ display: 'block', mt: 0.5 }}\n      >\n        {description}\n      </Typography>\n    )}\n  </Box>\n);\n\n/**\n * The control and its label in one row, or the control alone.\n *\n * Lives here rather than inline in `Switch.tsx` because the two branches only\n * differ in what surrounds the control — and the component that assembles them\n * was long enough that the wiring got hard to see between them.\n */\nexport const SwitchRow: React.FC<{\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  labelPosition?: string;\n  error?: boolean;\n  dataTestId?: string;\n  htmlFor: string;\n  descriptionId?: string;\n  disabled?: boolean;\n  control: React.ReactNode;\n}> = ({\n  label,\n  description,\n  labelPosition,\n  error,\n  dataTestId,\n  htmlFor,\n  descriptionId,\n  disabled,\n  control,\n}) => {\n  if (!label) return <>{control}</>;\n\n  return (\n    <LabelContainer labelPosition={labelPosition} error={error}>\n      {labelPosition === 'start' && control}\n\n      <SwitchLabel\n        label={label}\n        description={description}\n        error={error}\n        dataTestId={dataTestId}\n        htmlFor={htmlFor}\n        descriptionId={descriptionId}\n        disabled={disabled}\n      />\n\n      {labelPosition !== 'start' && control}\n    </LabelContainer>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-XLYFOBBT.js → chunk-4PRZLII7.js}

@@ -17,7 +17,8 @@ import {
   splitTestId
 } from "./chunk-TYJR4GOF.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Checkbox/Checkbox.tsx
@@ -25,40 +26,41 @@ import MuiCheckbox from "@mui/material/Checkbox/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import FormControlLabel from "@mui/material/FormControlLabel/index.js";
 import FormHelperText from "@mui/material/FormHelperText/index.js";
-import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { alpha, keyframes, styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var pulse = keyframes`
+var pulse = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};
   }
   70% {
-    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};
+    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${effectInk(0)};
   }
 `;
-var glow = keyframes`
+var glow = (theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};
   }
   50% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};
   }
 `;
+var cornerOf = (theme, radius) => typeof radius === "number" ? rem(theme, radius) : radius;
 var StyledCheckbox = styled(MuiCheckbox, {
   shouldForwardProp: (prop) => !["customVariant", "ripple", "glow", "pulse"].includes(prop)
 })(
   ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
     ...customVariant === "rounded" && {
       "& .MuiSvgIcon-root": {
-        borderRadius: CHECKBOX_VARIANT.rounded.radius
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius)
       }
     },
     ...customVariant === "toggle" && {
       "& .MuiSvgIcon-root": {
-        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),
         transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`
       }
     },
@@ -70,10 +72,10 @@ var StyledCheckbox = styled(MuiCheckbox, {
         }
       },
       ...glowProp && {
-        animation: `${glow} ${CHECKBOX_GLOW.ms / 1e3}s ease-in-out infinite`
+        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1e3}s ease-in-out infinite`
       },
       ...pulseProp && {
-        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1e3}s infinite`
+        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1e3}s infinite`
       },
       "&:hover": {
         backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA)
@@ -91,7 +93,7 @@ var StyledFormControlLabel = styled(FormControlLabel, {
   shouldForwardProp: (prop) => prop !== "error"
 })(
   ({ theme, error }) => ({
-    marginLeft: CHECKBOX_LABEL.marginLeft,
+    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),
     "& .MuiFormControlLabel-label": {
       color: error ? theme.palette.error.main : theme.palette.text.primary,
       fontSize: rem(theme, CHECKBOX_LABEL.fontSize)
@@ -116,6 +118,7 @@ var Checkbox = React.forwardRef(
       disabled,
       ...others
     } = resolveCheckboxProps(rawProps);
+    const theme = useTheme();
     const isDisabled = disabled || loading;
     const { testId: dataTestId, rest: props } = splitTestId(others);
     const testId = makeTestId(dataTestId);
@@ -136,13 +139,13 @@ var Checkbox = React.forwardRef(
       loading && /* @__PURE__ */ jsx(
         CircularProgress,
         {
-          size: CHECKBOX_SPINNER.size,
+          size: rem(theme, CHECKBOX_SPINNER.size),
           sx: {
             position: "absolute",
             top: "50%",
             left: "50%",
-            marginTop: `${CHECKBOX_SPINNER.offset}px`,
-            marginLeft: `${CHECKBOX_SPINNER.offset}px`,
+            marginTop: sxRem(CHECKBOX_SPINNER.offset),
+            marginLeft: sxRem(CHECKBOX_SPINNER.offset),
             color: "primary.main"
           }
         }
@@ -177,4 +180,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-XLYFOBBT.js.map
+//# sourceMappingURL=chunk-4PRZLII7.js.map

package/dist/chunk-4PRZLII7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst pulse = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\n/** A variant's corner: a design-px number through the type scale, a percentage as it is. */\nconst cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>\n  typeof radius === 'number' ? rem(theme, radius) : radius;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const theme = useTheme();\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={rem(theme, CHECKBOX_SPINNER.size)}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: sxRem(CHECKBOX_SPINNER.offset),\n              marginLeft: sxRem(CHECKBOX_SPINNER.offset),\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}

package/dist/{chunk-AMTFP7QA.js → chunk-4RDJMIWL.js}

@@ -5,26 +5,29 @@ import {
   absoluteInk,
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Textarea/Textarea.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var glowAnimation = keyframes`
+var glowAnimation = (theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
   50% {
-    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;
-var floatAnimation = keyframes`
+var floatAnimation = (theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-3px);
+    transform: translateY(${rem(theme, -3)});
   }
   100% {
     transform: translateY(0px);
@@ -59,29 +62,29 @@ var textareaEmphasisStyles = ({
 }) => {
   const glassStyles = glass ? {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${fieldEdge(theme)}`,
     "&:hover": {
       backgroundColor: alpha(theme.palette.background.paper, 0.15),
-      backdropFilter: "blur(25px)"
+      backdropFilter: `blur(${rem(theme, 25)})`
     },
     "&:focus": {
       backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      backdropFilter: "blur(30px)"
+      backdropFilter: `blur(${rem(theme, 30)})`
     }
   } : {};
   const gradientStyles = gradient ? {
     background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,
-    border: "2px solid transparent",
+    border: `${rem(theme, 2)} solid transparent`,
     "&:focus": {
       background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                  linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`
     }
   } : {};
   const glowStyles = glow ? {
-    animation: `${glowAnimation} 2s ease-in-out infinite`,
-    boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`
+    animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+    boxShadow: `0 0 ${rem(theme, 10)} ${alpha(colorPalette.main, 0.3)}`
   } : {};
   return { ...glassStyles, ...gradientStyles, ...glowStyles };
 };
@@ -91,4 +94,4 @@ export {
   getColorFromTheme,
   textareaEmphasisStyles
 };
-//# sourceMappingURL=chunk-AMTFP7QA.js.map
+//# sourceMappingURL=chunk-4RDJMIWL.js.map

package/dist/chunk-4RDJMIWL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst glowAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor;\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;\n  }\n  100% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor;\n  }\n`;\n\n// Ripple animation for buttons (commented out - not currently used)\n// const rippleAnimation = keyframes`\n//   0% {\n//     transform: scale(0);\n//     opacity: 1;\n//   }\n//   100% {\n//     transform: scale(4);\n//     opacity: 0;\n//   }\n// `;\n\n// Float animation for rich text toolbar\nexport const floatAnimation = (theme: Theme) => keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(${rem(theme, -3)});\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\ntype ResolvedPalette = {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n};\n\ntype PartialPalette = { main: string; dark?: string; light?: string; contrastText?: string };\n\n// `neutral` is not a MUI palette entry, so it is the controls' neutral tone.\nconst neutralPalette = (theme: Theme): ResolvedPalette => controlNeutral(theme);\n\n// Each slot falls back to the palette's own main, then to primary — a custom\n// theme can define main without dark or light.\nconst pick = (...candidates: Array<string | undefined>): string =>\n  candidates.find(Boolean) ?? '';\n\nconst withFallbacks = (theme: Theme, palette: PartialPalette): ResolvedPalette => ({\n  main: pick(palette?.main, theme.palette.primary.main),\n  dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),\n  light: pick(palette?.light, palette?.main, theme.palette.primary.light),\n  contrastText: pick(palette?.contrastText, absoluteInk(theme).white),\n});\n\nexport const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PartialPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return withFallbacks(theme, colorMap[color] || theme.palette.primary);\n};\n\n// glass, gradient and glow are independent flags that each layer styles onto the\n// base. Spelled out here rather than inline so the styled() callback keeps one\n// branch instead of three.\nexport const textareaEmphasisStyles = ({\n  theme,\n  colorPalette,\n  glass,\n  gradient,\n  glow,\n}: {\n  theme: Theme;\n  colorPalette: { main: string; light?: string; dark?: string };\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}): CSSObject => {\nconst glassStyles = glass\n  ? {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${fieldEdge(theme)}`,\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.15),\n        backdropFilter: `blur(${rem(theme, 25)})`,\n      },\n      '&:focus': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.2),\n        backdropFilter: `blur(${rem(theme, 30)})`,\n      },\n    }\n  : {};\n\n// Gradient border effect\nconst gradientStyles = gradient\n  ? {\n      background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n               linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,\n      border: `${rem(theme, 2)} solid transparent`,\n      '&:focus': {\n        background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n                 linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`,\n      },\n    }\n  : {};\n\n// Glow effect\nconst glowStyles = glow\n  ? {\n      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,\n      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(colorPalette.main, 0.3)}`,\n    }\n  : {};\n\n  return { ...glassStyles, ...gradientStyles, ...glowStyles };\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,OAAO,iBAAiB;AAOjC,IAAM,gBAAgB,CAAC,UAAiB;AAAA;AAAA,sBAElB,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA,sBAGb,IAAI,OAAO,EAAE,CAAC,sBAAsB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,sBAGlD,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAiB5B,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKpB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1C,IAAM,iBAAiB,CAAC,UAAkC,eAAe,KAAK;AAI9E,IAAM,OAAO,IAAI,eACf,WAAW,KAAK,OAAO,KAAK;AAE9B,IAAM,gBAAgB,CAAC,OAAc,aAA8C;AAAA,EACjF,MAAM,KAAK,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACpD,MAAM,KAAK,SAAS,MAAM,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACnE,OAAO,KAAK,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,KAAK;AAAA,EACtE,cAAc,KAAK,SAAS,cAAc,YAAY,KAAK,EAAE,KAAK;AACpE;AAEO,IAAM,oBAAoB,CAAC,OAAc,UAAmC;AACjF,MAAI,UAAU,UAAW,QAAO,eAAe,KAAK;AAEpD,QAAM,WAA2C;AAAA,IAC/C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,cAAc,OAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,OAAO;AACtE;AAKO,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMiB;AACjB,QAAM,cAAc,QAChB;AAAA,IACE,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,QAAQ,aAAa,UAAU,KAAK,CAAC;AAAA,IACrC,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,MAC3D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF,IACA,CAAC;AAGL,QAAM,iBAAiB,WACnB;AAAA,IACE,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,yCAC7D,aAAa,IAAI,KAAK,aAAa,KAAK;AAAA,IAC3E,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC;AAAA,IACxB,WAAW;AAAA,MACT,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,2CAC7D,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,IAC5E;AAAA,EACF,IACA,CAAC;AAGL,QAAM,aAAa,OACf;AAAA,IACE,WAAW,GAAG,cAAc,KAAK,CAAC;AAAA,IAClC,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,EACnE,IACA,CAAC;AAEH,SAAO,EAAE,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW;AAC5D;","names":[]}

package/dist/{chunk-PYIASGI7.js → chunk-4RWPGWJW.js}

@@ -2,7 +2,7 @@ import {
   glowAnimation,
   gradientShiftAnimation,
   pulseAnimation
-} from "./chunk-D2HKCPEH.js";
+} from "./chunk-6LOGBWLG.js";
 import {
   absoluteInk,
   controlNeutral,
@@ -41,24 +41,24 @@ var getColorFromTheme = (theme, color) => {
   };
 };
 var SIZES = {
-  xs: { height: 4, thumbSize: 16, markHeight: 8 },
-  sm: { height: 6, thumbSize: 18, markHeight: 10 },
-  md: { height: 8, thumbSize: 20, markHeight: 12 },
-  lg: { height: 10, thumbSize: 24, markHeight: 14 },
-  xl: { height: 12, thumbSize: 28, markHeight: 16 }
+  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },
+  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },
+  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },
+  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },
+  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 16 }
 };
 var LABEL_SCALE = {
-  xs: { fontPx: 10, box: 28, markFont: 10.4 },
-  sm: { fontPx: 11, box: 30, markFont: 11.2 }
+  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },
+  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 }
 };
-var LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };
+var LABEL_DEFAULT = { fontPx: 12, boxPx: 32, markFont: 12 };
 var trackPart = ({ theme, flags, palette, geometry }) => {
   const { gradient, glow, glass, customVariant } = flags;
   const isGradientVariant = customVariant === "gradient";
   return {
     border: "none",
-    height: geometry.height,
-    borderRadius: geometry.height / 2,
+    height: rem(theme, geometry.heightPx),
+    borderRadius: rem(theme, geometry.heightPx / 2),
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     position: "relative",
     overflow: "hidden",
@@ -82,12 +82,12 @@ var trackPart = ({ theme, flags, palette, geometry }) => {
       }
     },
     ...glow && {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`
     },
     ...glass && {
       backgroundColor: alpha(palette.main, 0.8),
-      backdropFilter: "blur(10px)",
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`
     }
   };
@@ -95,12 +95,12 @@ var trackPart = ({ theme, flags, palette, geometry }) => {
 var railPart = ({ theme, flags, geometry }) => ({
   color: alpha(theme.palette.action.disabled, 0.3),
   opacity: 1,
-  height: geometry.height,
-  borderRadius: geometry.height / 2,
+  height: rem(theme, geometry.heightPx),
+  borderRadius: rem(theme, geometry.heightPx / 2),
   transition: "all 0.3s ease",
   ...flags.glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
   },
   ...flags.customVariant === "gradient" && {
@@ -113,10 +113,10 @@ var railPart = ({ theme, flags, geometry }) => ({
 var thumbPart = ({ theme, flags, palette, geometry }) => {
   const { gradient, glow, glass } = flags;
   return {
-    height: geometry.thumbSize,
-    width: geometry.thumbSize,
+    height: rem(theme, geometry.thumbSizePx),
+    width: rem(theme, geometry.thumbSizePx),
     backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
-    border: `2px solid ${palette.main}`,
+    border: `${rem(theme, 2)} solid ${palette.main}`,
     boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     position: "relative",
@@ -134,15 +134,15 @@ var thumbPart = ({ theme, flags, palette, geometry }) => {
       opacity: 0
     },
     "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
-      boxShadow: glow ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,
+      boxShadow: glow ? `${theme.shadows[4]}, 0 0 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`,
       transform: "scale(1.15)",
       "&::before": { animation: `${pulseAnimation} 0.6s ease-out` }
     },
     "&:active": { transform: "scale(1.05)" },
     ...glass && {
       backgroundColor: alpha(theme.palette.background.paper, 0.9),
-      backdropFilter: "blur(10px)",
-      border: `2px solid ${alpha(palette.main, 0.8)}`
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      border: `${rem(theme, 2)} solid ${alpha(palette.main, 0.8)}`
     },
     ...gradient && {
       background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
@@ -167,16 +167,16 @@ var valueLabelPart = ({ theme, flags, palette }) => {
     lineHeight: 1.2,
     fontSize: rem(theme, scale.fontPx),
     padding: 0,
-    width: scale.box,
-    height: scale.box,
-    borderRadius: gradient ? "8px" : "50% 50% 50% 0",
+    width: rem(theme, scale.boxPx),
+    height: rem(theme, scale.boxPx),
+    borderRadius: gradient ? rem(theme, 8) : "50% 50% 50% 0",
     backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),
     background: gradient ? `linear-gradient(135deg, ${palette.light}, ${palette.main})` : "unset",
-    backdropFilter: glass ? "blur(10px)" : "none",
+    backdropFilter: glass ? `blur(${rem(theme, 10)})` : "none",
     transformOrigin: "bottom left",
     transform: bubbleTransform.hidden,
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,
     "&:before": { display: "none" },
     "&.MuiSlider-valueLabelOpen": { transform: bubbleTransform.shown },
     "& > *": { transform: gradient ? "none" : "rotate(45deg)", fontWeight: 600 }
@@ -185,21 +185,21 @@ var valueLabelPart = ({ theme, flags, palette }) => {
 var markPart = ({ theme, flags, palette, geometry }) => {
   const { gradient, glow, customVariant } = flags;
   const isMarksVariant = customVariant === "marks";
-  const { markHeight, height } = geometry;
+  const { markHeightPx, heightPx } = geometry;
   return {
     backgroundColor: alpha(theme.palette.action.disabled, 0.5),
-    height: markHeight,
-    width: isMarksVariant ? 3 : 2,
+    height: rem(theme, markHeightPx),
+    width: rem(theme, isMarksVariant ? 3 : 2),
     // Centred on the rail rather than hanging below it.
-    marginTop: -(markHeight - height) / 2,
-    borderRadius: 1,
+    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),
+    borderRadius: rem(theme, 1),
     transition: "all 0.3s ease",
     "&.MuiSlider-markActive": {
       backgroundColor: gradient ? palette.light : palette.main,
-      width: isMarksVariant ? 4 : 2,
-      height: markHeight + 2,
-      marginTop: -(markHeight + 2 - height) / 2,
-      ...glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }
+      width: rem(theme, isMarksVariant ? 4 : 2),
+      height: rem(theme, markHeightPx + 2),
+      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),
+      ...glow && { boxShadow: `0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.5)}` }
     }
   };
 };
@@ -221,7 +221,7 @@ var sliderSx = (theme, flags) => {
   const input = { theme, flags, palette, geometry };
   return {
     color: palette.main,
-    height: geometry.height,
+    height: rem(theme, geometry.heightPx),
     "& .MuiSlider-track": trackPart(input),
     "& .MuiSlider-rail": railPart(input),
     "& .MuiSlider-thumb": thumbPart(input),
@@ -234,4 +234,4 @@ var sliderSx = (theme, flags) => {
 export {
   sliderSx
 };
-//# sourceMappingURL=chunk-PYIASGI7.js.map
+//# sourceMappingURL=chunk-4RWPGWJW.js.map

package/dist/chunk-4RWPGWJW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Slider/Slider.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';\nimport { rem } from '../../../tokens/relative';\n\nimport { absoluteInk, controlNeutral, onMedia, sheen } from '../../../tokens/ink';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || absoluteInk(theme).white,\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Design px, converted through the type scale where each is read. */\ninterface Geometry {\n  heightPx: number;\n  thumbSizePx: number;\n  markHeightPx: number;\n}\n\nconst SIZES: Record<SizeKey, Geometry> = {\n  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },\n  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },\n  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },\n  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },\n  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 16 },\n};\n\n/**\n * The value bubble and mark labels shrink at the two smallest sizes only. The\n * two fonts are design px, read through the type scale.\n */\nconst LABEL_SCALE: Record<string, { fontPx: number; boxPx: number; markFont: number }> = {\n  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },\n  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 },\n};\nconst LABEL_DEFAULT = { fontPx: 12, boxPx: 32, markFont: 12 };\n\nexport interface SliderFlags {\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  customVariant?: string;\n}\n\ninterface PartInput {\n  theme: Theme;\n  flags: SliderFlags;\n  palette: ColorPalette;\n  geometry: Geometry;\n}\n\nconst trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass, customVariant } = flags;\n  const isGradientVariant = customVariant === 'gradient';\n\n  return {\n    border: 'none',\n    height: rem(theme, geometry.heightPx),\n    borderRadius: rem(theme, geometry.heightPx / 2),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    overflow: 'hidden',\n    ...(gradient && {\n      background: isGradientVariant\n        ? `linear-gradient(90deg,\n              ${palette.light} 0%,\n              ${palette.main} 50%,\n              ${palette.dark} 100%)`\n        : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,\n      backgroundSize: '200% 100%',\n      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : 'none',\n      // A sheen that travels the filled portion while the gradient shifts.\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,\n        animation: `${gradientShiftAnimation} 2s linear infinite`,\n      },\n    }),\n    ...(glow && {\n      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,\n      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,\n    }),\n    ...(glass && {\n      backgroundColor: alpha(palette.main, 0.8),\n      backdropFilter: `blur(${rem(theme, 10)})`,\n      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`,\n    }),\n  };\n};\n\nconst railPart = ({ theme, flags, geometry }: PartInput): CSSObject => ({\n  color: alpha(theme.palette.action.disabled, 0.3),\n  opacity: 1,\n  height: rem(theme, geometry.heightPx),\n  borderRadius: rem(theme, geometry.heightPx / 2),\n  transition: 'all 0.3s ease',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n  ...(flags.customVariant === 'gradient' && {\n    background: `linear-gradient(90deg,\n          ${alpha(theme.palette.action.disabled, 0.2)},\n          ${alpha(theme.palette.action.disabled, 0.3)},\n          ${alpha(theme.palette.action.disabled, 0.2)})`,\n  }),\n});\n\nconst thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass } = flags;\n\n  return {\n    height: rem(theme, geometry.thumbSizePx),\n    width: rem(theme, geometry.thumbSizePx),\n    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,\n    border: `${rem(theme, 2)} solid ${palette.main}`,\n    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    // Sits invisible until focus or hover runs the pulse keyframes over it.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      backgroundColor: palette.main,\n      opacity: 0,\n    },\n    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {\n      boxShadow: glow\n        ? `${theme.shadows[4]}, 0 0 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`\n        : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`,\n      transform: 'scale(1.15)',\n      '&::before': { animation: `${pulseAnimation} 0.6s ease-out` },\n    },\n    '&:active': { transform: 'scale(1.05)' },\n    ...(glass && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.9),\n      backdropFilter: `blur(${rem(theme, 10)})`,\n      border: `${rem(theme, 2)} solid ${alpha(palette.main, 0.8)}`,\n    }),\n    ...(gradient && {\n      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,\n      border: 'none',\n      color: onMedia(theme),\n    }),\n  };\n};\n\n/** Transparent under a gradient (the gradient itself paints it), else the accent. */\nconst bubbleBackground = (palette: ColorPalette, gradient: boolean, glass: boolean) => {\n  if (gradient) return 'transparent';\n  return glass ? alpha(palette.main, 0.9) : palette.main;\n};\n\n/** The bubble's closed and open transforms; only the scale differs between them. */\nconst bubbleTransformFor = (gradient: boolean) => {\n  const base = gradient ? 'translate(50%, -150%)' : 'translate(50%, -100%) rotate(-45deg)';\n  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };\n};\n\n/**\n * The value bubble. Without `gradient` it is MUI's teardrop — a rotated square\n * with one square corner — so its contents are counter-rotated; the gradient\n * look is a plain rounded box and needs neither rotation.\n */\nconst valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {\n  const { gradient, glass, customSize } = flags;\n  const scale = LABEL_SCALE[customSize ?? ''] ?? LABEL_DEFAULT;\n  const bubbleTransform = bubbleTransformFor(Boolean(gradient));\n\n  return {\n    lineHeight: 1.2,\n    fontSize: rem(theme, scale.fontPx),\n    padding: 0,\n    width: rem(theme, scale.boxPx),\n    height: rem(theme, scale.boxPx),\n    borderRadius: gradient ? rem(theme, 8) : '50% 50% 50% 0',\n    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),\n    background: gradient\n      ? `linear-gradient(135deg, ${palette.light}, ${palette.main})`\n      : 'unset',\n    backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',\n    transformOrigin: 'bottom left',\n    transform: bubbleTransform.hidden,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    boxShadow: `${theme.shadows[2]}, 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,\n    '&:before': { display: 'none' },\n    '&.MuiSlider-valueLabelOpen': { transform: bubbleTransform.shown },\n    '& > *': { transform: gradient ? 'none' : 'rotate(45deg)', fontWeight: 600 },\n  };\n};\n\nconst markPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, customVariant } = flags;\n  const isMarksVariant = customVariant === 'marks';\n  const { markHeightPx, heightPx } = geometry;\n\n  return {\n    backgroundColor: alpha(theme.palette.action.disabled, 0.5),\n    height: rem(theme, markHeightPx),\n    width: rem(theme, isMarksVariant ? 3 : 2),\n    // Centred on the rail rather than hanging below it.\n    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),\n    borderRadius: rem(theme, 1),\n    transition: 'all 0.3s ease',\n    '&.MuiSlider-markActive': {\n      backgroundColor: gradient ? palette.light : palette.main,\n      width: rem(theme, isMarksVariant ? 4 : 2),\n      height: rem(theme, markHeightPx + 2),\n      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),\n      ...(glow && { boxShadow: `0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.5)}` }),\n    },\n  };\n};\n\nconst markLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => ({\n  fontSize: rem(theme, (LABEL_SCALE[flags.customSize ?? ''] ?? LABEL_DEFAULT).markFont),\n  color: theme.palette.text.secondary,\n  marginTop: theme.spacing(1.5),\n  fontWeight: 500,\n  transition: 'all 0.3s ease',\n  '&.MuiSlider-markLabelActive': {\n    color: palette.main,\n    fontWeight: 600,\n    transform: 'scale(1.05)',\n  },\n});\n\nexport const sliderSx = (theme: Theme, flags: SliderFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = SIZES[flags.customSize as SizeKey] ?? SIZES.md;\n  const input: PartInput = { theme, flags, palette, geometry };\n\n  return {\n    color: palette.main,\n    height: rem(theme, geometry.heightPx),\n    '& .MuiSlider-track': trackPart(input),\n    '& .MuiSlider-rail': railPart(input),\n    '& .MuiSlider-thumb': thumbPart(input),\n    '& .MuiSlider-valueLabel': valueLabelPart(input),\n    '& .MuiSlider-mark': markPart(input),\n    '& .MuiSlider-markLabel': markLabelPart(input),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAgBtB,IAAM,iBAAiB,CAAC,UAA+B,eAAe,KAAK;AAG3E,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB,YAAY,KAAK,EAAE;AAAA,EAC3D;AACF;AAWA,IAAM,QAAmC;AAAA,EACvC,IAAI,EAAE,UAAU,GAAG,aAAa,IAAI,cAAc,EAAE;AAAA,EACpD,IAAI,EAAE,UAAU,GAAG,aAAa,IAAI,cAAc,GAAG;AAAA,EACrD,IAAI,EAAE,UAAU,GAAG,aAAa,IAAI,cAAc,GAAG;AAAA,EACrD,IAAI,EAAE,UAAU,IAAI,aAAa,IAAI,cAAc,GAAG;AAAA,EACtD,IAAI,EAAE,UAAU,IAAI,aAAa,IAAI,cAAc,GAAG;AACxD;AAMA,IAAM,cAAmF;AAAA,EACvF,IAAI,EAAE,QAAQ,IAAI,OAAO,IAAI,UAAU,KAAK;AAAA,EAC5C,IAAI,EAAE,QAAQ,IAAI,OAAO,IAAI,UAAU,KAAK;AAC9C;AACA,IAAM,gBAAgB,EAAE,QAAQ,IAAI,OAAO,IAAI,UAAU,GAAG;AAkB5D,IAAM,YAAY,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC/E,QAAM,EAAE,UAAU,MAAM,OAAO,cAAc,IAAI;AACjD,QAAM,oBAAoB,kBAAkB;AAE5C,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ,IAAI,OAAO,SAAS,QAAQ;AAAA,IACpC,cAAc,IAAI,OAAO,SAAS,WAAW,CAAC;AAAA,IAC9C,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAI,YAAY;AAAA,MACd,YAAY,oBACR;AAAA,gBACM,QAAQ,KAAK;AAAA,gBACb,QAAQ,IAAI;AAAA,gBACZ,QAAQ,IAAI,WAClB,0BAA0B,QAAQ,KAAK,KAAK,QAAQ,IAAI;AAAA,MAC5D,gBAAgB;AAAA,MAChB,WAAW,oBAAoB,GAAG,sBAAsB,sBAAsB;AAAA;AAAA,MAE9E,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,uCAAuC,MAAM,OAAO,GAAG,CAAC;AAAA,QACpE,WAAW,GAAG,sBAAsB;AAAA,MACtC;AAAA,IACF;AAAA,IACA,GAAI,QAAQ;AAAA,MACV,WAAW,GAAG,cAAc,KAAK,CAAC;AAAA,MAClC,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAC,eAAe,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IACvH;AAAA,IACA,GAAI,SAAS;AAAA,MACX,iBAAiB,MAAM,QAAQ,MAAM,GAAG;AAAA,MACxC,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,MACtC,QAAQ,aAAa,MAAM,QAAQ,SAAS,QAAQ,MAAM,GAAG,CAAC;AAAA,IAChE;AAAA,EACF;AACF;AAEA,IAAM,WAAW,CAAC,EAAE,OAAO,OAAO,SAAS,OAA6B;AAAA,EACtE,OAAO,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,EAC/C,SAAS;AAAA,EACT,QAAQ,IAAI,OAAO,SAAS,QAAQ;AAAA,EACpC,cAAc,IAAI,OAAO,SAAS,WAAW,CAAC;AAAA,EAC9C,YAAY;AAAA,EACZ,GAAI,MAAM,SAAS;AAAA,IACjB,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACxD;AAAA,EACA,GAAI,MAAM,kBAAkB,cAAc;AAAA,IACxC,YAAY;AAAA,YACJ,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,YACzC,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,YACzC,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,EACnD;AACF;AAEA,IAAM,YAAY,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC/E,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI;AAElC,SAAO;AAAA,IACL,QAAQ,IAAI,OAAO,SAAS,WAAW;AAAA,IACvC,OAAO,IAAI,OAAO,SAAS,WAAW;AAAA,IACtC,iBAAiB,WAAW,QAAQ,OAAO,YAAY,KAAK,EAAE;AAAA,IAC9D,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,QAAQ,IAAI;AAAA,IAC9C,WAAW,GAAG,MAAM,QAAQ,CAAC,CAAC,aAAa,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IACnE,YAAY;AAAA,IACZ,UAAU;AAAA;AAAA,IAEV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,iBAAiB,QAAQ;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IACA,sDAAsD;AAAA,MACpD,WAAW,OACP,GAAG,MAAM,QAAQ,CAAC,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,QAAQ,MAAM,IAAI,CAAC,KAC3H,GAAG,MAAM,QAAQ,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,QAAQ,MAAM,IAAI,CAAC;AAAA,MAC5E,WAAW;AAAA,MACX,aAAa,EAAE,WAAW,GAAG,cAAc,iBAAiB;AAAA,IAC9D;AAAA,IACA,YAAY,EAAE,WAAW,cAAc;AAAA,IACvC,GAAI,SAAS;AAAA,MACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,MACtC,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IAC5D;AAAA,IACA,GAAI,YAAY;AAAA,MACd,YAAY,2BAA2B,QAAQ,KAAK,KAAK,QAAQ,IAAI;AAAA,MACrE,QAAQ;AAAA,MACR,OAAO,QAAQ,KAAK;AAAA,IACtB;AAAA,EACF;AACF;AAGA,IAAM,mBAAmB,CAAC,SAAuB,UAAmB,UAAmB;AACrF,MAAI,SAAU,QAAO;AACrB,SAAO,QAAQ,MAAM,QAAQ,MAAM,GAAG,IAAI,QAAQ;AACpD;AAGA,IAAM,qBAAqB,CAAC,aAAsB;AAChD,QAAM,OAAO,WAAW,0BAA0B;AAClD,SAAO,EAAE,QAAQ,GAAG,IAAI,aAAa,OAAO,GAAG,IAAI,YAAY;AACjE;AAOA,IAAM,iBAAiB,CAAC,EAAE,OAAO,OAAO,QAAQ,MAA4B;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,IAAI;AACxC,QAAM,QAAQ,YAAY,cAAc,EAAE,KAAK;AAC/C,QAAM,kBAAkB,mBAAmB,QAAQ,QAAQ,CAAC;AAE5D,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU,IAAI,OAAO,MAAM,MAAM;AAAA,IACjC,SAAS;AAAA,IACT,OAAO,IAAI,OAAO,MAAM,KAAK;AAAA,IAC7B,QAAQ,IAAI,OAAO,MAAM,KAAK;AAAA,IAC9B,cAAc,WAAW,IAAI,OAAO,CAAC,IAAI;AAAA,IACzC,iBAAiB,iBAAiB,SAAS,QAAQ,QAAQ,GAAG,QAAQ,KAAK,CAAC;AAAA,IAC5E,YAAY,WACR,2BAA2B,QAAQ,KAAK,KAAK,QAAQ,IAAI,MACzD;AAAA,IACJ,gBAAgB,QAAQ,QAAQ,IAAI,OAAO,EAAE,CAAC,MAAM;AAAA,IACpD,iBAAiB;AAAA,IACjB,WAAW,gBAAgB;AAAA,IAC3B,YAAY;AAAA,IACZ,WAAW,GAAG,MAAM,QAAQ,CAAC,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IACjF,YAAY,EAAE,SAAS,OAAO;AAAA,IAC9B,8BAA8B,EAAE,WAAW,gBAAgB,MAAM;AAAA,IACjE,SAAS,EAAE,WAAW,WAAW,SAAS,iBAAiB,YAAY,IAAI;AAAA,EAC7E;AACF;AAEA,IAAM,WAAW,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC9E,QAAM,EAAE,UAAU,MAAM,cAAc,IAAI;AAC1C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,cAAc,SAAS,IAAI;AAEnC,SAAO;AAAA,IACL,iBAAiB,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,IACzD,QAAQ,IAAI,OAAO,YAAY;AAAA,IAC/B,OAAO,IAAI,OAAO,iBAAiB,IAAI,CAAC;AAAA;AAAA,IAExC,WAAW,IAAI,OAAO,EAAE,eAAe,YAAY,CAAC;AAAA,IACpD,cAAc,IAAI,OAAO,CAAC;AAAA,IAC1B,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,iBAAiB,WAAW,QAAQ,QAAQ,QAAQ;AAAA,MACpD,OAAO,IAAI,OAAO,iBAAiB,IAAI,CAAC;AAAA,MACxC,QAAQ,IAAI,OAAO,eAAe,CAAC;AAAA,MACnC,WAAW,IAAI,OAAO,EAAE,eAAe,IAAI,YAAY,CAAC;AAAA,MACxD,GAAI,QAAQ,EAAE,WAAW,OAAO,IAAI,OAAO,CAAC,CAAC,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAC,GAAG;AAAA,IAC9E;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CAAC,EAAE,OAAO,OAAO,QAAQ,OAA6B;AAAA,EAC1E,UAAU,IAAI,QAAQ,YAAY,MAAM,cAAc,EAAE,KAAK,eAAe,QAAQ;AAAA,EACpF,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,WAAW,MAAM,QAAQ,GAAG;AAAA,EAC5B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,+BAA+B;AAAA,IAC7B,OAAO,QAAQ;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;AAEO,IAAM,WAAW,CAAC,OAAc,UAAkC;AACvE,QAAM,UAAU,kBAAkB,OAAO,MAAM,eAAe,SAAS;AACvE,QAAM,WAAW,MAAM,MAAM,UAAqB,KAAK,MAAM;AAC7D,QAAM,QAAmB,EAAE,OAAO,OAAO,SAAS,SAAS;AAE3D,SAAO;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,IAAI,OAAO,SAAS,QAAQ;AAAA,IACpC,sBAAsB,UAAU,KAAK;AAAA,IACrC,qBAAqB,SAAS,KAAK;AAAA,IACnC,sBAAsB,UAAU,KAAK;AAAA,IACrC,2BAA2B,eAAe,KAAK;AAAA,IAC/C,qBAAqB,SAAS,KAAK;AAAA,IACnC,0BAA0B,cAAc,KAAK;AAAA,EAC/C;AACF;","names":[]}