@persona/design-system 0.1.7 → 0.1.9

package/dist/filter-size-context-Blw6Sd69.d.mts

@@ -0,0 +1,52 @@
+import { d as FilterSize } from "./types-D58IoRx6.mjs";
+import * as _$react from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/filter-size-context.d.ts
+interface FilterBarContextValue {
+  size: FilterSize;
+}
+/**
+ * Context for FilterBar-wide rendering settings. It currently carries
+ * only `size`, but the object shape leaves room for future bar-level
+ * settings without introducing another provider.
+ */
+declare const FilterBarContext: _$react.Context<FilterBarContextValue>;
+/**
+ * Resolve the active filter-bar size, honoring an explicit prop
+ * override before falling back to the surrounding `FilterBarContext`.
+ * Pattern is the same as the design-system FormControl size hook —
+ * components accept an optional `size` prop that wins, otherwise
+ * follow the ambient context.
+ */
+declare function useFilterBarSize(override?: FilterSize): FilterSize;
+/**
+ * Dimensional tokens for each filter-bar size variant. Co-locating the
+ * pixel values here keeps the per-component styled primitives free of
+ * magic numbers and ensures both variants stay in lockstep across the
+ * Filter UI v2 family of components.
+ *
+ * Current size contract:
+ *   sm → 12px font, 12px icons, 24px controls, 18px chip
+ *   md → 14px font, 16px icons, 32px controls, 24px chip
+ *
+ * These values stay centralized here so subcomponents do not duplicate
+ * hardcoded dimensions.
+ */
+interface FilterSizeTokens {
+  /** Height of pills, the picker trigger, and other "control" surfaces. */
+  controlHeight: string;
+  /** Height of value chips embedded in pills (proportional to controlHeight). */
+  chipHeight: string;
+  /** Base font size for pill labels, header text, and option rows. */
+  fontSize: string;
+  /** Line height paired with `fontSize`. */
+  lineHeight: string;
+  /** Glyph size for caret/dismiss icons inside pills. */
+  iconSize: string;
+}
+declare const FILTER_SIZE_TOKENS: Record<FilterSize, FilterSizeTokens>;
+/** Convenience accessor — returns the token bundle for the resolved size. */
+declare function useFilterSizeTokens(override?: FilterSize): FilterSizeTokens;
+//#endregion
+export { useFilterBarSize as a, FilterSizeTokens as i, FilterBarContext as n, useFilterSizeTokens as o, FilterBarContextValue as r, FILTER_SIZE_TOKENS as t };
+//# sourceMappingURL=filter-size-context-Blw6Sd69.d.mts.map

package/dist/filter-size-context.d.mts

@@ -0,0 +1,2 @@
+import { a as useFilterBarSize, i as FilterSizeTokens, n as FilterBarContext, o as useFilterSizeTokens, r as FilterBarContextValue, t as FILTER_SIZE_TOKENS } from "./filter-size-context-Blw6Sd69.mjs";
+export { FILTER_SIZE_TOKENS, FilterBarContext, FilterBarContextValue, FilterSizeTokens, useFilterBarSize, useFilterSizeTokens };

package/dist/helpers.d.mts

@@ -1,4 +1,4 @@
-import { n as CheckboxProps } from "./Checkbox-MUC37dLY.mjs";
+import { n as CheckboxProps } from "./Checkbox-Bm8exUfH.mjs";
 import { DataTableColumnFormat, DataTableColumnImageFormat, DataTableColumnPiiFormat, DataTableColumnStringFormat, DateConfig, DatetimeConfig, RenderValueStickerFormatConfig } from "./components/DataTable/types.mjs";
 import { ReactNode } from "react";
 

package/dist/index-4_B2yRzD.d.mts

@@ -0,0 +1,7 @@
+import { n as FilterBarProps$1 } from "./FilterBar-D3LiIy1-.mjs";
+
+//#region components/DataTable/TableControls/FiltersV2/FilterBar/index.d.ts
+type FilterBarProps = FilterBarProps$1;
+//#endregion
+export { FilterBarProps as t };
+//# sourceMappingURL=index-4_B2yRzD.d.mts.map

package/dist/index-BxXTpeUb2.d.mts

