@persona/design-system 0.6.0 → 0.7.1

package/dist/{RadioGroup-Bl9oXPIo.mjs → RadioGroup-HIC9V2hO.mjs}

@@ -1,6 +1,6 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { t as Radio } from "./Radio-BrQzZhwP.mjs";
+import { t as Radio } from "./Radio-Ds1pODKw.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { Children, cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -47,4 +47,4 @@ const RadioGroup = ({ children, defaultValue, name, value: valueProp, onChange,
 //#endregion
 export { RadioGroup as t };
 
-//# sourceMappingURL=RadioGroup-Bl9oXPIo.mjs.map
+//# sourceMappingURL=RadioGroup-HIC9V2hO.mjs.map

package/dist/{RadioGroup-Bl9oXPIo.mjs.map → RadioGroup-HIC9V2hO.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-Bl9oXPIo.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; horizontal?: boolean }>`\n  & > div {\n    margin-bottom: ${Spacing[2]};\n  }\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: flex;\n      align-items: center;\n      & > div {\n        margin-right: ${Spacing[2]};\n      }\n    `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n  defaultValue?: any;\n  name?: string;\n  value?: any;\n  onChange?: (value: any) => void;\n  /**\n   * Direction of radio group\n   */\n  horizontal?: boolean;\n  /**\n   * Size of radio buttons within the group\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n  children,\n  defaultValue,\n  name,\n  value: valueProp,\n  onChange,\n  horizontal = false,\n  size = 'md',\n  ...elemProps\n}) => {\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue,\n  });\n\n  return (\n    <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n      {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n      {Children.map(children, (child: ReactElement<RadioProps>) => {\n        if (child?.type === Radio && (typeof valueProp !== 'undefined' || onChange)) {\n          return cloneElement(child, {\n            name,\n            size,\n            checked: child.props.value === value,\n            onChange: (e: ChangeEvent<HTMLInputElement>) => {\n              const newVal = e.target.value;\n              if (typeof valueProp !== 'undefined' && onChange) {\n                onChange(newVal);\n              } else {\n                setValue(newVal);\n              }\n            },\n          });\n        }\n\n        if (name) {\n          return cloneElement(child, { name });\n        }\n\n        return child;\n      })}\n    </Container>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}
+{"version":3,"file":"RadioGroup-HIC9V2hO.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; horizontal?: boolean }>`\n  & > div {\n    margin-bottom: ${Spacing[2]};\n  }\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: flex;\n      align-items: center;\n      & > div {\n        margin-right: ${Spacing[2]};\n      }\n    `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n  defaultValue?: any;\n  name?: string;\n  value?: any;\n  onChange?: (value: any) => void;\n  /**\n   * Direction of radio group\n   */\n  horizontal?: boolean;\n  /**\n   * Size of radio buttons within the group\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n  children,\n  defaultValue,\n  name,\n  value: valueProp,\n  onChange,\n  horizontal = false,\n  size = 'md',\n  ...elemProps\n}) => {\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue,\n  });\n\n  return (\n    <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n      {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n      {Children.map(children, (child: ReactElement<RadioProps>) => {\n        if (child?.type === Radio && (typeof valueProp !== 'undefined' || onChange)) {\n          return cloneElement(child, {\n            name,\n            size,\n            checked: child.props.value === value,\n            onChange: (e: ChangeEvent<HTMLInputElement>) => {\n              const newVal = e.target.value;\n              if (typeof valueProp !== 'undefined' && onChange) {\n                onChange(newVal);\n              } else {\n                setValue(newVal);\n              }\n            },\n          });\n        }\n\n        if (name) {\n          return cloneElement(child, { name });\n        }\n\n        return child;\n      })}\n    </Container>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}

package/dist/RadioGroup.d.mts

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-Dg_gydUp.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-CxL6LW4q.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/RangeCalendar-B7TwRJbg.d.mts

@@ -0,0 +1,40 @@
+import { a as DateFilterPreset } from "./types-D8rWSj3z.mjs";
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { DateRange, RangeCalendarProps } from "react-aria";
+import { CalendarDate, DateValue as DateValue$1 } from "@internationalized/date";
+
+//#region components/DatePicker/Calendar/RangeCalendar.d.ts
+interface RangeCalendarProps$1 extends RangeCalendarProps<DateValue$1> {
+  minDate?: RangeCalendarProps<DateValue$1>['minValue'];
+  maxDate?: RangeCalendarProps<DateValue$1>['maxValue'];
+  calendarRef?: Ref<HTMLDivElement>;
+  hidePresets?: boolean;
+  visibleMonths?: 1 | 2;
+  onSelectDate?: (d: CalendarDate) => void;
+  setDateMode: (mode: 'start' | 'end' | null) => void;
+  onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;
+  selectedPreset?: DateFilterPreset | null;
+  /**
+   * From setValue of DateRangePicker
+   */
+  setValue: (value: DateRange | null) => void;
+  granularity: 'day' | 'hour' | 'minute' | 'second';
+}
+declare const RangeCalendar: ({
+  calendarRef,
+  onSelectDate,
+  minDate,
+  maxDate,
+  hidePresets,
+  visibleMonths,
+  setDateMode,
+  onPresetSelect,
+  selectedPreset,
+  setValue,
+  granularity,
+  ...props
+}: RangeCalendarProps$1) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RangeCalendarProps$1 as n, RangeCalendar as t };
+//# sourceMappingURL=RangeCalendar-B7TwRJbg.d.mts.map

package/dist/RangeCalendar.d.mts

