@persona/design-system 0.3.1 → 0.5.0

package/dist/RightPanel.d.mts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/RightPanel/RightPanel.d.ts
+interface RightPanelProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Panel id */
+  id?: string;
+  /** Called when open state changes */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Panel title rendered in header */
+  title: string;
+  /** Optional description below title */
+  description?: string;
+  /** Panel content */
+  children: ReactNode;
+  /** Panel width in pixels */
+  width?: number;
+  /** Minimum width when resizable. Defaults to 450px. */
+  minWidth?: number;
+  /** When true, the panel is drag-resizable via its left edge. */
+  resizable?: boolean;
+  /** When true, render a shimmer placeholder in the body instead of children. */
+  loading?: boolean;
+}
+declare const RightPanel: ({
+  id,
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  width,
+  minWidth,
+  resizable,
+  loading
+}: RightPanelProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RightPanel, RightPanel as default, RightPanelProps };
+//# sourceMappingURL=RightPanel.d.mts.map

package/dist/RightPanelLoadingContent.d.mts

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/RightPanel/RightPanelLoadingContent.d.ts
+declare const RightPanelLoadingContent: () => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RightPanelLoadingContent as default };
+//# sourceMappingURL=RightPanelLoadingContent.d.mts.map

package/dist/RightPanelResizeHandle.d.mts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+//#region components/RightPanel/RightPanelResizeHandle.d.ts
+interface RightPanelResizeHandleProps {
+  onMove: (deltaX: number) => void;
+  onMoveTo?: (clientX: number) => void;
+  onMoveStart?: () => void;
+  onMoveEnd?: () => void;
+  onDoubleClick?: () => void;
+}
+declare const RightPanelResizeHandle: FC<RightPanelResizeHandleProps>;
+//#endregion
+export { RightPanelResizeHandleProps, RightPanelResizeHandle as default };
+//# sourceMappingURL=RightPanelResizeHandle.d.mts.map

