@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/{PseudoClassProps-mZgO_iZJ.d.mts → PseudoClassProps-ySXCGUEQ.d.mts}

@@ -9,4 +9,4 @@ interface PseudoClassProps {
 }
 //#endregion
 export { PseudoClassProps as t };
-//# sourceMappingURL=PseudoClassProps-mZgO_iZJ.d.mts.map
+//# sourceMappingURL=PseudoClassProps-ySXCGUEQ.d.mts.map

package/dist/PseudoClassProps.d.mts

@@ -1,2 +1,2 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-mZgO_iZJ.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-ySXCGUEQ.mjs";
 export { PseudoClassProps as default };

package/dist/{Radio-w-L3Otuk.mjs → Radio-C9DevagH.mjs}

@@ -4,8 +4,8 @@ import "./variables/transitions.mjs";
 import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { uniqueId } from "lodash";
 //#region components/Radio/Radio.tsx
 const Container = styled.div`
@@ -144,4 +144,4 @@ const Radio = forwardRef(function Radio({ id, label, className, value, disabled,
 //#endregion
 export { Radio as t };
 
-//# sourceMappingURL=Radio-w-L3Otuk.mjs.map
+//# sourceMappingURL=Radio-C9DevagH.mjs.map

package/dist/{Radio-w-L3Otuk.mjs.map → Radio-C9DevagH.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Radio-w-L3Otuk.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}
+{"version":3,"file":"Radio-C9DevagH.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/{Radio-mFfT6G3d.cjs → Radio-nw846eRv.cjs}

@@ -1,13 +1,13 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_focus = require("./mixins/focus.cjs");
 require("./variables/transitions.cjs");
-const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+const require_useFormField = require("./useFormField-B98dmreO.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lodash = require("lodash");
 //#region components/Radio/Radio.tsx
 const Container = styled_components.default.div`
@@ -151,4 +151,4 @@ Object.defineProperty(exports, "Radio", {
 	}
 });
 
-//# sourceMappingURL=Radio-mFfT6G3d.cjs.map
+//# sourceMappingURL=Radio-nw846eRv.cjs.map

