@persona/design-system 0.1.6 → 0.1.8

package/dist/{Radio-DnnJl87b.mjs.map → Radio-CSX2eO-O.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Radio-DnnJl87b.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"}
+{"version":3,"file":"Radio-CSX2eO-O.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/{RadioGroup-BDHhFlmy.mjs → RadioGroup-CnK0opBd.mjs}

@@ -1,9 +1,9 @@
 import useControlled from "./lib/useControlled.mjs";
-import { t as Radio } from "./Radio-DnnJl87b.mjs";
+import { t as Radio } from "./Radio-CSX2eO-O.mjs";
 import { Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Children, cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from "react";
 //#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-BDHhFlmy.mjs.map
+//# sourceMappingURL=RadioGroup-CnK0opBd.mjs.map

package/dist/{RadioGroup-BDHhFlmy.mjs.map → RadioGroup-CnK0opBd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-BDHhFlmy.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-CnK0opBd.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-D28hdlhz.cjs → RadioGroup-CriF2InQ.cjs}

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

package/dist/{RadioGroup-D28hdlhz.cjs.map → RadioGroup-CriF2InQ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-D28hdlhz.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"}
+{"version":3,"file":"RadioGroup-CriF2InQ.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-BDO3pTgP.d.cts → RadioGroup-DKqbSfju.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-BDO3pTgP.d.cts.map
+//# sourceMappingURL=RadioGroup-DKqbSfju.d.mts.map

package/dist/{RadioGroup-DfhvXpi3.d.mts → RadioGroup-XYWjprsv.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-DfhvXpi3.d.mts.map
+//# sourceMappingURL=RadioGroup-XYWjprsv.d.cts.map

package/dist/RadioGroup.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-BDO3pTgP.cjs";
+import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-XYWjprsv.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-DfhvXpi3.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-DKqbSfju.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/RangeCalendar.d.mts

@@ -1,5 +1,5 @@
-import { Ref } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Ref } from "react";
 import { DateRange, RangeCalendarProps as RangeCalendarProps$1 } from "react-aria";
 import { CalendarDate, DateValue as DateValue$1 } from "@internationalized/date";
 

package/dist/RangeCalendarPresets.d.mts

@@ -1,5 +1,5 @@
-import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
 import { RangeCalendarState } from "react-stately";
 import { CalendarDate } from "@internationalized/date";
 import { RangeValue } from "@react-types/shared";

package/dist/RuleEditorFields.d.mts

@@ -0,0 +1,37 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.d.ts
+interface RuleEditorFieldsProps {
+  registry: FieldRegistry;
+  field: FilterField | undefined;
+  groupIndex: number;
+  ruleIndex: number;
+  rule: FilterRule;
+  size: FilterSize;
+  operators: ReadonlyArray<FilterOperator>;
+  operatorConfigurable: boolean;
+  onFieldChange: (groupIndex: number, ruleIndex: number, nextFieldId: string) => void;
+  onOperatorChange: (groupIndex: number, ruleIndex: number, nextOperator: FilterOperator) => void;
+  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue) => void;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+}
+declare function RuleEditorFields({
+  registry,
+  field,
+  groupIndex,
+  ruleIndex,
+  rule,
+  size,
+  operators,
+  operatorConfigurable,
+  onFieldChange,
+  onOperatorChange,
+  onValueChange,
+  renderValueControl
+}: RuleEditorFieldsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RuleEditorFields as default };
+//# sourceMappingURL=RuleEditorFields.d.mts.map

package/dist/RulesPill.d.mts

@@ -0,0 +1,65 @@
+import { d as FilterSize, n as CompoundExpression } from "./types-D58IoRx6.mjs";
+import * as _$react from "react";
+import { HTMLAttributes } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/RulesPill/RulesPill.d.ts
+interface RulesPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+  /** The compound expression owned by this pill. Drives the count chip. */
+  compound: CompoundExpression;
+  /**
+   * When `false`, the pill renders `null`. The owning view sets this from
+   * `useFilterStateV2().advancedRulesEnabled` (which is itself driven by the
+   * org/resource feature flag and the per-view `advancedRulesEnabled` flag).
+   */
+  enabled: boolean;
+  /**
+   * Click handler — typically opens an `AdvancedFilterRulesPopover`.
+   *
+   * Optional because the most common usage is as a Radix `Popover.Trigger`
+   * `asChild` element, in which case Radix injects its own toggle onClick
+   * via `Slot`. Standalone usage passes an explicit handler.
+   */
+  onClick?: () => void;
+  /**
+   * Whether the associated popover is open. Only the open state uses the
+   * active treatment. Existing rules alone keep the pill in its resting
+   * state.
+   */
+  isOpen?: boolean;
+  /** Override the default test id (`rules-pill__trigger`). */
+  'data-test'?: string;
+  /**
+   * Size variant. Defaults to whatever the surrounding
+   * `FilterBarContext` provides (`'sm'` outside a `FilterBar`).
+   */
+  size?: FilterSize;
+}
+/**
+ * Always-visible filter pill that owns the entire compound (DNF) expression.
+ *
+ * Composes `PillShell` for the rounded variant-aware container, the
+ * `:focus-within` outline, and the trailing caret↔dismiss swap that's
+ * identical to `FilterPill`. The pill-specific body content is just
+ * the "Rules" label + an optional count chip.
+ *
+ * Visual states:
+ * - `enabled === false` → renders `null` (the owning view has opted out of
+ *   Advanced Filter Rules).
+ * - resting (no popover, no rules) → gray pill, label `Rules`, caret `▾`.
+ * - resting (no popover, N rules) → gray pill, label `Rules` + `[N]` chip,
+ *   caret `▾`.
+ * - hover (no popover) → gray-hover bg, caret stays visible.
+ * - active (popover open) → "ube" purple pill, `TextActive` color, purple
+ *   `[N]` chip when N > 0, caret stays visible.
+ *
+ * The pill itself owns no popover state — parents place it inside an
+ * `AdvancedFilterRulesPopover` (or any other popover container) and wire
+ * `onClick` / `isOpen` themselves.
+ *
+ * RulesPill does not expose a dismiss action; clicking the pill toggles
+ * the popover.
+ */
+declare const RulesPill: _$react.ForwardRefExoticComponent<RulesPillProps & _$react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { RulesPillProps, RulesPill as default };
+//# sourceMappingURL=RulesPill.d.mts.map

package/dist/{SearchInput-2lsv5_R6.d.mts → SearchInput-Bp2yjaE1.d.mts}

@@ -1,6 +1,6 @@
-import { n as InputSizes } from "./input-FEaQ66an.mjs";
-import { FocusEventHandler, ReactNode } from "react";
+import { n as InputSizes } from "./input-Bv5fKt5J.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { FocusEventHandler, ReactNode } from "react";
 
 //#region components/DataTable/SearchInput/SearchInput.d.ts
 interface OmniSearchProps {
@@ -43,4 +43,4 @@ declare const SearchInput: ({
 }: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInput as n, OmniSearchProps as t };
-//# sourceMappingURL=SearchInput-2lsv5_R6.d.mts.map
+//# sourceMappingURL=SearchInput-Bp2yjaE1.d.mts.map

package/dist/{SearchInput-B6d2Qyzb.d.cts → SearchInput-CTI59-NW.d.cts}

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-Bm_anD8X.cjs";
+import { n as InputSizes } from "./input-DPB0cX2m.cjs";
 import { FocusEventHandler, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 
@@ -43,4 +43,4 @@ declare const SearchInput: ({
 }: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInput as n, OmniSearchProps as t };
-//# sourceMappingURL=SearchInput-B6d2Qyzb.d.cts.map
+//# sourceMappingURL=SearchInput-CTI59-NW.d.cts.map

package/dist/SearchInput.d.cts

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

package/dist/SearchInput.d.mts

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

package/dist/Section.d.mts

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

package/dist/{SectionHeading-BLDimf5d.d.mts → SectionHeading-C6hjGdK-.d.cts}

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-DSg3yZck.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-E90Wvqmc.cjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts
@@ -68,4 +68,4 @@ declare const SectionHeading: FC<{
 }>;
 //#endregion
 export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-BLDimf5d.d.mts.map
+//# sourceMappingURL=SectionHeading-C6hjGdK-.d.cts.map

package/dist/{SectionHeading-DZyfNPn0.d.cts → SectionHeading-Q-rx2LEd.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-CVtzREhU.mjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts
@@ -68,4 +68,4 @@ declare const SectionHeading: FC<{
 }>;
 //#endregion
 export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-DZyfNPn0.d.cts.map
+//# sourceMappingURL=SectionHeading-Q-rx2LEd.d.mts.map

package/dist/SectionHeading.d.cts

@@ -1,2 +1,2 @@
-import { t as SectionHeading } from "./SectionHeading-DZyfNPn0.cjs";
+import { t as SectionHeading } from "./SectionHeading-C6hjGdK-.cjs";
 export { SectionHeading };

package/dist/SectionHeading.d.mts

@@ -1,2 +1,2 @@
-import { t as SectionHeading } from "./SectionHeading-BLDimf5d.mjs";
+import { t as SectionHeading } from "./SectionHeading-Q-rx2LEd.mjs";
 export { SectionHeading };

package/dist/{SegmentedControl-DTkFgjac.cjs → SegmentedControl-C2XZF0ys.cjs}

@@ -1,18 +1,18 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
+const require_useFormField = require("./useFormField-BZlArnsI.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+let react = require("react");
 //#region components/SegmentedControl/SegmentedControl.tsx
 const SegmentedControlSizeContext = (0, react.createContext)("md");
 const StyledSegmentedControl = (0, styled_components.default)(react_aria_components.ToggleButtonGroup)`
   display: inline-flex;
-  background-color: ${({ theme }) => theme.color.border.input};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  background-color: ${({ theme }) => theme.color.variants.basic.default};
+  border-radius: 5px;
   padding: 1px;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   height: ${({ $size = "md" }) => $size === "sm" ? "20px" : "24px"};
@@ -59,7 +59,7 @@ const StyledSegment = (0, styled_components.default)(react_aria_components.Toggl
   justify-content: center;
   background-color: transparent;
   border: none;
-  border-radius: 3px;
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
   color: ${({ theme }) => theme.color.text.secondary};
   cursor: pointer;
   flex: 1;
@@ -81,6 +81,7 @@ const StyledSegment = (0, styled_components.default)(react_aria_components.Toggl
   /* Selected state */
   &[data-selected] {
     background-color: ${({ theme }) => theme.color.primary.white};
+    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.border.input};
     color: ${({ theme }) => theme.color.text.primary};
   }
 
@@ -121,4 +122,4 @@ Object.defineProperty(exports, "SegmentedControlItem", {
 	}
 });
 
-//# sourceMappingURL=SegmentedControl-DTkFgjac.cjs.map
+//# sourceMappingURL=SegmentedControl-C2XZF0ys.cjs.map

package/dist/SegmentedControl-C2XZF0ys.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-C2XZF0ys.cjs","names":["ToggleButtonGroup","useFormField","ToggleButton","paragraphMixins","BorderRadius","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.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 }) => 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    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.border.input};\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,SAAS,MAAM,QAAQ;;;YAG5D,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;;;;;;mBAMJC,uBAAAA,aAAa,GAAG;YACvB,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;mCAC9B,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;cAC5D,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-pRkMcMXe.mjs → SegmentedControl-CgDQIVll.mjs}

@@ -1,16 +1,16 @@
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
-import { createContext, forwardRef, useContext } from "react";
-import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { createContext, forwardRef, useContext } from "react";
 //#region components/SegmentedControl/SegmentedControl.tsx
 const SegmentedControlSizeContext = createContext("md");
 const StyledSegmentedControl = styled(ToggleButtonGroup)`
   display: inline-flex;
-  background-color: ${({ theme }) => theme.color.border.input};
-  border-radius: ${BorderRadius.Md};
+  background-color: ${({ theme }) => theme.color.variants.basic.default};
+  border-radius: 5px;
   padding: 1px;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   height: ${({ $size = "md" }) => $size === "sm" ? "20px" : "24px"};
@@ -57,7 +57,7 @@ const StyledSegment = styled(ToggleButton)`
   justify-content: center;
   background-color: transparent;
   border: none;
-  border-radius: 3px;
+  border-radius: ${BorderRadius.Md};
   color: ${({ theme }) => theme.color.text.secondary};
   cursor: pointer;
   flex: 1;
@@ -79,6 +79,7 @@ const StyledSegment = styled(ToggleButton)`
   /* Selected state */
   &[data-selected] {
     background-color: ${({ theme }) => theme.color.primary.white};
+    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.border.input};
     color: ${({ theme }) => theme.color.text.primary};
   }
 
@@ -108,4 +109,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
 
-//# sourceMappingURL=SegmentedControl-pRkMcMXe.mjs.map
+//# sourceMappingURL=SegmentedControl-CgDQIVll.mjs.map

package/dist/SegmentedControl-CgDQIVll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-CgDQIVll.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.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 }) => 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    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.border.input};\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,SAAS,MAAM,QAAQ;;;YAG5D,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,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;mCAC9B,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;cAC5D,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-1QD2zH3l.d.mts → SegmentedControl-DrjdUOU9.d.mts}

@@ -1,6 +1,6 @@
+import { ToggleButtonProps } from "react-aria-components";
 import * as _$react from "react";
 import { Key, ReactNode } from "react";
-import { ToggleButtonProps } from "react-aria-components";
 
 //#region components/SegmentedControl/SegmentedControl.d.ts
 interface SegmentedControlProps {
@@ -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-1QD2zH3l.d.mts.map
+//# sourceMappingURL=SegmentedControl-DrjdUOU9.d.mts.map

package/dist/{SegmentedControl-C51htGBp.d.cts → SegmentedControl-nHIK1ZvR.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-C51htGBp.d.cts.map
+//# sourceMappingURL=SegmentedControl-nHIK1ZvR.d.cts.map

package/dist/SegmentedControl.d.cts

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-C51htGBp.cjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-nHIK1ZvR.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-1QD2zH3l.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-DrjdUOU9.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlProps };

package/dist/{Select-XN23Ui_j.d.cts → Select-2KbtKawr.d.mts}

@@ -1,10 +1,10 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
-import { l as MenuItemProps } from "./Menu-C_NOsHAm.cjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
+import { l as MenuItemProps } from "./Menu-CUp_9HgC.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { Property } from "csstype";
 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'> {
@@ -34,6 +34,12 @@ interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps,
    * Render dropdown menu in a portal.
    */
   portal?: boolean;
+  /**
+   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside
+   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's
+   * dismiss scope, which would close it on click. Requires `portal`.
+   */
+  portalContainer?: HTMLElement | null;
   /**
    * Props to apply to Radix Select.Trigger within
    */
@@ -74,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-XN23Ui_j.d.cts.map
+//# sourceMappingURL=Select-2KbtKawr.d.mts.map

package/dist/{Select-BysJW9mH.d.mts → Select-BH3hXMxp.d.cts}

@@ -1,10 +1,10 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-FEaQ66an.mjs";
-import { l as MenuItemProps } from "./Menu-CSgCXX0k.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DPB0cX2m.cjs";
+import { l as MenuItemProps } from "./Menu-fUnbIYr5.cjs";
 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 * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 import { Property } from "csstype";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
 //#region components/Select/Select.d.ts
 interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {
@@ -34,6 +34,12 @@ interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps,
    * Render dropdown menu in a portal.
    */
   portal?: boolean;
+  /**
+   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside
+   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's
+   * dismiss scope, which would close it on click. Requires `portal`.
+   */
+  portalContainer?: HTMLElement | null;
   /**
    * Props to apply to Radix Select.Trigger within
    */
@@ -74,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-BysJW9mH.d.mts.map
+//# sourceMappingURL=Select-BH3hXMxp.d.cts.map