@@ -1,40 +1,2 @@
-import { a as DateFilterPreset } from "./types-COeginAF.mjs";
-import { Ref } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { DateRange, RangeCalendarProps as RangeCalendarProps$1 } from "react-aria";
-import { CalendarDate, DateValue as DateValue$1 } from "@internationalized/date";
-
-//#region components/DatePicker/Calendar/RangeCalendar.d.ts
-interface RangeCalendarProps extends RangeCalendarProps$1<DateValue$1> {
-  minDate?: RangeCalendarProps$1<DateValue$1>['minValue'];
-  maxDate?: RangeCalendarProps$1<DateValue$1>['maxValue'];
-  calendarRef?: Ref<HTMLDivElement>;
-  hidePresets?: boolean;
-  visibleMonths?: 1 | 2;
-  onSelectDate?: (d: CalendarDate) => void;
-  setDateMode: (mode: 'start' | 'end' | null) => void;
-  onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;
-  selectedPreset?: DateFilterPreset | null;
-  /**
-   * From setValue of DateRangePicker
-   */
-  setValue: (value: DateRange | null) => void;
-  granularity: 'day' | 'hour' | 'minute' | 'second';
-}
-declare const RangeCalendar: ({
-  calendarRef,
-  onSelectDate,
-  minDate,
-  maxDate,
-  hidePresets,
-  visibleMonths,
-  setDateMode,
-  onPresetSelect,
-  selectedPreset,
-  setValue,
-  granularity,
-  ...props
-}: RangeCalendarProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { RangeCalendarProps, RangeCalendar as default };
-//# sourceMappingURL=RangeCalendar.d.mts.map
+import { n as RangeCalendarProps, t as RangeCalendar } from "./RangeCalendar-B7TwRJbg.mjs";
+export { RangeCalendarProps, RangeCalendar as default };

package/dist/RangeCalendarPresets.d.mts

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset } from "./types-COeginAF.mjs";
+import { a as DateFilterPreset } from "./types-D8rWSj3z.mjs";
 import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { RangeCalendarState } from "react-stately";

package/dist/RouterContext-B7N12wkK.d.mts

@@ -0,0 +1,11 @@
+import { n as RouterAdapter } from "./types-CuQSgl1F.mjs";
+import * as _$react from "react";
+import { FC, PropsWithChildren } from "react";
+
+//#region lib/router/RouterContext.d.ts
+declare const RouterContext: _$react.Context<RouterAdapter | null>;
+declare const RouterProvider: FC<PropsWithChildren<RouterAdapter>>;
+declare const useRouter: () => RouterAdapter | null;
+//#endregion
+export { RouterProvider as n, useRouter as r, RouterContext as t };
+//# sourceMappingURL=RouterContext-B7N12wkK.d.mts.map

package/dist/RouterContext-CsPnkNdI.mjs

@@ -0,0 +1,26 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region lib/router/RouterContext.tsx
+const RouterContext = createContext(null);
+const RouterProvider = ({ children, navigate, useHref, useLocation, linkComponent }) => {
+	const adapter = useMemo(() => ({
+		navigate,
+		useHref,
+		useLocation,
+		linkComponent
+	}), [
+		navigate,
+		useHref,
+		useLocation,
+		linkComponent
+	]);
+	return /* @__PURE__ */ jsx(RouterContext.Provider, {
+		value: adapter,
+		children
+	});
+};
+const useRouter = () => useContext(RouterContext);
+//#endregion
+export { RouterProvider as n, useRouter as r, RouterContext as t };
+
+//# sourceMappingURL=RouterContext-CsPnkNdI.mjs.map

