@persona/design-system 0.1.7 → 0.1.8

package/dist/RulesPill.d.mts

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

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

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

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

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

package/dist/SearchInput.d.cts

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

package/dist/SearchInput.d.mts

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

package/dist/Section.d.mts

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

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

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

package/dist/{SectionHeading-D-L4uPoX.d.cts → SectionHeading-Q-rx2LEd.d.mts}

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

package/dist/SectionHeading.d.cts

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

package/dist/SectionHeading.d.mts

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

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

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

package/dist/SegmentedControl-C2XZF0ys.cjs.map

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

package/dist/{SegmentedControl-B1ZLgu61.mjs → SegmentedControl-CgDQIVll.mjs}

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

package/dist/SegmentedControl-CgDQIVll.mjs.map

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

package/dist/{SegmentedControl-BYuXohIp.d.cts → SegmentedControl-DrjdUOU9.d.mts}

@@ -1,6 +1,6 @@
+import { ToggleButtonProps } from "react-aria-components";
 import * as _$react from "react";
 import { Key, ReactNode } from "react";
-import { ToggleButtonProps } from "react-aria-components";
 
 //#region components/SegmentedControl/SegmentedControl.d.ts
 interface SegmentedControlProps {
@@ -56,4 +56,4 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled'
 declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
-//# sourceMappingURL=SegmentedControl-BYuXohIp.d.cts.map
+//# sourceMappingURL=SegmentedControl-DrjdUOU9.d.mts.map

package/dist/{SegmentedControl-CE845gnm.d.mts → SegmentedControl-nHIK1ZvR.d.cts}

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

package/dist/SegmentedControl.d.cts

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

package/dist/SegmentedControl.d.mts

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

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

@@ -1,10 +1,10 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-BkzqXwn7.cjs";
-import { l as MenuItemProps } from "./Menu-BKMxOXkj.cjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
+import { l as MenuItemProps } from "./Menu-CUp_9HgC.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { Property } from "csstype";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { Property } from "csstype";
 
 //#region components/Select/Select.d.ts
 interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {
@@ -34,6 +34,12 @@ interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps,
    * Render dropdown menu in a portal.
    */
   portal?: boolean;
+  /**
+   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside
+   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's
+   * dismiss scope, which would close it on click. Requires `portal`.
+   */
+  portalContainer?: HTMLElement | null;
   /**
    * Props to apply to Radix Select.Trigger within
    */
@@ -74,4 +80,4 @@ declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.Re
 declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-NcaURrGZ.d.cts.map
+//# sourceMappingURL=Select-2KbtKawr.d.mts.map

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

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

package/dist/{Select-C65bfYeT.cjs → Select-BurtT6bN.cjs}

@@ -2,18 +2,18 @@ const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_input = require("./mixins/input.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormField = require("./useFormField-B98dmreO.cjs");
-const require_Menu = require("./Menu-BXic-30n.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CfJxgWN5.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Menu = require("./Menu-t2q8NrV0.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DnlQqTjs.cjs");
+const require_useFormField = require("./useFormField-BZlArnsI.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _persona_icons = require("@persona/icons");
 let react_aria = require("react-aria");
 let _radix_ui_react_select = require("@radix-ui/react-select");
@@ -163,7 +163,7 @@ const SelectHeader = ({ title, menuItems, menuTriggerLabel }) => {
 		})]
 	});
 };
