@persona/design-system 0.1.6 → 0.1.8

package/dist/TableControls.d.cts

@@ -1,2 +1,2 @@
-import { n as TableControlsProps, t as TableControls } from "./TableControls-BG0OKwjj.cjs";
+import { n as TableControlsProps, t as TableControls } from "./TableControls-CLNF0AJG.cjs";
 export { TableControlsProps, TableControls as default };

package/dist/TableControls.d.mts

@@ -1,2 +1,2 @@
-import { n as TableControlsProps, t as TableControls } from "./TableControls-B4gpAvl7.mjs";
+import { n as TableControlsProps, t as TableControls } from "./TableControls-BehR7CKS.mjs";
 export { TableControlsProps, TableControls as default };

package/dist/{TableControlsContext-NdzzGevw.d.mts → TableControlsContext-DAZx6Rrj.d.cts}

@@ -1,4 +1,4 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-ChCqSD9N.mjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-SYSKcZKW.cjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 
@@ -18,4 +18,4 @@ declare function TableControlsProvider<TFilter extends BaseFilterConfig = BaseFi
 }): _$react.FunctionComponentElement<_$react.ProviderProps<TableControlsContextProps<BaseFilterConfig, BaseActiveFilter<BaseFilterConfig>>>>;
 //#endregion
 export { useTableControls as i, TableControlsContextProps as n, TableControlsProvider as r, TableControlsContext as t };
-//# sourceMappingURL=TableControlsContext-NdzzGevw.d.mts.map
+//# sourceMappingURL=TableControlsContext-DAZx6Rrj.d.cts.map

package/dist/{TableControlsContext-CanIAaLW.d.cts → TableControlsContext-D_SBFZN1.d.mts}

@@ -1,4 +1,4 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-BG21GgBe.cjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-DEh_pXgS.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 
@@ -18,4 +18,4 @@ declare function TableControlsProvider<TFilter extends BaseFilterConfig = BaseFi
 }): _$react.FunctionComponentElement<_$react.ProviderProps<TableControlsContextProps<BaseFilterConfig, BaseActiveFilter<BaseFilterConfig>>>>;
 //#endregion
 export { useTableControls as i, TableControlsContextProps as n, TableControlsProvider as r, TableControlsContext as t };
-//# sourceMappingURL=TableControlsContext-CanIAaLW.d.cts.map
+//# sourceMappingURL=TableControlsContext-D_SBFZN1.d.mts.map

package/dist/TableControlsContext.d.cts

@@ -1,2 +1,2 @@
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-CanIAaLW.cjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-DAZx6Rrj.cjs";
 export { TableControlsContextProps, TableControlsProvider, TableControlsContext as default, useTableControls };

package/dist/TableControlsContext.d.mts

@@ -1,2 +1,2 @@
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-NdzzGevw.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-D_SBFZN1.mjs";
 export { TableControlsContextProps, TableControlsProvider, TableControlsContext as default, useTableControls };

package/dist/{TableHead-CuHNOeCj.d.mts → TableHead-Ch4Ho3LW.d.cts}

@@ -9,4 +9,4 @@ declare const TableHead: _$styled_components0.StyledComponent<"thead", any, {
 } & TableHeadProps, "role">;
 //#endregion
 export { TableHead as t };
-//# sourceMappingURL=TableHead-CuHNOeCj.d.mts.map
+//# sourceMappingURL=TableHead-Ch4Ho3LW.d.cts.map

package/dist/{TableHead-roexW17v.d.cts → TableHead-LxvG0e9k.d.mts}

@@ -9,4 +9,4 @@ declare const TableHead: _$styled_components0.StyledComponent<"thead", any, {
 } & TableHeadProps, "role">;
 //#endregion
 export { TableHead as t };
-//# sourceMappingURL=TableHead-roexW17v.d.cts.map
+//# sourceMappingURL=TableHead-LxvG0e9k.d.mts.map

package/dist/TableHead.d.cts

@@ -1,2 +1,2 @@
-import { t as TableHead } from "./TableHead-roexW17v.cjs";
+import { t as TableHead } from "./TableHead-Ch4Ho3LW.cjs";
 export = TableHead;

package/dist/TableHead.d.mts

@@ -1,2 +1,2 @@
-import { t as TableHead } from "./TableHead-CuHNOeCj.mjs";
+import { t as TableHead } from "./TableHead-LxvG0e9k.mjs";
 export { TableHead as default };

