@persona/design-system 0.3.0 → 0.3.1

package/dist/mixins/hoverable.d.mts

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

package/dist/mixins/hoverable.mjs

@@ -1,8 +1,8 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
+import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
 import "../variables/effect.mjs";
-import "../variables/transitions.mjs";
-import { css } from "styled-components";
 //#region mixins/hoverable.ts
 const hoverMixin = css`
   box-shadow:

package/dist/mixins/input.d.mts

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

package/dist/mixins/input.mjs

@@ -1,9 +1,9 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
+import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
-import "../variables/transitions.mjs";
 import { printMixins } from "./print/index.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import { css } from "styled-components";
 //#region mixins/input.ts
 /**
 * Provides input-like hover and focus outline effects. Can also be applied to

package/dist/mixins/menuItem.d.mts

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

package/dist/mixins/menuItem.mjs

@@ -1,6 +1,6 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
 import "../variables/transitions.mjs";
 import { Color } from "@persona/design-tokens";
-import { css } from "styled-components";
 //#region mixins/menuItem.ts
 /**
 * Adds styles for hovered and selected states. For use with dropdowns, menu

package/dist/mixins/print/index.mjs

@@ -1,4 +1,4 @@
-import { css } from "styled-components";
+import { r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 //#region mixins/print/index.ts
 const printMixins = {
 	hide: css`

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-BaQdW8qa.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-xwtyWIbE.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };

package/dist/mixins/text.mjs

@@ -1,5 +1,5 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
 import { Typography } from "@persona/design-tokens";
-import { css } from "styled-components";
 //#region mixins/text.ts
 const fontFamilyMixin = css`
   font-family: ${({ theme }) => theme.text.fontFamily.base};

package/dist/{operators-CmSqHnTH.d.mts → operators-CgcsYzfy.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, l as FilterRule, r as DateRangeFilterValue, s as FilterFieldType, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
+import { a as FilterField, c as FilterOperator, l as FilterRule, r as DateRangeFilterValue, s as FilterFieldType, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/operators.d.ts
 declare function getOperatorsForType(type: FilterFieldType): ReadonlyArray<FilterOperator>;
@@ -61,4 +61,4 @@ declare function emptyValueForRule(field: Pick<FilterField, 'type'>, operator: F
 declare function reconcileValueForOperator(field: Pick<FilterField, 'type'>, nextOperator: FilterOperator, previousOperator: FilterOperator, value: FilterRuleValue): FilterRuleValue;
 //#endregion
 export { getOperatorLabel as a, isCompleteDateRange as c, reconcileValueForOperator as d, withValue as f, getDefaultOperatorForType as i, isRangeOperator as l, emptyValueForRule as n, getOperatorsForField as o, fieldHasMultipleOperators as r, getOperatorsForType as s, emptyValueForFieldType as t, isValuelessOperator as u };
-//# sourceMappingURL=operators-CmSqHnTH.d.mts.map
+//# sourceMappingURL=operators-CgcsYzfy.d.mts.map

package/dist/operators.d.mts

@@ -1,2 +1,2 @@
-import { a as getOperatorLabel, c as isCompleteDateRange, d as reconcileValueForOperator, f as withValue, i as getDefaultOperatorForType, l as isRangeOperator, n as emptyValueForRule, o as getOperatorsForField, r as fieldHasMultipleOperators, s as getOperatorsForType, t as emptyValueForFieldType, u as isValuelessOperator } from "./operators-CmSqHnTH.mjs";
+import { a as getOperatorLabel, c as isCompleteDateRange, d as reconcileValueForOperator, f as withValue, i as getDefaultOperatorForType, l as isRangeOperator, n as emptyValueForRule, o as getOperatorsForField, r as fieldHasMultipleOperators, s as getOperatorsForType, t as emptyValueForFieldType, u as isValuelessOperator } from "./operators-CgcsYzfy.mjs";
 export { emptyValueForFieldType, emptyValueForRule, fieldHasMultipleOperators, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, isCompleteDateRange, isRangeOperator, isValuelessOperator, reconcileValueForOperator, withValue };

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -1,10 +1,10 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-DC2vqicd.mjs";
-import { t as Card_default } from "../../CardV2-B0ZweQYk.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-D1WyUQuv.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-C2IUKhCg.mjs";
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-dsBWRdTU.mjs";
+import { t as Card_default } from "../../CardV2-D3m5EKlp.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-C2pkP5Xg.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-XxGsFLHb.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region patterns/containers.tsx
 const Layout = styled.div`