package/dist/RouterContext-CsPnkNdI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterContext-CsPnkNdI.mjs","names":[],"sources":["../lib/router/RouterContext.tsx"],"sourcesContent":["import {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport type { RouterAdapter } from './types';\n\nexport const RouterContext = createContext<RouterAdapter | null>(null);\n\nexport const RouterProvider: FC<PropsWithChildren<RouterAdapter>> = ({\n  children,\n  navigate,\n  useHref,\n  useLocation,\n  linkComponent,\n}) => {\n  const adapter = useMemo<RouterAdapter>(\n    () => ({ navigate, useHref, useLocation, linkComponent }),\n    [navigate, useHref, useLocation, linkComponent],\n  );\n\n  return <RouterContext.Provider value={adapter}>{children}</RouterContext.Provider>;\n};\n\nexport const useRouter = (): RouterAdapter | null => useContext(RouterContext);\n"],"mappings":";;;AAUA,MAAa,gBAAgB,cAAoC,KAAK;AAEtE,MAAa,kBAAwD,EACnE,UACA,UACA,SACA,aACA,oBACI;CACJ,MAAM,UAAU,eACP;EAAE;EAAU;EAAS;EAAa;EAAe,GACxD;EAAC;EAAU;EAAS;EAAa;EAAc,CAChD;AAED,QAAO,oBAAC,cAAc,UAAf;EAAwB,OAAO;EAAU;EAAkC,CAAA;;AAGpF,MAAa,kBAAwC,WAAW,cAAc"}

package/dist/RouterContext.d.mts

@@ -0,0 +1,2 @@
+import { n as RouterProvider, r as useRouter, t as RouterContext } from "./RouterContext-B7N12wkK.mjs";
+export { RouterContext, RouterProvider, useRouter };

package/dist/RouterLink-Bq36EGjc.d.mts

@@ -0,0 +1,8 @@
+import { r as RouterLinkComponentProps } from "./types-CuQSgl1F.mjs";
+import * as _$react from "react";
+
+//#region lib/router/RouterLink.d.ts
+declare const RouterLink: _$react.ForwardRefExoticComponent<Omit<RouterLinkComponentProps, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { RouterLink as t };
+//# sourceMappingURL=RouterLink-Bq36EGjc.d.mts.map

package/dist/RouterLink.d.mts

@@ -0,0 +1,2 @@
+import { t as RouterLink } from "./RouterLink-Bq36EGjc.mjs";
+export { RouterLink as default };

package/dist/RuleEditorFields.d.mts

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-1_JSe9Wr.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BslyuPZw.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-N8PYonjD.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-BdtxI1N2.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/RulesPill.d.mts

@@ -1,4 +1,4 @@
-import { f as FilterSize, n as CompoundExpression } from "./types-1_JSe9Wr.mjs";
+import { f as FilterSize, n as CompoundExpression } from "./types-N8PYonjD.mjs";
 import * as _$react from "react";
 import { HTMLAttributes } from "react";
 

package/dist/{SearchInput-CNg109M5.d.mts → SearchInput-D69WxMNq.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-DN_8iHVD.mjs";
+import { n as InputSizes } from "./input-DCJivcWf.mjs";
 import { FocusEventHandler, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -50,4 +50,4 @@ declare const SearchInput: ({
 }: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInput as n, OmniSearchProps as t };
-//# sourceMappingURL=SearchInput-CNg109M5.d.mts.map
+//# sourceMappingURL=SearchInput-D69WxMNq.d.mts.map

package/dist/SearchInput.d.mts

@@ -1,2 +1,2 @@
-import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-CNg109M5.mjs";
+import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-D69WxMNq.mjs";
 export { OmniSearchProps, SearchInput as default };

package/dist/SectionHeading.d.mts

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-C2FTJhnQ.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-C7INft7X.mjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts

package/dist/{SegmentedControl-BozydMtT.mjs → SegmentedControl-OHrfJiw0.mjs}

@@ -1,7 +1,7 @@
 import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
+import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
 import { createContext, forwardRef, useContext } from "react";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
@@ -110,4 +110,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
 
-//# sourceMappingURL=SegmentedControl-BozydMtT.mjs.map
+//# sourceMappingURL=SegmentedControl-OHrfJiw0.mjs.map

package/dist/{SegmentedControl-BozydMtT.mjs.map → SegmentedControl-OHrfJiw0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl-BozydMtT.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfaceInset', theme.color.variants.basic.default)};\n  border-radius: 5px;\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: ${BorderRadius.Md};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => semanticColor(theme, 'ActionNeutralHover', theme.color.variants.basic.hover)};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    box-shadow: inset 0 0 0 1px ${({ theme }) => semanticColor(theme, 'BorderDefault', theme.color.border.input)};\n    color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;;AASA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YACrB,cAAc,OAAO,gBAAgB,MAAM,MAAM,SAAS,MAAM,QAAQ,CAAC;;;YAGjE,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,OAAO,aAAa;IACtC,gBAAgB,GAAG;;;;;;mBAMJ,aAAa,GAAG;YACvB,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,UAAU,CAAC;;;;;;;;gBAQ1E,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,MAAM,SAAS,MAAM,MAAM,CAAC;;;;;yBAK3F,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,QAAQ,MAAM,CAAC;mCACtE,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,MAAM,CAAC;cACnG,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;;;;;;;;;;;;;;;AA4BxF,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,oBAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,OAFpC,WAAW,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}
+{"version":3,"file":"SegmentedControl-OHrfJiw0.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfaceInset', theme.color.variants.basic.default)};\n  border-radius: 5px;\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: ${BorderRadius.Md};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => semanticColor(theme, 'ActionNeutralHover', theme.color.variants.basic.hover)};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    box-shadow: inset 0 0 0 1px ${({ theme }) => semanticColor(theme, 'BorderDefault', theme.color.border.input)};\n    color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;;AASA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YACrB,cAAc,OAAO,gBAAgB,MAAM,MAAM,SAAS,MAAM,QAAQ,CAAC;;;YAGjE,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,OAAO,aAAa;IACtC,gBAAgB,GAAG;;;;;;mBAMJ,aAAa,GAAG;YACvB,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,UAAU,CAAC;;;;;;;;gBAQ1E,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,MAAM,SAAS,MAAM,MAAM,CAAC;;;;;yBAK3F,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,QAAQ,MAAM,CAAC;mCACtE,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,MAAM,CAAC;cACnG,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;;;;;;;;;;;;;;;AA4BxF,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,oBAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,OAFpC,WAAW,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/{SegmentedControl-BBIHKcvo.d.mts → SegmentedControl-vCnGsdXo.d.mts}

@@ -56,4 +56,4 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled'
 declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
-//# sourceMappingURL=SegmentedControl-BBIHKcvo.d.mts.map
+//# sourceMappingURL=SegmentedControl-vCnGsdXo.d.mts.map

package/dist/SegmentedControl.d.mts

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-BBIHKcvo.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-vCnGsdXo.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlProps };

package/dist/{Select-CktsIrzf.mjs → Select-DE7uv9C8.mjs}

@@ -1,15 +1,15 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { i as Paragraph } from "./Text-Dn_p7ZvT.mjs";
+import { i as Paragraph } from "./Text-BdluS7Fy.mjs";
 import { isNotDisabled } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { t as HStack } from "./Stack-BqQndGI9.mjs";
-import { t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
-import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-CeV3lL2g.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-C0WK4bM0.mjs";
+import { t as HStack } from "./Stack-ChsImaEY.mjs";
+import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
+import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-Cd6oxjAe.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CuKSNxc9.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -242,4 +242,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
 
-//# sourceMappingURL=Select-CktsIrzf.mjs.map
+//# sourceMappingURL=Select-DE7uv9C8.mjs.map

package/dist/{Select-CktsIrzf.mjs.map → Select-DE7uv9C8.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Select-CktsIrzf.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport type { Property } from 'csstype';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Menu, {\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n  MenuList,\n  type MenuProps,\n} from 'design-system/components/Menu';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {\n  'aria-label'?: string;\n  placeholder?: string;\n\n  /**\n   * id will be applied to trigger\n   */\n  id?: string;\n\n  /**\n   * Class name will be applied to trigger\n   */\n  className?: string;\n\n  /**\n   * Max height of options menu\n   */\n  maxHeight?: number;\n\n  /**\n   * Min width of the select\n   */\n  minWidth?: number;\n\n  /**\n   * Width of the selected value container\n   */\n  valueContainerWidth?: 'auto' | '100%';\n\n  /**\n   * Render dropdown menu in a portal.\n   */\n  portal?: boolean;\n\n  /**\n   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside\n   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's\n   * dismiss scope, which would close it on click. Requires `portal`.\n   */\n  portalContainer?: HTMLElement | null;\n\n  /**\n   * Props to apply to Radix Select.Trigger within\n   */\n  triggerProps?: SelectPrimitive.SelectTriggerProps;\n\n  /**\n   * Props to apply to Radix Select.Content within\n   */\n  contentProps?: SelectPrimitive.SelectContentProps;\n\n  /**\n   * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)\n   */\n  onChange?: (event: { target: { value: string } }) => void;\n\n  size?: InputSizes;\n\n  value?: string | null;\n\n  width?: string;\n\n  header?: ReactNode;\n\n  footer?: ReactNode;\n\n  /**\n   * z-index of content. Please use sparingly.\n   */\n  zIndex?: Property.ZIndex;\n}\n\ninterface SelectButtonProps extends InputMixinProps {\n  isSelectingPlaceholder: boolean;\n  $width?: string;\n  $minWidth?: number;\n}\n\nconst SelectButton = styled('button')<SelectButtonProps>`\n  ${inputMixin};\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  outline: none;\n  appearance: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: ${Spacing[6]};\n  width: ${({ $width }) => $width ?? '100%'};\n  min-width: ${({ $minWidth }) => ($minWidth != null ? `${$minWidth}px` : 'auto')};\n\n  &${isNotDisabled} {\n    cursor: pointer;\n  }\n\n  ${({ theme, isSelectingPlaceholder }) =>\n    isSelectingPlaceholder &&\n    css`\n      color: ${semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n    `}\n`;\n\ninterface SelectValueContainerProps {\n  width?: string;\n}\n\nconst SelectValueContainer = styled.span<SelectValueContainerProps>`\n  text-overflow: ellipsis;\n  min-width: 0px;\n  overflow: hidden;\n  text-align: start;\n\n  ${({ width }) =>\n    width &&\n    css`\n      width: ${width};\n    `}\n`;\n\nconst OptionSubtitle = styled.div`\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n  margin-top: ${Spacing[1]};\n`;\n\ninterface OptionsMenuProps {\n  maxHeight?: number;\n  size?: InputSizes;\n}\n\nconst OptionsMenu = styled(Menu)<OptionsMenuProps>`\n  width: var(--radix-select-trigger-width);\n  max-height: ${({ maxHeight }) => maxHeight ?? '225px !important'};\n  overflow-y: auto;\n  margin-bottom: 0;\n\n  ${({ size }) => {\n    switch (size) {\n      case 'md': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[2]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.md};\n            padding: ${Spacing[2]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[2]};\n          }\n        `;\n      }\n      case 'sm': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[1]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.sm};\n            padding: ${Spacing[1]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[1]};\n          }\n        `;\n      }\n    }\n  }}\n`;\n\nconst SelectContent = styled(SelectPrimitive.Content)<{ $zIndex?: number | string }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};\n`;\n\nconst SelectHeaderContainer = styled(HStack)`\n  display: flex;\n  justify-content: space-between;\n  padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};\n  margin-bottom: ${Spacing[1]};\n`;\n\nconst SelectFooter = styled.div`\n  padding: ${Spacing[1]} 0;\n  margin-top: ${Spacing[1]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst SelectMenu = forwardRef<HTMLUListElement, MenuProps & OptionsMenuProps>(function SelectMenu(\n  props: MenuProps,\n  forwardedRef,\n) {\n  return <OptionsMenu listRef={forwardedRef} {...props} />;\n});\n\nconst OptionItem = styled(MenuItem)`\n  ${paragraphMixins.md};\n  padding: ${Spacing[4]};\n`;\n\nconst SelectItem = forwardRef<HTMLDivElement, MenuItemProps>(function SelectItem(\n  props: MenuItemProps,\n  forwardedRef,\n) {\n  return <OptionItem ref={forwardedRef} {...props} />;\n});\n\nconst StyledIconContainer = styled(SelectPrimitive.Icon)<{ disabled?: boolean }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  display: flex;\n  justify-content: center;\n\n  ${({ theme, disabled }) => css`\n    color: ${\n      disabled\n        ? semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)\n        : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)\n    };\n  `}\n`;\n\ninterface SelectHeaderProps {\n  title?: ReactNode;\n  menuItems?: ReactNode;\n  menuTriggerLabel?: string;\n}\n\nexport const SelectHeader = ({ title, menuItems, menuTriggerLabel }: SelectHeaderProps) => {\n  const uniqueId = useId();\n\n  return (\n    <SelectHeaderContainer align='center'>\n      {title && (\n        <Paragraph color='primary' weight='bold' size='md'>\n          {title}\n        </Paragraph>\n      )}\n      {menuItems && (\n        <DropdownMenu\n          portal={true}\n          trigger={\n            <IconButton>\n              <MoreIcon />\n            </IconButton>\n          }\n          triggerProps={{\n            'aria-label': menuTriggerLabel,\n            id: `select-header-menu-trigger-${uniqueId}`,\n          }}\n          side='right'\n          align='start'\n          zIndex={Z_INDICES.layeredDropdown}\n          contentProps={{\n            // Fix for Radix UI 2.1.15 upgrade breaking changes:\n            // 1. Portal rendering causes pointer-events issues preventing dropdown interaction\n            // 2. Portal timing causes onFocusOutside to fire immediately, closing dropdown\n            style: {\n              pointerEvents: 'auto', // Ensure dropdown items receive mouse events\n            },\n            onFocusOutside: (event) => event.preventDefault(), // Prevent immediate portal closing\n          }}\n        >\n          {menuItems}\n        </DropdownMenu>\n      )}\n    </SelectHeaderContainer>\n  );\n};\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  { portal = false, portalContainer, size = 'md', ...props }: SelectProps,\n  forwardedRef,\n) {\n  const {\n    'aria-label': ariaLabel,\n    hasError,\n    hasWarning,\n    focused,\n    active,\n    hovered,\n    disabled,\n    placeholder,\n    maxHeight,\n    children,\n    triggerProps,\n    contentProps,\n    id,\n    className,\n    onChange,\n    onValueChange,\n    value,\n    width,\n    header,\n    footer,\n    minWidth,\n    valueContainerWidth,\n    zIndex,\n  } = props;\n\n  const field = useFormField({ inputId: props.id, disabled, hasWarning, hasError });\n\n  const content = (\n    <SelectContent\n      position='popper'\n      side='bottom'\n      sideOffset={8}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <SelectMenu maxHeight={maxHeight} size={size}>\n        {header}\n        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n        {footer && (\n          <>\n            <SelectFooter>{footer}</SelectFooter>\n          </>\n        )}\n      </SelectMenu>\n    </SelectContent>\n  );\n\n  return (\n    <SelectPrimitive.Root\n      {...props}\n      onValueChange={(value) => {\n        onChange?.({ target: { value } });\n        onValueChange?.(value);\n      }}\n      // Custom behavior to consider null as empty value\n      value={value === null ? '' : value}\n    >\n      <SelectPrimitive.Trigger\n        ref={forwardedRef}\n        asChild\n        id={id}\n        className={className}\n        disabled={field.disabled}\n        aria-describedby={field.helperTextId}\n        aria-errormessage={field.hasError ? field.helperTextId : undefined}\n        aria-invalid={field.hasError}\n        aria-label={ariaLabel}\n        {...triggerProps}\n      >\n        <SelectButton\n          hasWarning={field.hasWarning}\n          hasError={field.hasError}\n          hovered={hovered}\n          focused={focused}\n          active={active}\n          disabled={field.disabled}\n          placeholder={placeholder}\n          isSelectingPlaceholder={props.value === '' || props.value == null}\n          $minWidth={minWidth}\n          $size={size}\n          $width={width}\n        >\n          <SelectValueContainer width={valueContainerWidth}>\n            <SelectPrimitive.Value placeholder={placeholder} />\n          </SelectValueContainer>\n          <StyledIconContainer disabled={disabled}>\n            <CaretDownIcon />\n          </StyledIconContainer>\n        </SelectButton>\n      </SelectPrimitive.Trigger>\n      {portal ? (\n        <SelectPrimitive.Portal container={portalContainer}>{content}</SelectPrimitive.Portal>\n      ) : (\n        content\n      )}\n    </SelectPrimitive.Root>\n  );\n});\n\nexport default Select;\n\nexport const Option = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps & MenuItemProps>(\n  function Option({ children, subtitle, ...props }, forwardedRef) {\n    return (\n      <SelectPrimitive.Item {...props} ref={forwardedRef} asChild>\n        <SelectItem {...props}>\n          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n          {subtitle && <OptionSubtitle>{subtitle}</OptionSubtitle>}\n        </SelectItem>\n      </SelectPrimitive.Item>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Select-DE7uv9C8.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport type { Property } from 'csstype';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Menu, {\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n  MenuList,\n  type MenuProps,\n} from 'design-system/components/Menu';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {\n  'aria-label'?: string;\n  placeholder?: string;\n\n  /**\n   * id will be applied to trigger\n   */\n  id?: string;\n\n  /**\n   * Class name will be applied to trigger\n   */\n  className?: string;\n\n  /**\n   * Max height of options menu\n   */\n  maxHeight?: number;\n\n  /**\n   * Min width of the select\n   */\n  minWidth?: number;\n\n  /**\n   * Width of the selected value container\n   */\n  valueContainerWidth?: 'auto' | '100%';\n\n  /**\n   * Render dropdown menu in a portal.\n   */\n  portal?: boolean;\n\n  /**\n   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside\n   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's\n   * dismiss scope, which would close it on click. Requires `portal`.\n   */\n  portalContainer?: HTMLElement | null;\n\n  /**\n   * Props to apply to Radix Select.Trigger within\n   */\n  triggerProps?: SelectPrimitive.SelectTriggerProps;\n\n  /**\n   * Props to apply to Radix Select.Content within\n   */\n  contentProps?: SelectPrimitive.SelectContentProps;\n\n  /**\n   * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)\n   */\n  onChange?: (event: { target: { value: string } }) => void;\n\n  size?: InputSizes;\n\n  value?: string | null;\n\n  width?: string;\n\n  header?: ReactNode;\n\n  footer?: ReactNode;\n\n  /**\n   * z-index of content. Please use sparingly.\n   */\n  zIndex?: Property.ZIndex;\n}\n\ninterface SelectButtonProps extends InputMixinProps {\n  isSelectingPlaceholder: boolean;\n  $width?: string;\n  $minWidth?: number;\n}\n\nconst SelectButton = styled('button')<SelectButtonProps>`\n  ${inputMixin};\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  outline: none;\n  appearance: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: ${Spacing[6]};\n  width: ${({ $width }) => $width ?? '100%'};\n  min-width: ${({ $minWidth }) => ($minWidth != null ? `${$minWidth}px` : 'auto')};\n\n  &${isNotDisabled} {\n    cursor: pointer;\n  }\n\n  ${({ theme, isSelectingPlaceholder }) =>\n    isSelectingPlaceholder &&\n    css`\n      color: ${semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n    `}\n`;\n\ninterface SelectValueContainerProps {\n  width?: string;\n}\n\nconst SelectValueContainer = styled.span<SelectValueContainerProps>`\n  text-overflow: ellipsis;\n  min-width: 0px;\n  overflow: hidden;\n  text-align: start;\n\n  ${({ width }) =>\n    width &&\n    css`\n      width: ${width};\n    `}\n`;\n\nconst OptionSubtitle = styled.div`\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n  margin-top: ${Spacing[1]};\n`;\n\ninterface OptionsMenuProps {\n  maxHeight?: number;\n  size?: InputSizes;\n}\n\nconst OptionsMenu = styled(Menu)<OptionsMenuProps>`\n  width: var(--radix-select-trigger-width);\n  max-height: ${({ maxHeight }) => maxHeight ?? '225px !important'};\n  overflow-y: auto;\n  margin-bottom: 0;\n\n  ${({ size }) => {\n    switch (size) {\n      case 'md': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[2]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.md};\n            padding: ${Spacing[2]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[2]};\n          }\n        `;\n      }\n      case 'sm': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[1]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.sm};\n            padding: ${Spacing[1]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[1]};\n          }\n        `;\n      }\n    }\n  }}\n`;\n\nconst SelectContent = styled(SelectPrimitive.Content)<{ $zIndex?: number | string }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};\n`;\n\nconst SelectHeaderContainer = styled(HStack)`\n  display: flex;\n  justify-content: space-between;\n  padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};\n  margin-bottom: ${Spacing[1]};\n`;\n\nconst SelectFooter = styled.div`\n  padding: ${Spacing[1]} 0;\n  margin-top: ${Spacing[1]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst SelectMenu = forwardRef<HTMLUListElement, MenuProps & OptionsMenuProps>(function SelectMenu(\n  props: MenuProps,\n  forwardedRef,\n) {\n  return <OptionsMenu listRef={forwardedRef} {...props} />;\n});\n\nconst OptionItem = styled(MenuItem)`\n  ${paragraphMixins.md};\n  padding: ${Spacing[4]};\n`;\n\nconst SelectItem = forwardRef<HTMLDivElement, MenuItemProps>(function SelectItem(\n  props: MenuItemProps,\n  forwardedRef,\n) {\n  return <OptionItem ref={forwardedRef} {...props} />;\n});\n\nconst StyledIconContainer = styled(SelectPrimitive.Icon)<{ disabled?: boolean }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  display: flex;\n  justify-content: center;\n\n  ${({ theme, disabled }) => css`\n    color: ${\n      disabled\n        ? semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)\n        : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)\n    };\n  `}\n`;\n\ninterface SelectHeaderProps {\n  title?: ReactNode;\n  menuItems?: ReactNode;\n  menuTriggerLabel?: string;\n}\n\nexport const SelectHeader = ({ title, menuItems, menuTriggerLabel }: SelectHeaderProps) => {\n  const uniqueId = useId();\n\n  return (\n    <SelectHeaderContainer align='center'>\n      {title && (\n        <Paragraph color='primary' weight='bold' size='md'>\n          {title}\n        </Paragraph>\n      )}\n      {menuItems && (\n        <DropdownMenu\n          portal={true}\n          trigger={\n            <IconButton>\n              <MoreIcon />\n            </IconButton>\n          }\n          triggerProps={{\n            'aria-label': menuTriggerLabel,\n            id: `select-header-menu-trigger-${uniqueId}`,\n          }}\n          side='right'\n          align='start'\n          zIndex={Z_INDICES.layeredDropdown}\n          contentProps={{\n            // Fix for Radix UI 2.1.15 upgrade breaking changes:\n            // 1. Portal rendering causes pointer-events issues preventing dropdown interaction\n            // 2. Portal timing causes onFocusOutside to fire immediately, closing dropdown\n            style: {\n              pointerEvents: 'auto', // Ensure dropdown items receive mouse events\n            },\n            onFocusOutside: (event) => event.preventDefault(), // Prevent immediate portal closing\n          }}\n        >\n          {menuItems}\n        </DropdownMenu>\n      )}\n    </SelectHeaderContainer>\n  );\n};\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  { portal = false, portalContainer, size = 'md', ...props }: SelectProps,\n  forwardedRef,\n) {\n  const {\n    'aria-label': ariaLabel,\n    hasError,\n    hasWarning,\n    focused,\n    active,\n    hovered,\n    disabled,\n    placeholder,\n    maxHeight,\n    children,\n    triggerProps,\n    contentProps,\n    id,\n    className,\n    onChange,\n    onValueChange,\n    value,\n    width,\n    header,\n    footer,\n    minWidth,\n    valueContainerWidth,\n    zIndex,\n  } = props;\n\n  const field = useFormField({ inputId: props.id, disabled, hasWarning, hasError });\n\n  const content = (\n    <SelectContent\n      position='popper'\n      side='bottom'\n      sideOffset={8}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <SelectMenu maxHeight={maxHeight} size={size}>\n        {header}\n        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n        {footer && (\n          <>\n            <SelectFooter>{footer}</SelectFooter>\n          </>\n        )}\n      </SelectMenu>\n    </SelectContent>\n  );\n\n  return (\n    <SelectPrimitive.Root\n      {...props}\n      onValueChange={(value) => {\n        onChange?.({ target: { value } });\n        onValueChange?.(value);\n      }}\n      // Custom behavior to consider null as empty value\n      value={value === null ? '' : value}\n    >\n      <SelectPrimitive.Trigger\n        ref={forwardedRef}\n        asChild\n        id={id}\n        className={className}\n        disabled={field.disabled}\n        aria-describedby={field.helperTextId}\n        aria-errormessage={field.hasError ? field.helperTextId : undefined}\n        aria-invalid={field.hasError}\n        aria-label={ariaLabel}\n        {...triggerProps}\n      >\n        <SelectButton\n          hasWarning={field.hasWarning}\n          hasError={field.hasError}\n          hovered={hovered}\n          focused={focused}\n          active={active}\n          disabled={field.disabled}\n          placeholder={placeholder}\n          isSelectingPlaceholder={props.value === '' || props.value == null}\n          $minWidth={minWidth}\n          $size={size}\n          $width={width}\n        >\n          <SelectValueContainer width={valueContainerWidth}>\n            <SelectPrimitive.Value placeholder={placeholder} />\n          </SelectValueContainer>\n          <StyledIconContainer disabled={disabled}>\n            <CaretDownIcon />\n          </StyledIconContainer>\n        </SelectButton>\n      </SelectPrimitive.Trigger>\n      {portal ? (\n        <SelectPrimitive.Portal container={portalContainer}>{content}</SelectPrimitive.Portal>\n      ) : (\n        content\n      )}\n    </SelectPrimitive.Root>\n  );\n});\n\nexport default Select;\n\nexport const Option = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps & MenuItemProps>(\n  function Option({ children, subtitle, ...props }, forwardedRef) {\n    return (\n      <SelectPrimitive.Item {...props} ref={forwardedRef} asChild>\n        <SelectItem {...props}>\n          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n          {subtitle && <OptionSubtitle>{subtitle}</OptionSubtitle>}\n        </SelectItem>\n      </SelectPrimitive.Item>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/{Select-yPqzqe5k.d.mts → Select-sQb4dQwT.d.mts}

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-DdHN-drQ.mjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-DN_8iHVD.mjs";
+import { l as MenuItemProps } from "./Menu-CSwzFqdv.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DCJivcWf.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -80,4 +80,4 @@ declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.Re
 declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-yPqzqe5k.d.mts.map
+//# sourceMappingURL=Select-sQb4dQwT.d.mts.map

package/dist/Select.d.mts

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-yPqzqe5k.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-sQb4dQwT.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/{Spacer-D58qwuXR.mjs → Spacer-BFOuo0sZ.mjs}

@@ -10,4 +10,4 @@ var Spacer_default = styled.div.attrs(() => ({ "aria-hidden": true }))`
 //#endregion
 export { Spacer_default as t };
 
-//# sourceMappingURL=Spacer-D58qwuXR.mjs.map
+//# sourceMappingURL=Spacer-BFOuo0sZ.mjs.map

package/dist/{Spacer-D58qwuXR.mjs.map → Spacer-BFOuo0sZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Spacer-D58qwuXR.mjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;ACEA,IAAA,iBAAe,ADYA,OAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}
+{"version":3,"file":"Spacer-BFOuo0sZ.mjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;ACEA,IAAA,iBAAe,ADYA,OAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}

package/dist/{Spinner-Dpw3-3JS.mjs → Spinner-DplDSBqf.mjs}

@@ -36,4 +36,4 @@ const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
 //#endregion
 export { Spinner as t };
 
-//# sourceMappingURL=Spinner-Dpw3-3JS.mjs.map
+//# sourceMappingURL=Spinner-DplDSBqf.mjs.map

package/dist/{Spinner-Dpw3-3JS.mjs.map → Spinner-DplDSBqf.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Spinner-Dpw3-3JS.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled, { useTheme } from 'styled-components';\n\nimport { rotate } from '@persona/design-system/variables/keyframes';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Color } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { LoaderIcon as LoaderIconMedium } from '@persona/icons/24px';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport type SpinnerVariant = 'default' | 'inverse';\n\ntype SpinnerSize = 'sm' | 'md';\n\ninterface SpinnerProps {\n  /**\n   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}\n   * (e.g. on dark backgrounds).\n   */\n  variant?: SpinnerVariant;\n  /** Size of the spinner. Defaults to 'sm'. */\n  size?: SpinnerSize;\n  /** Screen reader text. Defaults to \"Loading...\". */\n  srText?: string;\n  className?: string;\n}\n\nconst Container = styled.span`\n  line-height: 0;\n  display: inline-block;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  animation: ${rotate} ${TransitionDuration.OneSecond} linear infinite;\n`;\n\nexport const Spinner = ({ variant = 'default', size = 'sm', srText, className }: SpinnerProps) => {\n  const theme = useTheme();\n  const resolvedColor =\n    variant === 'inverse'\n      ? semanticColor(theme, 'FgInverse', Color.BorderIconInverse)\n      : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary);\n  return (\n    <Container role='status' aria-label='loading spinner' className={className}>\n      <VisuallyHidden>{srText ?? 'Loading...'}</VisuallyHidden>\n      <IconContainer>\n        {size === 'sm' ? (\n          <LoaderIcon color={resolvedColor} />\n        ) : (\n          <LoaderIconMedium color={resolvedColor} />\n        )}\n      </IconContainer>\n    </Container>\n  );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;AA0BA,MAAM,YAAY,OAAO,IAAI;;;;AAK7B,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,gBAAgB,OAAO,IAAI;;eAElB,OAAO,GAAA,SAAgC;;AAGtD,MAAa,WAAW,EAAE,UAAU,WAAW,OAAO,MAAM,QAAQ,gBAA8B;CAChG,MAAM,QAAQ,UAAU;CACxB,MAAM,gBACJ,YAAY,YACR,cAAc,OAAO,aAAa,MAAM,kBAAkB,GAC1D,cAAc,OAAO,aAAa,MAAM,kBAAkB;AAChE,QACE,qBAAC,WAAD;EAAW,MAAK;EAAS,cAAW;EAA6B;YAAjE,CACE,oBAAC,gBAAD,EAAA,UAAiB,UAAU,cAA8B,CAAA,EACzD,oBAAC,eAAD,EAAA,UACG,SAAS,OACR,oBAAC,YAAD,EAAY,OAAO,eAAiB,CAAA,GAEpC,oBAACA,cAAD,EAAkB,OAAO,eAAiB,CAAA,EAE9B,CAAA,CACN"}
+{"version":3,"file":"Spinner-DplDSBqf.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled, { useTheme } from 'styled-components';\n\nimport { rotate } from '@persona/design-system/variables/keyframes';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Color } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { LoaderIcon as LoaderIconMedium } from '@persona/icons/24px';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport type SpinnerVariant = 'default' | 'inverse';\n\ntype SpinnerSize = 'sm' | 'md';\n\ninterface SpinnerProps {\n  /**\n   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}\n   * (e.g. on dark backgrounds).\n   */\n  variant?: SpinnerVariant;\n  /** Size of the spinner. Defaults to 'sm'. */\n  size?: SpinnerSize;\n  /** Screen reader text. Defaults to \"Loading...\". */\n  srText?: string;\n  className?: string;\n}\n\nconst Container = styled.span`\n  line-height: 0;\n  display: inline-block;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  animation: ${rotate} ${TransitionDuration.OneSecond} linear infinite;\n`;\n\nexport const Spinner = ({ variant = 'default', size = 'sm', srText, className }: SpinnerProps) => {\n  const theme = useTheme();\n  const resolvedColor =\n    variant === 'inverse'\n      ? semanticColor(theme, 'FgInverse', Color.BorderIconInverse)\n      : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary);\n  return (\n    <Container role='status' aria-label='loading spinner' className={className}>\n      <VisuallyHidden>{srText ?? 'Loading...'}</VisuallyHidden>\n      <IconContainer>\n        {size === 'sm' ? (\n          <LoaderIcon color={resolvedColor} />\n        ) : (\n          <LoaderIconMedium color={resolvedColor} />\n        )}\n      </IconContainer>\n    </Container>\n  );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;AA0BA,MAAM,YAAY,OAAO,IAAI;;;;AAK7B,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,gBAAgB,OAAO,IAAI;;eAElB,OAAO,GAAA,SAAgC;;AAGtD,MAAa,WAAW,EAAE,UAAU,WAAW,OAAO,MAAM,QAAQ,gBAA8B;CAChG,MAAM,QAAQ,UAAU;CACxB,MAAM,gBACJ,YAAY,YACR,cAAc,OAAO,aAAa,MAAM,kBAAkB,GAC1D,cAAc,OAAO,aAAa,MAAM,kBAAkB;AAChE,QACE,qBAAC,WAAD;EAAW,MAAK;EAAS,cAAW;EAA6B;YAAjE,CACE,oBAAC,gBAAD,EAAA,UAAiB,UAAU,cAA8B,CAAA,EACzD,oBAAC,eAAD,EAAA,UACG,SAAS,OACR,oBAAC,YAAD,EAAY,OAAO,eAAiB,CAAA,GAEpC,oBAACA,cAAD,EAAkB,OAAO,eAAiB,CAAA,EAE9B,CAAA,CACN"}

package/dist/{Stack-DgC83-nw.d.mts → Stack-8KGPQp0u.d.mts}

@@ -44,4 +44,4 @@ type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
 declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
-//# sourceMappingURL=Stack-DgC83-nw.d.mts.map
+//# sourceMappingURL=Stack-8KGPQp0u.d.mts.map

package/dist/{Stack-BqQndGI9.mjs → Stack-ChsImaEY.mjs}

@@ -37,4 +37,4 @@ const HStack = (props) => /* @__PURE__ */ jsx(Stack, {
 //#endregion
 export { Stack as n, HStack as t };
 
-//# sourceMappingURL=Stack-BqQndGI9.mjs.map
+//# sourceMappingURL=Stack-ChsImaEY.mjs.map

package/dist/{Stack-BqQndGI9.mjs.map → Stack-ChsImaEY.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Stack-BqQndGI9.mjs","names":[],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;AA+CA,MAAa,QAAQ,OAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAW,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,oBAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}
+{"version":3,"file":"Stack-ChsImaEY.mjs","names":[],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;AA+CA,MAAa,QAAQ,OAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAW,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,oBAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}

package/dist/Stack.d.mts

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-DgC83-nw.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-8KGPQp0u.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/{Sticker-qvWkqEMw.d.mts → Sticker-Bf9rhSkv.d.mts}

@@ -1,6 +1,6 @@
-import { o as Variant } from "./theme-D02MOaH6.mjs";
-import { i as StackProps } from "./Stack-DgC83-nw.mjs";
-import { r as TruncatedTextProps } from "./TruncatedText-B2v53Y11.mjs";
+import { o as Variant } from "./theme-DKiszVRN.mjs";
+import { i as StackProps } from "./Stack-8KGPQp0u.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-g2T5HlqX.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -65,4 +65,4 @@ declare const Sticker: ({
 }: StickerProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { StickerContentContainer as a, StickerContainer as i, STICKER_COLOR_CONFIG as n, StickerProps as o, Sticker as r, StyledTruncatedText as s, LabelBackgrounds as t };
-//# sourceMappingURL=Sticker-qvWkqEMw.d.mts.map
+//# sourceMappingURL=Sticker-Bf9rhSkv.d.mts.map

package/dist/{Sticker-BDyejPZa.mjs → Sticker-C3Eb13OQ.mjs}

@@ -4,8 +4,8 @@ import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor
 import { paragraphMixins } from "./mixins/text.mjs";
 import { withAlpha } from "./lib/color.mjs";
 import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { n as Stack } from "./Stack-BqQndGI9.mjs";
-import { t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
+import { n as Stack } from "./Stack-ChsImaEY.mjs";
+import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons/12px";
@@ -355,4 +355,4 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 //#endregion
 export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
 
-//# sourceMappingURL=Sticker-BDyejPZa.mjs.map
+//# sourceMappingURL=Sticker-C3Eb13OQ.mjs.map