-const Select = (0, react.forwardRef)(function Select({ portal = false, size = "md", ...props }, forwardedRef) {
+const Select = (0, react.forwardRef)(function Select({ portal = false, portalContainer, size = "md", ...props }, forwardedRef) {
 	const { "aria-label": ariaLabel, hasError, hasWarning, focused, active, hovered, disabled, placeholder, maxHeight, children, triggerProps, contentProps, id, className, onChange, onValueChange, value, width, header, footer, minWidth, valueContainerWidth, zIndex } = props;
 	const field = require_useFormField.useFormField({
 		inputId: props.id,
@@ -225,7 +225,10 @@ const Select = (0, react.forwardRef)(function Select({ portal = false, size = "m
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
 				})]
 			})
-		}), portal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: content }) : content]
+		}), portal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, {
+			container: portalContainer,
+			children: content
+		}) : content]
 	});
 });
 const Option = (0, react.forwardRef)(function Option({ children, subtitle, ...props }, forwardedRef) {
@@ -259,4 +262,4 @@ Object.defineProperty(exports, "SelectHeader", {
 	}
 });
 
-//# sourceMappingURL=Select-C65bfYeT.cjs.map
+//# sourceMappingURL=Select-BurtT6bN.cjs.map

package/dist/Select-BurtT6bN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-BurtT6bN.cjs","names":["inputMixin","Spacing","isNotDisabled","Menu","MenuList","paragraphMixins","MenuHeading","SelectPrimitive","Z_INDICES","HStack","Color","MenuItem","Paragraph","DropdownMenu","IconButton","MoreIcon","useFormField","CaretDownIcon"],"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  pointer-events: 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-ByTgXOlU.mjs → Select-cPEORy70.mjs}

@@ -1,17 +1,17 @@
 import { isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
+import { t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-CVuFAxl2.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-cnkoGc7C.mjs";
+import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-CPYXo61N.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, MoreIcon } from "@persona/icons";
 import { useId } from "react-aria";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -160,7 +160,7 @@ const SelectHeader = ({ title, menuItems, menuTriggerLabel }) => {
 		})]
 	});
 };
-const Select = forwardRef(function Select({ portal = false, size = "md", ...props }, forwardedRef) {
+const Select = forwardRef(function Select({ portal = false, portalContainer, size = "md", ...props }, forwardedRef) {
 	const { "aria-label": ariaLabel, hasError, hasWarning, focused, active, hovered, disabled, placeholder, maxHeight, children, triggerProps, contentProps, id, className, onChange, onValueChange, value, width, header, footer, minWidth, valueContainerWidth, zIndex } = props;
 	const field = useFormField({
 		inputId: props.id,
@@ -180,7 +180,7 @@ const Select = forwardRef(function Select({ portal = false, size = "md", ...prop
 			children: [
 				header,
 				/* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children }),
-				footer && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(SelectFooter, { children: footer }) })
+				footer && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(SelectFooter, { children: footer }) })
 			]
 		})
 	});
@@ -222,7 +222,10 @@ const Select = forwardRef(function Select({ portal = false, size = "md", ...prop
 					children: /* @__PURE__ */ jsx(CaretDownIcon, {})
 				})]
 			})
-		}), portal ? /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: content }) : content]
+		}), portal ? /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
+			container: portalContainer,
+			children: content
+		}) : content]
 	});
 });
 const Option = forwardRef(function Option({ children, subtitle, ...props }, forwardedRef) {
@@ -239,4 +242,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
 
-//# sourceMappingURL=Select-ByTgXOlU.mjs.map
+//# sourceMappingURL=Select-cPEORy70.mjs.map

package/dist/Select-cPEORy70.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-cPEORy70.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  pointer-events: 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.d.cts

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

package/dist/Select.d.mts

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

package/dist/Slider.d.mts

@@ -1,5 +1,5 @@
-import { FocusEventHandler, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { FocusEventHandler, ReactNode } from "react";
 import { NumberFormatOptions } from "@internationalized/number";
 
 //#region components/Slider/Slider.d.ts

package/dist/SliderRHF.d.mts

@@ -1,6 +1,6 @@
 import { Slider } from "./Slider.mjs";
-import { ComponentPropsWithoutRef } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
 import { Control, FieldValues } from "react-hook-form";
 
 //#region components/Slider/SliderRHF.d.ts

package/dist/SliderThumb.d.mts

@@ -1,5 +1,5 @@
-import { OutputHTMLAttributes, RefObject } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { OutputHTMLAttributes, RefObject } from "react";
 import { SliderState } from "@react-stately/slider";
 
 //#region components/Slider/SliderThumb.d.ts

package/dist/{Spacer-GYHbk-dS.cjs → Spacer-B2CerL6e.cjs}

@@ -17,4 +17,4 @@ Object.defineProperty(exports, "Spacer_default", {
 	}
 });
 
-//# sourceMappingURL=Spacer-GYHbk-dS.cjs.map
+//# sourceMappingURL=Spacer-B2CerL6e.cjs.map