package/dist/patterns/LayoutLoadingSpinner/index.d.mts

@@ -0,0 +1,2 @@
+import { LayoutLoadingSpinner } from "../../LayoutLoadingSpinner.mjs";
+export { LayoutLoadingSpinner };

package/dist/patterns/LayoutLoadingSpinner/index.mjs

@@ -0,0 +1,56 @@
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { fadeIn, rotate } from "../../variables/keyframes.mjs";
+import { Color } from "@persona/design-tokens";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  animation: ${fadeIn} 1s;
+`;
+const VisuallyHidden = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+`;
+const Ring = styled.svg`
+  display: block;
+  border-radius: 50%;
+  animation: ${rotate} 0.9s linear infinite;
+`;
+const RingStroke = styled.circle`
+  stroke: ${Color.PrimaryPurple};
+  stroke-dasharray: 166;
+  stroke-dashoffset: 110;
+  stroke-linecap: round;
+`;
+/**
+* Centered 120px loading ring that fills its container. Use as the loading state for a page or
+* embedded app when no layout-specific shimmer exists.
+*/
+const LayoutLoadingSpinner = () => /* @__PURE__ */ jsxs(Container, {
+	role: "status",
+	"aria-label": "loading spinner",
+	children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }), /* @__PURE__ */ jsx(Ring, {
+		viewBox: "0 0 52 52",
+		width: 120,
+		height: 120,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(RingStroke, {
+			cx: "26",
+			cy: "26",
+			r: "25",
+			fill: "none"
+		})
+	})]
+});
+//#endregion
+export { LayoutLoadingSpinner };
+
+//# sourceMappingURL=index.mjs.map

package/dist/patterns/LayoutLoadingSpinner/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { fadeIn, rotate } from 'design-system/variables/keyframes';\n\nconst Container = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  animation: ${fadeIn} 1s;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst Ring = styled.svg`\n  display: block;\n  border-radius: 50%;\n  animation: ${rotate} 0.9s linear infinite;\n`;\n\nconst RingStroke = styled.circle`\n  stroke: ${Color.PrimaryPurple};\n  stroke-dasharray: 166;\n  stroke-dashoffset: 110;\n  stroke-linecap: round;\n`;\n\n/**\n * Centered 120px loading ring that fills its container. Use as the loading state for a page or\n * embedded app when no layout-specific shimmer exists.\n */\nexport const LayoutLoadingSpinner = () => (\n  <Container role='status' aria-label='loading spinner'>\n    <VisuallyHidden>Loading...</VisuallyHidden>\n    <Ring viewBox='0 0 52 52' width={120} height={120} aria-hidden='true'>\n      <RingStroke cx='26' cy='26' r='25' fill='none' />\n    </Ring>\n  </Container>\n);\n"],"mappings":";;;;;AAKA,MAAM,YAAY,OAAO,GAAG;;;;;;eAMb,OAAO;;AAGtB,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,OAAO,OAAO,GAAG;;;eAGR,OAAO;;AAGtB,MAAM,aAAa,OAAO,MAAM;YACpB,MAAM,cAAc;;;;;;;;;AAUhC,MAAa,6BACX,qBAAC,WAAD;CAAW,MAAK;CAAS,cAAW;WAApC,CACE,oBAAC,gBAAD,EAAA,UAAgB,cAA2B,CAAA,EAC3C,oBAAC,MAAD;EAAM,SAAQ;EAAY,OAAO;EAAK,QAAQ;EAAK,eAAY;YAC7D,oBAAC,YAAD;GAAY,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,MAAK;GAAS,CAAA;EAC5C,CAAA,CACG"}