package/dist/{Radio-mFfT6G3d.cjs.map → Radio-nw846eRv.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Radio-mFfT6G3d.cjs","names":["isDisabled","Spacing","Color","Typography","isHovered","isNotDisabled","isChecked","isFocusedVisible","focusStyle","useFormField"],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAY,kBAAA,QAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,kBAAA,GAAG;;;MAGD;;KAEDA,wBAAAA,WAAW;;;;AAKhB,MAAM,QAAQ,kBAAA,QAAO,KAA+C;;eAErDC,uBAAAA,QAAQ,GAAG;WACfC,uBAAAA,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,kBAAA,GAAG;YACCC,uBAAAA,WAAW,UAAU;;YAGzB,kBAAA,GAAG;YACCA,uBAAAA,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,kBAAA,QAAO,GAA0B;;;;;mCAKF;;YAEvCF,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpCC,uBAAAA,MAAM,oBAAoB;gBAChCA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,aAAa,kBAAA,QAAO,KAA6B;;YAE3CD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhDG,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC5BH,uBAAAA,MAAM,yBAAyB;;;KAG9CI,wBAAAA,UAAU;OACRF,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC9BH,uBAAAA,MAAM,2BAA2B;sBAC/BA,uBAAAA,MAAM,2BAA2B;;;;KAIlDK,wBAAAA,mBAAmBF,wBAAAA,cAAc,KAAK,YAAY;MACjDG,qBAAAA,WAAW;;;;KAIZR,wBAAAA,WAAW,KAAK,YAAY;;kBAEfE,uBAAAA,MAAM,wBAAwB;oBAC5BA,uBAAAA,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAKI,wBAAAA,UAAU,KAAK,YAAY;oBACxCJ,uBAAAA,MAAM,sBAAsB;kBAC9BA,uBAAAA,MAAM,sBAAsB;;;oBAG1BA,uBAAAA,MAAM,uBAAuB;;;;;;;;;aASpCF,wBAAAA,WAAW,KAAK,YAAY,KAAKM,wBAAAA,YAAYN,wBAAAA,WAAW,KAAK,YAAY;oBAClEE,uBAAAA,MAAM,8BAA8B;kBACtCA,uBAAAA,MAAM,8BAA8B;;;AAkBtD,MAAa,SAAA,GAAA,MAAA,YAAiD,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQO,qBAAAA,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,eAAA,GAAA,MAAA,gBAAA,GAAA,OAAA,UAAqC,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}
+{"version":3,"file":"Radio-nw846eRv.cjs","names":["isDisabled","Spacing","Color","Typography","isHovered","isNotDisabled","isChecked","isFocusedVisible","focusStyle","useFormField"],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAY,kBAAA,QAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,kBAAA,GAAG;;;MAGD;;KAEDA,wBAAAA,WAAW;;;;AAKhB,MAAM,QAAQ,kBAAA,QAAO,KAA+C;;eAErDC,uBAAAA,QAAQ,GAAG;WACfC,uBAAAA,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,kBAAA,GAAG;YACCC,uBAAAA,WAAW,UAAU;;YAGzB,kBAAA,GAAG;YACCA,uBAAAA,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,kBAAA,QAAO,GAA0B;;;;;mCAKF;;YAEvCF,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpCC,uBAAAA,MAAM,oBAAoB;gBAChCA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,aAAa,kBAAA,QAAO,KAA6B;;YAE3CD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhDG,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC5BH,uBAAAA,MAAM,yBAAyB;;;KAG9CI,wBAAAA,UAAU;OACRF,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC9BH,uBAAAA,MAAM,2BAA2B;sBAC/BA,uBAAAA,MAAM,2BAA2B;;;;KAIlDK,wBAAAA,mBAAmBF,wBAAAA,cAAc,KAAK,YAAY;MACjDG,qBAAAA,WAAW;;;;KAIZR,wBAAAA,WAAW,KAAK,YAAY;;kBAEfE,uBAAAA,MAAM,wBAAwB;oBAC5BA,uBAAAA,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAKI,wBAAAA,UAAU,KAAK,YAAY;oBACxCJ,uBAAAA,MAAM,sBAAsB;kBAC9BA,uBAAAA,MAAM,sBAAsB;;;oBAG1BA,uBAAAA,MAAM,uBAAuB;;;;;;;;;aASpCF,wBAAAA,WAAW,KAAK,YAAY,KAAKM,wBAAAA,YAAYN,wBAAAA,WAAW,KAAK,YAAY;oBAClEE,uBAAAA,MAAM,8BAA8B;kBACtCA,uBAAAA,MAAM,8BAA8B;;;AAkBtD,MAAa,SAAA,GAAA,MAAA,YAAiD,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQO,qBAAAA,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,eAAA,GAAA,MAAA,gBAAA,GAAA,OAAA,UAAqC,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/{RadioGroup-B8htTzsS.mjs → RadioGroup-B3hRbIWF.mjs}

@@ -1,9 +1,9 @@
 import useControlled from "./lib/useControlled.mjs";
-import { t as Radio } from "./Radio-w-L3Otuk.mjs";
+import { t as Radio } from "./Radio-C9DevagH.mjs";
 import { Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region components/RadioGroup/RadioGroup.tsx
 const Container = styled.div`
   & > div {
@@ -47,4 +47,4 @@ const RadioGroup = ({ children, defaultValue, name, value: valueProp, onChange,
 //#endregion
 export { RadioGroup as t };
 
-//# sourceMappingURL=RadioGroup-B8htTzsS.mjs.map
+//# sourceMappingURL=RadioGroup-B3hRbIWF.mjs.map

package/dist/{RadioGroup-B8htTzsS.mjs.map → RadioGroup-B3hRbIWF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-B8htTzsS.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport {\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 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-B3hRbIWF.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-D5ueuC6a.d.cts → RadioGroup-D_H1B7JV.d.cts}

@@ -18,4 +18,4 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 declare const RadioGroup: VFC<RadioGroupProps>;
 //#endregion
 export { RadioGroupProps as n, RadioGroup as t };
-//# sourceMappingURL=RadioGroup-D5ueuC6a.d.cts.map
+//# sourceMappingURL=RadioGroup-D_H1B7JV.d.cts.map

package/dist/{RadioGroup-BjDmweRK.cjs → RadioGroup-DmGVJCgT.cjs}

@@ -1,11 +1,11 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_useControlled = require("./lib/useControlled.cjs");
-const require_Radio = require("./Radio-mFfT6G3d.cjs");
+const require_Radio = require("./Radio-nw846eRv.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region components/RadioGroup/RadioGroup.tsx
 const Container = styled_components.default.div`
   & > div {
@@ -54,4 +54,4 @@ Object.defineProperty(exports, "RadioGroup", {
 	}
 });
 
-//# sourceMappingURL=RadioGroup-BjDmweRK.cjs.map
+//# sourceMappingURL=RadioGroup-DmGVJCgT.cjs.map

package/dist/{RadioGroup-BjDmweRK.cjs.map → RadioGroup-DmGVJCgT.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-BjDmweRK.cjs","names":["Spacing","useControlled","Children","Radio"],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport {\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 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,kBAAA,QAAO,GAAgD;;qBAEpDA,uBAAAA,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,kBAAA,GAAG;;;;wBAIiBA,uBAAAA,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAYC,0BAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElEC,MAAAA,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAASC,cAAAA,UAAU,OAAO,cAAc,eAAe,UAChE,SAAA,GAAA,MAAA,cAAoB,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,SAAA,GAAA,MAAA,cAAoB,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}
+{"version":3,"file":"RadioGroup-DmGVJCgT.cjs","names":["Spacing","useControlled","Children","Radio"],"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,kBAAA,QAAO,GAAgD;;qBAEpDA,uBAAAA,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,kBAAA,GAAG;;;;wBAIiBA,uBAAAA,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAYC,0BAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElEC,MAAAA,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAASC,cAAAA,UAAU,OAAO,cAAc,eAAe,UAChE,SAAA,GAAA,MAAA,cAAoB,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,SAAA,GAAA,MAAA,cAAoB,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}

package/dist/{RadioGroup-Ls0vPsP_.d.mts → RadioGroup-nhMXEbCx.d.mts}

@@ -18,4 +18,4 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 declare const RadioGroup: VFC<RadioGroupProps>;
 //#endregion
 export { RadioGroupProps as n, RadioGroup as t };
-//# sourceMappingURL=RadioGroup-Ls0vPsP_.d.mts.map
+//# sourceMappingURL=RadioGroup-nhMXEbCx.d.mts.map

package/dist/RadioGroup.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-D5ueuC6a.cjs";
+import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-D_H1B7JV.cjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/RadioGroup.d.mts

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

package/dist/RangeCalendar.d.mts

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 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";
 

package/dist/RangeCalendarPresets.d.mts

@@ -1,8 +1,8 @@
-import { o as RangeValue } from "./index-CKu60b9I.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { RangeCalendarState } from "react-stately";
 import { CalendarDate } from "@internationalized/date";
+import { RangeValue } from "@react-types/shared";
 
 //#region components/DatePicker/Calendar/RangeCalendarPresets.d.ts
 interface DateRangePreset {

package/dist/SearchInput-CAHYPQVX.d.cts

@@ -0,0 +1,46 @@
+import { n as InputSizes } from "./input-BkzqXwn7.cjs";
+import { FocusEventHandler, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/DataTable/SearchInput/SearchInput.d.ts
+interface OmniSearchProps {
+  className?: string;
+  title?: ReactNode;
+  handleInput: (value: string) => void;
+  id?: string;
+  value: string;
+  placeholder: string;
+  dataTest?: string;
+  autoFocus?: boolean;
+  useClearIcon?: boolean;
+  leftIcon?: ReactNode;
+  handleOnFocus?: () => void;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  flattenDisplay?: boolean;
+  size?: InputSizes;
+  maxLength?: number;
+}
+declare const SearchInput: ({
+  className,
+  title,
+  handleInput,
+  handleOnFocus,
+  onBlur,
+  id,
+  value,
+  placeholder,
+  dataTest,
+  autoFocus,
+  useClearIcon,
+  disabled,
+  disabledTooltip,
+  size,
+  leftIcon,
+  flattenDisplay,
+  maxLength
+}: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchInput as n, OmniSearchProps as t };
+//# sourceMappingURL=SearchInput-CAHYPQVX.d.cts.map

package/dist/SearchInput-s6qGC2WZ.d.mts

@@ -0,0 +1,46 @@
+import { n as InputSizes } from "./input-DrG6mA0V.mjs";
+import { FocusEventHandler, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DataTable/SearchInput/SearchInput.d.ts
+interface OmniSearchProps {
+  className?: string;
+  title?: ReactNode;
+  handleInput: (value: string) => void;
+  id?: string;
+  value: string;
+  placeholder: string;
+  dataTest?: string;
+  autoFocus?: boolean;
+  useClearIcon?: boolean;
+  leftIcon?: ReactNode;
+  handleOnFocus?: () => void;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  flattenDisplay?: boolean;
+  size?: InputSizes;
+  maxLength?: number;
+}
+declare const SearchInput: ({
+  className,
+  title,
+  handleInput,
+  handleOnFocus,
+  onBlur,
+  id,
+  value,
+  placeholder,
+  dataTest,
+  autoFocus,
+  useClearIcon,
+  disabled,
+  disabledTooltip,
+  size,
+  leftIcon,
+  flattenDisplay,
+  maxLength
+}: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchInput as n, OmniSearchProps as t };
+//# sourceMappingURL=SearchInput-s6qGC2WZ.d.mts.map

package/dist/SearchInput.d.cts

@@ -0,0 +1,2 @@
+import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-CAHYPQVX.cjs";
+export { OmniSearchProps, SearchInput as default };

package/dist/SearchInput.d.mts

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

package/dist/Section.d.mts

@@ -1,4 +1,4 @@
-import { t as SectionHeading } from "./SectionHeading-QvAmhVmD.mjs";
+import { t as SectionHeading } from "./SectionHeading-CDBQ4m9E.mjs";
 import { ComponentProps, FC, ReactNode } from "react";
 
 //#region components/CardV2/Section.d.ts

package/dist/{SectionHeading-DVSXofwK.d.cts → SectionHeading-CDBQ4m9E.d.mts}

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-uduFOh2m.cjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-DkNqzc2X.mjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts
@@ -58,10 +58,9 @@ declare const SectionHeading: FC<{
    */
   isExpanded: boolean;
   /**
-   * Optional props to pass to the heading element. Accepts an `as` key to control the
-   * rendered heading level (defaults to 'h3'). Use `as: 'h2'` when the card title is
-   * the top-level heading on a page or modal so that the document heading hierarchy
-   * reflects the visual hierarchy.
+   * Optional props to pass to the heading element. Accepts an `as` key to override the
+   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for
+   * section headings so that the document heading hierarchy reflects the visual hierarchy.
    */
   headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -69,4 +68,4 @@ declare const SectionHeading: FC<{
 }>;
 //#endregion
 export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-DVSXofwK.d.cts.map
+//# sourceMappingURL=SectionHeading-CDBQ4m9E.d.mts.map

package/dist/{SectionHeading-QvAmhVmD.d.mts → SectionHeading-D-L4uPoX.d.cts}

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-B10lxofb.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-z1rV4qON.cjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts
@@ -58,10 +58,9 @@ declare const SectionHeading: FC<{
    */
   isExpanded: boolean;
   /**
-   * Optional props to pass to the heading element. Accepts an `as` key to control the
-   * rendered heading level (defaults to 'h3'). Use `as: 'h2'` when the card title is
-   * the top-level heading on a page or modal so that the document heading hierarchy
-   * reflects the visual hierarchy.
+   * Optional props to pass to the heading element. Accepts an `as` key to override the
+   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for
+   * section headings so that the document heading hierarchy reflects the visual hierarchy.
    */
   headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -69,4 +68,4 @@ declare const SectionHeading: FC<{
 }>;
 //#endregion
 export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-QvAmhVmD.d.mts.map
+//# sourceMappingURL=SectionHeading-D-L4uPoX.d.cts.map

package/dist/SectionHeading.d.cts

@@ -1,2 +1,2 @@
-import { t as SectionHeading } from "./SectionHeading-DVSXofwK.cjs";
+import { t as SectionHeading } from "./SectionHeading-D-L4uPoX.cjs";
 export { SectionHeading };

package/dist/SectionHeading.d.mts

@@ -1,2 +1,2 @@
-import { t as SectionHeading } from "./SectionHeading-QvAmhVmD.mjs";
+import { t as SectionHeading } from "./SectionHeading-CDBQ4m9E.mjs";
 export { SectionHeading };

package/dist/{SegmentedControl-DnwNjYre.mjs → SegmentedControl-B1ZLgu61.mjs}

@@ -2,9 +2,9 @@ import { paragraphMixins } from "./mixins/text.mjs";
 import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
-import { jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
 //#region components/SegmentedControl/SegmentedControl.tsx
 const SegmentedControlSizeContext = createContext("md");
 const StyledSegmentedControl = styled(ToggleButtonGroup)`
@@ -108,4 +108,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
 
-//# sourceMappingURL=SegmentedControl-DnwNjYre.mjs.map
+//# sourceMappingURL=SegmentedControl-B1ZLgu61.mjs.map

package/dist/{SegmentedControl-DnwNjYre.mjs.map → SegmentedControl-B1ZLgu61.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl-DnwNjYre.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { BorderRadius, Spacing } from '@persona/design-tokens';\nimport { 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 useFormField from 'design-system/components/FormControl/useFormField';\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 }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\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: 3px;\n  color: ${({ theme }) => 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 }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => 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":";;;;;;;;AAQA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3C,aAAa,GAAG;;YAEvB,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;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,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-B1ZLgu61.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 { 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 }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\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: 3px;\n  color: ${({ theme }) => 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 }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => 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":";;;;;;;;AAQA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3C,aAAa,GAAG;;YAEvB,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;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,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-DRtXdbLe.d.cts → SegmentedControl-BYuXohIp.d.cts}

@@ -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-DRtXdbLe.d.cts.map
+//# sourceMappingURL=SegmentedControl-BYuXohIp.d.cts.map

package/dist/{SegmentedControl-Dk5S4Dhz.d.mts → SegmentedControl-CE845gnm.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-Dk5S4Dhz.d.mts.map
+//# sourceMappingURL=SegmentedControl-CE845gnm.d.mts.map

package/dist/{SegmentedControl-CvznPXgC.cjs → SegmentedControl-CIJz0oxY.cjs}

@@ -1,12 +1,12 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
-const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+const require_useFormField = require("./useFormField-B98dmreO.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region components/SegmentedControl/SegmentedControl.tsx
 const SegmentedControlSizeContext = (0, react.createContext)("md");
 const StyledSegmentedControl = (0, styled_components.default)(react_aria_components.ToggleButtonGroup)`
@@ -121,4 +121,4 @@ Object.defineProperty(exports, "SegmentedControlItem", {
 	}
 });
 
-//# sourceMappingURL=SegmentedControl-CvznPXgC.cjs.map
+//# sourceMappingURL=SegmentedControl-CIJz0oxY.cjs.map

package/dist/{SegmentedControl-CvznPXgC.cjs.map → SegmentedControl-CIJz0oxY.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl-CvznPXgC.cjs","names":["ToggleButtonGroup","BorderRadius","useFormField","ToggleButton","paragraphMixins","Spacing"],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { BorderRadius, Spacing } from '@persona/design-tokens';\nimport { 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 useFormField from 'design-system/components/FormControl/useFormField';\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 }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\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: 3px;\n  color: ${({ theme }) => 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 }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => 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":";;;;;;;;;;AAQA,MAAM,+BAAA,GAAA,MAAA,eAAyD,KAAK;AAqDpE,MAAM,yBAAyB,CAAA,GAAA,kBAAA,SAAOA,sBAAAA,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3CC,uBAAAA,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,iBAAA,GAAA,kBAAA,KAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,KAAC,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,CAAA,GAAA,kBAAA,SAAOC,sBAAAA,aAAa;IACtCC,oBAAAA,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAOC,uBAAAA,QAAQ,KAAKA,uBAAAA,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,wBAAA,GAAA,MAAA,YACJ,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,QAAA,GAAA,MAAA,YAFzB,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}
+{"version":3,"file":"SegmentedControl-CIJz0oxY.cjs","names":["ToggleButtonGroup","BorderRadius","useFormField","ToggleButton","paragraphMixins","Spacing"],"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 { 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 }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\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: 3px;\n  color: ${({ theme }) => 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 }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => 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":";;;;;;;;;;AAQA,MAAM,+BAAA,GAAA,MAAA,eAAyD,KAAK;AAqDpE,MAAM,yBAAyB,CAAA,GAAA,kBAAA,SAAOA,sBAAAA,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3CC,uBAAAA,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,iBAAA,GAAA,kBAAA,KAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,KAAC,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,CAAA,GAAA,kBAAA,SAAOC,sBAAAA,aAAa;IACtCC,oBAAAA,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAOC,uBAAAA,QAAQ,KAAKA,uBAAAA,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,wBAAA,GAAA,MAAA,YACJ,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,QAAA,GAAA,MAAA,YAFzB,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/SegmentedControl.d.cts

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

package/dist/SegmentedControl.d.mts

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

package/dist/{Select-DRnRqMAL.d.mts → Select-BMEwCfbv.d.mts}

@@ -1,10 +1,10 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-BCmP106-.mjs";
-import { t as Property } from "./index-DQvVmqvS.mjs";
-import { l as MenuItemProps } from "./Menu-DIFkRQ6x.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { n as InputSizes, t as InputMixinProps } from "./input-DrG6mA0V.mjs";
+import { l as MenuItemProps } from "./Menu-BJ5c7HGD.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { Property } from "csstype";
 
 //#region components/Select/Select.d.ts
 interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {
@@ -74,4 +74,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-DRnRqMAL.d.mts.map
+//# sourceMappingURL=Select-BMEwCfbv.d.mts.map