@@ -0,0 +1,55 @@
+import { n as ListBoxItemProps, r as ListBoxProps } from "./ListBox-D09N1a5D.mjs";
+import { n as LogicRowProps } from "./LogicRow-BcuiSTHN.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_aria_components0 from "react-aria-components";
+import * as _$react from "react";
+
+//#region components/ListBox/index.d.ts
+declare const ListBox: {
+  <T extends object>({
+    children,
+    onAdd,
+    onDelete,
+    emptyText,
+    deleteDisabled,
+    selectedKeys,
+    onSelectionChange,
+    editable,
+    size,
+    reorderConfig,
+    items,
+    maxHeight,
+    ...props
+  }: _$react.PropsWithChildren<ListBoxProps<T>>): _$react_jsx_runtime0.JSX.Element;
+  Item: ({
+    children,
+    actions,
+    onDelete,
+    size,
+    dropdownHeadingText,
+    dropdownFormFields,
+    dropdownContent,
+    dropdownFooter,
+    ...props
+  }: ListBoxItemProps) => _$react_jsx_runtime0.JSX.Element;
+  Section: <T extends object>(props: _$react_aria_components0.ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+  Header: (props: _$react.ComponentPropsWithoutRef<typeof _$react_aria_components0.Header>) => _$react_jsx_runtime0.JSX.Element;
+} & {
+  LogicRow: ({
+    condition,
+    attributeName,
+    operator,
+    matchLevelName,
+    editable,
+    id,
+    onDelete,
+    dropdownHeadingText,
+    dropdownFormFields,
+    size,
+    hideCondition,
+    ...listBoxItemProps
+  }: LogicRowProps) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { ListBox as t };
+//# sourceMappingURL=index-BxXTpeUb2.d.mts.map

package/dist/{index-BPnJP0jZ.d.mts → index-DDbjWdk0.d.mts}

@@ -1,9 +1,9 @@
-import { t as TableHeaderCell } from "./TableHeaderCell-B2yiOw4w.mjs";
-import { n as TableRowProps } from "./TableRow-C-faHbkL.mjs";
+import { t as TableHeaderCell } from "./TableHeaderCell-Br8ZE3Xe.mjs";
+import { n as TableRowProps } from "./TableRow-BvS4yjo6.mjs";
 import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Table/TableTH.d.ts
 interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {
@@ -72,4 +72,4 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
 }, "role">;
 //#endregion
 export { TableCellProps as a, TableTD as c, TableTHProps as d, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t, TableTH as u };
-//# sourceMappingURL=index-BPnJP0jZ.d.mts.map
+//# sourceMappingURL=index-DDbjWdk0.d.mts.map

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-B-Us54dR.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-CDTYK1XJ.mjs";
 export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/index2.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/index3.d.mts

@@ -1 +1,4 @@
-export { };
+import { r as resolveValueControl } from "./value-control-resolver-CE-bqdAl.mjs";
+import { t as FilterBar } from "./FilterBar-D3LiIy1-.mjs";
+import { t as FilterBarProps } from "./index-4_B2yRzD.mjs";
+export { FilterBarProps, FilterBar as default, resolveValueControl };

package/dist/index4.d.mts

@@ -0,0 +1,11 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-CE-bqdAl.mjs";
+import { t as FilterBar } from "./FilterBar-D3LiIy1-.mjs";
+import { t as FilterBarProps } from "./index-4_B2yRzD.mjs";
+import { a as useFilterBarSize } from "./filter-size-context-Blw6Sd69.mjs";
+import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "./operators-Bo31xlc2.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DCQghouq.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-vLh3t2dk.mjs";
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, RawFieldInfo, ResolveValueControlOptions, TopLevelFilterRule, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, buildFieldRegistry, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2 };

package/dist/index5.d.mts

@@ -0,0 +1,2 @@
+import PillShell, { PillShellProps } from "./PillShell.mjs";
+export { type PillShellProps, PillShell as default };

package/dist/{input-BkzqXwn7.d.cts → input-Bv5fKt5J.d.mts}

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
-import { t as ErrorProps } from "./ErrorProps-BosuK6zJ.cjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
+import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/input.d.ts
@@ -14,4 +14,4 @@ interface InputMixinProps extends ErrorProps, PseudoClassProps {
 declare const inputMixin: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<InputMixinProps, any>>;
 //#endregion
 export { InputSizes as n, inputMixin as r, InputMixinProps as t };
-//# sourceMappingURL=input-BkzqXwn7.d.cts.map
+//# sourceMappingURL=input-Bv5fKt5J.d.mts.map

package/dist/inputFields.d.mts

@@ -1,15 +1,15 @@
-import { n as CheckboxProps } from "./Checkbox-MUC37dLY.mjs";
-import { a as InputProps } from "./Input-4KeYlOWM.mjs";
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DMWPiBrE.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CcppU_hq.mjs";
-import { n as FormFieldBaseProps } from "./FormField-BddCs6P0.mjs";
-import { n as RadioGroupProps } from "./RadioGroup-nhMXEbCx.mjs";
-import { i as SegmentedControlProps } from "./SegmentedControl-CE845gnm.mjs";
-import { i as SelectProps } from "./Select-BMEwCfbv.mjs";
-import { t as TextAreaProps } from "./TextArea-weASn4Hq.mjs";
-import { n as ToggleProps } from "./Toggle-BQCOJZjZ.mjs";
-import * as _$react from "react";
+import { n as CheckboxProps } from "./Checkbox-Bm8exUfH.mjs";
+import { a as InputProps } from "./Input-DMgVyZyq.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DhLzCWbz.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-P0r5rs_u.mjs";
+import { n as FormFieldBaseProps } from "./FormField-BugkBvN4.mjs";
+import { n as RadioGroupProps } from "./RadioGroup-DKqbSfju.mjs";
+import { i as SegmentedControlProps } from "./SegmentedControl-DrjdUOU9.mjs";
+import { i as SelectProps } from "./Select-Bk27TgN8.mjs";
+import { t as TextAreaProps } from "./TextArea-B89wtTsF.mjs";
+import { n as ToggleProps } from "./Toggle-DzYLgxGk.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
 
 //#region components/FormField/inputFields.d.ts
 type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;

package/dist/{intersperse-yd3oMrQl.mjs → intersperse-vOYvFOfF.mjs}

@@ -18,4 +18,4 @@ function intersperse(arr, separator) {
 //#endregion
 export { intersperse as t };
 
-//# sourceMappingURL=intersperse-yd3oMrQl.mjs.map
+//# sourceMappingURL=intersperse-vOYvFOfF.mjs.map

package/dist/{intersperse-Gxwgpbk8.cjs.map → intersperse-vOYvFOfF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"intersperse-Gxwgpbk8.cjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}
+{"version":3,"file":"intersperse-vOYvFOfF.mjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}

package/dist/layouts/LayoutLoadingShimmer/index.d.mts

@@ -0,0 +1,2 @@
+import { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer } from "../../LayoutLoadingShimmer.mjs";
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };

package/dist/layouts/LayoutLoadingShimmer/index.mjs

@@ -0,0 +1,133 @@
+import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
+import { t as Card_default } from "../../CardV2-C0fcOUdp.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-jSLud2JI.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-BfontAeY.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region layouts/containers.tsx
+const Layout = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${Spacing[7]};
+`;
+const DetailLayout = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${Spacing[4]} ${Spacing[5]};
+`;
+//#endregion
+//#region layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx
+const DataTableShimmer = () => {
+	return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableHeaderCell, { children: /* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "100%",
+		height: "20px"
+	}) }, i)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(TableRow, {
+		disableHoverBackground: true,
+		children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LoadingShimmer, {
+			width: "100%",
+			height: "24px"
+		}) }, i))
+	}, i)) })] }) });
+};
+const HeaderShimmer = () => {
+	return /* @__PURE__ */ jsxs(PageHeaderContainer, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "150px",
+		height: "30px"
+	}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	}), /* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	})] })] });
+};
+/**
+* Render a single full-width card with a loading state mimicking a DataTable.
+*/
+const IndexViewLayoutShimmer = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsx(Card_default.Section, { children: /* @__PURE__ */ jsx(DataTableShimmer, {}) }) }) })] });
+};
+/**
+* Render `cards.length` full-width cards of the specified height in a loading state.
+*/
+const SimpleLayoutShimmer = ({ cards = [400] }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Stack, {
+		spacing: Spacing[4],
+		children: cards.map((height, i) => /* @__PURE__ */ jsx(Card_default, {
+			loading: true,
+			loadingProps: { height: `${height}px` },
+			children: /* @__PURE__ */ jsx(Fragment, {})
+		}, i))
+	}) })] });
+};
+const TabsDivider = styled.hr`
+  border-top: 1px solid ${Color.BorderDivider};
+  margin: 0;
+`;
+const TabsShimmer = () => {
+	return /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	}), /* @__PURE__ */ jsx(LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	})] }), /* @__PURE__ */ jsx(TabsDivider, {})] });
+};
+const MainColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[4]};
+  flex: 2;
+`;
+const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[4]};
+  flex: 1;
+`;
+const ShowViewLayoutShimmer = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(DetailLayout, { children: /* @__PURE__ */ jsxs(Stack, {
+		spacing: Spacing[4],
+		children: [/* @__PURE__ */ jsx(TabsShimmer, {}), /* @__PURE__ */ jsxs(HStack, {
+			spacing: Spacing[4],
+			children: [/* @__PURE__ */ jsxs(MainColumn, { children: [
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "100px" },
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				}),
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "400px" },
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				}),
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				})
+			] }), /* @__PURE__ */ jsxs(RightColumn, { children: [/* @__PURE__ */ jsx(Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				loadingProps: { height: "400px" },
+				children: /* @__PURE__ */ jsx(Fragment, {})
+			}), /* @__PURE__ */ jsx(Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				children: /* @__PURE__ */ jsx(Fragment, {})
+			})] })]
+		})]
+	}) })] });
+};
+//#endregion
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };
+
+//# sourceMappingURL=index.mjs.map