package/dist/patterns/PageLayout/index.mjs

@@ -1,5 +1,5 @@
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
 //#region patterns/PageLayout/PageLayout.tsx
 const Backdrop = styled.div`

package/dist/styledComponentsInterop-8zScIQyC.mjs

@@ -0,0 +1,33 @@
+import * as namespace from "styled-components";
+//#region lib/styledComponentsInterop.ts
+/**
+* `styled-components` with its default export normalized across module systems.
+*
+* styled-components@5 ships no `exports` map, so a bundler (Vite/rollup) resolves the bare
+* specifier to the ESM build while Node resolves it to the CJS build. Under Node's CJS→ESM interop
+* the ESM `default` binding is the whole `module.exports` object, so `import styled from
+* 'styled-components'` yields the namespace and `styled.button` is undefined. That is what happens
+* when a consumer's Vitest run loads `@persona/design-system/dist/**` from `node_modules` without
+* inlining it. The tsdown build (see `tsdown.config.ts`) redirects every `styled-components`
+* import in the emitted bundle to this module; source files keep importing `styled-components`
+* directly so `babel-plugin-styled-components` still sees them in the monolith.
+*/
+const isCjsModuleExports = (value) => typeof value === "object" && value != null && "default" in value;
+/**
+* Returns the module with `default` pointing at the real `styled` factory, whichever build Node or
+* the bundler resolved. Exported for the spec; runtime callers use the re-exports below.
+*/
+const normalizeStyledComponents = (mod) => {
+	if (mod.default != null && isCjsModuleExports(mod.default)) return {
+		...mod.default,
+		default: mod.default.default ?? mod.default
+	};
+	return mod;
+};
+const resolved = normalizeStyledComponents(namespace);
+const styled = resolved.default;
+const { ServerStyleSheet, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, css, isStyledComponent, keyframes, useTheme, withTheme } = resolved;
+//#endregion
+export { styled as a, keyframes as i, createGlobalStyle as n, css as r, ThemeProvider as t };
+
+//# sourceMappingURL=styledComponentsInterop-8zScIQyC.mjs.map

package/dist/styledComponentsInterop-8zScIQyC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledComponentsInterop-8zScIQyC.mjs","names":[],"sources":["../lib/styledComponentsInterop.ts"],"sourcesContent":["/**\n * `styled-components` with its default export normalized across module systems.\n *\n * styled-components@5 ships no `exports` map, so a bundler (Vite/rollup) resolves the bare\n * specifier to the ESM build while Node resolves it to the CJS build. Under Node's CJS→ESM interop\n * the ESM `default` binding is the whole `module.exports` object, so `import styled from\n * 'styled-components'` yields the namespace and `styled.button` is undefined. That is what happens\n * when a consumer's Vitest run loads `@persona/design-system/dist/**` from `node_modules` without\n * inlining it. The tsdown build (see `tsdown.config.ts`) redirects every `styled-components`\n * import in the emitted bundle to this module; source files keep importing `styled-components`\n * directly so `babel-plugin-styled-components` still sees them in the monolith.\n */\nimport * as namespace from 'styled-components';\n\ntype StyledComponents = typeof import('styled-components');\ntype StyledDefault = StyledComponents['default'];\n\ntype CjsModuleExports = StyledComponents & { default?: StyledDefault };\n\ninterface InteropNamespace {\n  default?: StyledDefault | CjsModuleExports;\n}\n\nconst isCjsModuleExports = (value: InteropNamespace['default']): value is CjsModuleExports =>\n  typeof value === 'object' && value != null && 'default' in value;\n\n/**\n * Returns the module with `default` pointing at the real `styled` factory, whichever build Node or\n * the bundler resolved. Exported for the spec; runtime callers use the re-exports below.\n */\nexport const normalizeStyledComponents = (mod: InteropNamespace): StyledComponents => {\n  if (mod.default != null && isCjsModuleExports(mod.default)) {\n    return {\n      ...mod.default,\n      default: mod.default.default ?? (mod.default as unknown as StyledDefault),\n    };\n  }\n  return mod as unknown as StyledComponents;\n};\n\nconst resolved = normalizeStyledComponents(namespace as unknown as InteropNamespace);\n\nconst styled: StyledDefault = resolved.default;\n\nexport default styled;\nexport const {\n  ServerStyleSheet,\n  StyleSheetManager,\n  ThemeConsumer,\n  ThemeContext,\n  ThemeProvider,\n  createGlobalStyle,\n  css,\n  isStyledComponent,\n  keyframes,\n  useTheme,\n  withTheme,\n} = resolved;\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB,UAC1B,OAAO,UAAU,YAAY,SAAS,QAAQ,aAAa;;;;;AAM7D,MAAa,6BAA6B,QAA4C;AACpF,KAAI,IAAI,WAAW,QAAQ,mBAAmB,IAAI,QAAQ,CACxD,QAAO;EACL,GAAG,IAAI;EACP,SAAS,IAAI,QAAQ,WAAY,IAAI;EACtC;AAEH,QAAO;;AAGT,MAAM,WAAW,0BAA0B,UAAyC;AAEpF,MAAM,SAAwB,SAAS;AAGvC,MAAa,EACX,kBACA,mBACA,eACA,cACA,eACA,mBACA,KACA,mBACA,WACA,UACA,cACE"}