package/dist/{TableHeaderCell-Cflho9R2.d.mts → TableHeaderCell-Br8ZE3Xe.d.mts}

@@ -14,4 +14,4 @@ interface TableIconContainerProps {
 declare const TableHeaderCell: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & TableHeaderCellProps & TableIconContainerProps & _$react.RefAttributes<HTMLTableCellElement>>;
 //#endregion
 export { TableHeaderCell as t };
-//# sourceMappingURL=TableHeaderCell-Cflho9R2.d.mts.map
+//# sourceMappingURL=TableHeaderCell-Br8ZE3Xe.d.mts.map

package/dist/{TableHeaderCell-BTGuqVXy.d.cts → TableHeaderCell-Crsa2R2g.d.cts}

@@ -14,4 +14,4 @@ interface TableIconContainerProps {
 declare const TableHeaderCell: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & TableHeaderCellProps & TableIconContainerProps & _$react.RefAttributes<HTMLTableCellElement>>;
 //#endregion
 export { TableHeaderCell as t };
-//# sourceMappingURL=TableHeaderCell-BTGuqVXy.d.cts.map
+//# sourceMappingURL=TableHeaderCell-Crsa2R2g.d.cts.map

package/dist/TableHeaderCell.d.cts

@@ -1,2 +1,2 @@
-import { t as TableHeaderCell } from "./TableHeaderCell-BTGuqVXy.cjs";
+import { t as TableHeaderCell } from "./TableHeaderCell-Crsa2R2g.cjs";
 export = TableHeaderCell;

package/dist/TableHeaderCell.d.mts

@@ -1,2 +1,2 @@
-import { t as TableHeaderCell } from "./TableHeaderCell-Cflho9R2.mjs";
+import { t as TableHeaderCell } from "./TableHeaderCell-Br8ZE3Xe.mjs";
 export { TableHeaderCell as default };

package/dist/{TableLayout-BvVsuUVb.d.cts → TableLayout-Ct0kepcA.d.cts}

@@ -16,4 +16,4 @@ interface TableLayoutProps {
 declare const TableLayout: FC<PropsWithChildren<TableLayoutProps>>;
 //#endregion
 export { TableLayout as t };
-//# sourceMappingURL=TableLayout-BvVsuUVb.d.cts.map
+//# sourceMappingURL=TableLayout-Ct0kepcA.d.cts.map

package/dist/{TableLayout-D9BGrjRs.d.mts → TableLayout-nwy094C_.d.mts}

@@ -16,4 +16,4 @@ interface TableLayoutProps {
 declare const TableLayout: FC<PropsWithChildren<TableLayoutProps>>;
 //#endregion
 export { TableLayout as t };
-//# sourceMappingURL=TableLayout-D9BGrjRs.d.mts.map
+//# sourceMappingURL=TableLayout-nwy094C_.d.mts.map

package/dist/TableLayout.d.cts

@@ -1,2 +1,2 @@
-import { t as TableLayout } from "./TableLayout-BvVsuUVb.cjs";
+import { t as TableLayout } from "./TableLayout-Ct0kepcA.cjs";
 export = TableLayout;

package/dist/TableLayout.d.mts

@@ -1,2 +1,2 @@
-import { t as TableLayout } from "./TableLayout-D9BGrjRs.mjs";
+import { t as TableLayout } from "./TableLayout-nwy094C_.mjs";
 export { TableLayout as default };

package/dist/{TableRow-CjQmDmfx.d.mts → TableRow-BvS4yjo6.d.mts}

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "./PseudoClassProps--MiDp2l2.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region components/Table/TableRow.d.ts
@@ -10,4 +10,4 @@ declare const TableRow: _$styled_components0.StyledComponent<"tr", any, {
 } & TableRowProps, "role">;
 //#endregion
 export { TableRowProps as n, TableRow as t };
-//# sourceMappingURL=TableRow-CjQmDmfx.d.mts.map
+//# sourceMappingURL=TableRow-BvS4yjo6.d.mts.map

package/dist/{TableRow-BfGJSGZH.d.cts → TableRow-DVTPqT4w.d.cts}

@@ -10,4 +10,4 @@ declare const TableRow: _$styled_components0.StyledComponent<"tr", any, {
 } & TableRowProps, "role">;
 //#endregion
 export { TableRowProps as n, TableRow as t };
-//# sourceMappingURL=TableRow-BfGJSGZH.d.cts.map
+//# sourceMappingURL=TableRow-DVTPqT4w.d.cts.map

package/dist/TableRow.d.cts

@@ -1,2 +1,2 @@
-import { n as TableRowProps, t as TableRow } from "./TableRow-BfGJSGZH.cjs";
+import { n as TableRowProps, t as TableRow } from "./TableRow-DVTPqT4w.cjs";
 export { TableRowProps, TableRow as default };

package/dist/TableRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableRowProps, t as TableRow } from "./TableRow-CjQmDmfx.mjs";
+import { n as TableRowProps, t as TableRow } from "./TableRow-BvS4yjo6.mjs";
 export { TableRowProps, TableRow as default };

package/dist/TableTH.d.cts

@@ -1,2 +1,2 @@
-import { d as TableTHProps, u as TableTH } from "./index-Bp3vEph6.cjs";
+import { d as TableTHProps, u as TableTH } from "./index-Bw8QVu_o.cjs";
 export { TableTHProps, TableTH as default };

package/dist/TableTH.d.mts

@@ -1,2 +1,2 @@
-import { d as TableTHProps, u as TableTH } from "./index-BwWgmaXZ.mjs";
+import { d as TableTHProps, u as TableTH } from "./index-DDbjWdk0.mjs";
 export { TableTHProps, TableTH as default };

package/dist/{TableViewConfigurationDropdown-DMeFkVUa.d.mts → TableViewConfigurationDropdown-BYPh4dIP.d.mts}

@@ -1,4 +1,4 @@
-import { t as AttributeColumn } from "./types-ChCqSD9N.mjs";
+import { t as AttributeColumn } from "./types-DEh_pXgS.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/TableViewConfigurationDropdown.d.ts
@@ -29,4 +29,4 @@ declare const TableViewConfiguration: ({
 }: TableViewConfigurationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableViewConfigurationProps as i, TableViewConfigurationDropdown as n, TableViewConfigurationDropdownProps as r, TableViewConfiguration as t };
-//# sourceMappingURL=TableViewConfigurationDropdown-DMeFkVUa.d.mts.map
+//# sourceMappingURL=TableViewConfigurationDropdown-BYPh4dIP.d.mts.map

package/dist/{TableViewConfigurationDropdown-BaQ1IsYM.d.cts → TableViewConfigurationDropdown-CaiOGyrU.d.cts}

@@ -1,4 +1,4 @@
-import { t as AttributeColumn } from "./types-BG21GgBe.cjs";
+import { t as AttributeColumn } from "./types-SYSKcZKW.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 
 //#region components/DataTable/TableControls/TableViewConfigurationDropdown.d.ts
@@ -29,4 +29,4 @@ declare const TableViewConfiguration: ({
 }: TableViewConfigurationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableViewConfigurationProps as i, TableViewConfigurationDropdown as n, TableViewConfigurationDropdownProps as r, TableViewConfiguration as t };
-//# sourceMappingURL=TableViewConfigurationDropdown-BaQ1IsYM.d.cts.map
+//# sourceMappingURL=TableViewConfigurationDropdown-CaiOGyrU.d.cts.map

package/dist/TableViewConfigurationDropdown.d.cts

@@ -1,2 +1,2 @@
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-BaQ1IsYM.cjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-CaiOGyrU.cjs";
 export { TableViewConfiguration, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableViewConfigurationDropdown as default };

package/dist/TableViewConfigurationDropdown.d.mts

@@ -1,2 +1,2 @@
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-DMeFkVUa.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-BYPh4dIP.mjs";
 export { TableViewConfiguration, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableViewConfigurationDropdown as default };

package/dist/TechnicalSticker.d.mts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
 
 //#region components/TechnicalSticker/TechnicalSticker.d.ts
 type TechnicalStickerVariant = 'grey' | 'white';

package/dist/{Text-CPd0r0w2.d.mts → Text-DNPbAuUG.d.mts}

@@ -1,5 +1,5 @@
-import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-BEKhEWTa.mjs";
-import { r as TextColors } from "./theme-q9fNLtcA.mjs";
+import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-B21s9mRZ.mjs";
+import { r as TextColors } from "./theme-BzBpJXhO.mjs";
 import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from "react";
 
@@ -39,4 +39,4 @@ declare const Label: _$styled_components0.StyledComponent<FC<PropsWithChildren<S
 declare const TabularNumber: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps, never>;
 //#endregion
 export { Label as a, ParagraphProps as c, TabularNumber as d, HeadingProps as i, Span as l, DisplayProps as n, LabelProps as o, Heading as r, Paragraph as s, Display as t, SpanProps as u };
-//# sourceMappingURL=Text-CPd0r0w2.d.mts.map
+//# sourceMappingURL=Text-DNPbAuUG.d.mts.map

package/dist/{Text-CzN0DOXV.cjs → Text-G9QmYf0P.cjs}

@@ -92,4 +92,4 @@ Object.defineProperty(exports, "TabularNumber", {
 	}
 });
 
-//# sourceMappingURL=Text-CzN0DOXV.cjs.map
+//# sourceMappingURL=Text-G9QmYf0P.cjs.map

package/dist/{Text-CzN0DOXV.cjs.map → Text-G9QmYf0P.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Text-CzN0DOXV.cjs","names":["fontFamilyMixin","displayMixins","headingMixins","paragraphMixins"],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,iBAAA,GAAA,kBAAA,KAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,CAAA,GAAA,kBAAA,SAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/FA,oBAAAA,gBAAgB;;AAOpB,MAAa,UAAU,CAAA,GAAA,kBAAA,SAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAWC,oBAAAA,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,CAAA,GAAA,kBAAA,SAAO,KAAK;KAChC,EAAE,WAAWC,oBAAAA,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,CAAA,GAAA,kBAAA,SAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAOC,oBAAAA,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAOA,oBAAAA,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,CAAA,GAAA,kBAAA,SAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,CAAA,GAAA,kBAAA,SAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}
+{"version":3,"file":"Text-G9QmYf0P.cjs","names":["fontFamilyMixin","displayMixins","headingMixins","paragraphMixins"],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,iBAAA,GAAA,kBAAA,KAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,CAAA,GAAA,kBAAA,SAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/FA,oBAAAA,gBAAgB;;AAOpB,MAAa,UAAU,CAAA,GAAA,kBAAA,SAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAWC,oBAAAA,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,CAAA,GAAA,kBAAA,SAAO,KAAK;KAChC,EAAE,WAAWC,oBAAAA,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,CAAA,GAAA,kBAAA,SAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAOC,oBAAAA,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAOA,oBAAAA,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,CAAA,GAAA,kBAAA,SAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,CAAA,GAAA,kBAAA,SAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}

package/dist/{Text-hEoPeOc9.mjs → Text-RcEfNFLx.mjs}

@@ -55,4 +55,4 @@ const TabularNumber = styled(Paragraph)`
 //#endregion
 export { Span as a, Paragraph as i, Heading as n, TabularNumber as o, Label as r, Display as t };
 
-//# sourceMappingURL=Text-hEoPeOc9.mjs.map
+//# sourceMappingURL=Text-RcEfNFLx.mjs.map

package/dist/{Text-hEoPeOc9.mjs.map → Text-RcEfNFLx.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Text-hEoPeOc9.mjs","names":[],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,oBAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,OAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/F,gBAAgB;;AAOpB,MAAa,UAAU,OAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAW,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,OAAO,KAAK;KAChC,EAAE,WAAW,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,oBAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,OAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAO,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAO,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,OAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,OAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}
+{"version":3,"file":"Text-RcEfNFLx.mjs","names":[],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,oBAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,OAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/F,gBAAgB;;AAOpB,MAAa,UAAU,OAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAW,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,OAAO,KAAK;KAChC,EAAE,WAAW,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,oBAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,OAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAO,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAO,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,OAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,OAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}

package/dist/Text.d.mts

@@ -1,2 +1,2 @@
-import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "./Text-CPd0r0w2.mjs";
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "./Text-DNPbAuUG.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/{TextArea-Dl9_Zizx.d.cts → TextArea-B89wtTsF.d.mts}

@@ -1,4 +1,4 @@
-import { t as InputProps } from "./InputProps-7rEMxBED.cjs";
+import { t as InputProps } from "./InputProps-BnjxrdWQ.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
 
@@ -7,4 +7,4 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, Omit<Input
 declare const TextAreaWithStyle: _$react.ForwardRefExoticComponent<TextAreaProps & _$react.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 export { TextAreaWithStyle as n, TextAreaProps as t };
-//# sourceMappingURL=TextArea-Dl9_Zizx.d.cts.map
+//# sourceMappingURL=TextArea-B89wtTsF.d.mts.map

package/dist/{TextArea-p3oek3Zq.cjs → TextArea-BNiipQDb.cjs}

@@ -1,11 +1,11 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 require("./variables/transitions.cjs");
 const require_mixins_input = require("./mixins/input.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
+const require_useFormField = require("./useFormField-BZlArnsI.cjs");
 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");
 //#region components/TextArea/TextArea.tsx
 const TextArea = (0, styled_components.default)("textarea")`
   ${require_mixins_input};
@@ -37,4 +37,4 @@ Object.defineProperty(exports, "TextAreaWithStyle", {
 	}
 });
 
-//# sourceMappingURL=TextArea-p3oek3Zq.cjs.map
+//# sourceMappingURL=TextArea-BNiipQDb.cjs.map

package/dist/{TextArea-p3oek3Zq.cjs.map → TextArea-BNiipQDb.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-p3oek3Zq.cjs","names":["inputMixin","useFormField"],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,CAAA,GAAA,kBAAA,SAAO,WAAW;IAC/BA,qBAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,qBAAA,GAAA,MAAA,YAAmE,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAYC,qBAAAA,aAAa,MAAM;AAEvC,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}
+{"version":3,"file":"TextArea-BNiipQDb.cjs","names":["inputMixin","useFormField"],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,CAAA,GAAA,kBAAA,SAAO,WAAW;IAC/BA,qBAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,qBAAA,GAAA,MAAA,YAAmE,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAYC,qBAAAA,aAAa,MAAM;AAEvC,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}

package/dist/{TextArea-J1MD_8rK.d.mts → TextArea-CHW9FKM4.d.cts}

@@ -1,4 +1,4 @@
-import { t as InputProps } from "./InputProps-DQpb2_E3.mjs";
+import { t as InputProps } from "./InputProps-CoVNpQSj.cjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
 
@@ -7,4 +7,4 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, Omit<Input
 declare const TextAreaWithStyle: _$react.ForwardRefExoticComponent<TextAreaProps & _$react.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 export { TextAreaWithStyle as n, TextAreaProps as t };
-//# sourceMappingURL=TextArea-J1MD_8rK.d.mts.map
+//# sourceMappingURL=TextArea-CHW9FKM4.d.cts.map

package/dist/{TextArea-CJJlw3rV.mjs → TextArea-NCLsW-03.mjs}

@@ -1,9 +1,9 @@
 import "./variables/transitions.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
 import styled from "styled-components";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 //#region components/TextArea/TextArea.tsx
 const TextArea = styled("textarea")`
   ${inputMixin};
@@ -30,4 +30,4 @@ const TextAreaWithStyle = forwardRef(function TextAreaWithStyle({ size, ...props
 //#endregion
 export { TextAreaWithStyle as t };
 
-//# sourceMappingURL=TextArea-CJJlw3rV.mjs.map
+//# sourceMappingURL=TextArea-NCLsW-03.mjs.map

package/dist/{TextArea-CJJlw3rV.mjs.map → TextArea-NCLsW-03.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-CJJlw3rV.mjs","names":[],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;AAWA,MAAM,WAAW,OAAO,WAAW;IAC/B,WAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,oBAAoB,WAA+C,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAY,aAAa,MAAM;AAEvC,QACE,oBAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}
+{"version":3,"file":"TextArea-NCLsW-03.mjs","names":[],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;AAWA,MAAM,WAAW,OAAO,WAAW;IAC/B,WAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,oBAAoB,WAA+C,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAY,aAAa,MAAM;AAEvC,QACE,oBAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}

package/dist/TextArea.d.cts

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "./TextArea-Dl9_Zizx.cjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "./TextArea-CHW9FKM4.cjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/TextArea.d.mts

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "./TextArea-J1MD_8rK.mjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "./TextArea-B89wtTsF.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/{TextUnderlineTooltip-D8GFsk5C.d.mts → TextUnderlineTooltip-5-0D8s4z.d.mts}

@@ -1,7 +1,7 @@
-import { r as TooltipStandardProps } from "./Tooltip-DtWJO_kU.mjs";
+import { r as TooltipStandardProps } from "./Tooltip-CUC-JuRL.mjs";
 import * as _$styled_components0 from "styled-components";
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region components/Tooltip/TextUnderlineTooltip.d.ts
 declare const TextWithDashedUnderline: _$styled_components0.StyledComponent<"span", any, {}, never>;
@@ -15,4 +15,4 @@ declare const TextUnderlineTooltip: ({
 }: TextUnderlineTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextWithDashedUnderline as n, TextUnderlineTooltip as t };
-//# sourceMappingURL=TextUnderlineTooltip-D8GFsk5C.d.mts.map
+//# sourceMappingURL=TextUnderlineTooltip-5-0D8s4z.d.mts.map

package/dist/{TextUnderlineTooltip-BDMs4iXn.d.cts → TextUnderlineTooltip-DMEyOu8C.d.cts}

@@ -1,4 +1,4 @@
-import { r as TooltipStandardProps } from "./Tooltip-CE1oH6Iz.cjs";
+import { r as TooltipStandardProps } from "./Tooltip--eDrrk2r.cjs";
 import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
@@ -15,4 +15,4 @@ declare const TextUnderlineTooltip: ({
 }: TextUnderlineTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextWithDashedUnderline as n, TextUnderlineTooltip as t };
-//# sourceMappingURL=TextUnderlineTooltip-BDMs4iXn.d.cts.map
+//# sourceMappingURL=TextUnderlineTooltip-DMEyOu8C.d.cts.map

package/dist/TextUnderlineTooltip.d.cts

@@ -1,2 +1,2 @@
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-BDMs4iXn.cjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-DMEyOu8C.cjs";
 export { TextWithDashedUnderline, TextUnderlineTooltip as default };

package/dist/TextUnderlineTooltip.d.mts

@@ -1,2 +1,2 @@
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-D8GFsk5C.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-5-0D8s4z.mjs";
 export { TextWithDashedUnderline, TextUnderlineTooltip as default };

package/dist/Tile.d.cts

@@ -1,4 +1,4 @@
-import { o as StickerProps } from "./Sticker-D9HjFQ6e.cjs";
+import { o as StickerProps } from "./Sticker-CI-XxUmM.cjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 

package/dist/Tile.d.mts

@@ -1,6 +1,6 @@
-import { o as StickerProps } from "./Sticker-XfyoDEod.mjs";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { o as StickerProps } from "./Sticker-Bs25ISz7.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region components/Tile/Tile.d.ts
 type TileSize = 'sm' | 'md';

package/dist/Toast.d.cts

@@ -1,4 +1,4 @@
-import { t as MessageType } from "./message-CWEGi3Xg.cjs";
+import { t as MessageType } from "./message-BEgtEjQC.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 import { HTMLMotionProps } from "framer-motion";
 

package/dist/Toast.d.mts

@@ -1,4 +1,4 @@
-import { t as MessageType } from "./message-SITKO6JZ.mjs";
+import { t as MessageType } from "./message-CMHvlPGn.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { HTMLMotionProps } from "framer-motion";
 

package/dist/{Toggle-DOo0cLmI.mjs → Toggle-Bie9zCem.mjs}

@@ -1,13 +1,13 @@
 import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
-import { r as Label } from "./Text-hEoPeOc9.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
-import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { r as Label } from "./Text-RcEfNFLx.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
+import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { forwardRef, useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from "react";
 import { useId } from "react-aria";
 //#region components/Toggle/Toggle.tsx
 const SWITCH_SIZES = {
@@ -164,4 +164,4 @@ const Toggle = forwardRef(function Toggle({ className, disabled, titleOff = "Off
 //#endregion
 export { Toggle as t };
 
-//# sourceMappingURL=Toggle-DOo0cLmI.mjs.map
+//# sourceMappingURL=Toggle-Bie9zCem.mjs.map

package/dist/{Toggle-DOo0cLmI.mjs.map → Toggle-Bie9zCem.mjs.map}

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

package/dist/{Toggle-7o-n5vF6.cjs → Toggle-Ce-rF8Xp.cjs}

@@ -2,14 +2,14 @@ const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_focus = require("./mixins/focus.cjs");
 require("./variables/transitions.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
-const require_useToggle = require("./useToggle-CSkZWXtQ.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
+const require_useToggle = require("./useToggle-DARO917w.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 react_aria = require("react-aria");
 //#region components/Toggle/Toggle.tsx
 const SWITCH_SIZES = {
@@ -171,4 +171,4 @@ Object.defineProperty(exports, "Toggle", {
 	}
 });
 
-//# sourceMappingURL=Toggle-7o-n5vF6.cjs.map
+//# sourceMappingURL=Toggle-Ce-rF8Xp.cjs.map