npm - @persona/design-system - Versions diffs - 0.1.9 → 0.2.0 - Mend

@persona/design-system 0.1.9 → 0.2.0

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

package/dist/{Toggle-Bie9zCem.mjs.map → Toggle-D1rEjYoN.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle-~~Bie9zCem~~.mjs","names":[],"sources":["../components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, type ReactNode, useCallback, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { Label } from 'design-system/components/Text';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype ToggleSize = 'md' \| 'sm';\n\ninterface SwitchSizes {\n width: number;\n height: number;\n}\n\nconst SWITCH_SIZES: Record<ToggleSize, SwitchSizes> = {\n md: { width: 32, height: 18 },\n sm: { width: 28, height: parseInt(Spacing[4], 10) }, // 16px height from tokens\n};\n\ninterface SliderSizes {\n diameter: number;\n offset: number;\n}\n\nconst SLIDER_SIZES: Record<ToggleSize, SliderSizes> = {\n md: { diameter: 14, offset: 2 },\n sm: { diameter: parseInt(Spacing[3], 10), offset: 2 }, // 12px diameter from tokens\n};\n\nconst Container = styled.div`\n display: inline-flex;\n align-items: center;\n position: relative;\n`;\n\ntype SwitchProps = Pick<ToggleProps, 'disabled'> & {\n checked: boolean;\n focused: boolean;\n size: ToggleSize;\n};\nconst Switch = styled.div<SwitchProps>`\n transition: box-shadow ${TransitionDuration.Fast};\n position: relative;\n display: inline-flex;\n height: ${({ size }) => SWITCH_SIZES[size].height}px;\n width: ${({ size }) => SWITCH_SIZES[size].width}px;\n border-radius: 1000px;\n cursor: pointer;\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n ${focusOutlineControlled}\n\n /* Background /\n &:before {\n position: absolute;\n content: '';\n height: ${({ size }) => SWITCH_SIZES[size].height}px;\n width: ${({ size }) => SWITCH_SIZES[size].width}px;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: ${({ checked, disabled }) =>\n disabled\n ? checked\n ? Color.BackgroundInputActiveDisabled\n : Color.BackgroundInputDisabled\n : checked\n ? Color.BackgroundInputActive\n : Color.BackgroundInputToggle};\n\n transition: ${TransitionDuration.Medium};\n border-radius: 1000px;\n }\n\n &${isHovered}${isNotDisabled}:before {\n background-color: ${({ checked }) =>\n checked ? Color.BackgroundInputActiveHover : Color.BackgroundInputToggleHover};\n }\n\n / Slider thumb /\n &:after {\n position: absolute;\n content: '';\n height: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n width: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n bottom: ${({ size }) => SLIDER_SIZES[size].offset}px;\n background-color: ${Color.BackgroundInputDefault};\n transition: ${TransitionDuration.Medium};\n border-radius: 1000px;\n\n right: ${({ size }) => SLIDER_SIZES[size].offset}px;\n\n ${({ checked, size }) =>\n !checked &&\n css`\n transform: translateX(-${getSlideDistance(size)}px);\n `}\n }\n`;\n\nconst ToggleLabel = styled(Label)<Pick<ToggleProps, 'disabled' \| 'size'>>`\n cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n color: ${Color.TextSecondary};\n\n padding: 0 ${Spacing[2]};\n white-space: nowrap;\n line-height: ${({ size = 'md' }) => `${SWITCH_SIZES[size].height}px`};\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n color: ${theme.color.text.disabled};\n `}\n`;\n\nfunction getSlideDistance(size: ToggleSize) {\n const switchSize = SWITCH_SIZES[size];\n const sliderSize = SLIDER_SIZES[size];\n return switchSize.width - sliderSize.diameter - sliderSize.offset 2;\n}\n\nconst HiddenInput = styled.input`\n height: 0;\n width: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n position: absolute;\n`;\n\nexport interface ToggleProps {\n className?: string;\n /** Disables interaction and renders the toggle in a muted style. /\n disabled?: boolean;\n /\n Tooltip / title shown on the root element when the toggle is off.\n * @defaultValue 'Off'\n /\n titleOff?: string;\n /\n Tooltip / title shown on the root element when the toggle is on.\n * @defaultValue 'On'\n /\n titleOn?: string;\n /\n Called with the new boolean value when the user clicks the toggle.\n * The component is fully controlled — you must update `value` in response.\n /\n onChange?: (value: boolean) => void;\n /\n Current on/off state. Falsy values (`false`, `null`, `undefined`, `''`)\n * are treated as off; `true` is treated as on.\n /\n value: boolean \| null \| undefined \| '';\n /* `id` forwarded to the visible switch element. /\n id?: string;\n /* Label node rendered to the left of the switch when the toggle is on. /\n labelOn?: ReactNode;\n /\n Label node rendered to the left of the switch when the toggle is off.\n * Falls back to `labelOn` when not provided.\n /\n labelOff?: ReactNode;\n 'data-test'?: string;\n /\n Accessible label for the hidden `<input role=\"switch\">`.\n * Required when no visible label is provided via `labelOn` / `labelOff`.\n /\n 'aria-label'?: string;\n /\n Size of the toggle switch.\n * @defaultValue 'md'\n /\n size?: ToggleSize;\n}\n\nexport const Toggle = forwardRef<HTMLDivElement, ToggleProps>(function Toggle(\n {\n className,\n disabled,\n titleOff = 'Off',\n titleOn = 'On',\n onChange = () => undefined,\n value,\n id,\n labelOn,\n labelOff,\n 'data-test': dataTest,\n 'aria-label': ariaLabel,\n size = 'md',\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const generatedId = useId();\n const label = value ? labelOn : labelOff \|\| labelOn;\n\n const [focused, { enable: setFocus, disable: clearFocus }] = useToggle();\n\n const handleChange = useCallback(() => {\n onChange(!value);\n inputRef.current?.focus();\n }, [onChange, value]);\n\n const inputRef = useRef<HTMLInputElement>();\n\n return (\n <Container\n className={className}\n data-test={dataTest}\n title={value ? titleOn : titleOff}\n ref={ref}\n >\n {label != null && (\n <ToggleLabel htmlFor={generatedId} disabled={field.disabled} size={size}>\n {label}\n </ToggleLabel>\n )}\n <Switch\n id={id}\n checked={!!value}\n disabled={field.disabled}\n focused={focused}\n onClick={field.disabled ? undefined : handleChange}\n size={size}\n />\n <HiddenInput\n id={generatedId}\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={inputRef}\n data-test-toggle-status={value ? 'on' : 'off'}\n disabled={field.disabled}\n type='checkbox'\n checked={!!value}\n readOnly={true}\n onChange={disabled ? undefined : handleChange}\n onFocus={setFocus}\n onBlur={clearFocus}\n aria-checked={!!value}\n role='switch'\n aria-readonly={field.disabled}\n {...(label\n ? { 'aria-labelledby': generatedId }\n : { 'aria-label': ariaLabel ?? (value ? 'Toggle on' : 'Toggle off') })}\n />\n </Container>\n );\n});\n\nexport default Toggle;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Toggle-D1rEjYoN.mjs","names":[],"sources":["../components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, type ReactNode, useCallback, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { Label } from 'design-system/components/Text';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype ToggleSize = 'md' \| 'sm';\n\ninterface SwitchSizes {\n width: number;\n height: number;\n}\n\nconst SWITCH_SIZES: Record<ToggleSize, SwitchSizes> = {\n md: { width: 32, height: 18 },\n sm: { width: 28, height: parseInt(Spacing[4], 10) }, // 16px height from tokens\n};\n\ninterface SliderSizes {\n diameter: number;\n offset: number;\n}\n\nconst SLIDER_SIZES: Record<ToggleSize, SliderSizes> = {\n md: { diameter: 14, offset: 2 },\n sm: { diameter: parseInt(Spacing[3], 10), offset: 2 }, // 12px diameter from tokens\n};\n\nconst Container = styled.div`\n display: inline-flex;\n align-items: center;\n position: relative;\n`;\n\ntype SwitchProps = Pick<ToggleProps, 'disabled'> & {\n checked: boolean;\n focused: boolean;\n size: ToggleSize;\n};\nconst Switch = styled.div<SwitchProps>`\n transition: box-shadow ${TransitionDuration.Fast};\n position: relative;\n display: inline-flex;\n height: ${({ size }) => SWITCH_SIZES[size].height}px;\n width: ${({ size }) => SWITCH_SIZES[size].width}px;\n border-radius: 1000px;\n cursor: pointer;\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n ${focusOutlineControlled}\n\n /* Background /\n &:before {\n position: absolute;\n content: '';\n height: ${({ size }) => SWITCH_SIZES[size].height}px;\n width: ${({ size }) => SWITCH_SIZES[size].width}px;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: ${({ checked, disabled }) =>\n disabled\n ? checked\n ? Color.BackgroundInputActiveDisabled\n : Color.BackgroundInputDisabled\n : checked\n ? Color.BackgroundInputActive\n : Color.BackgroundInputToggle};\n\n transition: ${TransitionDuration.Medium};\n border-radius: 1000px;\n }\n\n &${isHovered}${isNotDisabled}:before {\n background-color: ${({ checked }) =>\n checked ? Color.BackgroundInputActiveHover : Color.BackgroundInputToggleHover};\n }\n\n / Slider thumb /\n &:after {\n position: absolute;\n content: '';\n height: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n width: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n bottom: ${({ size }) => SLIDER_SIZES[size].offset}px;\n background-color: ${Color.BackgroundInputDefault};\n transition: ${TransitionDuration.Medium};\n border-radius: 1000px;\n\n right: ${({ size }) => SLIDER_SIZES[size].offset}px;\n\n ${({ checked, size }) =>\n !checked &&\n css`\n transform: translateX(-${getSlideDistance(size)}px);\n `}\n }\n`;\n\nconst ToggleLabel = styled(Label)<Pick<ToggleProps, 'disabled' \| 'size'>>`\n cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n color: ${Color.TextSecondary};\n\n padding: 0 ${Spacing[2]};\n white-space: nowrap;\n line-height: ${({ size = 'md' }) => `${SWITCH_SIZES[size].height}px`};\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n color: ${theme.color.text.disabled};\n `}\n`;\n\nfunction getSlideDistance(size: ToggleSize) {\n const switchSize = SWITCH_SIZES[size];\n const sliderSize = SLIDER_SIZES[size];\n return switchSize.width - sliderSize.diameter - sliderSize.offset 2;\n}\n\nconst HiddenInput = styled.input`\n height: 0;\n width: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n position: absolute;\n`;\n\nexport interface ToggleProps {\n className?: string;\n /** Disables interaction and renders the toggle in a muted style. /\n disabled?: boolean;\n /\n Tooltip / title shown on the root element when the toggle is off.\n * @defaultValue 'Off'\n /\n titleOff?: string;\n /\n Tooltip / title shown on the root element when the toggle is on.\n * @defaultValue 'On'\n /\n titleOn?: string;\n /\n Called with the new boolean value when the user clicks the toggle.\n * The component is fully controlled — you must update `value` in response.\n /\n onChange?: (value: boolean) => void;\n /\n Current on/off state. Falsy values (`false`, `null`, `undefined`, `''`)\n * are treated as off; `true` is treated as on.\n /\n value: boolean \| null \| undefined \| '';\n /* `id` forwarded to the visible switch element. /\n id?: string;\n /* Label node rendered to the left of the switch when the toggle is on. /\n labelOn?: ReactNode;\n /\n Label node rendered to the left of the switch when the toggle is off.\n * Falls back to `labelOn` when not provided.\n /\n labelOff?: ReactNode;\n 'data-test'?: string;\n /\n Accessible label for the hidden `<input role=\"switch\">`.\n * Required when no visible label is provided via `labelOn` / `labelOff`.\n /\n 'aria-label'?: string;\n /\n Size of the toggle switch.\n * @defaultValue 'md'\n /\n size?: ToggleSize;\n}\n\nexport const Toggle = forwardRef<HTMLDivElement, ToggleProps>(function Toggle(\n {\n className,\n disabled,\n titleOff = 'Off',\n titleOn = 'On',\n onChange = () => undefined,\n value,\n id,\n labelOn,\n labelOff,\n 'data-test': dataTest,\n 'aria-label': ariaLabel,\n size = 'md',\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const generatedId = useId();\n const label = value ? labelOn : labelOff \|\| labelOn;\n\n const [focused, { enable: setFocus, disable: clearFocus }] = useToggle();\n\n const handleChange = useCallback(() => {\n onChange(!value);\n inputRef.current?.focus();\n }, [onChange, value]);\n\n const inputRef = useRef<HTMLInputElement>();\n\n return (\n <Container\n className={className}\n data-test={dataTest}\n title={value ? titleOn : titleOff}\n ref={ref}\n >\n {label != null && (\n <ToggleLabel htmlFor={generatedId} disabled={field.disabled} size={size}>\n {label}\n </ToggleLabel>\n )}\n <Switch\n id={id}\n checked={!!value}\n disabled={field.disabled}\n focused={focused}\n onClick={field.disabled ? undefined : handleChange}\n size={size}\n />\n <HiddenInput\n id={generatedId}\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={inputRef}\n data-test-toggle-status={value ? 'on' : 'off'}\n disabled={field.disabled}\n type='checkbox'\n checked={!!value}\n readOnly={true}\n onChange={disabled ? undefined : handleChange}\n onFocus={setFocus}\n onBlur={clearFocus}\n aria-checked={!!value}\n role='switch'\n aria-readonly={field.disabled}\n {...(label\n ? { 'aria-labelledby': generatedId }\n : { 'aria-label': ariaLabel ?? (value ? 'Toggle on' : 'Toggle off') })}\n />\n </Container>\n );\n});\n\nexport default Toggle;\n"],"mappings":"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"}

package/dist/{Toggle-DzYLgxGk.d.mts → Toggle-oukvAn6V.d.mts} RENAMED Viewed

@@ -51,4 +51,4 @@ interface ToggleProps {
 declare const Toggle: _$react.ForwardRefExoticComponent<ToggleProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ToggleProps as n, Toggle as t };
-//# sourceMappingURL=Toggle-DzYLgxGk.d.mts.map
+//# sourceMappingURL=Toggle-oukvAn6V.d.mts.map

package/dist/Toggle.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as ToggleProps, t as Toggle } from "./Toggle-DzYLgxGk.mjs";
+import { n as ToggleProps, t as Toggle } from "./Toggle-oukvAn6V.mjs";
 export { Toggle, Toggle as default, ToggleProps };

package/dist/{Tooltip-BvDbmXak.mjs → Tooltip-B-DDlRMw.mjs} RENAMED Viewed

@@ -1,11 +1,11 @@
-import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
+import { t as Card_default } from "./Card-CLTkZLKr.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
+import "./variables/transitions.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { Children, cloneElement } from "react";
 import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, cloneElement } from "react";
 import { CircleHelpIcon } from "@persona/icons";
 import { CircleHelpIcon as CircleHelpIcon$1 } from "@persona/icons/12px";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -117,4 +117,4 @@ const TextUnderlineTooltip = ({ children, tooltip, ...props }) => {
 //#endregion
 export { Tooltip as a, FloatingTooltip as i, TextWithDashedUnderline as n, HelperTooltip as r, TextUnderlineTooltip as t };
-//# sourceMappingURL=Tooltip-BvDbmXak.mjs.map
+//# sourceMappingURL=Tooltip-B-DDlRMw.mjs.map

package/dist/{Tooltip-BvDbmXak.mjs.map → Tooltip-B-DDlRMw.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip-~~BvDbmXak~~.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../components/Tooltip/Tooltip.tsx","../components/Tooltip/HelperTooltip.tsx","../components/Tooltip/TextUnderlineTooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {\n Children,\n cloneElement,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport styled, { type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card, { type CardProps } from 'design-system/components/Card';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface FloatingTooltipProps extends CardProps {\n zIndex?: number;\n contentAlignment: 'start' \| 'center' \| 'end';\n maxWidth?: string;\n size?: 'sm' \| 'md';\n}\n\nexport const FloatingTooltip: StyledComponent<\n ComponentType<ComponentPropsWithoutRef<typeof Card>>,\n DefaultTheme,\n FloatingTooltipProps\n> = styled(Card)<FloatingTooltipProps>`\n ${({ size = 'md' }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: ${({ size = 'md' }) => (size === 'sm' ? '16px' : '20px')};\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n display: flex;\n align-items: ${({ contentAlignment }) => contentAlignment \|\| 'center'};\n justify-content: center;\n padding: 6px ${Spacing[2]};\n animation: ${fadeIn} ${TransitionDuration.Fast} ease-in-out;\n z-index: ${({ zIndex }) => zIndex};\n margin: 0;\n max-width: ${({ maxWidth }) => maxWidth \|\| '250px'};\n color: ${Color.TextPrimary};\n`;\n\nconst TooltipArrow = styled.div`\n width: 0;\n height: 0;\n border-color: ${({ theme }) => theme.color.background.primary};\n border-left: 8px solid transparent;\n border-top: 8px solid ${({ theme }) => theme.color.background.primary};\n border-right: 8px solid transparent;\n`;\n\nconst TooltipIcon = styled.div`\n display: inline-flex;\n`;\n\ninterface TooltipBaseProps\n extends\n Omit<TooltipPrimitive.TooltipProps, 'disableHoverableContent'>,\n TooltipPrimitive.TooltipContentProps {\n /*\n Optionally hide tooltip arrow.\n /\n hideArrow?: boolean;\n\n children?: ReactNode;\n\n /\n Disabling will prevent tooltip from rendering on the trigger\n /\n disabled?: boolean;\n\n /\n Render in a portal.\n * Disable to render adjacent to trigger for rendering within elements such as modals\n /\n portal?: boolean;\n\n /\n Props applied to Radix UI Portal component\n /\n portalProps?: TooltipPrimitive.TooltipPortalProps;\n\n /\n Determines if the tooltip closes when the mouse hovers into the tooltip content area\n /\n interactive?: boolean;\n\n /\n Override the zIndex in case the tooltip is used in situations where the content is\n * already elevated\n /\n zIndex?: number;\n\n /\n Max width of the contents in the tooltip\n /\n maxWidth?: string;\n\n /\n Props to apply to Tooltip.Trigger within\n /\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n\n /\n Size of the tooltip. Defaults to 'md'.\n /\n size?: 'sm' \| 'md';\n}\n\nexport interface TooltipStandardProps extends TooltipBaseProps {\n /\n Element that will trigger the tooltip. A `ref` will be set.\n /\n trigger: ReactElement;\n\n iconTrigger?: never;\n\n className?: never;\n\n contentAlignment?: 'start' \| 'center' \| 'end';\n}\n\nexport interface TooltipWithIconProps extends TooltipBaseProps {\n trigger?: never;\n\n /\n Icon that will trigger the tooltip. A wrapper div will be set.\n /\n iconTrigger: ReactElement;\n\n className?: string;\n\n contentAlignment?: 'start' \| 'center' \| 'end';\n}\n\ntype TooltipProps = TooltipStandardProps \| TooltipWithIconProps;\n\nexport const Tooltip = ({\n trigger: triggerProp,\n iconTrigger,\n side = 'bottom',\n hideArrow,\n defaultOpen,\n open,\n delayDuration = 300,\n onOpenChange,\n interactive = true,\n children,\n 'aria-label': ariaLabel,\n portal = true,\n disabled = false,\n className,\n maxWidth,\n zIndex = 10,\n triggerProps,\n portalProps,\n contentAlignment,\n size = 'md',\n ...contentProps\n}: TooltipProps) => {\n let trigger;\n\n if (iconTrigger) {\n trigger = (\n <TooltipIcon tabIndex={0} aria-label={ariaLabel} className={className}>\n {cloneElement(iconTrigger, { focusable: false, 'aria-hidden': true })}\n </TooltipIcon>\n );\n } else {\n trigger = triggerProp;\n }\n\n // quick way to check if children are renderable. null, false, and true will be filtered out when converting to an array\n const hasRenderableChildren = Children.toArray(children).length > 0;\n\n const content = (\n <TooltipPrimitive.Content side={side} sideOffset={8} asChild {...contentProps}>\n <FloatingTooltip\n zIndex={zIndex}\n contentAlignment={contentAlignment}\n maxWidth={maxWidth}\n size={size}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow asChild>\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n )}\n </FloatingTooltip>\n </TooltipPrimitive.Content>\n );\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n disableHoverableContent={!interactive}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitive.Trigger asChild aria-label={ariaLabel} {...triggerProps}>\n {trigger}\n </TooltipPrimitive.Trigger>\n\n {!disabled &&\n hasRenderableChildren &&\n (portal ? (\n <TooltipPrimitive.Portal {...portalProps}>{content}</TooltipPrimitive.Portal>\n ) : (\n content\n ))}\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n );\n};\n\nexport default Tooltip;\n","import type { ReactNode } from 'react';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\n\nimport Tooltip, { type TooltipWithIconProps } from './Tooltip';\n\nexport interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {\n children: ReactNode;\n size?: 'md' \| 'sm';\n}\n\n/\n Helper component for rendering help text via help icons.\n */\nconst HelperTooltip = ({ children, size = 'md', ...props }: HelperTooltipProps) => {\n return (\n <Tooltip\n size={size}\n iconTrigger={\n size === 'md' ? (\n <CircleHelpIcon color={Color.BorderIconSecondary} />\n ) : (\n <CircleHelpIconSmall color={Color.BorderIconSecondary} />\n )\n }\n {...props}\n >\n {children}\n </Tooltip>\n );\n};\n\nexport default HelperTooltip;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport Tooltip, { type TooltipStandardProps } from './Tooltip';\n\nexport const TextWithDashedUnderline = styled.span`\n text-decoration: underline;\n text-decoration-style: dashed;\n text-decoration-color: ${Color.CoreSlate700};\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n width: fit-content;\n`;\n\ninterface TextUnderlineTooltipProps extends Omit<TooltipStandardProps, 'trigger' \| 'iconTrigger'> {\n tooltip: ReactNode;\n}\n\nconst TextUnderlineTooltip = ({ children, tooltip, ...props }: TextUnderlineTooltipProps) => {\n return (\n <Tooltip trigger={<TextWithDashedUnderline>{children}</TextWithDashedUnderline>} {...props}>\n {tooltip}\n </Tooltip>\n );\n};\n\nexport default TextUnderlineTooltip;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,kBAIT,OAAOA,aAAK;KACX,EAAE,OAAO,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;kBACjE,EAAE,OAAO,WAAY,SAAS,OAAO,SAAS,OAAQ;;;;kBAItD,EAAE,uBAAuB,oBAAoB,SAAS;;iBAEvD,QAAQ,GAAG;eACb,OAAO,GAAA,QAA2B;cACnC,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;WAC1C,MAAM,YAAY;;AAG7B,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;2BAErC,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;AAIxE,MAAM,cAAc,OAAO,GAAG;;;AAsF9B,MAAa,WAAW,EACtB,SAAS,aACT,aACA,OAAO,UACP,WACA,aACA,MACA,gBAAgB,KAChB,cACA,cAAc,MACd,UACA,cAAc,WACd,SAAS,MACT,WAAW,OACX,WACA,UACA,SAAS,IACT,cACA,aACA,kBACA,OAAO,MACP,GAAG,mBACe;CAClB,IAAI;AAEJ,KAAI,YACF,WACE,oBAAC,aAAD;EAAa,UAAU;EAAG,cAAY;EAAsB;YACzD,aAAa,aAAa;GAAE,WAAW;GAAO,eAAe;GAAM,CAAC;EACzD,CAAA;KAGhB,WAAU;CAIZ,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC,SAAS;CAElE,MAAM,UACJ,oBAAC,iBAAiB,SAAlB;EAAgC;EAAM,YAAY;EAAG,SAAA;EAAQ,GAAI;YAC/D,qBAAC,iBAAD;GACU;GACU;GACR;GACJ;aAJR,CAMG,UACA,CAAC,aACA,oBAAC,iBAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,cAAD,EAAgB,CAAA;IACO,CAAA,CAEX;;EACO,CAAA;AAG7B,QACE,oBAAC,iBAAiB,UAAlB;EAA0C;YACxC,qBAAC,iBAAiB,MAAlB;GACQ;GACO;GACb,yBAAyB,CAAC;GACZ;aAJhB,CAME,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;IAAQ,cAAY;IAAW,GAAI;cAC1D;IACwB,CAAA,EAE1B,CAAC,YACA,0BACC,SACC,oBAAC,iBAAiB,QAAlB;IAAyB,GAAI;cAAc;IAAkC,CAAA,GAE7E,SAEkB;;EACE,CAAA;;;;;;;ACvMhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;AACjF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,MAAM,qBAAuB,CAAA,GAEpD,oBAACC,kBAAD,EAAqB,OAAO,MAAM,qBAAuB,CAAA;EAG7D,GAAI;EAEH;EACO,CAAA;;;;ACvBd,MAAa,0BAA0B,OAAO,IAAI;;;2BAGvB,MAAM,aAAa;;;;;AAU9C,MAAM,wBAAwB,EAAE,UAAU,SAAS,GAAG,YAAuC;AAC3F,QACE,oBAAC,SAAD;EAAS,SAAS,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;EAAE,GAAI;YAClF;EACO,CAAA"}
1	+ {"version":3,"file":"Tooltip-B-DDlRMw.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../components/Tooltip/Tooltip.tsx","../components/Tooltip/HelperTooltip.tsx","../components/Tooltip/TextUnderlineTooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {\n Children,\n cloneElement,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport styled, { type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card, { type CardProps } from 'design-system/components/Card';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface FloatingTooltipProps extends CardProps {\n zIndex?: number;\n contentAlignment: 'start' \| 'center' \| 'end';\n maxWidth?: string;\n size?: 'sm' \| 'md';\n}\n\nexport const FloatingTooltip: StyledComponent<\n ComponentType<ComponentPropsWithoutRef<typeof Card>>,\n DefaultTheme,\n FloatingTooltipProps\n> = styled(Card)<FloatingTooltipProps>`\n ${({ size = 'md' }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: ${({ size = 'md' }) => (size === 'sm' ? '16px' : '20px')};\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n display: flex;\n align-items: ${({ contentAlignment }) => contentAlignment \|\| 'center'};\n justify-content: center;\n padding: 6px ${Spacing[2]};\n animation: ${fadeIn} ${TransitionDuration.Fast} ease-in-out;\n z-index: ${({ zIndex }) => zIndex};\n margin: 0;\n max-width: ${({ maxWidth }) => maxWidth \|\| '250px'};\n color: ${Color.TextPrimary};\n`;\n\nconst TooltipArrow = styled.div`\n width: 0;\n height: 0;\n border-color: ${({ theme }) => theme.color.background.primary};\n border-left: 8px solid transparent;\n border-top: 8px solid ${({ theme }) => theme.color.background.primary};\n border-right: 8px solid transparent;\n`;\n\nconst TooltipIcon = styled.div`\n display: inline-flex;\n`;\n\ninterface TooltipBaseProps\n extends\n Omit<TooltipPrimitive.TooltipProps, 'disableHoverableContent'>,\n TooltipPrimitive.TooltipContentProps {\n /*\n Optionally hide tooltip arrow.\n /\n hideArrow?: boolean;\n\n children?: ReactNode;\n\n /\n Disabling will prevent tooltip from rendering on the trigger\n /\n disabled?: boolean;\n\n /\n Render in a portal.\n * Disable to render adjacent to trigger for rendering within elements such as modals\n /\n portal?: boolean;\n\n /\n Props applied to Radix UI Portal component\n /\n portalProps?: TooltipPrimitive.TooltipPortalProps;\n\n /\n Determines if the tooltip closes when the mouse hovers into the tooltip content area\n /\n interactive?: boolean;\n\n /\n Override the zIndex in case the tooltip is used in situations where the content is\n * already elevated\n /\n zIndex?: number;\n\n /\n Max width of the contents in the tooltip\n /\n maxWidth?: string;\n\n /\n Props to apply to Tooltip.Trigger within\n /\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n\n /\n Size of the tooltip. Defaults to 'md'.\n /\n size?: 'sm' \| 'md';\n}\n\nexport interface TooltipStandardProps extends TooltipBaseProps {\n /\n Element that will trigger the tooltip. A `ref` will be set.\n /\n trigger: ReactElement;\n\n iconTrigger?: never;\n\n className?: never;\n\n contentAlignment?: 'start' \| 'center' \| 'end';\n}\n\nexport interface TooltipWithIconProps extends TooltipBaseProps {\n trigger?: never;\n\n /\n Icon that will trigger the tooltip. A wrapper div will be set.\n /\n iconTrigger: ReactElement;\n\n className?: string;\n\n contentAlignment?: 'start' \| 'center' \| 'end';\n}\n\ntype TooltipProps = TooltipStandardProps \| TooltipWithIconProps;\n\nexport const Tooltip = ({\n trigger: triggerProp,\n iconTrigger,\n side = 'bottom',\n hideArrow,\n defaultOpen,\n open,\n delayDuration = 300,\n onOpenChange,\n interactive = true,\n children,\n 'aria-label': ariaLabel,\n portal = true,\n disabled = false,\n className,\n maxWidth,\n zIndex = 10,\n triggerProps,\n portalProps,\n contentAlignment,\n size = 'md',\n ...contentProps\n}: TooltipProps) => {\n let trigger;\n\n if (iconTrigger) {\n trigger = (\n <TooltipIcon tabIndex={0} aria-label={ariaLabel} className={className}>\n {cloneElement(iconTrigger, { focusable: false, 'aria-hidden': true })}\n </TooltipIcon>\n );\n } else {\n trigger = triggerProp;\n }\n\n // quick way to check if children are renderable. null, false, and true will be filtered out when converting to an array\n const hasRenderableChildren = Children.toArray(children).length > 0;\n\n const content = (\n <TooltipPrimitive.Content side={side} sideOffset={8} asChild {...contentProps}>\n <FloatingTooltip\n zIndex={zIndex}\n contentAlignment={contentAlignment}\n maxWidth={maxWidth}\n size={size}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow asChild>\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n )}\n </FloatingTooltip>\n </TooltipPrimitive.Content>\n );\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n disableHoverableContent={!interactive}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitive.Trigger asChild aria-label={ariaLabel} {...triggerProps}>\n {trigger}\n </TooltipPrimitive.Trigger>\n\n {!disabled &&\n hasRenderableChildren &&\n (portal ? (\n <TooltipPrimitive.Portal {...portalProps}>{content}</TooltipPrimitive.Portal>\n ) : (\n content\n ))}\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n );\n};\n\nexport default Tooltip;\n","import type { ReactNode } from 'react';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\n\nimport Tooltip, { type TooltipWithIconProps } from './Tooltip';\n\nexport interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {\n children: ReactNode;\n size?: 'md' \| 'sm';\n}\n\n/\n Helper component for rendering help text via help icons.\n */\nconst HelperTooltip = ({ children, size = 'md', ...props }: HelperTooltipProps) => {\n return (\n <Tooltip\n size={size}\n iconTrigger={\n size === 'md' ? (\n <CircleHelpIcon color={Color.BorderIconSecondary} />\n ) : (\n <CircleHelpIconSmall color={Color.BorderIconSecondary} />\n )\n }\n {...props}\n >\n {children}\n </Tooltip>\n );\n};\n\nexport default HelperTooltip;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport Tooltip, { type TooltipStandardProps } from './Tooltip';\n\nexport const TextWithDashedUnderline = styled.span`\n text-decoration: underline;\n text-decoration-style: dashed;\n text-decoration-color: ${Color.CoreSlate700};\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n width: fit-content;\n`;\n\ninterface TextUnderlineTooltipProps extends Omit<TooltipStandardProps, 'trigger' \| 'iconTrigger'> {\n tooltip: ReactNode;\n}\n\nconst TextUnderlineTooltip = ({ children, tooltip, ...props }: TextUnderlineTooltipProps) => {\n return (\n <Tooltip trigger={<TextWithDashedUnderline>{children}</TextWithDashedUnderline>} {...props}>\n {tooltip}\n </Tooltip>\n );\n};\n\nexport default TextUnderlineTooltip;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,kBAIT,OAAOA,aAAK;KACX,EAAE,OAAO,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;kBACjE,EAAE,OAAO,WAAY,SAAS,OAAO,SAAS,OAAQ;;;;kBAItD,EAAE,uBAAuB,oBAAoB,SAAS;;iBAEvD,QAAQ,GAAG;eACb,OAAO,GAAA,QAA2B;cACnC,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;WAC1C,MAAM,YAAY;;AAG7B,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;2BAErC,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;AAIxE,MAAM,cAAc,OAAO,GAAG;;;AAsF9B,MAAa,WAAW,EACtB,SAAS,aACT,aACA,OAAO,UACP,WACA,aACA,MACA,gBAAgB,KAChB,cACA,cAAc,MACd,UACA,cAAc,WACd,SAAS,MACT,WAAW,OACX,WACA,UACA,SAAS,IACT,cACA,aACA,kBACA,OAAO,MACP,GAAG,mBACe;CAClB,IAAI;AAEJ,KAAI,YACF,WACE,oBAAC,aAAD;EAAa,UAAU;EAAG,cAAY;EAAsB;YACzD,aAAa,aAAa;GAAE,WAAW;GAAO,eAAe;GAAM,CAAC;EACzD,CAAA;KAGhB,WAAU;CAIZ,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC,SAAS;CAElE,MAAM,UACJ,oBAAC,iBAAiB,SAAlB;EAAgC;EAAM,YAAY;EAAG,SAAA;EAAQ,GAAI;YAC/D,qBAAC,iBAAD;GACU;GACU;GACR;GACJ;aAJR,CAMG,UACA,CAAC,aACA,oBAAC,iBAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,cAAD,EAAgB,CAAA;IACO,CAAA,CAEX;;EACO,CAAA;AAG7B,QACE,oBAAC,iBAAiB,UAAlB;EAA0C;YACxC,qBAAC,iBAAiB,MAAlB;GACQ;GACO;GACb,yBAAyB,CAAC;GACZ;aAJhB,CAME,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;IAAQ,cAAY;IAAW,GAAI;cAC1D;IACwB,CAAA,EAE1B,CAAC,YACA,0BACC,SACC,oBAAC,iBAAiB,QAAlB;IAAyB,GAAI;cAAc;IAAkC,CAAA,GAE7E,SAEkB;;EACE,CAAA;;;;;;;ACvMhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;AACjF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,MAAM,qBAAuB,CAAA,GAEpD,oBAACC,kBAAD,EAAqB,OAAO,MAAM,qBAAuB,CAAA;EAG7D,GAAI;EAEH;EACO,CAAA;;;;ACvBd,MAAa,0BAA0B,OAAO,IAAI;;;2BAGvB,MAAM,aAAa;;;;;AAU9C,MAAM,wBAAwB,EAAE,UAAU,SAAS,GAAG,YAAuC;AAC3F,QACE,oBAAC,SAAD;EAAS,SAAS,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;EAAE,GAAI;YAClF;EACO,CAAA"}

package/dist/{Tooltip-CUC-JuRL.d.mts → Tooltip-DZVPqxai.d.mts} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { r as _default, t as CardProps } from "./Card-CqnG--CU.mjs";
+import { r as _default, t as CardProps } from "./Card-8DuhHQIk.mjs";
+import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
 import { DefaultTheme, StyledComponent } from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 //#region components/Tooltip/Tooltip.d.ts
@@ -97,4 +97,4 @@ declare const Tooltip: ({
 }: TooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TooltipWithIconProps as i, Tooltip as n, TooltipStandardProps as r, FloatingTooltip as t };
-//# sourceMappingURL=Tooltip-CUC-JuRL.d.mts.map
+//# sourceMappingURL=Tooltip-DZVPqxai.d.mts.map

package/dist/Tooltip.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-CUC-JuRL.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-DZVPqxai.mjs";
 export { FloatingTooltip, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/{TruncatedText-BJnowVTx.d.mts → TruncatedText-D2R7uy_y.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, FC } from "react";
+import * as _$styled_components0 from "styled-components";
 //#region lib/TruncatedText.d.ts
 declare const OverflowEllipsisSpan: _$styled_components0.StyledComponent<"span", any, {}, never>;
@@ -15,4 +15,4 @@ interface TruncatedTextProps extends ComponentPropsWithoutRef<'span'> {
 declare const TruncatedText: FC<TruncatedTextProps>;
 //#endregion
 export { TruncatedText as n, TruncatedTextProps as r, OverflowEllipsisSpan as t };
-//# sourceMappingURL=TruncatedText-BJnowVTx.d.mts.map
+//# sourceMappingURL=TruncatedText-D2R7uy_y.d.mts.map

package/dist/components/Attribute/index.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
-import { i as Paragraph } from "../../Text-RcEfNFLx.mjs";
-import { r as HelperTooltip } from "../../Tooltip-BvDbmXak.mjs";
-import { t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
-import { n as Sticker } from "../../Sticker-CyGb9dEu.mjs";
+import { i as Paragraph } from "../../Text-hEoPeOc9.mjs";
+import { r as HelperTooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
+import { n as Sticker } from "../../Sticker-BOlAy2TE.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import styled, { css } from "styled-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { EyeIcon, EyeOffIcon } from "@persona/icons";
 import { uniqueId } from "lodash/fp.js";
 import { useToggleButton } from "react-aria";
@@ -52,7 +52,7 @@ const Value = styled.dd`
 `;
 const AttributeValue = ({ placeholder, show, redacted, value, wordBreak, size, id, "aria-labelledby": ariaLabelledBy }) => {
 	const isEmpty = value == null || value === "";
-	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ jsx(Fragment, { children: !show ? repeat("•", typeof value === "string" ? value.length : 8) : value });
+	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ jsx(Fragment$1, { children: !show ? repeat("•", typeof value === "string" ? value.length : 8) : value });
 	return /* @__PURE__ */ jsx(Value, {
 		isPlaceholder: isEmpty,
 		wordBreak,

package/dist/components/Attribute/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat } from 'lodash';\nimport { uniqueId } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n createContext,\n type FC,\n type PropsWithChildren,\n type ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' \| 'break-word' \| 'normal';\nexport type TextTransform = 'capitalize' \| 'sentence';\nexport type TableLayoutValue = boolean \| 'full-width';\n\nexport type AttributeSize = 'sm' \| 'md';\n\nexport const AttributeContext = createContext<{\n table?: TableLayoutValue;\n horizontal?: boolean;\n size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n svg {\n transition-duration: 150ms;\n }\n\n :hover {\n svg {\n color: ${Color.CorePurple800};\n }\n }\n`;\n\ninterface AttributeValueProps {\n placeholder: ReactNode;\n show?: boolean;\n redacted?: boolean;\n value?: ReactNode;\n textTransform?: TextTransform;\n wordBreak?: WordBreak;\n size?: AttributeSize;\n 'aria-labelledby': string;\n id: string;\n}\n\ninterface ValueFormatterProps {\n isPlaceholder?: boolean;\n wordBreak?: WordBreak;\n size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n color: ${({ isPlaceholder }) => (isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000)};\n margin: 0;\n text-overflow: ellipsis;\n overflow-x: hidden;\n word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n ul,\n ol {\n list-style-position: inside;\n }\n\n a {\n color: ${({ theme }) => theme.color.text.brand};\n text-decoration: none;\n\n &:visited {\n color: ${({ theme }) => theme.color.text.brand};\n }\n }\n`;\n\nexport const AttributeValue = ({\n placeholder,\n show,\n redacted,\n value,\n wordBreak,\n size,\n id,\n 'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n const isEmpty = value == null \|\| value === '';\n\n const renderedVal = isEmpty ? (\n placeholder\n ) : (\n <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n );\n\n return (\n <Value\n isPlaceholder={isEmpty}\n wordBreak={wordBreak}\n size={size}\n title={typeof value === 'string' ? value : undefined}\n aria-labelledby={ariaLabelledBy}\n id={id}\n >\n {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n </Value>\n );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n /*\n Title of the attribute. Rendered as a <dt>.\n /\n label: ReactNode;\n\n /\n Value to display. Rendered as a <dd>.\n /\n value?: ReactNode;\n\n /\n Will display a \"Redacted\" sticker if there is a value.\n /\n redacted?: boolean;\n\n /\n Renders toggleable eye button to the right of the label\n /\n toggleable?: boolean;\n\n /\n Text to display in presence of null value.\n /\n placeholder?: string;\n\n /\n Word break styling for value.\n /\n wordBreak?: WordBreak;\n\n /\n Render a custom label component\n /\n labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n /\n Render a custom value component\n /\n valueComponent?: ComponentType<AttributeValueProps>;\n\n /\n Renders a HelperTooltip to display help text to the right of the label.\n /\n helpText?: ReactNode;\n\n /\n Custom adornments to display to the right of the label.\n /\n right?: ReactNode;\n\n /\n Renders attributes in a tabular layout.\n /\n table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n horizontal?: boolean;\n table?: TableLayoutValue;\n size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n ${({ table, size }) =>\n table &&\n css`\n display: table-row;\n\n > {\n display: table-cell;\n }\n\n & > ${AttributeLabel} {\n padding: ${Spacing[1]} 0;\n padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n }\n & > ${Value} {\n padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n }\n `}\n\n ${({ horizontal }) =>\n horizontal &&\n css`\n display: grid;\n gap: ${Spacing[4]};\n grid-template-columns: subgrid;\n grid-column: span 2;\n `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n size: props.size ?? 'md',\n color: 'tertiary',\n as: 'dt',\n}))`\n margin: 0;\n overflow-wrap: break-word;\n`;\n\nconst RightContainer = styled.span`\n display: inline-block;\n vertical-align: middle;\n margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n label,\n value,\n redacted,\n placeholder = '-',\n wordBreak,\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n labelComponent: LabelComponent = AttributeLabel,\n valueComponent: ValueComponent = AttributeValue,\n right,\n helpText,\n toggleable,\n table,\n ...elemProps\n}: AttributeProps) => {\n const attrCtx = useContext(AttributeContext);\n const size = attrCtx?.size ?? 'md';\n const toggleRef = useRef();\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const valueAsArray = [].concat(value).filter(Boolean);\n const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n const state = useToggleState({ defaultSelected: !toggleable });\n const { buttonProps } = useToggleButton(\n {\n 'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n elementType: 'button',\n },\n state,\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n toggleRef,\n );\n const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n const show = state.isSelected;\n\n useEffect(() => {\n state.setSelected(!toggleable);\n }, [toggleable]);\n\n return (\n <AttributeContainer\n table={table \|\| attrCtx?.table}\n horizontal={attrCtx?.horizontal}\n size={size}\n {...elemProps}\n >\n <LabelComponent id={labelId} aria-details={valueId} size={size}>\n {label}\n {helpText && (\n <RightContainer>\n <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n </RightContainer>\n )}\n {showToggleButton && (\n <RightContainer>\n {/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /}\n <IconButtonContainer {...buttonProps} ref={toggleRef}>\n {show ? <EyeIcon /> : <EyeOffIcon />}\n </IconButtonContainer>\n </RightContainer>\n )}\n {right && <RightContainer>{right}</RightContainer>}\n </LabelComponent>\n <ValueComponent\n id={valueId}\n value={value}\n placeholder={placeholder}\n wordBreak={wordBreak}\n redacted={redacted}\n show={show}\n size={size}\n aria-labelledby={labelId}\n />\n </AttributeContainer>\n );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n children?: ReactNode;\n /\n Sets the font size and spacing density for all child Attributes.\n * Defaults to `'md'`.\n /\n size?: AttributeSize;\n} & (\n \| {\n /\n Set a fixed number of columns for the grid.\n /\n colCount?: number;\n /\n Display attributes in a stacked list with label first then value.\n /\n horizontal?: boolean;\n\n table?: never;\n }\n \| {\n /\n Display attributes in a fixed tabular layout.\n * Set to `full-width` to expand to full width of container.\n /\n table?: TableLayoutValue;\n\n colCount?: never;\n horizontal?: never;\n }\n);\n\ntype AttributeGridComponentProps = {\n colCount?: number;\n horizontal?: boolean;\n table?: TableLayoutValue;\n size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n ${({ colCount, table, horizontal, size }) =>\n table\n ? css`\n display: table;\n ${\n table === 'full-width' &&\n css`\n width: 100%;\n table-layout: fixed;\n border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n `\n };\n `\n : css`\n display: grid;\n gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n / If the layout is horizontal we guarentee an even number of columns */\n grid-template-columns: ${\n colCount\n ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n };\n `}\n margin: 0;\n\n & + & {\n padding-bottom: ${Spacing[5]};\n }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n return (\n <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n <AttributeContext.Provider value={{ horizontal, table, size }}>\n {children}\n </AttributeContext.Provider>\n </AttributeGridComponent>\n );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat } from 'lodash';\nimport { uniqueId } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n createContext,\n type FC,\n type PropsWithChildren,\n type ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' \| 'break-word' \| 'normal';\nexport type TextTransform = 'capitalize' \| 'sentence';\nexport type TableLayoutValue = boolean \| 'full-width';\n\nexport type AttributeSize = 'sm' \| 'md';\n\nexport const AttributeContext = createContext<{\n table?: TableLayoutValue;\n horizontal?: boolean;\n size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n svg {\n transition-duration: 150ms;\n }\n\n :hover {\n svg {\n color: ${Color.CorePurple800};\n }\n }\n`;\n\ninterface AttributeValueProps {\n placeholder: ReactNode;\n show?: boolean;\n redacted?: boolean;\n value?: ReactNode;\n textTransform?: TextTransform;\n wordBreak?: WordBreak;\n size?: AttributeSize;\n 'aria-labelledby': string;\n id: string;\n}\n\ninterface ValueFormatterProps {\n isPlaceholder?: boolean;\n wordBreak?: WordBreak;\n size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n color: ${({ isPlaceholder }) => (isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000)};\n margin: 0;\n text-overflow: ellipsis;\n overflow-x: hidden;\n word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n ul,\n ol {\n list-style-position: inside;\n }\n\n a {\n color: ${({ theme }) => theme.color.text.brand};\n text-decoration: none;\n\n &:visited {\n color: ${({ theme }) => theme.color.text.brand};\n }\n }\n`;\n\nexport const AttributeValue = ({\n placeholder,\n show,\n redacted,\n value,\n wordBreak,\n size,\n id,\n 'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n const isEmpty = value == null \|\| value === '';\n\n const renderedVal = isEmpty ? (\n placeholder\n ) : (\n <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n );\n\n return (\n <Value\n isPlaceholder={isEmpty}\n wordBreak={wordBreak}\n size={size}\n title={typeof value === 'string' ? value : undefined}\n aria-labelledby={ariaLabelledBy}\n id={id}\n >\n {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n </Value>\n );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n /*\n Title of the attribute. Rendered as a <dt>.\n /\n label: ReactNode;\n\n /\n Value to display. Rendered as a <dd>.\n /\n value?: ReactNode;\n\n /\n Will display a \"Redacted\" sticker if there is a value.\n /\n redacted?: boolean;\n\n /\n Renders toggleable eye button to the right of the label\n /\n toggleable?: boolean;\n\n /\n Text to display in presence of null value.\n /\n placeholder?: string;\n\n /\n Word break styling for value.\n /\n wordBreak?: WordBreak;\n\n /\n Render a custom label component\n /\n labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n /\n Render a custom value component\n /\n valueComponent?: ComponentType<AttributeValueProps>;\n\n /\n Renders a HelperTooltip to display help text to the right of the label.\n /\n helpText?: ReactNode;\n\n /\n Custom adornments to display to the right of the label.\n /\n right?: ReactNode;\n\n /\n Renders attributes in a tabular layout.\n /\n table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n horizontal?: boolean;\n table?: TableLayoutValue;\n size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n ${({ table, size }) =>\n table &&\n css`\n display: table-row;\n\n > {\n display: table-cell;\n }\n\n & > ${AttributeLabel} {\n padding: ${Spacing[1]} 0;\n padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n }\n & > ${Value} {\n padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n }\n `}\n\n ${({ horizontal }) =>\n horizontal &&\n css`\n display: grid;\n gap: ${Spacing[4]};\n grid-template-columns: subgrid;\n grid-column: span 2;\n `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n size: props.size ?? 'md',\n color: 'tertiary',\n as: 'dt',\n}))`\n margin: 0;\n overflow-wrap: break-word;\n`;\n\nconst RightContainer = styled.span`\n display: inline-block;\n vertical-align: middle;\n margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n label,\n value,\n redacted,\n placeholder = '-',\n wordBreak,\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n labelComponent: LabelComponent = AttributeLabel,\n valueComponent: ValueComponent = AttributeValue,\n right,\n helpText,\n toggleable,\n table,\n ...elemProps\n}: AttributeProps) => {\n const attrCtx = useContext(AttributeContext);\n const size = attrCtx?.size ?? 'md';\n const toggleRef = useRef();\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const valueAsArray = [].concat(value).filter(Boolean);\n const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n const state = useToggleState({ defaultSelected: !toggleable });\n const { buttonProps } = useToggleButton(\n {\n 'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n elementType: 'button',\n },\n state,\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n toggleRef,\n );\n const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n const show = state.isSelected;\n\n useEffect(() => {\n state.setSelected(!toggleable);\n }, [toggleable]);\n\n return (\n <AttributeContainer\n table={table \|\| attrCtx?.table}\n horizontal={attrCtx?.horizontal}\n size={size}\n {...elemProps}\n >\n <LabelComponent id={labelId} aria-details={valueId} size={size}>\n {label}\n {helpText && (\n <RightContainer>\n <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n </RightContainer>\n )}\n {showToggleButton && (\n <RightContainer>\n {/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /}\n <IconButtonContainer {...buttonProps} ref={toggleRef}>\n {show ? <EyeIcon /> : <EyeOffIcon />}\n </IconButtonContainer>\n </RightContainer>\n )}\n {right && <RightContainer>{right}</RightContainer>}\n </LabelComponent>\n <ValueComponent\n id={valueId}\n value={value}\n placeholder={placeholder}\n wordBreak={wordBreak}\n redacted={redacted}\n show={show}\n size={size}\n aria-labelledby={labelId}\n />\n </AttributeContainer>\n );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n children?: ReactNode;\n /\n Sets the font size and spacing density for all child Attributes.\n * Defaults to `'md'`.\n /\n size?: AttributeSize;\n} & (\n \| {\n /\n Set a fixed number of columns for the grid.\n /\n colCount?: number;\n /\n Display attributes in a stacked list with label first then value.\n /\n horizontal?: boolean;\n\n table?: never;\n }\n \| {\n /\n Display attributes in a fixed tabular layout.\n * Set to `full-width` to expand to full width of container.\n /\n table?: TableLayoutValue;\n\n colCount?: never;\n horizontal?: never;\n }\n);\n\ntype AttributeGridComponentProps = {\n colCount?: number;\n horizontal?: boolean;\n table?: TableLayoutValue;\n size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n ${({ colCount, table, horizontal, size }) =>\n table\n ? css`\n display: table;\n ${\n table === 'full-width' &&\n css`\n width: 100%;\n table-layout: fixed;\n border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n `\n };\n `\n : css`\n display: grid;\n gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n / If the layout is horizontal we guarentee an even number of columns */\n grid-template-columns: ${\n colCount\n ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n };\n `}\n margin: 0;\n\n & + & {\n padding-bottom: ${Spacing[5]};\n }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n return (\n <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n <AttributeContext.Provider value={{ horizontal, table, size }}>\n {children}\n </AttributeContext.Provider>\n </AttributeGridComponent>\n );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}

package/dist/components/Badge/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Badge } from "../../Badge-DEVbRlJX.mjs";
+import { t as Badge } from "../../Badge-Bd_k492g.mjs";
 export { Badge, Badge as default };

package/dist/components/Banner/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { n as Button } from "../../IconButton-P8w0JDI5.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { n as Button } from "../../IconButton-Bi4kdsbV.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Breadcrumbs/index.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-DJ5qqqRD.mjs";
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-0e_3v9FF.mjs";
 export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Breadcrumbs/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Breadcrumbs } from "../../Breadcrumbs-W8hIhdHD.mjs";
+import { t as Breadcrumbs } from "../../Breadcrumbs-C9udlH48.mjs";
 export { Breadcrumbs, Breadcrumbs as default };

package/dist/components/Button/index.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-Vd5O4DUp.mjs";
-import { t as IconButton } from "../../IconButton-BHCmHIx5.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-KCl4uRtU.mjs";
+import { t as IconButton } from "../../IconButton-BycIGS3p.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
 export { Button, Button as default, ButtonChildren, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
-import { t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
+import { t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
 import { n as useFormField } from "../../useFormField-DhYd6bNn.mjs";
 import { BorderRadius } from "@persona/design-tokens";
+import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region components/ButtonGroup/ButtonGroup.tsx
 const OptionItem = styled(IconButton)`

package/dist/components/Card/index.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-CDTYK1XJ.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CqnG--CU.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-BxTdWg0Q.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-8DuhHQIk.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-BMCB9eFC.mjs";
+import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-CLTkZLKr.mjs";
 export { ActionsContainer, Header, HeaderContainer, Root, Title, TitleContainer, Card_default as default };

package/dist/components/CardV2/index.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-CVtzREhU.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-B25g4O9p.mjs";
 import _default from "../../Card2.mjs";
 export { _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };

package/dist/components/CardV2/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Card_default } from "../../CardV2-C0fcOUdp.mjs";
+import { t as Card_default } from "../../CardV2-_GfXFd3d.mjs";
 export { Card_default as Card, Card_default as default };

package/dist/components/Checkbox/index.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-Bm8exUfH.mjs";
+import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-Bmm-r5ei.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "../../Checkbox-BcuiFvK7.mjs";
+import { t as Checkbox } from "../../Checkbox-D77Rg7La.mjs";
 export { Checkbox, Checkbox as default };

package/dist/components/Combobox/index.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-BsPf8BZh.mjs";
-import { n as ComboboxProps, t as Combobox } from "../../Combobox-BaD0f2Du.mjs";
+import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-B8evOZpf.mjs";
+import { n as ComboboxProps, t as Combobox } from "../../Combobox-DVI8PoKx.mjs";
 export { CaretButton, Combobox, Combobox as default, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, ComboboxProps, flattenOptions };

package/dist/components/Combobox/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-B6JyLog8.mjs";
+import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-BzqlrMK0.mjs";
 export { CaretButton, Combobox, Combobox as default, flattenOptions };

package/dist/components/ConfigFormGroup/index.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
 import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-DWVW7A9f.mjs";
-import { t as ConfigFormGroup } from "../../ConfigFormGroup-yhb2jldT.mjs";
+import { t as ConfigFormGroup } from "../../ConfigFormGroup-D1Qma23p.mjs";
 export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };

package/dist/components/DataTable/TableControls/index.d.mts CHANGED Viewed

@@ -1,16 +1,16 @@
-import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-tOCQnbAl.mjs";
-import { n as DataTableCompactBar } from "../../../CompactBar-CXqlVKy7.mjs";
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-BYPh4dIP.mjs";
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-D_SBFZN1.mjs";
-import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "../../../types-D58IoRx6.mjs";
-import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-rqSkjchY.mjs";
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-CE-bqdAl.mjs";
-import { t as FilterBar } from "../../../FilterBar-D3LiIy1-.mjs";
-import { t as FilterBarProps } from "../../../index-4_B2yRzD.mjs";
-import { a as useFilterBarSize } from "../../../filter-size-context-Blw6Sd69.mjs";
-import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "../../../operators-Bo31xlc2.mjs";
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "../../../useFilterStateV2-DCQghouq.mjs";
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "../../../validation-vLh3t2dk.mjs";
-import { t as ValueControlProps } from "../../../types-D7ppqnNj.mjs";
-import { t as TableControls } from "../../../TableControls-BehR7CKS.mjs";
+import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-DYrjBDzu.mjs";
+import { n as DataTableCompactBar } from "../../../CompactBar-DfP7Wu1l.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-Ccxtk5dA.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-BeJ7GHPN.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "../../../types-mb3woqzE.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-COyIA4VU.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-CiGEHQAc.mjs";
+import { t as FilterBar } from "../../../FilterBar-CS2YjiTr.mjs";
+import { t as FilterBarProps } from "../../../index-BC4edEsD.mjs";
+import { a as useFilterBarSize } from "../../../filter-size-context-C1TvrE_O.mjs";
+import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "../../../operators-C_xPzItk.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "../../../useFilterStateV2-CGzRyv0i.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "../../../validation-BdP2vajF.mjs";
+import { t as ValueControlProps } from "../../../types-BKEwt0uq.mjs";
+import { t as TableControls } from "../../../TableControls-DscP6fyt.mjs";
 export { AndGroup, CompoundExpression, ControlBar, ControlBarProps, DataTableCompactBar, DateRangeFilterValue, EMPTY_FILTER_STATE, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, RawFieldInfo, ResolveValueControlOptions, TableControlsContext, TableControlsContextProps, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TopLevelFilterRule, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, buildFieldRegistry, TableControls as default, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/TableControls/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { S as DataTableCompactBar, _ as useTableControls, a as hasCompleteValue, b as TableControls, c as EMPTY_FILTER_STATE, d as getDefaultOperatorForType, f as getOperatorsForField, g as TableControlsProvider, h as TableControlsContext, i as useFilterStateV2, l as resolveValueControl, m as isValuelessOperator, n as buildFieldRegistry, o as isFilterStateV2, p as getOperatorsForType, r as FilterBar_default, s as pruneToRegistry, t as FieldRegistry, u as useFilterBarSize, v as TableViewConfiguration, x as ControlBar, y as TableViewConfigurationDropdown } from "../../../TableControls-DVTtNAPo.mjs";
+import { S as DataTableCompactBar, _ as useTableControls, a as hasCompleteValue, b as TableControls, c as EMPTY_FILTER_STATE, d as getDefaultOperatorForType, f as getOperatorsForField, g as TableControlsProvider, h as TableControlsContext, i as useFilterStateV2, l as resolveValueControl, m as isValuelessOperator, n as buildFieldRegistry, o as isFilterStateV2, p as getOperatorsForType, r as FilterBar_default, s as pruneToRegistry, t as FieldRegistry, u as useFilterBarSize, v as TableViewConfiguration, x as ControlBar, y as TableViewConfigurationDropdown } from "../../../TableControls-51NYgFvI.mjs";
 export { ControlBar, DataTableCompactBar, EMPTY_FILTER_STATE, FieldRegistry, FilterBar_default as FilterBar, TableControlsContext, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, buildFieldRegistry, TableControls as default, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/index.mjs CHANGED Viewed

@@ -1,27 +1,27 @@
-import { isFocused } from "../../lib/pseudoClass.mjs";
-import "../../variables/effect.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
 import "../../variables/transitions.mjs";
-import { t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-RcEfNFLx.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-BvDbmXak.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { isFocused } from "../../lib/pseudoClass.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-D25WBCah.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BfontAeY.mjs";
-import { n as Sticker } from "../../Sticker-CyGb9dEu.mjs";
-import { t as Checkbox } from "../../Checkbox-BcuiFvK7.mjs";
-import { t as Pagination_default } from "../../Pagination-BeYukNCj.mjs";
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-7TWP0Y1Z.mjs";
-import { t as Pii_default } from "../../Pii-QsTrz8wn.mjs";
-import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-DVTtNAPo.mjs";
+import "../../variables/effect.mjs";
+import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-B4f3LNoW.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BnYZVCLj.mjs";
+import { n as Sticker } from "../../Sticker-BOlAy2TE.mjs";
+import { t as Checkbox } from "../../Checkbox-D77Rg7La.mjs";
+import { t as Pagination_default } from "../../Pagination-DiaJX5Da.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-C8AdtVrT.mjs";
+import { t as Pii_default } from "../../Pii-CSBV5Is7.mjs";
+import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-51NYgFvI.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
+import { Link } from "react-router-dom";
 import { kebabCase } from "lodash";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
 import { DateTime } from "luxon";
@@ -233,14 +233,14 @@ const renderAsPii = (row, config) => {
 	if (!config || !row) return "";
 	const { isRedacted, piiValue, emptyText } = config;
 	const piiValueString = piiValue(row);
-	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Pii_default, {
+	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Pii_default, {
 		isRedacted: isRedacted(row),
 		children: piiValueString
 	}), config.subComponent?.(row)] });
 };
 const renderAsLightweightImage = (value, config) => {
-	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
+	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment$1, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
 		$width: config?.width,
 		$height: config?.height,
 		"aria-label": config?.alt ?? "image",
@@ -572,7 +572,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			}
 		}));
 		if (hasRowActions) {
-			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment, {});
+			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment$1, {});
 			tableColumns.push(columnHelper.display({
 				id: "action-col",
 				enableResizing: false,
@@ -1212,7 +1212,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 					$onAddRow: !!onAddRow,
 					stickyHeader,
 					containerScrollsHorizontally: scrollsHorizontally,
-					headerTR: /* @__PURE__ */ jsx(Fragment, { children: tableHeaderGroup.headers.map((header) => {
+					headerTR: /* @__PURE__ */ jsx(Fragment$1, { children: tableHeaderGroup.headers.map((header) => {
 						const pinningStyles = getCommonPinningStyles(header.column);
 						const isPinned = pinningStyles.position === "sticky";
 						const width = header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0;
@@ -1355,14 +1355,14 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 							else detailContent = rowData._details;
 							else if (detailComponent) detailContent = /* @__PURE__ */ jsx(detailComponent, { rowData });
 							if (detailContent) {
-								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StickyTD, {
+								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StickyTD, {
 									colSpan: 1,
 									left: pinnedColumnLeftOffset
 								}), /* @__PURE__ */ jsx(StickyDetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
 									children: detailContent
-								})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
+								})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									children: detailContent
 								})] });