package/dist/{text-BaQdW8qa.d.mts → text-xwtyWIbE.d.mts}

@@ -11,4 +11,4 @@ type ParagraphSize = 'lg' | 'md' | 'sm' | 'xs';
 declare const paragraphMixins: Record<ParagraphMixinSize, FlattenInterpolation<ThemeProps<DefaultTheme>>>;
 //#endregion
 export { displayMixins as a, paragraphMixins as c, ParagraphSize as i, HeadingSize as n, fontFamilyMixin as o, ParagraphMixinSize as r, headingMixins as s, DisplaySize as t };
-//# sourceMappingURL=text-BaQdW8qa.d.mts.map
+//# sourceMappingURL=text-xwtyWIbE.d.mts.map

package/dist/{theme-D9Y6NOzb.d.mts → theme-Ftogn9Wo.d.mts}

@@ -151,4 +151,4 @@ declare const darkTheme: PersonaTheme;
 declare const marketingFontTheme: PersonaTheme;
 //#endregion
 export { darkTheme as a, Variant as i, PersonaTheme as n, defaultTheme as o, TextColors as r, marketingFontTheme as s, BackgroundColors as t };
-//# sourceMappingURL=theme-D9Y6NOzb.d.mts.map
+//# sourceMappingURL=theme-Ftogn9Wo.d.mts.map

package/dist/theme.d.mts

@@ -1,2 +1,2 @@
-import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-D9Y6NOzb.mjs";
+import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-Ftogn9Wo.mjs";
 export { BackgroundColors, PersonaTheme, TextColors, Variant, darkTheme, defaultTheme as default, marketingFontTheme };

package/dist/{types-DEh_pXgS.d.mts → types-0_9G0kWg.d.mts}

@@ -2,6 +2,8 @@
 interface AttributeColumn {
   key: string;
   label: string;
+  /** Presentation-only; never persisted into a saved view. */
+  isCustomField?: boolean;
 }
 interface BaseFilterConfig {
   id: string;
@@ -22,4 +24,4 @@ interface BaseActiveFilter<TFilter extends BaseFilterConfig = BaseFilterConfig>
 }
 //#endregion
 export { BaseActiveFilter as n, BaseFilterConfig as r, AttributeColumn as t };
-//# sourceMappingURL=types-DEh_pXgS.d.mts.map
+//# sourceMappingURL=types-0_9G0kWg.d.mts.map