package/dist/layouts/LayoutLoadingShimmer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CardV2"],"sources":["../../../layouts/containers.tsx","../../../layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CardV2 from 'design-system/components/CardV2';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { PageHeaderContainer } from 'design-system/components/PageHeader';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from 'design-system/components/Table';\nimport { Layout, DetailLayout } from 'design-system/layouts/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAIA,MAAa,SAAS,OAAO,GAAG;;;;aAInB,QAAQ,GAAG;;AAGxB,MAAa,eAAe,OAAO,GAAG;;;;aAIzB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;ACCtC,MAAa,yBAAyB;AACpC,QACE,oBAAC,OAAD,EAAA,UACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,WAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,oBAAC,iBAAD,EAAA,UACE,oBAAC,gBAAD;EAAgB,OAAM;EAAO,QAAO;EAAS,CAAA,EAC7B,EAFI,EAEJ,CAClB,EACO,CAAA,EACD,CAAA,EACZ,oBAAC,WAAD,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,oBAAC,UAAD;EAAkB,wBAAA;YACf,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,oBAAC,WAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,OAAM;GAAO,QAAO;GAAS,CAAA,EACnC,EAFI,EAEJ,CACZ;EACO,EANI,EAMJ,CACX,EACQ,CAAA,CACN,EAAA,CAAA,EACF,CAAA;;AAIZ,MAAM,sBAAsB;AAC1B,QACE,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,OAAM;EAAQ,QAAO;EAAS,CAAA,EAC9C,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,OAAM;EAAO,QAAO;EAAS,CAAA,EAC7C,oBAAC,gBAAD;EAAgB,OAAM;EAAO,QAAO;EAAS,CAAA,CACtC,EAAA,CAAA,CACW,EAAA,CAAA;;;;;AAO1B,MAAa,+BAA+B;AAC1C,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAAC,QAAD,EAAA,UACE,oBAACA,cAAD,EAAA,UACE,oBAACA,aAAO,SAAR,EAAA,UACE,oBAAC,kBAAD,EAAoB,CAAA,EACL,CAAA,EACV,CAAA,EACF,CAAA,CACR,EAAA,CAAA;;;;;AAOP,MAAa,uBAAuB,EAAE,QAAQ,CAAC,IAAI,OAA6B;AAC9E,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAD;EAAO,SAAS,QAAQ;YACrB,MAAM,KAAK,QAAQ,MAClB,oBAACA,cAAD;GAAgB,SAAA;GAAQ,cAAc,EAAE,QAAQ,GAAG,OAAO,KAAK;aAC7D,oBAAA,UAAA,EAAK,CAAA;GACE,EAFI,EAEJ,CACT;EACI,CAAA,EACD,CAAA,CACR,EAAA,CAAA;;AAIP,MAAM,cAAc,OAAO,EAAE;0BACH,MAAM,cAAc;;;AAI9C,MAAM,oBAAoB;AACxB,QACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAQ;EAAY,OAAM;EAAQ,QAAO;EAAS,CAAA,EAClE,oBAAC,gBAAD;EAAgB,SAAQ;EAAY,OAAM;EAAQ,QAAO;EAAS,CAAA,CAC3D,EAAA,CAAA,EACT,oBAAC,aAAD,EAAe,CAAA,CACT,EAAA,CAAA;;AAIZ,MAAM,aAAa,OAAO,GAAG;;;SAGpB,QAAQ,GAAG;;;AAIpB,MAAM,cAAc,OAAO,GAAG;;;SAGrB,QAAQ,GAAG;;;AAIpB,MAAa,8BAA8B;AACzC,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAAC,cAAD,EAAA,UACE,qBAAC,OAAD;EAAO,SAAS,QAAQ;YAAxB,CACE,oBAAC,aAAD,EAAe,CAAA,EACf,qBAAC,QAAD;GAAQ,SAAS,QAAQ;aAAzB,CACE,qBAAC,YAAD,EAAA,UAAA;IACE,oBAACA,cAAD;KAAQ,SAAS,EAAE,OAAO,WAAW;KAAE,SAAA;KAAQ,cAAc,EAAE,QAAQ,SAAS;eAC9E,oBAAA,UAAA,EAAK,CAAA;KACE,CAAA;IACT,oBAACA,cAAD;KAAQ,SAAS,EAAE,OAAO,WAAW;KAAE,SAAA;KAAQ,cAAc,EAAE,QAAQ,SAAS;eAC9E,oBAAA,UAAA,EAAK,CAAA;KACE,CAAA;IACT,oBAACA,cAAD;KAAQ,SAAS,EAAE,OAAO,WAAW;KAAE,SAAA;eACrC,oBAAA,UAAA,EAAK,CAAA;KACE,CAAA;IACE,EAAA,CAAA,EACb,qBAAC,aAAD,EAAA,UAAA,CACE,oBAACA,cAAD;IAAQ,SAAS,EAAE,OAAO,WAAW;IAAE,SAAA;IAAQ,cAAc,EAAE,QAAQ,SAAS;cAC9E,oBAAA,UAAA,EAAK,CAAA;IACE,CAAA,EACT,oBAACA,cAAD;IAAQ,SAAS,EAAE,OAAO,WAAW;IAAE,SAAA;cACrC,oBAAA,UAAA,EAAK,CAAA;IACE,CAAA,CACG,EAAA,CAAA,CACP;KACH;KACK,CAAA,CACd,EAAA,CAAA"}