package/dist/RuleEditorFields.d.mts

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-D1vghSC_.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D6niLExM.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -15,8 +15,8 @@ interface RuleEditorFieldsProps {
   operatorConfigurable: boolean;
   onFieldChange: (groupIndex: number, ruleIndex: number, nextFieldId: string) => void;
   onOperatorChange: (groupIndex: number, ruleIndex: number, nextOperator: FilterOperator) => void;
-  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue) => void;
-  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue, relativeDate?: FilterRule['relativeDate'] | null) => void;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: FilterRuleValueChange, relativeDate?: FilterRule['relativeDate']) => ReactNode;
 }
 declare function RuleEditorFields({
   registry,

package/dist/RulesPill.d.mts

@@ -1,4 +1,4 @@
-import { d as FilterSize, n as CompoundExpression } from "./types-D55MZSyx.mjs";
+import { f as FilterSize, n as CompoundExpression } from "./types-V8UJX-rk.mjs";
 import * as _$react from "react";
 import { HTMLAttributes } from "react";
 

package/dist/{SearchInput-CaKHRC_s.d.mts → SearchInput-Dc90GLTF.d.mts}

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

package/dist/SearchInput.d.mts

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

package/dist/SectionHeading.d.mts

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

package/dist/{SegmentedControl-e6xDtoHC.d.mts → SegmentedControl-DIHonamg.d.mts}

@@ -56,4 +56,4 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled'
 declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
-//# sourceMappingURL=SegmentedControl-e6xDtoHC.d.mts.map
+//# sourceMappingURL=SegmentedControl-DIHonamg.d.mts.map

package/dist/{SegmentedControl-JUgRw_M-.mjs → SegmentedControl-DwbltwDQ.mjs}

@@ -1,6 +1,6 @@
 import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as useFormField } from "./useFormField-Bz2iMPBO.mjs";
+import { n as useFormField } from "./useFormField-C-K1lgmv.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
 import { createContext, forwardRef, useContext } from "react";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
@@ -109,4 +109,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
 
-//# sourceMappingURL=SegmentedControl-JUgRw_M-.mjs.map
+//# sourceMappingURL=SegmentedControl-DwbltwDQ.mjs.map

package/dist/{SegmentedControl-JUgRw_M-.mjs.map → SegmentedControl-DwbltwDQ.mjs.map}

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

package/dist/SegmentedControl.d.mts

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

package/dist/{Select-DX3toj6M.mjs → Select-CBVvPyRJ.mjs}

@@ -1,14 +1,14 @@
 import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { isNotDisabled } from "./lib/pseudoClass.mjs";
+import inputMixin from "./mixins/input.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
-import { isNotDisabled } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import inputMixin from "./mixins/input.mjs";
 import { t as HStack } from "./Stack-Bre2oiov.mjs";
-import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
-import { n as useFormField } from "./useFormField-Bz2iMPBO.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-CHbUf9PQ.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-82xH1AZr.mjs";
+import { t as IconButton } from "./IconButton-BnSEV7eR.mjs";
+import { n as useFormField } from "./useFormField-C-K1lgmv.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DVI8l-4Q.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CyxizDxJ.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -29,7 +29,6 @@ const SelectButton = styled("button")`
   padding-right: ${Spacing[6]};
   width: ${({ $width }) => $width ?? "100%"};
   min-width: ${({ $minWidth }) => $minWidth != null ? `${$minWidth}px` : "auto"};
-  pointer-events: auto;
 
   &${isNotDisabled} {
     cursor: pointer;
@@ -242,4 +241,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
 
-//# sourceMappingURL=Select-DX3toj6M.mjs.map
+//# sourceMappingURL=Select-CBVvPyRJ.mjs.map

package/dist/Select-CBVvPyRJ.mjs.map

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

package/dist/{Select-CPYztD4m.d.mts → Select-DwqWnWBi.d.mts}

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

package/dist/Select.d.mts

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

package/dist/{Spinner-D3wXIoXN.mjs → Spinner-e725Rxkd.mjs}

@@ -1,6 +1,6 @@
 import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { rotate } from "./variables/keyframes.mjs";
 import "./variables/transitions.mjs";
+import { rotate } from "./variables/keyframes.mjs";
 import { Color } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
@@ -38,4 +38,4 @@ const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
 //#endregion
 export { Spinner as t };
 
-//# sourceMappingURL=Spinner-D3wXIoXN.mjs.map
+//# sourceMappingURL=Spinner-e725Rxkd.mjs.map

package/dist/{Spinner-D3wXIoXN.mjs.map → Spinner-e725Rxkd.mjs.map}

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

package/dist/{Stack-DHaK1-dw.d.mts → Stack-6eOrxjJi.d.mts}

@@ -1,6 +1,6 @@
 import { Spacing } from "@persona/design-tokens";
-import { ComponentPropsWithoutRef } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as CSS from "csstype";
 
@@ -44,4 +44,4 @@ type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
 declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
-//# sourceMappingURL=Stack-DHaK1-dw.d.mts.map
+//# sourceMappingURL=Stack-6eOrxjJi.d.mts.map

package/dist/Stack.d.mts

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-DHaK1-dw.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-6eOrxjJi.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/{Sticker-CQ6sOKUj.mjs → Sticker-By3F8Aip.mjs}

@@ -1,9 +1,9 @@
 import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
 import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { n as Stack } from "./Stack-Bre2oiov.mjs";
-import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { t as IconButton } from "./IconButton-BnSEV7eR.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons/12px";
@@ -210,4 +210,4 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 //#endregion
 export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
 
-//# sourceMappingURL=Sticker-CQ6sOKUj.mjs.map
+//# sourceMappingURL=Sticker-By3F8Aip.mjs.map

package/dist/{Sticker-CQ6sOKUj.mjs.map → Sticker-By3F8Aip.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Sticker-CQ6sOKUj.mjs","names":[],"sources":["../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n  white: 'White',\n  blue: 'Blue',\n  teal: 'Teal',\n  green: 'Green',\n  yellow: 'Yellow',\n  orange: 'Orange',\n  pink: 'Pink',\n  red: 'Red',\n  purple: 'Purple',\n  darkGrey: 'Dark Grey',\n  grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n  /**\n   * Icon to render to the left of the Sticker. 12px icons recommended.\n   */\n  icon?: ReactNode;\n\n  /**\n   * Callback to call upon clicking \"x\" button. Non-null will render the button.\n   */\n  onDismiss?: MouseEventHandler;\n\n  /**\n   * Additional props to pass to the dismiss \"x\" button.\n   */\n  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n  /**\n   * Renders disabled style for the entire Sticker and disables \"x\" button.\n   */\n  disabled?: boolean;\n\n  /**\n   * Shows a required asterisk (*) that won't be cut off when text is truncated.\n   */\n  isRequired?: boolean;\n\n  /**\n   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant'>>`\n  color: ${({ theme, variant }) => {\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return 'inherit';\n    }\n  }};\n  line-height: 0;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n\nconst RequiredAsterisk = styled.span`\n  color: ${Color.TextDanger};\n  /* Ensure asterisk never gets hidden and takes minimal space */\n  flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n  padding: 2px ${Spacing[1]};\n  /* Ensure container can shrink for text truncation */\n  min-width: 0;\n  flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n  ${paragraphMixins.sm}\n  padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n  ${paragraphMixins.sm}\n  flex: 1;\n  min-width: 0;\n  line-height: 1;\n  transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-sticker: ${Color.PrimaryWhite};\n\n  border: none;\n\n  padding: 0 ${Spacing[1]};\n  border-radius: ${BorderRadius.Sm};\n  width: 1rem;\n\n  height: 100%;\n\n  display: inline-flex;\n  align-items: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  color: ${({ theme, variant, disabled }) => {\n    if (variant === 'red' || variant === 'darkGrey') {\n      return theme.color.text.inverse;\n    }\n    return disabled ? 'inherit' : Color.BorderIconPrimary;\n  }};\n\n  &${isDisabled} {\n    background-color: inherit !important;\n    color: inherit !important;\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n  }\n\n  &${isHovered}${isNotDisabled} {\n    cursor: pointer;\n\n    background: ${({ variant }) => {\n      if (variant === 'grey' || variant === 'basic') {\n        return Color.BackgroundLabelGreyHover;\n      } else if (variant === 'darkGrey') {\n        return Color.BackgroundLabelDarkGreyHover;\n      } else if (variant === 'purple') {\n        return Color.BackgroundLabelPurpleHover;\n      } else if (variant === 'red' || variant === 'danger') {\n        return Color.BackgroundLabelDarkRedHover;\n      } else if (variant === 'orange') {\n        return Color.BackgroundLabelOrangeHover;\n      } else if (variant === 'yellow' || variant === 'caution') {\n        return Color.BackgroundLabelYellowHover;\n      } else if (variant === 'green' || variant === 'success') {\n        return Color.BackgroundLabelGreenHover;\n      } else if (variant === 'teal') {\n        return Color.BackgroundLabelTealHover;\n      } else if (variant === 'blue') {\n        return Color.BackgroundLabelBlueHover;\n      } else if (variant === 'pink') {\n        return Color.BackgroundLabelRedHover;\n      } else if (variant === 'white') {\n        return Color.BackgroundLabelWhiteHover;\n      } else {\n        return 'inherit';\n      }\n    }};\n  }\n`;\n\nconst StyledSticker = styled('div')<\n  StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n  display: inline-flex;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  max-width: 100%;\n\n  color: ${({ theme, variant, disabled }) => {\n    if (disabled) {\n      return variant === 'red' || variant === 'darkGrey'\n        ? theme.color.text.inverse\n        : theme.color.text.disabled;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return theme.color.text.primary;\n    }\n  }};\n  background: ${({ variant, disabled, $onSecondaryBackground }) => {\n    if (disabled) {\n      switch (variant) {\n        case 'white':\n          return Color.BackgroundLabelWhite;\n        case 'blue':\n          return Color.BackgroundLabelBlueDisabled;\n        case 'teal':\n          return Color.BackgroundLabelTealDisabled;\n        case 'green':\n        case 'success':\n          return Color.BackgroundLabelGreenDisabled;\n        case 'yellow':\n        case 'caution':\n          return Color.BackgroundLabelYellowDisabled;\n        case 'orange':\n          return Color.BackgroundLabelOrangeDisabled;\n        case 'pink':\n        case 'danger':\n          return Color.BackgroundLabelRedDisabled;\n        case 'red':\n          return Color.BackgroundLabelDarkRedDisabled;\n        case 'purple':\n        case 'primary':\n          return Color.BackgroundLabelPurpleDisabled;\n        case 'darkGrey':\n          return Color.BackgroundLabelDarkGreyDisabled;\n        case 'basic':\n        case 'grey':\n        default:\n          if ($onSecondaryBackground) {\n            // eslint-disable-next-line rulesdir/no-core-color-tokens\n            return Color.CoreSlate100;\n          }\n          return Color.BackgroundLabelGreyDisabled;\n      }\n    }\n    switch (variant) {\n      case 'white':\n        return Color.BackgroundLabelWhiteDisabled;\n      case 'blue':\n        return Color.BackgroundLabelBlue;\n      case 'teal':\n        return Color.BackgroundLabelTeal;\n      case 'green':\n      case 'success':\n        return Color.BackgroundLabelGreen;\n      case 'yellow':\n      case 'caution':\n        return Color.BackgroundLabelYellow;\n      case 'orange':\n        return Color.BackgroundLabelOrange;\n      case 'pink':\n      case 'danger':\n        return Color.BackgroundLabelRed;\n      case 'red':\n        return Color.BackgroundLabelDarkRed;\n      case 'purple':\n      case 'primary':\n        return Color.BackgroundLabelPurple;\n      case 'darkGrey':\n        return Color.BackgroundLabelDarkGrey;\n      case 'basic':\n      default:\n        if ($onSecondaryBackground) {\n          // eslint-disable-next-line rulesdir/no-core-color-tokens\n          return Color.CoreSlate200;\n        }\n        return Color.BackgroundLabelGrey;\n    }\n  }};\n`;\n\nexport const Sticker = ({\n  variant,\n  icon,\n  children,\n  onDismiss,\n  disabled,\n  dismissButtonProps,\n  isRequired,\n  onSecondaryBackground,\n  ...props\n}: StickerProps) => {\n  const hasContent = children != null;\n\n  if (!hasContent) {\n    const hasIcon = icon != null;\n    if (!hasIcon) {\n      console.warn('Sticker component requires content and/or an icon to render');\n      return null;\n    }\n\n    if (hasIcon && !props['aria-label']) {\n      console.warn('Sticker component requires an aria-label when only rendering an icon');\n    }\n  }\n\n  return (\n    <StyledSticker\n      $onSecondaryBackground={onSecondaryBackground}\n      variant={variant}\n      disabled={disabled}\n      sizeIcon={!!icon && !hasContent}\n      {...props}\n    >\n      <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n        <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n          {icon && <StickerIcon variant={variant}>{icon}</StickerIcon>}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && <RequiredAsterisk>*</RequiredAsterisk>}\n      </StickerContainer>\n\n      {onDismiss && (\n        <DismissButton\n          variant={variant}\n          disabled={disabled}\n          id='sticker__dismiss-button'\n          size='sm'\n          onClick={onDismiss}\n          aria-label='Remove'\n          {...dismissButtonProps}\n        >\n          <XIcon />\n        </DismissButton>\n      )}\n    </StyledSticker>\n  );\n};\n\nexport default Sticker;\n"],"mappings":"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"}
+{"version":3,"file":"Sticker-By3F8Aip.mjs","names":[],"sources":["../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n  white: 'White',\n  blue: 'Blue',\n  teal: 'Teal',\n  green: 'Green',\n  yellow: 'Yellow',\n  orange: 'Orange',\n  pink: 'Pink',\n  red: 'Red',\n  purple: 'Purple',\n  darkGrey: 'Dark Grey',\n  grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n  /**\n   * Icon to render to the left of the Sticker. 12px icons recommended.\n   */\n  icon?: ReactNode;\n\n  /**\n   * Callback to call upon clicking \"x\" button. Non-null will render the button.\n   */\n  onDismiss?: MouseEventHandler;\n\n  /**\n   * Additional props to pass to the dismiss \"x\" button.\n   */\n  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n  /**\n   * Renders disabled style for the entire Sticker and disables \"x\" button.\n   */\n  disabled?: boolean;\n\n  /**\n   * Shows a required asterisk (*) that won't be cut off when text is truncated.\n   */\n  isRequired?: boolean;\n\n  /**\n   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant'>>`\n  color: ${({ theme, variant }) => {\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return 'inherit';\n    }\n  }};\n  line-height: 0;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n\nconst RequiredAsterisk = styled.span`\n  color: ${Color.TextDanger};\n  /* Ensure asterisk never gets hidden and takes minimal space */\n  flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n  padding: 2px ${Spacing[1]};\n  /* Ensure container can shrink for text truncation */\n  min-width: 0;\n  flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n  ${paragraphMixins.sm}\n  padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n  ${paragraphMixins.sm}\n  flex: 1;\n  min-width: 0;\n  line-height: 1;\n  transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-sticker: ${Color.PrimaryWhite};\n\n  border: none;\n\n  padding: 0 ${Spacing[1]};\n  border-radius: ${BorderRadius.Sm};\n  width: 1rem;\n\n  height: 100%;\n\n  display: inline-flex;\n  align-items: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  color: ${({ theme, variant, disabled }) => {\n    if (variant === 'red' || variant === 'darkGrey') {\n      return theme.color.text.inverse;\n    }\n    return disabled ? 'inherit' : Color.BorderIconPrimary;\n  }};\n\n  &${isDisabled} {\n    background-color: inherit !important;\n    color: inherit !important;\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n  }\n\n  &${isHovered}${isNotDisabled} {\n    cursor: pointer;\n\n    background: ${({ variant }) => {\n      if (variant === 'grey' || variant === 'basic') {\n        return Color.BackgroundLabelGreyHover;\n      } else if (variant === 'darkGrey') {\n        return Color.BackgroundLabelDarkGreyHover;\n      } else if (variant === 'purple') {\n        return Color.BackgroundLabelPurpleHover;\n      } else if (variant === 'red' || variant === 'danger') {\n        return Color.BackgroundLabelDarkRedHover;\n      } else if (variant === 'orange') {\n        return Color.BackgroundLabelOrangeHover;\n      } else if (variant === 'yellow' || variant === 'caution') {\n        return Color.BackgroundLabelYellowHover;\n      } else if (variant === 'green' || variant === 'success') {\n        return Color.BackgroundLabelGreenHover;\n      } else if (variant === 'teal') {\n        return Color.BackgroundLabelTealHover;\n      } else if (variant === 'blue') {\n        return Color.BackgroundLabelBlueHover;\n      } else if (variant === 'pink') {\n        return Color.BackgroundLabelRedHover;\n      } else if (variant === 'white') {\n        return Color.BackgroundLabelWhiteHover;\n      } else {\n        return 'inherit';\n      }\n    }};\n  }\n`;\n\nconst StyledSticker = styled('div')<\n  StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n  display: inline-flex;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  max-width: 100%;\n\n  color: ${({ theme, variant, disabled }) => {\n    if (disabled) {\n      return variant === 'red' || variant === 'darkGrey'\n        ? theme.color.text.inverse\n        : theme.color.text.disabled;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return theme.color.text.primary;\n    }\n  }};\n  background: ${({ variant, disabled, $onSecondaryBackground }) => {\n    if (disabled) {\n      switch (variant) {\n        case 'white':\n          return Color.BackgroundLabelWhite;\n        case 'blue':\n          return Color.BackgroundLabelBlueDisabled;\n        case 'teal':\n          return Color.BackgroundLabelTealDisabled;\n        case 'green':\n        case 'success':\n          return Color.BackgroundLabelGreenDisabled;\n        case 'yellow':\n        case 'caution':\n          return Color.BackgroundLabelYellowDisabled;\n        case 'orange':\n          return Color.BackgroundLabelOrangeDisabled;\n        case 'pink':\n        case 'danger':\n          return Color.BackgroundLabelRedDisabled;\n        case 'red':\n          return Color.BackgroundLabelDarkRedDisabled;\n        case 'purple':\n        case 'primary':\n          return Color.BackgroundLabelPurpleDisabled;\n        case 'darkGrey':\n          return Color.BackgroundLabelDarkGreyDisabled;\n        case 'basic':\n        case 'grey':\n        default:\n          if ($onSecondaryBackground) {\n            // eslint-disable-next-line rulesdir/no-core-color-tokens\n            return Color.CoreSlate100;\n          }\n          return Color.BackgroundLabelGreyDisabled;\n      }\n    }\n    switch (variant) {\n      case 'white':\n        return Color.BackgroundLabelWhiteDisabled;\n      case 'blue':\n        return Color.BackgroundLabelBlue;\n      case 'teal':\n        return Color.BackgroundLabelTeal;\n      case 'green':\n      case 'success':\n        return Color.BackgroundLabelGreen;\n      case 'yellow':\n      case 'caution':\n        return Color.BackgroundLabelYellow;\n      case 'orange':\n        return Color.BackgroundLabelOrange;\n      case 'pink':\n      case 'danger':\n        return Color.BackgroundLabelRed;\n      case 'red':\n        return Color.BackgroundLabelDarkRed;\n      case 'purple':\n      case 'primary':\n        return Color.BackgroundLabelPurple;\n      case 'darkGrey':\n        return Color.BackgroundLabelDarkGrey;\n      case 'basic':\n      default:\n        if ($onSecondaryBackground) {\n          // eslint-disable-next-line rulesdir/no-core-color-tokens\n          return Color.CoreSlate200;\n        }\n        return Color.BackgroundLabelGrey;\n    }\n  }};\n`;\n\nexport const Sticker = ({\n  variant,\n  icon,\n  children,\n  onDismiss,\n  disabled,\n  dismissButtonProps,\n  isRequired,\n  onSecondaryBackground,\n  ...props\n}: StickerProps) => {\n  const hasContent = children != null;\n\n  if (!hasContent) {\n    const hasIcon = icon != null;\n    if (!hasIcon) {\n      console.warn('Sticker component requires content and/or an icon to render');\n      return null;\n    }\n\n    if (hasIcon && !props['aria-label']) {\n      console.warn('Sticker component requires an aria-label when only rendering an icon');\n    }\n  }\n\n  return (\n    <StyledSticker\n      $onSecondaryBackground={onSecondaryBackground}\n      variant={variant}\n      disabled={disabled}\n      sizeIcon={!!icon && !hasContent}\n      {...props}\n    >\n      <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n        <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n          {icon && <StickerIcon variant={variant}>{icon}</StickerIcon>}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && <RequiredAsterisk>*</RequiredAsterisk>}\n      </StickerContainer>\n\n      {onDismiss && (\n        <DismissButton\n          variant={variant}\n          disabled={disabled}\n          id='sticker__dismiss-button'\n          size='sm'\n          onClick={onDismiss}\n          aria-label='Remove'\n          {...dismissButtonProps}\n        >\n          <XIcon />\n        </DismissButton>\n      )}\n    </StyledSticker>\n  );\n};\n\nexport default Sticker;\n"],"mappings":"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"}

package/dist/{Sticker-DnSemOcW.d.mts → Sticker-Ep6N4Exq.d.mts}

@@ -1,9 +1,9 @@
-import { i as Variant } from "./theme-Ftogn9Wo.mjs";
-import { i as StackProps } from "./Stack-DHaK1-dw.mjs";
-import { r as TruncatedTextProps } from "./TruncatedText-D2R7uy_y.mjs";
+import { i as Variant } from "./theme-Biwx2eJZ.mjs";
+import { i as StackProps } from "./Stack-6eOrxjJi.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-C-MJPIRi.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Sticker/Sticker.d.ts
@@ -65,4 +65,4 @@ declare const Sticker: ({
 }: StickerProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { StickerContentContainer as a, StickerContainer as i, STICKER_COLOR_CONFIG as n, StickerProps as o, Sticker as r, StyledTruncatedText as s, LabelBackgrounds as t };
-//# sourceMappingURL=Sticker-DnSemOcW.d.mts.map
+//# sourceMappingURL=Sticker-Ep6N4Exq.d.mts.map

package/dist/Sticker.d.mts

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

package/dist/StringValueControl.d.mts

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

package/dist/Tab.d.mts

@@ -1,7 +1,7 @@
-import { r as ButtonProps, t as Button } from "./Button-CKzNTpPL.mjs";
+import { r as ButtonProps, t as Button } from "./Button-CRFbWv3l.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
-import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/TabBar/Tab.d.ts

package/dist/{TabBar-sYllYizt.mjs → TabBar-CWF65Tv4.mjs}

@@ -1,9 +1,9 @@
 import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
-import "./variables/transitions.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BgL3QUVO.mjs";
-import { t as Badge } from "./Badge-BL0J5oMa.mjs";
+import "./variables/transitions.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Button, t as IconButton } from "./IconButton-BnSEV7eR.mjs";
+import { t as Badge } from "./Badge-CM2TzkdE.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, createContext, forwardRef, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -270,4 +270,4 @@ var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
 //#endregion
 export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
 
-//# sourceMappingURL=TabBar-sYllYizt.mjs.map
+//# sourceMappingURL=TabBar-CWF65Tv4.mjs.map

package/dist/{TabBar-sYllYizt.mjs.map → TabBar-CWF65Tv4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TabBar-sYllYizt.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${Color.BorderDivider};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\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 Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n  | { badge?: ReactElement; sticker?: never }\n  | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n  display: inline-flex;\n  vertical-align: middle;\n  /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n  transform: translateY(calc((1ex - 1cap) / 2));\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabBaseProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => theme.color.primary.brand};\n  border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabBaseProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected }) =>\n      !selected &&\n      css`\n        color: ${Color.TextPrimary};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  sticker,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <AdornmentContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </AdornmentContainer>\n      )}\n      {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};\n  }\n\n  svg {\n    color: ${Color.CoreSlate800};\n  }\n\n  &:hover {\n    svg {\n      color: ${Color.CoreSlate900};\n    }\n  }\n`;\n"],"mappings":";;;;;;;;;;;AAEA,IAAA,wBAAe,cAA4D,EAAE,CAAC;;;ACa9E,MAAM,kBAAkB,OAAO,GAAG;;YAEtB,QAAQ,GAAG;;;6BAGM,MAAM,cAAc;;SAExC,QAAQ,GAAG;;AAGpB,MAAM,eAAe,OAAO,GAAG;;;AAI/B,MAAM,WAAW,OAAO,GAAG;;;;IAIvB,gBAAgB,OAAO;;AAG3B,MAAM,qBAAqB,OAAO,GAA4B;;UAEpD,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;AAoB1E,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,UAAU,aAAa,MAAM,GAAG,SAClC,cACA;CACA,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,wBAAwB,SAAoB;AAEhD,SAAO,SAAS,MAAM,SAAS,cAAc;;CAG/C,MAAM,iBAAuD,MAAM;EAGjE,MAAM,OAAO,WAAW,WAAW,QAAQ,SAAS;AAEpD,MAAI,SAAS,iBAAiB,CAAC,KAAK,SAAS,SAAS,cAAc,CAClE;AAGF,UAAQ,EAAE,KAAV;GACE,KAAK,aAAa;IAEhB,MAAM,WAAW,qBAAqB,KAAK;AAE1C,SADiB,aAAa,IAAI,KAAK,SAAS,IAAI,WAAW,GAC/B,OAAO;AACxC;;GAEF,KAAK;AAGF,UADgB,qBAAqB,KACvB,GAAG,KAAK,KAAK,QAAwB,OAAO;AAC3D;GAEF,KAAK;AAEF,SAAK,GAAmB,OAAO;AAChC;GAEF,KAAK;AAEF,SAAK,KAAK,SAAS,GAAmB,OAAO;AAC9C;GAEF,QACE;;;AAIN,QACE,oBAACA,sBAAc,UAAf;EAAwB,OAAO;GAAE;GAAa;GAAM;YAClD,oBAAC,oBAAD;GACE,MAAK;GACL,KAAK,UAA0B,YAAY,aAAa;GACxD,WAAW;GACX,OAAO;GACP,GAAI;GAEH;GACkB,CAAA;EACE,CAAA;EAE3B;AAEF,MAAM,YAAY,UAAqB,YAAqB;AAC1D,QAAO,SAAS,QAAQ,QAAQ;;AAGlC,MAAM,cAAc,SAAyB;AAE3C,QAAO,MAAM,KAAK,KAAK,CAAC,QAAQ,MAAmB;AACjD,SAAO,EAAE,EAAE,aAAa,gBAAgB,IAAI,EAAE,aAAa,WAAW;GACtE;;AAiBJ,MAAa,SAAS,WAAwC,SAAS,OACrE,EACE,UACA,SACA,OACA,oBAAoB,gBACpB,aACA,MACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,aAEL,cACA;AACA,QACE,qBAAC,iBAAD;EAAiB,GAAI;YAArB,CACE,qBAAC,cAAD;GACE,KAAK;GACQ;GACP;GACN,cAAY;GACZ,mBAAiB;aALnB,CAOG,SAAS,oBAAC,UAAD;IAAU,oBAAkB;cAAiB;IAAiB,CAAA,EACvE,SACY;MACd,WAAW,oBAAC,cAAD,EAAA,UAAe,SAAuB,CAAA,CAClC;;EAEpB;;;AC3IF,MAAM,qBAAqB,OAAO,IAAI;;;;;;iBAMrB,QAAQ,GAAG;;AAG5B,MAAM,aAGF;CACF,IAAI,GAAG;MACH,gBAAgB,GAAG;;CAEvB,IAAI,GAAG;MACH,gBAAgB,GAAG;;CAExB;AAED,MAAM,mBAAmB,GAAG;YAChB,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;0BAC1B,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;;;8CAGJ;4BAClC,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;;;AAIpE,MAAa,YAAY,OAAO,OAAO,CAAC,MAAoB;CAC1D,OAAO;CACP,SAAS;CACV,CAAC;;;;;;;YAOU,EAAE,OAAO,eACjB,WAAW,MAAM,MAAM,SAAS,MAAM,eAAe,MAAM,MAAM,KAAK,SAAS;8BACrC;;;;KAIzC,EAAE,WAAW,WAAW,QAAQ,MAAM;;oBAEvB,EAAE,YAAY,MAAM,OAAO,aAAa;;;;;;;KAOvD,WAAW,cAAc;;;KAGzB,YAAY,cAAc;;OAExB,EAAE,eACH,CAAC,YACD,GAAG;iBACQ,MAAM,YAAY;QAC3B;;KAEH,YAAY,cAAc;;;;KAI1B,YAAY,YAAY,cAAc;;;;;;;;;;;;;;;;;MAiBrC,iBAAiB;;;KAGlB,EAAE,eAAe,YAAY,iBAAiB;;KAE9C,EAAE,eACH,YACA,GAAG;;MAED;;;;;;;;;AAUN,MAAM,gBAAgB,MAAc,kBAAkC;AACpE,KAAI,KAAK,UAAU,cACjB,QAAO;AAET,QAAO,GAAG,KAAK,UAAU,GAAG,cAAc,CAAC,SAAS,CAAC;;AAGvD,MAAM,OAAyC,EAC7C,UACA,UACA,UACA,OACA,SACA,IACA,MACA,GAAG,gBAC4C;CAC/C,MAAM,EAAE,aAAa,MAAM,gBAAgB,WAAWC,sBAAc;CACpE,MAAM,YAAY,QAAQ,eAAe;CAGzC,MAAM,gBAAgB,eAAe,OAAO,aAAa;CACzD,MAAM,kBAAkB,gBAAgB,aAAa,UAAU,YAAY,GAAG;AAE9E,QACE,qBAAC,WAAD;EACE,MAAK;EACK;EACV,iBAAe;EACf,iBAAe;EACL;EACN;EACJ,MAAM;EACN,OAAO,gBAAgB,WAAW,KAAA;EAClC,GAAI;YATN;GAWG;GACA,SACC,oBAAC,oBAAD,EAAA,UACG,MAAM,SAAS,QACZ,aAAa,OAAO;IAClB,SAAS,WAAW,WAAW;IAC/B,uBAAuB;IACxB,CAAC,GACF,OACe,CAAA;GAEtB,WAAW,oBAAC,oBAAD,EAAA,UAAqB,SAA6B,CAAA;GACpD;;;;;AC1LhB,IAAA,2BAAe,OAAO,WAAW,CAAC,MAAM,EACtC,MAAM,MACP,CAAC;kBACgB,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,aAAa,GAAG;;;KAG9B,WAAW,cAAc;;;KAGzB,YAAY,cAAc;;;KAG1B,YAAY,cAAc;;;KAG1B,YAAY,YAAY,cAAc;;;;;;mBAMxB,cAAc,KAAK,YAAY,cAAc;6BACnC,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,UAAU;;;;aAInE,MAAM,aAAa;;;;;eAKjB,MAAM,aAAa"}
+{"version":3,"file":"TabBar-CWF65Tv4.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${Color.BorderDivider};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\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 Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n  | { badge?: ReactElement; sticker?: never }\n  | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n  display: inline-flex;\n  vertical-align: middle;\n  /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n  transform: translateY(calc((1ex - 1cap) / 2));\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabBaseProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => theme.color.primary.brand};\n  border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabBaseProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected }) =>\n      !selected &&\n      css`\n        color: ${Color.TextPrimary};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  sticker,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <AdornmentContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </AdornmentContainer>\n      )}\n      {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};\n  }\n\n  svg {\n    color: ${Color.CoreSlate800};\n  }\n\n  &:hover {\n    svg {\n      color: ${Color.CoreSlate900};\n    }\n  }\n`;\n"],"mappings":"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"}

package/dist/TabBarIconButton.d.mts

@@ -1,6 +1,6 @@
-import { n as IconButtonProps } from "./IconButton-CLsHdYm7.mjs";
-import * as _$react from "react";
+import { n as IconButtonProps } from "./IconButton-Bh-JJ-0x.mjs";
 import * as _$styled_components0 from "styled-components";
+import * as _$react from "react";
 
 //#region components/TabBar/TabBarIconButton.d.ts
 declare const _default: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {

package/dist/{Table-CFbPINKr.d.mts → Table-BOcWdwpv.d.mts}

@@ -10,4 +10,4 @@ declare const Table: _$styled_components0.StyledComponent<"table", any, {
 } & TableProps, "role">;
 //#endregion
 export { Table as t };
-//# sourceMappingURL=Table-CFbPINKr.d.mts.map
+//# sourceMappingURL=Table-BOcWdwpv.d.mts.map