package/dist/{types-NJtAxsU1.d.mts → types-BrNreYUU.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
+import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
 import { ReactElement } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/types.d.ts
@@ -42,4 +42,4 @@ interface ValueControlProps {
 }
 //#endregion
 export { ValueControlProps as t };
-//# sourceMappingURL=types-NJtAxsU1.d.mts.map
+//# sourceMappingURL=types-BrNreYUU.d.mts.map

package/dist/{types-C-TkDdkG.d.mts → types-D55MZSyx.d.mts}

@@ -157,4 +157,4 @@ type FilterSize = 'sm' | 'md';
 declare const EMPTY_FILTER_STATE: FilterStateV2;
 //#endregion
 export { FilterField as a, FilterOperator as c, FilterSize as d, FilterStateV2 as f, EMPTY_FILTER_STATE as i, FilterRule as l, CompoundExpression as n, FilterFieldSource as o, TopLevelFilterRule as p, DateRangeFilterValue as r, FilterFieldType as s, AndGroup as t, FilterRuleValue as u };
-//# sourceMappingURL=types-C-TkDdkG.d.mts.map
+//# sourceMappingURL=types-D55MZSyx.d.mts.map

package/dist/{types-TV9nVfSe.d.mts → types-DVsBRqjZ.d.mts}

@@ -7,4 +7,4 @@ interface PaginationParams {
 }
 //#endregion
 export { PaginationParams as t };
-//# sourceMappingURL=types-TV9nVfSe.d.mts.map
+//# sourceMappingURL=types-DVsBRqjZ.d.mts.map

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-DEh_pXgS.mjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-0_9G0kWg.mjs";
 export { AttributeColumn, BaseActiveFilter, BaseFilterConfig };

package/dist/types2.d.mts

@@ -1,2 +1,2 @@
-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-C-TkDdkG.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
 export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, TopLevelFilterRule };

package/dist/types3.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-NJtAxsU1.mjs";
+import { t as ValueControlProps } from "./types-BrNreYUU.mjs";
 export { ValueControlProps };

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
+import { t as PaginationParams } from "./types-DVsBRqjZ.mjs";
 export { PaginationParams };

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-DJGTMf1_.mjs";
+import { p as FooterAction } from "./ComboboxBase-CWzN8GML.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-C4itmN4S.d.mts → useFilterStateV2-D8Q8QKhS.d.mts}

@@ -1,5 +1,5 @@
-import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-C-TkDdkG.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DdA63Vnh.mjs";
+import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-D55MZSyx.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D1vghSC_.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
 interface UseFilterStateV2Options {
@@ -90,4 +90,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-C4itmN4S.d.mts.map
+//# sourceMappingURL=useFilterStateV2-D8Q8QKhS.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-C4itmN4S.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-D8Q8QKhS.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };

package/dist/{useFormField-B2U4GOH4.d.mts → useFormField-BBbq1izo.d.mts}

@@ -1,4 +1,4 @@
-import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
+import { t as ErrorProps } from "./ErrorProps-DX50vo-U.mjs";
 import * as _$react from "react";
 
 //#region components/FormControl/useFormField.d.ts
@@ -27,4 +27,4 @@ declare const useFormField: (props: Partial<FormControlContextProps>) => {
 };
 //#endregion
 export { FormControlContextProps as n, useFormField as r, FormControlContext as t };
-//# sourceMappingURL=useFormField-B2U4GOH4.d.mts.map
+//# sourceMappingURL=useFormField-BBbq1izo.d.mts.map

package/dist/{useFormField-eftOPiXj.mjs → useFormField-Bz2iMPBO.mjs}

@@ -1,4 +1,4 @@
-import { n as useFormGroup } from "./useFormGroup-BMukAMAd.mjs";
+import { n as useFormGroup } from "./useFormGroup-CaTiD_Yt.mjs";
 import { createContext, useContext } from "react";
 //#region components/FormControl/useFormField.ts
 const FormControlContext = createContext({});
@@ -22,4 +22,4 @@ const useFormField = (props) => {
 //#endregion
 export { useFormField as n, FormControlContext as t };
 
-//# sourceMappingURL=useFormField-eftOPiXj.mjs.map
+//# sourceMappingURL=useFormField-Bz2iMPBO.mjs.map

package/dist/{useFormField-eftOPiXj.mjs.map → useFormField-Bz2iMPBO.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormField-eftOPiXj.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}
+{"version":3,"file":"useFormField-Bz2iMPBO.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}

package/dist/useFormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-B2U4GOH4.mjs";
+import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-BBbq1izo.mjs";
 export { FormControlContext, FormControlContextProps, useFormField as default };

package/dist/{useFormGroup-BMukAMAd.mjs → useFormGroup-CaTiD_Yt.mjs}

@@ -11,4 +11,4 @@ const useFormGroup = (props) => {
 //#endregion
 export { useFormGroup as n, FormGroupContext as t };
 
-//# sourceMappingURL=useFormGroup-BMukAMAd.mjs.map
+//# sourceMappingURL=useFormGroup-CaTiD_Yt.mjs.map

package/dist/{useFormGroup-BMukAMAd.mjs.map → useFormGroup-CaTiD_Yt.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormGroup-BMukAMAd.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}
+{"version":3,"file":"useFormGroup-CaTiD_Yt.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}

package/dist/{useTableBoxDragAndDrop-CpemHLhL.d.mts → useTableBoxDragAndDrop-Bye8gJTl.d.mts}

@@ -66,4 +66,4 @@ declare const useTableBoxDragAndDrop: <T extends object>({
 }: UseTableBoxDragAndDropArgs<T>) => UseTableBoxDragAndDropResult;
 //#endregion
 export { ReorderConfig as n, useTableBoxDragAndDrop as r, DragDirection as t };
-//# sourceMappingURL=useTableBoxDragAndDrop-CpemHLhL.d.mts.map
+//# sourceMappingURL=useTableBoxDragAndDrop-Bye8gJTl.d.mts.map

package/dist/useTableBoxDragAndDrop.d.mts

@@ -1,2 +1,2 @@
-import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-CpemHLhL.mjs";
+import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-Bye8gJTl.mjs";
 export { DragDirection, ReorderConfig, useTableBoxDragAndDrop };

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-DJGTMf1_.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-CWzN8GML.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/dist/{utilities-DnSIlR1i.d.mts → utilities-Bmwk_DRn.d.mts}

@@ -6,4 +6,4 @@
 type RequireOneOf<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
 //#endregion
 export { RequireOneOf as t };
-//# sourceMappingURL=utilities-DnSIlR1i.d.mts.map
+//# sourceMappingURL=utilities-Bmwk_DRn.d.mts.map

package/dist/utilities.d.mts

@@ -1,2 +1,2 @@
-import { t as RequireOneOf } from "./utilities-DnSIlR1i.mjs";
+import { t as RequireOneOf } from "./utilities-Bmwk_DRn.mjs";
 export { RequireOneOf };

package/dist/utils/storybook.mjs

@@ -1,4 +1,4 @@
-import { n as Stack } from "../Stack-Bl54WmhY.mjs";
+import { n as Stack } from "../Stack-Bre2oiov.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region utils/storybook.tsx
 const withStack = (Story) => {

package/dist/utils/testing.d.mts

@@ -1,6 +1,6 @@
+import { ReactElement } from "react";
 import * as _$_testing_library_react0 from "@testing-library/react";
 import { RenderOptions, screen } from "@testing-library/react";
-import { ReactElement } from "react";
 import * as _$_testing_library_dom_types_queries0 from "@testing-library/dom/types/queries";
 
 //#region utils/testing.d.ts

package/dist/utils/testing.mjs

@@ -1,7 +1,7 @@
 import PDSProvider from "../lib/PDSProvider.mjs";
+import { RouterProvider } from "react-aria-components";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
-import { RouterProvider } from "react-aria-components";
 import { RouterProvider as RouterProvider$1, createMemoryRouter } from "react-router-dom";
 //#region utils/testing.tsx
 const AllTheProviders = ({ children, includeRouter = false }) => {

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
+import { u as FilterRuleValue } from "./types-D55MZSyx.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/utils.d.ts
 /**

package/dist/utils2.d.mts

@@ -4,6 +4,17 @@
  * at startIndex with the one at endIndex
  */
 declare function reorder<A>(list: A[], startIndex: number, endIndex: number): A[];
+/**
+ * Translates a drag result into indices into the full list. dnd reports positions among the
+ * rendered rows, which diverge from the full list as soon as the view is filtered.
+ *
+ * Returns null when either end cannot be resolved, in which case the drag should be ignored
+ * rather than applied at the wrong position.
+ */
+declare function resolveDragIndices(listKeys: string[], renderedKeys: string[], draggableId: string, destinationIndex: number): {
+  from: number;
+  to: number;
+} | null;
 //#endregion
-export { reorder };
+export { reorder, resolveDragIndices };
 //# sourceMappingURL=utils2.d.mts.map

package/dist/{validation-B5IXsdkE.d.mts → validation-CAtTuHO9.d.mts}

@@ -1,5 +1,5 @@
-import { f as FilterStateV2, l as FilterRule } from "./types-C-TkDdkG.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DdA63Vnh.mjs";
+import { f as FilterStateV2, l as FilterRule } from "./types-D55MZSyx.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D1vghSC_.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/validation.d.ts
 /**
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
 declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
 //#endregion
 export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
-//# sourceMappingURL=validation-B5IXsdkE.d.mts.map
+//# sourceMappingURL=validation-CAtTuHO9.d.mts.map

package/dist/validation.d.mts

@@ -1,2 +1,2 @@
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-B5IXsdkE.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-CAtTuHO9.mjs";
 export { hasCompleteValue, isFilterStateV2, pruneToRegistry };

package/dist/{value-control-resolver-BPlTeIX7.d.mts → value-control-resolver-DadI8r9a.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
+import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-D55MZSyx.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -43,4 +43,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
 declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-BPlTeIX7.d.mts.map
+//# sourceMappingURL=value-control-resolver-DadI8r9a.d.mts.map

package/dist/value-control-resolver.d.mts

@@ -1,2 +1,2 @@
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-BPlTeIX7.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-DadI8r9a.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/dist/variables/keyframes.mjs

@@ -1,4 +1,4 @@
-import { keyframes } from "styled-components";
+import { i as keyframes } from "../styledComponentsInterop-8zScIQyC.mjs";
 //#region variables/keyframes.ts
 const rotate = keyframes`
   100% {

package/llms.txt

@@ -13,10 +13,10 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 
 ## Skills
 
-- [ui-authoring](skills/ui-authoring/SKILL.md): component-first table (which component for which need), design tokens, table guidelines (DataTable vs TableBox vs TableLayout), loading/empty states, forms, testing, Storybook, charts
-- [Components reference](skills/ui-authoring/COMPONENTS.md): props + patterns for ConfigFormGroup, ListBox, TableBox, Card, Modal, form state hook
-- [Examples](skills/ui-authoring/EXAMPLES.md): copy-paste patterns (Buttons, Forms, Modals, DataTable, TabBar, Tooltip, Spinner, Banner, Sticker, Stack, Text)
-- [Token reference](skills/ui-authoring/REFERENCE.md): full Color / Spacing / Typography catalog
+- [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), loading states, testing, Storybook
+- [Tokens](skills/ui-authoring/TOKENS.md): Color / Spacing / Typography selection and catalog, radius, charts
+- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts
+- [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
 
 ## Imports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -102,6 +102,7 @@
     "./mixins/print": "./dist/mixins/print/index.mjs",
     "./mixins/text": "./dist/mixins/text.mjs",
     "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
+    "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
     "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
     "./theme": "./dist/theme.mjs",
     "./utils/storybook": "./dist/utils/storybook.mjs",
@@ -115,7 +116,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsdown && node scripts/assert-no-node-imports.mjs",
+    "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs",
     "release": "scripts/release.sh --dry-run",
     "release:tag": "scripts/tag.sh",
     "skills:validate": "intent validate skills",
@@ -286,6 +287,7 @@
       "./mixins/print": "./dist/mixins/print/index.mjs",
       "./mixins/text": "./dist/mixins/text.mjs",
       "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
+      "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
       "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
       "./theme": "./dist/theme.mjs",
       "./utils/storybook": "./dist/utils/storybook.mjs",