npm - @persona/design-system - Versions diffs - 0.7.0 → 0.7.2 - Mend

@persona/design-system 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (468) hide show

package/dist/{Radio-BRPoGITE.mjs.map → Radio-Cxt89w8s.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio-~~BRPoGITE~~.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\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 { opacityOf } from 'design-system/lib/color';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\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: ${({ theme }) => semanticColor(theme, 'FgSecondary', 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: ${semanticColor(theme, 'FgDisabled', 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 ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', 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: ${({ theme }) =>\n semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n }\n\n &${isChecked}, &:checked {\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', 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: ${({ theme }) =>\n semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n }\n\n &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n border-color: ${({ theme }) => semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n &::after {\n background: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', 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: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', 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":";;;;;;;;;;;;AAwBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;YACd,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;KAE9E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;uBACnC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,aAAa,CAAC;;AAG/F,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;mBAEd,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;gBAG3D,YAAY,KAAK,UAAU,KAAK,YAAY;qBACvC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;mBACvF,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;;qBAGpF,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;;;;;;;;;aAS5F,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;qBACjE,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;mBACxG,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;;AAkBzH,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"}
1	+ {"version":3,"file":"Radio-Cxt89w8s.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\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 { opacityOf } from 'design-system/lib/color';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\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: ${({ theme }) => semanticColor(theme, 'FgSecondary', 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: ${semanticColor(theme, 'FgDisabled', 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 ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', 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: ${({ theme }) =>\n semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n }\n\n &${isChecked}, &:checked {\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', 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: ${({ theme }) =>\n semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n border-color: ${({ theme }) =>\n semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n }\n\n &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n border-color: ${({ theme }) => semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n &::after {\n background: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', 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: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', 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":";;;;;;;;;;;;AAwBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;YACd,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;KAE9E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;uBACnC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,aAAa,CAAC;;AAG/F,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;mBAEd,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;gBAG3D,YAAY,KAAK,UAAU,KAAK,YAAY;qBACvC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;mBACvF,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;;qBAGpF,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;;;;;;;;;aAS5F,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;qBACjE,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;mBACxG,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;;AAkBzH,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-CahrWsXi.mjs → RadioGroup-B6Cg1kdm.mjs} RENAMED Viewed

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

package/dist/{RadioGroup-CahrWsXi.mjs.map → RadioGroup-B6Cg1kdm.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup-~~CahrWsXi~~.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"}
1	+ {"version":3,"file":"RadioGroup-B6Cg1kdm.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-CxL6LW4q.d.mts → RadioGroup-BjrfVPZQ.d.mts} RENAMED Viewed

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

package/dist/RadioGroup.d.mts CHANGED Viewed

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

package/dist/{RangeCalendar-B7TwRJbg.d.mts → RangeCalendar-CPnLaM-J.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset } from "./types-D8rWSj3z.mjs";
+import { a as DateFilterPreset } from "./types-YojUycQK.mjs";
 import { Ref } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateRange, RangeCalendarProps } from "react-aria";
@@ -37,4 +37,4 @@ declare const RangeCalendar: ({
 }: RangeCalendarProps$1) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RangeCalendarProps$1 as n, RangeCalendar as t };
-//# sourceMappingURL=RangeCalendar-B7TwRJbg.d.mts.map
+//# sourceMappingURL=RangeCalendar-CPnLaM-J.d.mts.map

package/dist/RangeCalendar.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as RangeCalendarProps, t as RangeCalendar } from "./RangeCalendar-B7TwRJbg.mjs";
+import { n as RangeCalendarProps, t as RangeCalendar } from "./RangeCalendar-CPnLaM-J.mjs";
 export { RangeCalendarProps, RangeCalendar as default };

package/dist/RangeCalendarPresets.d.mts CHANGED Viewed

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

package/dist/{RouterContext-B7N12wkK.d.mts → RouterContext-CbvHIl4K.d.mts} RENAMED Viewed

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

package/dist/RouterContext.d.mts CHANGED Viewed

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

package/dist/{RouterLink-Bq36EGjc.d.mts → RouterLink-v9AG9fYa.d.mts} RENAMED Viewed

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

package/dist/RouterLink.d.mts CHANGED Viewed

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

package/dist/RuleEditorFields.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BtdqMYUD.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-BEjWTkZV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-bKxrF1gC.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/RulesPill.d.mts CHANGED Viewed

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

package/dist/{SearchInput-D69WxMNq.d.mts → SearchInput-CIjwmT8R.d.mts} RENAMED Viewed

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

package/dist/SearchInput.d.mts CHANGED Viewed

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

package/dist/SectionHeading.d.mts CHANGED Viewed

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

package/dist/{SegmentedControl-DLkAC2kW.mjs → SegmentedControl-BcwfLuHA.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as useFormField } from "./useFormField-C61u9KvG.mjs";
+import { n as useFormField } from "./useFormField-BzhMbl5P.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef } from "react";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region components/SegmentedControl/SegmentedControl.tsx
@@ -20,15 +20,22 @@ const StyledSegmentedControl = styled(ToggleButtonGroup)`
 * A segmented control component that allows users to select between multiple options.
 * Built with React Aria for accessibility and keyboard navigation.
 */
-const SegmentedControl = forwardRef(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, children, ...props }, ref) {
+const SegmentedControl = forwardRef(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, "aria-required": ariaRequired, children, ...props }, ref) {
 	const field = useFormField({
 		inputId: id,
 		disabled
 	});
+	const segmentedControlRef = useRef(null);
+	const isRequired = ariaRequired;
+	useImperativeHandle(ref, () => segmentedControlRef.current, []);
+	useEffect(() => {
+		if (isRequired) segmentedControlRef.current?.setAttribute("aria-required", "true");
+		else segmentedControlRef.current?.removeAttribute("aria-required");
+	}, [isRequired]);
 	return /* @__PURE__ */ jsx(SegmentedControlSizeContext.Provider, {
 		value: size,
 		children: /* @__PURE__ */ jsx(StyledSegmentedControl, {
-			ref,
+			ref: segmentedControlRef,
 			className,
 			selectionMode: "single",
 			selectedKeys: selectedKey ? [selectedKey] : void 0,
@@ -110,4 +117,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
-//# sourceMappingURL=SegmentedControl-DLkAC2kW.mjs.map
+//# sourceMappingURL=SegmentedControl-BcwfLuHA.mjs.map

package/dist/SegmentedControl-BcwfLuHA.mjs.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/{SegmentedControl-vCnGsdXo.d.mts → SegmentedControl-Crr_aHAs.d.mts} RENAMED Viewed

@@ -34,6 +34,7 @@ interface SegmentedControlProps {
    * Accessible label for the group
    */
   'aria-label'?: string;
+  'aria-required'?: boolean;
   /**
    * Segment components
    */
@@ -56,4 +57,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-vCnGsdXo.d.mts.map
+//# sourceMappingURL=SegmentedControl-Crr_aHAs.d.mts.map

package/dist/SegmentedControl.d.mts CHANGED Viewed

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

package/dist/{Select-YOgn_uD0.mjs → Select-BstCz8P1.mjs} RENAMED Viewed

@@ -7,9 +7,9 @@ import { Z_INDICES } from "./lib/zindex.mjs";
 import inputMixin from "./mixins/input.mjs";
 import { t as HStack } from "./Stack-ChsImaEY.mjs";
 import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { n as useFormField } from "./useFormField-C61u9KvG.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-xENvm-Oa.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-I5WDO-q5.mjs";
+import { n as useFormField } from "./useFormField-BzhMbl5P.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-Cd6oxjAe.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CuKSNxc9.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -242,4 +242,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-YOgn_uD0.mjs.map
+//# sourceMappingURL=Select-BstCz8P1.mjs.map

package/dist/{Select-YOgn_uD0.mjs.map → Select-BstCz8P1.mjs.map} RENAMED Viewed

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

package/dist/{Select-CpRijO_l.d.mts → Select-CJQeuCiF.d.mts} RENAMED Viewed

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

package/dist/Select.d.mts CHANGED Viewed

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

package/dist/SingleColumnLayout.d.mts ADDED Viewed

@@ -0,0 +1,16 @@
+import { PageLayoutChromeProps } from "./PageLayoutFrame.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region patterns/PageLayout/SingleColumnLayout.d.ts
+interface SingleColumnLayoutProps extends PageLayoutChromeProps {
+  /** Primary page content. Direct children stack vertically. */
+  main: ReactNode;
+}
+declare const SingleColumnLayout: ({
+  main,
+  ...chrome
+}: SingleColumnLayoutProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SingleColumnLayout, SingleColumnLayoutProps };
+//# sourceMappingURL=SingleColumnLayout.d.mts.map

package/dist/{Spinner-BDa0D1ze.mjs → Spinner-DplDSBqf.mjs} RENAMED Viewed

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

package/dist/{Spinner-BDa0D1ze.mjs.map → Spinner-DplDSBqf.mjs.map} RENAMED Viewed

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

package/dist/SplitColumnLayout.d.mts ADDED Viewed

@@ -0,0 +1,19 @@
+import { PageLayoutChromeProps } from "./PageLayoutFrame.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region patterns/PageLayout/SplitColumnLayout.d.ts
+interface SplitColumnLayoutProps extends PageLayoutChromeProps {
+  /** Primary column. Direct children stack vertically and stay in this column. */
+  main: ReactNode;
+  /** Supporting column. Direct children stack vertically and stay in this column. */
+  aside: ReactNode;
+}
+declare const SplitColumnLayout: ({
+  main,
+  aside,
+  ...chrome
+}: SplitColumnLayoutProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SplitColumnLayout, SplitColumnLayoutProps };
+//# sourceMappingURL=SplitColumnLayout.d.mts.map

package/dist/{Stack-8KGPQp0u.d.mts → Stack-RVptVTVi.d.mts} RENAMED Viewed

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

package/dist/Stack.d.mts CHANGED Viewed

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

package/dist/{Sticker-Bf9rhSkv.d.mts → Sticker-BVX38LKi.d.mts} RENAMED Viewed

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

package/dist/Sticker.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-Bf9rhSkv.mjs";
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-BVX38LKi.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/StringValueControl.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-B8aAvU2a2.mjs";
+import { t as ValueControlProps } from "./types-3iEDsymE.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.d.ts

package/dist/Tab.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as Button } from "./Button-HodDf_bB.mjs";
+import { t as Button } from "./Button-Dhiund3f.mjs";
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{TabBar-RenaeJJ6.mjs → TabBar-BepWbJHz.mjs} RENAMED Viewed

@@ -271,4 +271,4 @@ var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
 //#endregion
 export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
-//# sourceMappingURL=TabBar-RenaeJJ6.mjs.map
+//# sourceMappingURL=TabBar-BepWbJHz.mjs.map