package/dist/lib/MiddleTruncatedText.mjs

@@ -1,2 +1,2 @@
-import { t as MiddleTruncatedText } from "../MiddleTruncatedText-Bzpg3zAU.mjs";
+import { t as MiddleTruncatedText } from "../MiddleTruncatedText-GXI-CPvs.mjs";
 export { MiddleTruncatedText, MiddleTruncatedText as default };

package/dist/lib/PDSProvider.d.mts

@@ -1,4 +1,4 @@
-import { n as PersonaTheme } from "../theme-Bx2sn3Lt.mjs";
+import { n as PersonaTheme } from "../theme-BzBpJXhO.mjs";
 import { FC, PropsWithChildren } from "react";
 
 //#region lib/PDSProvider.d.ts

package/dist/lib/TruncatedText.d.mts

@@ -1,2 +1,2 @@
-import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-Cy8NpHzm.mjs";
+import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-BJnowVTx.mjs";
 export { OverflowEllipsisSpan, TruncatedText, TruncatedText as default, TruncatedTextProps };

package/dist/lib/TruncatedText.mjs

@@ -1,7 +1,7 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
 import styled from "styled-components";
-import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 //#region lib/TruncatedText.tsx
 const OverflowEllipsisSpan = styled.span`
   display: block;

package/dist/lib/TruncatedTextWithTooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as Tooltip } from "../Tooltip-DRgufW3i.mjs";
+import { n as Tooltip } from "../Tooltip-CUC-JuRL.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
 
 //#region lib/TruncatedTextWithTooltip.d.ts

package/dist/lib/TruncatedTextWithTooltip.mjs

@@ -1,8 +1,8 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
 import { OverflowEllipsisSpan } from "./TruncatedText.mjs";
-import { a as Tooltip } from "../Tooltip-CDvOu1UN.mjs";
-import { useRef } from "react";
+import { a as Tooltip } from "../Tooltip-BvDbmXak.mjs";
 import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 //#region lib/TruncatedTextWithTooltip.tsx
 /**
 * Truncates the text if it is too long to fit in the container and shows a tooltip if the text

package/dist/lib/message.d.mts

@@ -1,2 +1,2 @@
-import { t as MessageType } from "../message-BfJ87aIU.mjs";
+import { t as MessageType } from "../message-CMHvlPGn.mjs";
 export { MessageType };

package/dist/lib/pseudoClass.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
 
 //#region lib/pseudoClass.d.ts
 declare const isDisabled: ({

package/dist/lib/useScrollOverflow.d.mts

@@ -19,6 +19,9 @@ interface UseScrollOverflowOptions {
  *   left edge. Drives the left-edge fade affordance.
  * - `hasMoreScrollRight` — true while the user has not yet scrolled to the
  *   right edge. Drives the right-edge fade affordance.
+ * - `scrollbarSize` — space the scrollbars take inside the box, in pixels.
+ *   Zero on platforms with overlay scrollbars. Edge affordances inset
+ *   themselves by this so they don't cover the scrollbars.
  *
  * Listens to `scroll` on the element, size changes via `ResizeObserver`,
  * and content changes via `MutationObserver` (child add/remove and text
@@ -30,6 +33,10 @@ declare const useScrollOverflow: (ref: RefObject<HTMLElement>, {
   hasHorizontalOverflow: boolean;
   hasMoreScrollLeft: boolean;
   hasMoreScrollRight: boolean;
+  scrollbarSize: {
+    vertical: number;
+    horizontal: number;
+  };
 };
 //#endregion
 export { useScrollOverflow };

package/dist/lib/useScrollOverflow.mjs

@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
 //#region lib/useScrollOverflow.ts
+const NO_SCROLLBARS = {
+	vertical: 0,
+	horizontal: 0
+};
 /**
 * Tracks the horizontal-overflow state of a scroll container.
 *
@@ -8,6 +12,9 @@ import { useEffect, useState } from "react";
 *   left edge. Drives the left-edge fade affordance.
 * - `hasMoreScrollRight` — true while the user has not yet scrolled to the
 *   right edge. Drives the right-edge fade affordance.
+* - `scrollbarSize` — space the scrollbars take inside the box, in pixels.
+*   Zero on platforms with overlay scrollbars. Edge affordances inset
+*   themselves by this so they don't cover the scrollbars.
 *
 * Listens to `scroll` on the element, size changes via `ResizeObserver`,
 * and content changes via `MutationObserver` (child add/remove and text
@@ -17,11 +24,13 @@ const useScrollOverflow = (ref, { enabled = true } = {}) => {
 	const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);
 	const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);
 	const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);
+	const [scrollbarSize, setScrollbarSize] = useState(NO_SCROLLBARS);
 	useEffect(() => {
 		if (!enabled) {
 			setHasHorizontalOverflow(false);
 			setHasMoreScrollLeft(false);
 			setHasMoreScrollRight(false);
+			setScrollbarSize(NO_SCROLLBARS);
 			return;
 		}
 		const el = ref.current;
@@ -30,6 +39,17 @@ const useScrollOverflow = (ref, { enabled = true } = {}) => {
 			setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);
 			setHasMoreScrollLeft(el.scrollLeft > 1);
 			setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+			setScrollbarSize((current) => {
+				const style = getComputedStyle(el);
+				const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+				const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+				const vertical = Math.max(0, el.offsetWidth - el.clientWidth - borderX);
+				const horizontal = Math.max(0, el.offsetHeight - el.clientHeight - borderY);
+				return current.vertical === vertical && current.horizontal === horizontal ? current : {
+					vertical,
+					horizontal
+				};
+			});
 		};
 		update();
 		el.addEventListener("scroll", update, { passive: true });
@@ -50,7 +70,8 @@ const useScrollOverflow = (ref, { enabled = true } = {}) => {
 	return {
 		hasHorizontalOverflow,
 		hasMoreScrollLeft,
-		hasMoreScrollRight
+		hasMoreScrollRight,
+		scrollbarSize
 	};
 };
 //#endregion

package/dist/lib/useScrollOverflow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../lib/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowOptions {\n  /**\n   * When false, the hook short-circuits — no listeners are attached and\n   * both flags stay `false`. Use to opt out when the consumer is in a\n   * fixed-layout / no-overflow mode where overflow detection is wasted\n   * work, or when the scroll container is not yet mounted (e.g. gated\n   * behind conditional render).\n   */\n  enabled?: boolean;\n}\n\n/**\n * Tracks the horizontal-overflow state of a scroll container.\n *\n * - `hasHorizontalOverflow` — true while the content is wider than the box.\n * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the\n *   left edge. Drives the left-edge fade affordance.\n * - `hasMoreScrollRight` — true while the user has not yet scrolled to the\n *   right edge. Drives the right-edge fade affordance.\n *\n * Listens to `scroll` on the element, size changes via `ResizeObserver`,\n * and content changes via `MutationObserver` (child add/remove and text\n * changes within existing descendants).\n */\nexport const useScrollOverflow = (\n  ref: RefObject<HTMLElement>,\n  { enabled = true }: UseScrollOverflowOptions = {},\n) => {\n  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n  const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);\n  const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) {\n      setHasHorizontalOverflow(false);\n      setHasMoreScrollLeft(false);\n      setHasMoreScrollRight(false);\n      return undefined;\n    }\n    const el = ref.current;\n    if (!el) {\n      return undefined;\n    }\n    const update = () => {\n      // 1px tolerance for sub-pixel rounding on fractional layouts.\n      setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);\n      setHasMoreScrollLeft(el.scrollLeft > 1);\n      setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n    };\n    update();\n    el.addEventListener('scroll', update, { passive: true });\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;\n    ro?.observe(el);\n    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(update) : null;\n    mo?.observe(el, { characterData: true, childList: true, subtree: true });\n    return () => {\n      el.removeEventListener('scroll', update);\n      ro?.disconnect();\n      mo?.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight };\n};\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAa,qBACX,KACA,EAAE,UAAU,SAAmC,EAAE,KAC9C;CACH,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CACzE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;AAEnE,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,4BAAyB,MAAM;AAC/B,wBAAqB,MAAM;AAC3B,yBAAsB,MAAM;AAC5B;;EAEF,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GACH;EAEF,MAAM,eAAe;AAEnB,4BAAyB,GAAG,cAAc,GAAG,cAAc,EAAE;AAC7D,wBAAqB,GAAG,aAAa,EAAE;AACvC,yBAAsB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;;AAE5E,UAAQ;AACR,KAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM,CAAC;EACxD,MAAM,KAAK,OAAO,mBAAmB,cAAc,IAAI,eAAe,OAAO,GAAG;AAChF,MAAI,QAAQ,GAAG;EACf,MAAM,KAAK,OAAO,qBAAqB,cAAc,IAAI,iBAAiB,OAAO,GAAG;AACpF,MAAI,QAAQ,IAAI;GAAE,eAAe;GAAM,WAAW;GAAM,SAAS;GAAM,CAAC;AACxE,eAAa;AACX,MAAG,oBAAoB,UAAU,OAAO;AACxC,OAAI,YAAY;AAChB,OAAI,YAAY;;IAEjB,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAO;EAAE;EAAuB;EAAmB;EAAoB"}
+{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../lib/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowOptions {\n  /**\n   * When false, the hook short-circuits — no listeners are attached and\n   * both flags stay `false`. Use to opt out when the consumer is in a\n   * fixed-layout / no-overflow mode where overflow detection is wasted\n   * work, or when the scroll container is not yet mounted (e.g. gated\n   * behind conditional render).\n   */\n  enabled?: boolean;\n}\n\nconst NO_SCROLLBARS = { vertical: 0, horizontal: 0 };\n\n/**\n * Tracks the horizontal-overflow state of a scroll container.\n *\n * - `hasHorizontalOverflow` — true while the content is wider than the box.\n * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the\n *   left edge. Drives the left-edge fade affordance.\n * - `hasMoreScrollRight` — true while the user has not yet scrolled to the\n *   right edge. Drives the right-edge fade affordance.\n * - `scrollbarSize` — space the scrollbars take inside the box, in pixels.\n *   Zero on platforms with overlay scrollbars. Edge affordances inset\n *   themselves by this so they don't cover the scrollbars.\n *\n * Listens to `scroll` on the element, size changes via `ResizeObserver`,\n * and content changes via `MutationObserver` (child add/remove and text\n * changes within existing descendants).\n */\nexport const useScrollOverflow = (\n  ref: RefObject<HTMLElement>,\n  { enabled = true }: UseScrollOverflowOptions = {},\n) => {\n  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n  const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);\n  const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);\n  const [scrollbarSize, setScrollbarSize] = useState(NO_SCROLLBARS);\n\n  useEffect(() => {\n    if (!enabled) {\n      setHasHorizontalOverflow(false);\n      setHasMoreScrollLeft(false);\n      setHasMoreScrollRight(false);\n      setScrollbarSize(NO_SCROLLBARS);\n      return undefined;\n    }\n    const el = ref.current;\n    if (!el) {\n      return undefined;\n    }\n    const update = () => {\n      // 1px tolerance for sub-pixel rounding on fractional layouts.\n      setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);\n      setHasMoreScrollLeft(el.scrollLeft > 1);\n      setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n      setScrollbarSize((current) => {\n        // Borders widen `offsetWidth` past `clientWidth` alongside the\n        // scrollbars, so they have to come back out of the difference.\n        const style = getComputedStyle(el);\n        const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);\n        const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\n        const vertical = Math.max(0, el.offsetWidth - el.clientWidth - borderX);\n        const horizontal = Math.max(0, el.offsetHeight - el.clientHeight - borderY);\n        return current.vertical === vertical && current.horizontal === horizontal\n          ? current\n          : { vertical, horizontal };\n      });\n    };\n    update();\n    el.addEventListener('scroll', update, { passive: true });\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;\n    ro?.observe(el);\n    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(update) : null;\n    mo?.observe(el, { characterData: true, childList: true, subtree: true });\n    return () => {\n      el.removeEventListener('scroll', update);\n      ro?.disconnect();\n      mo?.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight, scrollbarSize };\n};\n"],"mappings":";;AAaA,MAAM,gBAAgB;CAAE,UAAU;CAAG,YAAY;CAAG;;;;;;;;;;;;;;;;;AAkBpD,MAAa,qBACX,KACA,EAAE,UAAU,SAAmC,EAAE,KAC9C;CACH,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CACzE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CACnE,MAAM,CAAC,eAAe,oBAAoB,SAAS,cAAc;AAEjE,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,4BAAyB,MAAM;AAC/B,wBAAqB,MAAM;AAC3B,yBAAsB,MAAM;AAC5B,oBAAiB,cAAc;AAC/B;;EAEF,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GACH;EAEF,MAAM,eAAe;AAEnB,4BAAyB,GAAG,cAAc,GAAG,cAAc,EAAE;AAC7D,wBAAqB,GAAG,aAAa,EAAE;AACvC,yBAAsB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;AAC1E,qBAAkB,YAAY;IAG5B,MAAM,QAAQ,iBAAiB,GAAG;IAClC,MAAM,UAAU,WAAW,MAAM,gBAAgB,GAAG,WAAW,MAAM,iBAAiB;IACtF,MAAM,UAAU,WAAW,MAAM,eAAe,GAAG,WAAW,MAAM,kBAAkB;IACtF,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,cAAc,GAAG,cAAc,QAAQ;IACvE,MAAM,aAAa,KAAK,IAAI,GAAG,GAAG,eAAe,GAAG,eAAe,QAAQ;AAC3E,WAAO,QAAQ,aAAa,YAAY,QAAQ,eAAe,aAC3D,UACA;KAAE;KAAU;KAAY;KAC5B;;AAEJ,UAAQ;AACR,KAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM,CAAC;EACxD,MAAM,KAAK,OAAO,mBAAmB,cAAc,IAAI,eAAe,OAAO,GAAG;AAChF,MAAI,QAAQ,GAAG;EACf,MAAM,KAAK,OAAO,qBAAqB,cAAc,IAAI,iBAAiB,OAAO,GAAG;AACpF,MAAI,QAAQ,IAAI;GAAE,eAAe;GAAM,WAAW;GAAM,SAAS;GAAM,CAAC;AACxE,eAAa;AACX,MAAG,oBAAoB,UAAU,OAAO;AACxC,OAAI,YAAY;AAChB,OAAI,YAAY;;IAEjB,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAO;EAAE;EAAuB;EAAmB;EAAoB;EAAe"}

package/dist/{message-BfJ87aIU.d.mts → message-CMHvlPGn.d.mts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-BfJ87aIU.d.mts.map
+//# sourceMappingURL=message-CMHvlPGn.d.mts.map

package/dist/mixins/focus.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/focus.d.ts

package/dist/mixins/hoverable.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
-import { i as Variant } from "../theme-Bx2sn3Lt.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { i as Variant } from "../theme-BzBpJXhO.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/hoverable.d.ts

package/dist/mixins/input.d.mts

@@ -1,2 +1,2 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-DrG6mA0V.mjs";
+import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-Bv5fKt5J.mjs";
 export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/menuItem.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
-import { i as Variant } from "../theme-Bx2sn3Lt.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { i as Variant } from "../theme-BzBpJXhO.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/menuItem.d.ts

package/dist/mixins/text.d.mts

@@ -1,2 +1,2 @@
-import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-CtoDqqAO.mjs";
+import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-B21s9mRZ.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };