npm - @persona/design-system - Versions diffs - 0.2.1 → 0.3.1 - Mend

@persona/design-system 0.2.1 → 0.3.1

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 (448) hide show

package/dist/FormControl-BIXJ-FPI.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormControl-BIXJ-FPI.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n isValidElement,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n FormControlContext,\n type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' | 'sm';\n\ninterface StyledLabelProps {\n $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n ${({ $size }) => {\n switch ($size) {\n default:\n case 'md':\n return css`\n ${Typography.TextMedium};\n `;\n case 'sm':\n return css`\n ${Typography.TextSmall};\n `;\n }\n }}\n\n color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n tooltip?: ReactNode;\n size?: LabelSizes;\n side?: 'top' | 'right' | 'bottom' | 'left';\n labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n tooltip,\n side,\n size,\n children,\n labelTooltipZIndex,\n ...props\n}: FormLabelProps) => {\n const field = useFormField({ labelId: props.id });\n const formGroup = useFormGroup();\n const labelProps = {\n id: field.labelId,\n htmlFor: field.inputId,\n ...props,\n };\n\n // Use labelTooltipZIndex from props, then from form group context\n const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n if (tooltip) {\n return (\n <Tooltip\n size={size}\n trigger={\n <LabelBase {...labelProps} $size={size}>\n <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n </LabelBase>\n }\n side={side}\n {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n >\n {tooltip}\n </Tooltip>\n );\n }\n\n return (\n <LabelBase {...labelProps} $size={size}>\n {children}\n </LabelBase>\n );\n};\n\n/**\n * Used to target an input field within a FormControl.\n */\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n ${Typography.TextSmall};\n line-height: 1;\n color: ${({ theme, hasWarning, hasError }) =>\n hasError\n ? theme.color.variants.danger.default\n : hasWarning\n ? Color.CoreOrange900\n : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n function HelperText(props, ref) {\n const field = useFormField({ helperTextId: props.id });\n return (\n <HelperTextBase\n hasError={field.hasError}\n hasWarning={field.hasWarning}\n id={field.helperTextId}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function ErrorText(props, ref) {\n const field = useFormField({ errorTextId: props.id });\n return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function WarningText(props, ref) {\n const field = useFormField({ warningTextId: props.id });\n return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n },\n);\n\nexport const Container = styled.div<{\n $configField?: boolean;\n $hasRightActions?: boolean;\n $configFieldInputWidth?: string;\n}>`\n display: flex;\n ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n $configField\n ? $hasRightActions\n ? css`\n flex-direction: column;\n `\n : css`\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[4]};\n min-width: 288px;\n\n > ${FormInputContainer} {\n display: flex;\n flex-direction: row-reverse;\n width: ${$configFieldInputWidth ?? '50%'};\n min-width: 180px;\n }\n\n &:has(textarea) {\n flex-direction: column;\n align-items: flex-start;\n gap: ${Spacing[1]};\n\n > ${FormInputContainer} {\n width: 100%;\n }\n }\n `\n : css`\n flex-direction: column;\n margin-bottom: ${Spacing[3]};\n `}\n\n > *:not(:first-child) {\n margin-top: ${({ $configField, $hasRightActions }) =>\n $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n }\n\n > ${HelperTextBase} {\n margin-top: ${Spacing[1]};\n }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n inputId?: string;\n disabled?: boolean;\n /**\n * Whether to render the form field as a config field.\n * This will remove the label and helper text.\n */\n configField?: boolean;\n /**\n * Whether the form field has right actions.\n */\n hasRightActions?: boolean;\n /**\n * Override the width of the form input container when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n {\n children,\n hasError,\n hasWarning,\n inputId,\n disabled,\n configField,\n hasRightActions,\n configFieldInputWidth,\n ...props\n }: FormControlProps,\n ref,\n) {\n const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n const initFormField: FormControlContextProps = {\n hasError,\n hasWarning,\n disabled,\n inputId: inputId ?? generatedId,\n configField,\n };\n\n Children.map(children, (child: ReactNode) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case FormLabel: {\n initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n break;\n }\n case HelperText: {\n initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n break;\n }\n case ErrorText: {\n initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n break;\n }\n case WarningText: {\n initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n break;\n }\n }\n }\n });\n\n const field = useFormField(initFormField);\n\n return (\n <FormControlContext.Provider value={field}>\n <Container\n ref={ref}\n $configField={field.configField}\n $hasRightActions={hasRightActions}\n $configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {children}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAY,OAAO,KAAK;KACzB,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;YACN,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;YACN,WAAW,UAAU;;;EAG7B;;YAEQ,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;AAUnD,MAAa,aAAa,EACxB,SACA,MACA,MACA,UACA,oBACA,GAAG,YACiB;CACpB,MAAM,QAAQ,aAAa,EAAE,SAAS,MAAM,IAAI,CAAC;CACjD,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa;EACjB,IAAI,MAAM;EACV,SAAS,MAAM;EACf,GAAG;EACJ;CAGD,MAAM,8BAA8B,sBAAsB,UAAU;AAEpE,KAAI,QACF,QACE,oBAAC,SAAD;EACQ;EACN,SACE,oBAAC,WAAD;GAAW,GAAI;GAAY,OAAO;aAChC,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;GACnD,CAAA;EAER;EACN,GAAK,+BAA+B,QAAQ,EAAE,QAAQ,6BAA6B;YAElF;EACO,CAAA;AAId,QACE,oBAAC,WAAD;EAAW,GAAI;EAAY,OAAO;EAC/B;EACS,CAAA;;;;;AAOhB,MAAa,qBAAqB,OAAO,GAAG;AAE5C,MAAM,iBAAiB,OAAO,GAAe;IACzC,WAAW,UAAU;;YAEb,EAAE,OAAO,YAAY,eAC7B,WACI,MAAM,MAAM,SAAS,OAAO,UAC5B,aACE,MAAM,gBACN,MAAM,MAAM,KAAK,UAAU;;AAKrC,MAAa,aAAa,WACxB,SAAS,WAAW,OAAO,KAAK;CAC9B,MAAM,QAAQ,aAAa,EAAE,cAAc,MAAM,IAAI,CAAC;AACtD,QACE,oBAAC,gBAAD;EACE,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,IAAI,MAAM;EACL;EACL,GAAI;EACJ,CAAA;EAGP;AAED,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;AAE7B,QAAO,oBAAC,gBAAD;EAAgB,UAAA;EAAS,IADlB,aAAa,EAAE,aAAa,MAAM,IAAI,CACX,CAAC;EAAkB;EAAK,GAAI;EAAS,CAAA;EAEjF;AAED,MAAa,cAAc,WACzB,SAAS,YAAY,OAAO,KAAK;AAE/B,QAAO,oBAAC,gBAAD;EAAgB,YAAA;EAAW,IADpB,aAAa,EAAE,eAAe,MAAM,IAAI,CACX,CAAC;EAAoB;EAAK,GAAI;EAAS,CAAA;EAErF;AAED,MAAa,YAAY,OAAO,GAI9B;;KAEG,EAAE,cAAc,kBAAkB,6BACnC,eACI,mBACE,GAAG;;cAGH,GAAG;;;;mBAIM,QAAQ,GAAG;;;gBAGd,mBAAmB;;;uBAGZ,0BAA0B,MAAM;;;;;;;qBAOlC,QAAQ,GAAG;;kBAEd,mBAAmB;;;;cAK7B,GAAG;;2BAEgB,QAAQ,GAAG;UAC5B;;;mBAGS,EAAE,cAAc,uBAC7B,mBAAmB,QAAQ,KAAK,eAAe,QAAQ,KAAK,QAAQ,GAAG;;;MAGvE,eAAe;kBACH,QAAQ,GAAG;;;AA0B7B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EACE,UACA,UACA,YACA,SACA,UACA,aACA,iBACA,uBACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,cAAc,SAAS,qBAAqB,EAAE,EAAE,CAAC;CAErE,MAAM,gBAAyC;EAC7C;EACA;EACA;EACA,SAAS,WAAW;EACpB;EACD;AAED,UAAS,IAAI,WAAW,UAAqB;AAC3C,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK;AACH,kBAAc,UAAU,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACnE;GAEF,KAAK;AACH,kBAAc,eAAe,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACxE;GAEF,KAAK;AACH,kBAAc,cAAc,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACvE;GAEF,KAAK;AACH,kBAAc,gBAAgB,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACzE;;GAIN;CAEF,MAAM,QAAQ,aAAa,cAAc;AAEzC,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,WAAD;GACO;GACL,cAAc,MAAM;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,GAAI;GAEH;GACS,CAAA;EACgB,CAAA;EAEhC"}

package/dist/FormField-DcGQvgNW.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormField-DcGQvgNW.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../components/FormField/FormField.tsx","../components/FormField/inputFields.tsx","../components/FormField/CheckboxGroupField.tsx","../components/FormField/ListBoxField.tsx","../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n ErrorText,\n type FormControlProps,\n FormInputContainer,\n FormLabel,\n HelperText,\n WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n /**\n * Renders `<Label>` above input\n */\n label?: ReactNode;\n\n /**\n * ID of the input element. Providing this will automatically link the label to the input.\n */\n inputId?: string;\n\n /**\n * Renders `<HelperText>` below input\n */\n helperText?: ReactNode;\n\n /**\n * Renders `<ErrorText>` below input and helper text.\n */\n errorText?: ReactNode;\n\n /**\n * Renders `<WarningText>` below input and helper text.\n */\n warningText?: ReactNode;\n\n /**\n * Should be an input of some sort\n */\n children?: ReactElement;\n\n labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n helperProps?: ComponentPropsWithRef<typeof HelperText>;\n warningProps?: ComponentPropsWithRef<typeof WarningText>;\n errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n /**\n * Whether to render the form field as a config field.\n * This will render the helper text as a tooltip.\n */\n configField?: boolean;\n\n /**\n * Override the width of the input area when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n\n /**\n * Renders actions to the right of the label.\n */\n rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/**\n * > **Please do not use in production! This component is subject to API and style changes.**\n *\n * Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\n *\n * ## Usage\n *\n * ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n {\n label,\n children,\n helperText,\n warningText,\n errorText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField: configFieldProp,\n configFieldInputWidth,\n rightActions,\n ...props\n }: FormFieldProps,\n ref,\n) {\n const { configField: configFieldFormGroup } = useFormGroup();\n const configField = configFieldProp ?? configFieldFormGroup;\n\n const labelElement = label ? (\n <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n {label}\n </FormLabel>\n ) : null;\n\n return (\n <FormControl\n hasError={!!errorText}\n hasWarning={!!warningText}\n ref={ref}\n configField={configField}\n hasRightActions={!!rightActions}\n configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {rightActions ? (\n <HStack justify='space-between' align='center'>\n {labelElement}\n <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n </HStack>\n ) : (\n labelElement\n )}\n <FormInputContainer>{children}</FormInputContainer>\n {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n </FormControl>\n );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash/fp';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n T,\n | 'label'\n | 'inputId'\n | 'helperText'\n | 'errorText'\n | 'warningText'\n | 'labelProps'\n | 'helperProps'\n | 'warningProps'\n | 'errorProps'\n | 'configField'\n | 'configFieldInputWidth'\n | 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/**\n * Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n */\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n props: T,\n): {\n formFieldProps: ExtractFormFieldProps<T>;\n inputProps: OmitFormFieldProps<T>;\n} => {\n const {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n ...inputProps\n } = props;\n\n return {\n formFieldProps: {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n },\n inputProps,\n };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n function TextField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <Input {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n function TextAreaField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <TextArea {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n id,\n label,\n helperText,\n errorText,\n warningText,\n children,\n configField,\n labelProps,\n ...props\n}: SelectFieldProps) => {\n const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n return (\n <FormField\n label={label}\n labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Select {...props} id={linkedId}>\n {children}\n </Select>\n </FormField>\n );\n};\n\nexport interface RadioGroupFieldProps\n extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n label,\n helperText,\n errorText,\n warningText,\n children,\n ...props\n}: RadioGroupFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n >\n <RadioGroup {...props}>{children}</RadioGroup>\n </FormField>\n );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n label,\n helperText,\n errorText,\n warningText,\n checkboxLabel,\n configField,\n labelProps,\n ...props\n}: CheckboxFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <Checkbox label={checkboxLabel} {...props} />\n </FormField>\n );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(function ToggleField(\n { label, helperText, errorText, warningText, configField, ...props },\n ref,\n) {\n return (\n <FormField\n label={label}\n labelProps={{ size: props.size }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Toggle {...props} ref={ref} />\n </FormField>\n );\n});\n\nexport interface SegmentedControlFieldProps\n extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n function SegmentedControlField(\n { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n ref,\n ) {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <SegmentedControl fullWidth {...props} ref={ref}>\n {children}\n </SegmentedControl>\n </FormField>\n );\n },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = ({\n label,\n labelProps,\n helperText,\n errorText,\n warningText,\n configField,\n ...props\n}: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => {\n return (\n <FormField\n label={label}\n labelProps={labelProps}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Combobox {...props} />\n </FormField>\n );\n};\n","import {\n Children,\n cloneElement,\n type ComponentPropsWithRef,\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\nimport {\n type AriaCheckboxGroupProps,\n mergeProps,\n useCheckboxGroup,\n useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n * inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n const parentContext = useContext(FormControlContext);\n return (\n <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n {children}\n </FormControlContext.Provider>\n );\n};\n\ninterface CheckboxGroupItemProps {\n children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n const { children } = props;\n const checkboxProps = children.props;\n\n const state = useContext(CheckboxGroupContext);\n const ref = useRef();\n const { inputProps } = useCheckboxGroupItem(\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n {\n ...checkboxProps,\n onChange: undefined,\n isDisabled: checkboxProps.disabled,\n isReadOnly: checkboxProps.readOnly,\n isRequired: checkboxProps.required,\n isIndeterminate: checkboxProps.indeterminate,\n value: String(children.props.value),\n 'aria-label': innerText(checkboxProps.label),\n },\n state,\n ref,\n );\n\n return cloneElement(\n children,\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n mergeProps(inputProps, {\n onChange: checkboxProps.onChange,\n disabled: state.isDisabled || checkboxProps.disabled,\n checked: state.isSelected(String(inputProps.value)),\n ref,\n } as ComponentPropsWithRef<typeof Checkbox>),\n );\n};\n\ninterface CheckboxGroupFieldProps\n extends\n Omit<ImplementsFormField, 'configField'>,\n Omit<\n AriaCheckboxGroupProps,\n 'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n > {\n children?: ReactElement<CheckboxProps>[];\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n children,\n name,\n onChange,\n disabled,\n readOnly,\n required,\n ...props\n}: CheckboxGroupFieldProps) => {\n const reactAriaProps = {\n ...props,\n description: props.helperText,\n errorMessage: props.errorText,\n onChange,\n name,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n };\n const state = useCheckboxGroupState(reactAriaProps);\n const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n reactAriaProps,\n state,\n );\n\n return (\n <FormField\n labelProps={labelProps}\n helperProps={descriptionProps}\n errorProps={errorMessageProps}\n disabled={disabled}\n {...groupProps}\n {...props}\n >\n <ClearGroupInputId>\n <CheckboxGroupContext.Provider value={state}>\n {Children.map(children, (checkbox) => (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n ))}\n </CheckboxGroupContext.Provider>\n </ClearGroupInputId>\n </FormField>\n );\n};\n\nexport default CheckboxGroupField;\n","import { type ReactNode, useState } from 'react';\n\nimport { MoreIcon, PlusIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n actions?: ListBoxFieldAction[];\n addDropdownConfig?: AddDropdownConfig;\n}\n\nconst ListBoxField = <T extends object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp,\n size = 'md',\n actions = [],\n addDropdownConfig,\n selectedKeys: selectedKeysProp,\n onSelectionChange,\n defaultSelectedKeys,\n ...props\n}: ListBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: ListBoxFieldAction[] = [...actions];\n const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n const selectedKeys = selectedKeysProp ?? selectedKeysState;\n const effectiveSize = configField ? 'sm' : size;\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => onDelete(selectedKeys),\n disabled:\n deleteDisabled ||\n selectedKeys == null ||\n (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n });\n }\n\n const addButton = (\n <IconButton size='sm' onClick={onAdd} aria-label='Add item to list'>\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n configField={configField}\n rightActions={\n configField && (\n <>\n {menuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm'>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {menuActions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={() => action.onClick(selectedKeys)}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onAdd && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} align='start' portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size={effectiveSize}\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <ListBox\n id={inputId}\n fullWidth={configField}\n size={effectiveSize}\n deleteDisabled={deleteDisabled}\n // We have to control the keys so we can power the `rightActions`\n selectedKeys={selectedKeys}\n onSelectionChange={(keys) => {\n onSelectionChange?.(keys);\n setSelectedKeys(keys);\n }}\n {...props}\n />\n </FormField>\n );\n};\n\nexport default ListBoxField;\n","import { Fragment, type MouseEvent, type ReactNode, useState } from 'react';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { useFormGroup } from '@persona/design-system/components/ConfigFormGroup';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport type { FormLabelProps } from '@persona/design-system/components/FormControl';\nimport type { MenuItemProps } from '@persona/design-system/components/Menu';\nimport TableBox, { type TableBoxProps } from '@persona/design-system/components/TableBox';\nimport { MoreIcon, PlusIcon } from '@persona/icons';\n\nimport FormField from './FormField';\nimport type { ImplementsFormField } from './inputFields';\n\nexport interface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\n\nexport interface TableBoxFieldActionGroup {\n type: 'group';\n heading: string;\n actions: TableBoxFieldAction[];\n}\n\nexport type TableBoxFieldActionEntry = TableBoxFieldAction | TableBoxFieldActionGroup;\n\n/** Aria-label on TableBoxField's + button. Consumers that style or detect that\n * button (e.g. popover toggle guards) should import this rather than redefining it. */\nexport const TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL = 'Add item to table';\n\nconst isActionGroup = (action: TableBoxFieldActionEntry): action is TableBoxFieldActionGroup =>\n 'type' in action && action.type === 'group';\n\ninterface AddDropdownConfig {\n options: Array<{ label: string; value: string }>;\n onSelection: (value: string) => void;\n}\n\ninterface TableBoxFieldProps<T extends object = object>\n extends ImplementsFormField, Omit<TableBoxProps<T>, 'aria-label' | 'onCreateNewRow'> {\n onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: (selectedKey: string | null) => void;\n deleteDisabled?: boolean;\n /** Actions and labeled action groups rendered in order. Empty groups are omitted. */\n actions?: TableBoxFieldActionEntry[];\n addDropdownConfig?: AddDropdownConfig;\n\n /**\n * Callback to create a new row and add it to the rows array\n * Should return the id of the newly created row\n */\n createNewRow?: () => string;\n children?: ReactNode;\n}\n\nconst TableBoxField = <T extends object = object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps: labelPropsProp,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp = true,\n actions = [],\n addDropdownConfig,\n selectedKey: selectedKeyProp,\n onSelectionChange,\n defaultSelectedKey,\n selectionMode,\n disabled,\n createNewRow,\n children,\n emptyText = 'No data',\n ...props\n}: TableBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: TableBoxFieldActionEntry[] = [...actions];\n const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);\n const selectedKey = selectedKeyProp ?? selectedKeyState;\n const [newRowId, setNewRowId] = useState<string | null>(null);\n const labelProps: FormLabelProps = { size: 'sm', ...labelPropsProp };\n\n const handleCreateNewRow = () => {\n if (createNewRow) {\n setNewRowId(createNewRow());\n }\n };\n\n // Handle add button click\n const handleAddClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (createNewRow) {\n handleCreateNewRow();\n } else if (onAdd) {\n onAdd(e);\n }\n };\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => selectedKey && onDelete(selectedKey),\n disabled: deleteDisabled || selectedKey == null,\n });\n }\n const visibleMenuActions = menuActions.filter(\n (action) => !isActionGroup(action) || action.actions.length > 0,\n );\n\n const addButton = (\n <IconButton\n size='sm'\n onClick={handleAddClick}\n aria-label={TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL}\n disabled={disabled}\n >\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n rightActions={\n configField && (\n <>\n {visibleMenuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {visibleMenuActions.map((entry, entryIndex) => {\n const previousEntry = visibleMenuActions[entryIndex - 1];\n if (isActionGroup(entry)) {\n return (\n <Fragment key={`${entry.heading}-${entryIndex}`}>\n {entryIndex > 0 && <DropdownMenu.Divider />}\n <DropdownMenu.Heading size='sm'>{entry.heading}</DropdownMenu.Heading>\n {entry.actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n disabled={disabled || action.disabled}\n onClick={() => action.onClick(selectedKey)}\n size='sm'\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </Fragment>\n );\n }\n\n return (\n <Fragment key={`${entry.label}-${entryIndex}`}>\n {previousEntry && isActionGroup(previousEntry) && <DropdownMenu.Divider />}\n <DropdownMenu.Item\n {...entry}\n disabled={disabled || entry.disabled}\n onClick={() => entry.onClick(selectedKey)}\n size='sm'\n >\n {entry.label}\n </DropdownMenu.Item>\n </Fragment>\n );\n })}\n </DropdownMenu>\n )}\n {(onAdd || createNewRow) && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size='sm'\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <TableBox\n aria-label={`${label} table`}\n // We have to control the keys so we can power the `rightActions`\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n onSelectionChange?.(key);\n setSelectedKey(key);\n }}\n selectionMode={selectionMode}\n newRowId={newRowId}\n onCreateNewRow={createNewRow ? handleCreateNewRow : undefined}\n emptyText={emptyText}\n disabled={disabled}\n {...props}\n >\n {children}\n </TableBox>\n </FormField>\n );\n};\n\n// Attach subcomponents to TableBoxField\nTableBoxField.Row = TableBox.Row;\nTableBoxField.Cell = TableBox.Cell;\n\nexport default TableBoxField;\n"],"mappings":"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"}

package/dist/HoverCopyableField-BHdCaR-R.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"HoverCopyableField-BHdCaR-R.mjs","names":["Card","Popover"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx","../components/HoverCopyableField/index.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n try {\n if ('clipboard' in navigator) {\n await navigator.clipboard.writeText(text);\n return true;\n } else {\n return document.execCommand('copy', true, text);\n }\n } catch {\n return false;\n }\n};\n\nconst CopyableFieldContainer = styled.div`\n display: flex;\n gap: ${Spacing[1]};\n align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n type: 'button',\n variant: 'inverse',\n width: 'icon',\n}))<{ isActive: boolean }>`\n height: ${Spacing[5]};\n width: ${Spacing[5]};\n visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n svg {\n width: 14px;\n height: 14px;\n }\n`;\n\nconst StyledCard = styled(Card)`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n padding: 6px;\n margin: 0;\n`;\n\ninterface HoverCopyableFieldProps {\n copyValue: string | undefined;\n confirmationText?: string;\n children: ReactNode;\n}\n\nconst HoverCopyableField = ({\n copyValue,\n confirmationText = 'Copied',\n children,\n}: HoverCopyableFieldProps) => {\n const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n useToggle(false);\n\n const copyTextToClipboard = async () => {\n if (copyValue == null) {\n return;\n }\n const copyWasSuccessful = await copyToClipboard(copyValue);\n\n if (copyWasSuccessful) {\n showConfirmation();\n setTimeout(() => {\n hideCopyButton();\n hideConfirmation();\n }, 1200);\n }\n };\n\n const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n copyTextToClipboard();\n };\n\n return copyValue != null && copyValue.trim().length > 0 ? (\n <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n {children}\n <Popover open={confirmationActive}>\n <Popover.Anchor asChild>\n <CopyButton\n id='hover-copyable-field__copy-button'\n isActive={copyButtonActive || confirmationActive}\n onClick={copyField}\n >\n <CopyIcon width={16} height={16} />\n </CopyButton>\n </Popover.Anchor>\n <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n <StyledCard elevated>\n <Paragraph>{confirmationText}</Paragraph>\n </StyledCard>\n </Popover.Content>\n </Popover>\n </CopyableFieldContainer>\n ) : null;\n};\n\nexport default HoverCopyableField;\n","import HoverCopyableField from './HoverCopyableField';\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAWnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,YAAY;AACtC,MAAI,aAAa,KACf;AAIF,MAAI,MAF4B,gBAAgB,UAAU,EAEnC;AACrB,qBAAkB;AAClB,oBAAiB;AACf,oBAAgB;AAChB,sBAAkB;MACjB,KAAK;;;CAIZ,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,uBAAqB;;AAGvB,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB;;;;AC/GN,IAAA,6BAAe"}

package/dist/IconButton-DC4rh6ow.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"IconButton-DC4rh6ow.mjs","names":[],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n /* For backwards compatibility with current coloring scheme (targeting stroke property) */\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n /* Support icons with stroke */\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* To properly position loading spinner */\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return sizeStyles[size];\n }}\n ${({ width }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return widthStyles[width];\n }}\n\n /* Variant styling */\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' | 'sm'; width: 'full' | 'auto' | 'button' | 'icon' }>`\n position: relative;\n\n /* Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n */\n\n /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work */\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n | ((e: MouseEvent<HTMLButtonElement>) => void)\n | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /**\n * Visual style of the button.\n *\n * - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n *\n * @defaultValue 'primary'\n */\n variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\n /**\n * Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n */\n isPending?: boolean;\n /**\n * Icon rendered to the left of the button label.\n * Import from `@persona/icons`.\n */\n prefixIcon?: ReactNode;\n /**\n * Controls how the prefix icon inherits sizing.\n *\n * - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n *\n * @defaultValue 'basic'\n */\n prefixIconType?: 'basic' | 'inherit';\n\n /**\n * Icon rendered to the right of the button label.\n * Import from `@persona/icons`.\n */\n suffixIcon?: ReactNode;\n\n /**\n * Height and typography scale of the button.\n *\n * @defaultValue 'md'\n */\n size?: 'md' | 'sm';\n\n /**\n * Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n */\n to?: LinkProps['to'];\n\n /**\n * Overrides the target of the link if `to` is provided and is an external link.\n */\n target?: LinkProps['target'];\n\n /**\n * Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Controls the width of the button.\n *\n * - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n *\n * @defaultValue 'full'\n */\n width?: 'full' | 'auto' | 'button' | 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /**\n * In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n */\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending || isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled || loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] || ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'\n> {\n /**\n * `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n */\n size?: IconBtnSize;\n}\n\n/**\n * Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/ListBox-BwD-q7wF.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ListBox-BwD-q7wF.mjs","names":["ListBox","Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section","ListBox","BaseListBox"],"sources":["../components/ListBox/ListBox.tsx","../components/ListBox/LogicRow.tsx","../components/ListBox/index.ts"],"sourcesContent":["import uniqueId from 'lodash/fp/uniqueId';\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DropIndicator,\n type DroppableCollectionReorderEvent,\n GridList,\n GridListItem,\n Header,\n ListBoxSection as Section,\n useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps, IconButton } from 'design-system/components/Button';\nimport { FormGroupContext } from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { Container as FormControlContainer } from 'design-system/components/FormControl';\nimport { ListItem, MenuHeading, type MenuItemProps } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover/Popover';\nimport Stack from 'design-system/components/Stack';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from 'design-system/lib/reorderItems';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n size: 'sm' | 'md';\n listBoxId: string;\n setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue | null>(null);\n\n/**\n * Hook to access ListBox context values (like size) from child components\n */\nexport const useListBoxContext = () => {\n return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n ComponentPropsWithoutRef<typeof GridList<T>>,\n 'slot' | 'autoFocus' | 'orientation' | 'shouldFocusWrap' | 'dragAndDropHooks' | 'layout'\n> {\n /**\n * Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n */\n onAdd?: ButtonProps['onClick'];\n\n /**\n * Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n */\n onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n /**\n * Whether or not delete button should be disabled.\n */\n deleteDisabled?: boolean;\n\n /**\n * Whether or not the Add/Delete buttons should be shown.\n */\n editable?: boolean;\n\n /**\n * Text to display if no options are available.\n */\n emptyText?: string;\n\n /**\n * Whether or not to expand the box to the full width of the container.\n */\n fullWidth?: boolean;\n\n /**\n * When provided, enables drag and drop functionality.\n */\n reorderConfig?: {\n /**\n * Called when items are reordered via drag and drop. Receives the reordered\n * array of items when an item is dropped.\n */\n onReorder: (reorderedItems: T[]) => void;\n /**\n * The name of the property on the item that was passed as the key to\n * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n * should be `'id'`.\n */\n itemKeyPath: string;\n };\n\n /**\n * Size of the list box.\n */\n size?: 'sm' | 'md';\n\n /**\n * Caps the list height and scrolls vertically inside the bordered container.\n */\n maxHeight?: number | string;\n}\n\nconst StyledListBox = styled(GridList)<{\n fullWidth?: boolean;\n $size?: 'sm' | 'md';\n $maxHeight?: number | string;\n}>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n box-sizing: border-box;\n background: ${Color.BackgroundPrimary};\n border-radius: ${BorderRadius.Md};\n border: 1px solid ${Color.BorderDivider};\n padding: ${Spacing[1]};\n\n ${({ $maxHeight }) =>\n $maxHeight != null &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n overflow-y: auto;\n `}\n\n ${({ fullWidth }) =>\n !fullWidth &&\n css`\n width: 204px;\n `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n height: 2px;\n background: ${({ theme }) => theme.color.text.brand};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' | 'md' }>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n background-color: transparent;\n outline: none;\n border: none;\n padding: ${Spacing[1]};\n color: ${Color.TextSecondary};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const ListBox = <T extends object>({\n children,\n onAdd,\n onDelete,\n emptyText,\n deleteDisabled,\n selectedKeys,\n onSelectionChange,\n editable = true,\n size = 'md',\n reorderConfig,\n items,\n maxHeight,\n ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n const listBoxRef = useRef<HTMLDivElement>(null);\n const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n const rowDropdownId = `${listBoxId}-row-dropdown`;\n const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n const { dragAndDropHooks } = useDragAndDrop({\n getItems: (keys) =>\n Array.from(keys).map((key) => ({\n 'text/plain': String(key),\n })),\n getAllowedDropOperations: () => ['move'],\n onReorder: (e: DroppableCollectionReorderEvent) => {\n if (!reorderConfig || !items) {\n return;\n }\n const { onReorder, itemKeyPath } = reorderConfig;\n if (!onReorder || !itemKeyPath) {\n return;\n }\n\n const draggedKey = Array.from(e.keys)[0];\n if (draggedKey == null) {\n return;\n }\n\n const itemsArr = Array.from(items);\n const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n if (fromIndex === -1 || targetIndex === -1) {\n return;\n }\n\n // After removing the dragged item, a target that sat after it shifts down by one.\n const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n const toIndex =\n e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n },\n renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n });\n\n // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n const rowDropdownIsOpen = document.querySelector(\n `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n );\n if (!rowDropdownIsOpen) {\n return;\n }\n\n const target = event.target as HTMLElement;\n const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n // Only deselect if:\n // 1. Click is outside the ListBox\n // 2. Click is not on popover content\n // 3. There are selected items\n // 4. onSelectionChange is available (to allow deselection)\n if (\n isOutsideListBox &&\n !isOnRowDropdownContent &&\n selectedKeys != null &&\n selectedKeys !== 'all' &&\n Array.from(selectedKeys).length > 0 &&\n onSelectionChange\n ) {\n // Deselect all items when clicking outside (but not on popover content)\n onSelectionChange(new Set());\n }\n },\n [selectedKeys, onSelectionChange, rowDropdownId],\n );\n\n // Set up outside click listener\n useEffect(() => {\n document.addEventListener('mousedown', handleOutsideClick);\n return () => {\n document.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [handleOutsideClick]);\n\n return (\n <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n <Stack spacing={Spacing[1]}>\n <StyledListBox\n ref={listBoxRef}\n onSelectionChange={onSelectionChange}\n renderEmptyState={() =>\n onAdd ? (\n <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n {emptyText || 'Click to add an option'}\n </ListBoxEmptyStateButton>\n ) : (\n <ListBoxEmptyState type='button' $size={size}>\n {emptyText || 'No options.'}\n </ListBoxEmptyState>\n )\n }\n selectedKeys={selectedKeys}\n $size={size}\n $maxHeight={maxHeight}\n items={items}\n // Without this, clicking delete triggers item selection (on press down)\n // before the delete/action callback fires (on click/press up)\n {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n {...(reorderConfig && { dragAndDropHooks })}\n {...props}\n >\n {children}\n </StyledListBox>\n {editable && (onAdd || onDelete) && (\n <Stack direction='horizontal' spacing={Spacing[1]}>\n {onAdd && (\n <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n Add\n </Button>\n )}\n {onDelete && (\n <Button\n size='sm'\n variant='basic'\n width='auto'\n onClick={() => onDelete?.(selectedKeys)}\n disabled={deleteDisabled || selectedKeys == null}\n >\n Delete\n </Button>\n )}\n </Stack>\n )}\n </Stack>\n </ListBoxContext.Provider>\n );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n padding-right: ${Spacing[2]};\n display: flex;\n align-items: center;\n justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n $hasActions?: boolean;\n $hasDelete?: boolean;\n}>`\n position: relative;\n padding: ${Spacing[1]} ${Spacing[2]};\n overflow: hidden;\n white-space: nowrap;\n\n ${RowActionsContainer} {\n background: linear-gradient(\n to right,\n transparent,\n ${Color.BackgroundPrimary} ${BackgroundFadeWidth}px\n );\n }\n\n // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n ${({ $hasActions, $hasDelete }) =>\n (($hasActions && $hasDelete) || (!$hasActions && $hasDelete)) &&\n css`\n ${RowActionsContainer} {\n opacity: 0;\n }\n `}\n\n // increase the width of the row actions container when both actions and delete are present\n ${({ $hasActions, $hasDelete }) =>\n $hasActions &&\n $hasDelete &&\n css`\n ${RowActionsContainer} {\n width: ${\n BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth * 2 + parseInt(Spacing[2])\n }px;\n }\n `}\n\n &${isNotDisabled}${isHovered}:not([data-selected], [data-dragging]),\n &${isNotDisabled}${isFocused}:not([data-selected], [data-dragging]),\n &[data-hovered]:not([data-selected], [data-dragging]) {\n cursor: pointer;\n color: ${({ theme }) => theme.color.text.primary};\n background-color: ${Color.BackgroundSecondary};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${Color.BackgroundSecondary} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &${isNotDisabled}${isHovered}[data-selected] {\n outline: none;\n color: ${({ theme }) => theme.color.text.brand};\n background-color: ${({ theme }) => theme.color.background.highlight};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => theme.color.background.highlight} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-dragging] {\n opacity: 0.5;\n background-color: ${Color.BackgroundPrimary};\n }\n\n .react-aria-Section:not(:first-child) {\n margin-top: ${Spacing[1]};\n }\n`;\n\nconst ContentContainer = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n display: flex;\n align-items: center;\n`;\n\nconst TextContent = styled.span`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' | 'md' }>`\n ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n border-bottom: 1px solid ${Color.BorderHairline};\n padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n min-width: var(--radix-popover-trigger-width);\n padding: ${Spacing[3]};\n\n ${FormControlContainer} {\n min-width: 0;\n }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n border-top: 1px solid ${Color.BorderHairline};\n padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n /**\n * Actions to display in a dropdown menu.\n * Supports all props from `MenuItem`.\n */\n actions?: Array<\n {\n label: string;\n onClick: () => void;\n } & Omit<MenuItemProps, 'children'>\n >;\n\n /**\n * Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n * Receives the item's id and the click event as parameters.\n */\n onDelete?: (id: string | number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /**\n * Size of the list box item.\n */\n size?: 'sm' | 'md';\n\n /**\n * Form fields to be rendered inside a row dropdown popover.\n * The configField prop will be set to true for all fields via FormGroupContext.\n * Dropdown will be opened when the item is selected.\n */\n dropdownFormFields?: ReactNode;\n\n /**\n * Content to be rendered inside the row dropdown popover.\n * Dropdown will be opened when the item is selected.\n */\n dropdownContent?: ReactNode;\n\n /**\n * Optional heading text to display in the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n */\n dropdownHeadingText?: string;\n\n /**\n * Footer to be rendered inside the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n */\n dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n children,\n actions,\n onDelete,\n size,\n dropdownHeadingText,\n dropdownFormFields,\n dropdownContent,\n dropdownFooter,\n ...props\n}: ListBoxItemProps) => {\n const context = useListBoxContext();\n // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n const effectiveSize = size ?? context?.size ?? 'md';\n\n // Update context if this item has actions or onDelete\n useEffect(() => {\n if (context && (actions || onDelete)) {\n context.setItemHasActionsOrDelete(true);\n }\n }, [context, actions, onDelete]);\n\n // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n const shouldRenderDropdown = dropdownFormFields || dropdownContent;\n\n const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n // avoid triggering row selection\n e.preventDefault();\n e.stopPropagation();\n\n if (onDelete && props.id != null) {\n onDelete(props.id, e);\n }\n };\n\n return (\n <StyledItem\n as={GridListItem}\n $hasActions={actions && actions.length > 0}\n $hasDelete={!!onDelete}\n textValue={typeof children === 'string' ? children : undefined}\n size={effectiveSize}\n {...props}\n >\n {({ isSelected, allowsDragging }) => {\n const contentWithDragHandle = (\n <ContentContainer>\n {allowsDragging && (\n <DragHandle slot='drag' aria-label='Drag to reorder'>\n <DragIcon />\n </DragHandle>\n )}\n {typeof children === 'string' || typeof children === 'number' ? (\n <TextContent>{children}</TextContent>\n ) : (\n children\n )}\n {(onDelete || actions) && (\n <RowActionsContainer>\n {actions && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions'>\n <MoreIcon />\n </IconButton>\n }\n align='start'\n portal\n >\n {actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={action.onClick}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onDelete && (\n <IconButton aria-label='Delete' onClick={handleDelete}>\n <XIcon />\n </IconButton>\n )}\n </RowActionsContainer>\n )}\n </ContentContainer>\n );\n\n return shouldRenderDropdown ? (\n <Popover trigger={contentWithDragHandle} open={isSelected}>\n <Popover.Card\n id={`${context?.listBoxId}-row-dropdown`}\n noPadding\n style={{ zIndex: Z_INDICES.modalDropdown }}\n >\n {dropdownHeadingText && (\n <DropdownPopoverHeading $size={effectiveSize}>\n {dropdownHeadingText}\n </DropdownPopoverHeading>\n )}\n {dropdownFormFields && (\n <DropdownPopoverContent spacing={Spacing[2]}>\n <FormGroupContext.Provider\n value={{\n configField: true,\n labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n }}\n >\n {dropdownFormFields}\n </FormGroupContext.Provider>\n </DropdownPopoverContent>\n )}\n {dropdownContent && (\n <DropdownPopoverContent spacing={Spacing[3]}>\n {dropdownContent}\n </DropdownPopoverContent>\n )}\n {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n </Popover.Card>\n </Popover>\n ) : (\n contentWithDragHandle\n );\n }}\n </StyledItem>\n );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport Sticker, {\n StickerContainer,\n StickerContentContainer,\n StyledTruncatedText,\n} from 'design-system/components/Sticker';\nimport { isFocused, isHovered } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nimport ListBox, { type ListBoxItemProps } from './ListBox';\n\nconst LogicRowSticker = styled(Sticker)`\n display: inline;\n height: initial;\n\n ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {\n display: inline;\n }\n`;\n\nconst LogicListBoxItem = styled(ListBox.Item)`\n padding: 0;\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &[data-selected]${isHovered}, &[data-selected]:hover,\n &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {\n color: ${Color.TextPrimary};\n\n ${LogicRowSticker} {\n background-color: ${Color.BackgroundLabelPurple};\n }\n }\n\n &:hover:not([data-selected]) {\n ${LogicRowSticker} {\n background-color: ${Color.BackgroundLabelGreyHover};\n }\n }\n`;\n\nconst LogicRuleContainer = styled.div<{ $hideCondition?: boolean; $size?: InputSizes }>`\n display: grid;\n grid-template-columns: ${({ $hideCondition }) =>\n $hideCondition ? 'repeat(3, min-content)' : '32px repeat(3, min-content)'};\n grid-gap: 6px;\n align-items: baseline;\n padding: ${Spacing[1]};\n width: 100%;\n ${({ $size }) => ($size === 'md' ? Typography.TextMedium : Typography.TextSmall)}\n`;\n\nexport interface LogicRowProps extends ListBoxItemProps {\n condition: string;\n attributeName?: string;\n operator?: string;\n matchLevelName?: string;\n editable?: boolean;\n id: string | number;\n dropdownHeadingText?: string;\n /** Form fields rendered inside the row dropdown. */\n dropdownFormFields?: ReactNode;\n size?: InputSizes;\n /**\n * Removes the condition column when the surrounding group already communicates\n * the conjunction.\n */\n hideCondition?: boolean;\n}\n\nconst LogicRow = ({\n condition,\n attributeName,\n operator,\n matchLevelName,\n editable = true,\n id,\n onDelete,\n dropdownHeadingText,\n dropdownFormFields,\n size,\n hideCondition = false,\n ...listBoxItemProps\n}: LogicRowProps) => {\n return (\n <LogicListBoxItem\n id={id}\n disabled={!editable}\n onDelete={onDelete}\n dropdownHeadingText={dropdownHeadingText}\n dropdownFormFields={dropdownFormFields}\n {...listBoxItemProps}\n size={size}\n >\n <LogicRuleContainer $hideCondition={hideCondition} $size={size}>\n {!hideCondition && (condition || '\\u00A0')}\n {attributeName && (\n <>\n <LogicRowSticker disabled={!editable}>{attributeName}</LogicRowSticker>\n {operator}\n {matchLevelName && (\n <LogicRowSticker disabled={!editable}>{matchLevelName}</LogicRowSticker>\n )}\n </>\n )}\n </LogicRuleContainer>\n </LogicListBoxItem>\n );\n};\n\nexport default LogicRow;\n","import BaseListBox, { useListBoxContext } from './ListBox';\nimport LogicRow from './LogicRow';\n\nconst ListBox = Object.assign(BaseListBox, { LogicRow });\n\nexport { ListBox, useListBoxContext };\nexport type { ListBoxProps, ListBoxItemProps } from './ListBox';\nexport type { LogicRowProps } from './LogicRow';\n\nexport default ListBox;\n"],"mappings":"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"}

package/dist/Radio-CtPz3EzX.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Radio-CtPz3EzX.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/SectionHeading-DvP9NEgN.d.mts DELETED Viewed

@@ -1,71 +0,0 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-DnR0YTxO.mjs";
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
-//#region components/CardV2/SectionHeading.d.ts
-/**
- * Private component for rendering the heading of a section, both the primary card heading and
- * section headings.
- */
-declare const SectionHeading: FC<{
-  /**
-   * Whether this is the top-level section of the card which has different visual treatment.
-   */
-  isTopSection: boolean;
-  /**
-   * Whether this heading's section has content.
-   */
-  sectionHasContent: boolean;
-  /**
-   * Whether this heading's section has a footer.
-   */
-  hasFooter: boolean;
-  loading: boolean;
-  /**
-   * Title text to render in the heading.
-   */
-  title: string;
-  /**
-   * Optional sticker to render after the title.
-   */
-  sticker?: ReactElement;
-  /**
-   * Optional icon to render before the title text.
-   *
-   * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If
-   * using this icon slot for a section heading use it for all sections.
-   */
-  leftDecorativeIcon?: ReactElement;
-  /**
-   * Optional actions to render in the heading.
-   * Only accepts IconButton or Button components with specific prop restrictions.
-   */
-  actions?: (IconAction | TextAction | undefined)[];
-  /**
-   * Optional actions to render in the heading in a menu.
-   */
-  menuActions?: (MenuAction | undefined)[];
-  /**
-   * Optional custom content to render in the heading in the button row. Prefer setting `actions` or
-   * `menuActions` if possible.
-   */
-  headerActionsRowContent?: ReactNode;
-  /**
-   * Callback to toggle collapsed state of the section. Omit to disable collapsing.
-   */
-  toggle?: () => void;
-  /**
-   * Whether the section is currently expanded or collapsed.
-   */
-  isExpanded: boolean;
-  /**
-   * Optional props to pass to the heading element. Accepts an `as` key to override the
-   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for
-   * section headings so that the document heading hierarchy reflects the visual hierarchy.
-   */
-  headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  };
-}>;
-//#endregion
-export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-DvP9NEgN.d.mts.map