@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/lib/message.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region lib/message.ts
+let MessageType = /* @__PURE__ */ function(MessageType) {
+	MessageType["Success"] = "success";
+	MessageType["Failure"] = "failure";
+	MessageType["Notice"] = "notice";
+	return MessageType;
+}({});
+//#endregion
+exports.MessageType = MessageType;
+
+//# sourceMappingURL=message.cjs.map

package/dist/lib/message.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.cjs","names":[],"sources":["../../lib/message.ts"],"sourcesContent":["export enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\n"],"mappings":";;AAAA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD"}

package/dist/lib/message.d.cts

@@ -0,0 +1,2 @@
+import { t as MessageType } from "../message-C2286H-r.cjs";
+export { MessageType };

package/dist/lib/message.d.mts

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

package/dist/lib/message.mjs

@@ -0,0 +1,11 @@
+//#region lib/message.ts
+let MessageType = /* @__PURE__ */ function(MessageType) {
+	MessageType["Success"] = "success";
+	MessageType["Failure"] = "failure";
+	MessageType["Notice"] = "notice";
+	return MessageType;
+}({});
+//#endregion
+export { MessageType };
+
+//# sourceMappingURL=message.mjs.map

package/dist/lib/message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.mjs","names":[],"sources":["../../lib/message.ts"],"sourcesContent":["export enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\n"],"mappings":";AAAA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD"}

package/dist/lib/pseudoClass.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
 //#region lib/pseudoClass.ts
 const isDisabled = ({ disabled }) => disabled ? "" : ":disabled";
 const isNotDisabled = ({ disabled }) => disabled ? ":not(*)" : ":not(:disabled)";

package/dist/lib/pseudoClass.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pseudoClass.cjs","names":[],"sources":["../../lib/pseudoClass.ts"],"sourcesContent":["/**\n * @file Contains utility functions that allow targeting pseudo-classes with props.\n * When used, allows props.active to act like :active, etc.\n *\n * When used, a preceding ampersand is needed.\n * `&${isHovered}${isNotActive}`\n */\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\n\nexport const isDisabled = ({ disabled }: PseudoClassProps) => (disabled ? '' : ':disabled');\nexport const isNotDisabled = ({ disabled }: PseudoClassProps) =>\n  disabled ? ':not(*)' : ':not(:disabled)';\n\nexport const isHovered = ({ hovered }: PseudoClassProps) => (hovered ? '' : ':hover');\nexport const isNotHovered = ({ hovered }: PseudoClassProps) =>\n  hovered ? ':not(*)' : ':not(:hover)';\n\nexport const isFocused = ({ focused }: PseudoClassProps) => (focused ? '' : ':focus');\nexport const isNotFocused = ({ focused }: PseudoClassProps) =>\n  focused ? ':not(*)' : ':not(:focus)';\n\nexport const isFocusedVisible = ({ focused }: PseudoClassProps) =>\n  focused ? '' : ':focus-visible';\nexport const isNotFocusedVisible = ({ focused }: PseudoClassProps) =>\n  focused ? ':not(*)' : ':not(:focus-visible)';\n\nexport const isActive = ({ active }: PseudoClassProps) => (active ? '' : ':focus-within');\nexport const isNotActive = ({ active }: PseudoClassProps) =>\n  active ? ':not(*)' : ':not(:focus-within)';\n\nexport const isChecked = ({ checked }: PseudoClassProps) => (checked ? '' : ':checked');\nexport const isIndeterminate = ({ mixed }: PseudoClassProps) => (mixed ? '' : ':indeterminate');\nexport const isNotChecked = ({ checked }: PseudoClassProps) =>\n  checked ? ':not(*)' : ':not(:checked)';\n"],"mappings":";;;AASA,MAAa,cAAc,EAAE,eAAkC,WAAW,KAAK;AAC/E,MAAa,iBAAiB,EAAE,eAC9B,WAAW,YAAY;AAEzB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY;AAExB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY;AAExB,MAAa,oBAAoB,EAAE,cACjC,UAAU,KAAK;AACjB,MAAa,uBAAuB,EAAE,cACpC,UAAU,YAAY;AAExB,MAAa,YAAY,EAAE,aAAgC,SAAS,KAAK;AACzE,MAAa,eAAe,EAAE,aAC5B,SAAS,YAAY;AAEvB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,mBAAmB,EAAE,YAA+B,QAAQ,KAAK;AAC9E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY"}
+{"version":3,"file":"pseudoClass.cjs","names":[],"sources":["../../lib/pseudoClass.ts"],"sourcesContent":["/**\n * @file Contains utility functions that allow targeting pseudo-classes with props.\n * When used, allows props.active to act like :active, etc.\n *\n * When used, a preceding ampersand is needed.\n * `&${isHovered}${isNotActive}`\n */\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\n\nexport const isDisabled = ({ disabled }: PseudoClassProps) => (disabled ? '' : ':disabled');\nexport const isNotDisabled = ({ disabled }: PseudoClassProps) =>\n  disabled ? ':not(*)' : ':not(:disabled)';\n\nexport const isHovered = ({ hovered }: PseudoClassProps) => (hovered ? '' : ':hover');\nexport const isNotHovered = ({ hovered }: PseudoClassProps) =>\n  hovered ? ':not(*)' : ':not(:hover)';\n\nexport const isFocused = ({ focused }: PseudoClassProps) => (focused ? '' : ':focus');\nexport const isNotFocused = ({ focused }: PseudoClassProps) =>\n  focused ? ':not(*)' : ':not(:focus)';\n\nexport const isFocusedVisible = ({ focused }: PseudoClassProps) =>\n  focused ? '' : ':focus-visible';\nexport const isNotFocusedVisible = ({ focused }: PseudoClassProps) =>\n  focused ? ':not(*)' : ':not(:focus-visible)';\n\nexport const isActive = ({ active }: PseudoClassProps) => (active ? '' : ':focus-within');\nexport const isNotActive = ({ active }: PseudoClassProps) =>\n  active ? ':not(*)' : ':not(:focus-within)';\n\nexport const isChecked = ({ checked }: PseudoClassProps) => (checked ? '' : ':checked');\nexport const isIndeterminate = ({ mixed }: PseudoClassProps) => (mixed ? '' : ':indeterminate');\nexport const isNotChecked = ({ checked }: PseudoClassProps) =>\n  checked ? ':not(*)' : ':not(:checked)';\n"],"mappings":";;AASA,MAAa,cAAc,EAAE,eAAkC,WAAW,KAAK;AAC/E,MAAa,iBAAiB,EAAE,eAC9B,WAAW,YAAY;AAEzB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY;AAExB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY;AAExB,MAAa,oBAAoB,EAAE,cACjC,UAAU,KAAK;AACjB,MAAa,uBAAuB,EAAE,cACpC,UAAU,YAAY;AAExB,MAAa,YAAY,EAAE,aAAgC,SAAS,KAAK;AACzE,MAAa,eAAe,EAAE,aAC5B,SAAS,YAAY;AAEvB,MAAa,aAAa,EAAE,cAAiC,UAAU,KAAK;AAC5E,MAAa,mBAAmB,EAAE,YAA+B,QAAQ,KAAK;AAC9E,MAAa,gBAAgB,EAAE,cAC7B,UAAU,YAAY"}

package/dist/lib/pseudoClass.d.mts

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

package/dist/lib/reorderItems.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
 //#region lib/reorderItems.ts
 /**
 * Pure index-based helpers for reordering an array of items.

package/dist/lib/reorderItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reorderItems.cjs","names":[],"sources":["../../lib/reorderItems.ts"],"sourcesContent":["/**\n * Pure index-based helpers for reordering an array of items.\n *\n * Shared between drag-and-drop implementations that use different underlying\n * libraries (e.g. React Aria Components' `useDragAndDrop` and @dnd-kit's\n * `useSortable`). Each caller reduces its library-specific event to a pair of\n * indices and then uses `moveItemByIndex` to produce the reordered array.\n */\n\n/**\n * Returns a new array with the item at `fromIndex` moved to `toIndex`.\n *\n * Returns the original array unchanged when either index is out of bounds or\n * the indices are equal.\n */\nexport const moveItemByIndex = <T>(items: T[], fromIndex: number, toIndex: number): T[] => {\n  if (\n    fromIndex === toIndex ||\n    fromIndex < 0 ||\n    toIndex < 0 ||\n    fromIndex >= items.length ||\n    toIndex >= items.length\n  ) {\n    return items;\n  }\n\n  const next = items.slice();\n  const [moved] = next.splice(fromIndex, 1);\n  next.splice(toIndex, 0, moved);\n  return next;\n};\n\n/**\n * Finds the index of the item whose `keyPath` property stringifies to `key`.\n *\n * Comparison is done via `String(...)` on both sides so callers can pass\n * numeric or string ids interchangeably.\n */\nexport const findIndexByKey = <T>(items: T[], keyPath: string, key: string | number): number => {\n  const target = String(key);\n  return items.findIndex((item) => String((item as Record<string, unknown>)[keyPath]) === target);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAa,mBAAsB,OAAY,WAAmB,YAAyB;AACzF,KACE,cAAc,WACd,YAAY,KACZ,UAAU,KACV,aAAa,MAAM,UACnB,WAAW,MAAM,OAEjB,QAAO;CAGT,MAAM,OAAO,MAAM,OAAO;CAC1B,MAAM,CAAC,SAAS,KAAK,OAAO,WAAW,EAAE;AACzC,MAAK,OAAO,SAAS,GAAG,MAAM;AAC9B,QAAO;;;;;;;;AAST,MAAa,kBAAqB,OAAY,SAAiB,QAAiC;CAC9F,MAAM,SAAS,OAAO,IAAI;AAC1B,QAAO,MAAM,WAAW,SAAS,OAAQ,KAAiC,SAAS,KAAK,OAAO"}
+{"version":3,"file":"reorderItems.cjs","names":[],"sources":["../../lib/reorderItems.ts"],"sourcesContent":["/**\n * Pure index-based helpers for reordering an array of items.\n *\n * Shared between drag-and-drop implementations that use different underlying\n * libraries (e.g. React Aria Components' `useDragAndDrop` and @dnd-kit's\n * `useSortable`). Each caller reduces its library-specific event to a pair of\n * indices and then uses `moveItemByIndex` to produce the reordered array.\n */\n\n/**\n * Returns a new array with the item at `fromIndex` moved to `toIndex`.\n *\n * Returns the original array unchanged when either index is out of bounds or\n * the indices are equal.\n */\nexport const moveItemByIndex = <T>(items: T[], fromIndex: number, toIndex: number): T[] => {\n  if (\n    fromIndex === toIndex ||\n    fromIndex < 0 ||\n    toIndex < 0 ||\n    fromIndex >= items.length ||\n    toIndex >= items.length\n  ) {\n    return items;\n  }\n\n  const next = items.slice();\n  const [moved] = next.splice(fromIndex, 1);\n  next.splice(toIndex, 0, moved);\n  return next;\n};\n\n/**\n * Finds the index of the item whose `keyPath` property stringifies to `key`.\n *\n * Comparison is done via `String(...)` on both sides so callers can pass\n * numeric or string ids interchangeably.\n */\nexport const findIndexByKey = <T>(items: T[], keyPath: string, key: string | number): number => {\n  const target = String(key);\n  return items.findIndex((item) => String((item as Record<string, unknown>)[keyPath]) === target);\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,mBAAsB,OAAY,WAAmB,YAAyB;AACzF,KACE,cAAc,WACd,YAAY,KACZ,UAAU,KACV,aAAa,MAAM,UACnB,WAAW,MAAM,OAEjB,QAAO;CAGT,MAAM,OAAO,MAAM,OAAO;CAC1B,MAAM,CAAC,SAAS,KAAK,OAAO,WAAW,EAAE;AACzC,MAAK,OAAO,SAAS,GAAG,MAAM;AAC9B,QAAO;;;;;;;;AAST,MAAa,kBAAqB,OAAY,SAAiB,QAAiC;CAC9F,MAAM,SAAS,OAAO,IAAI;AAC1B,QAAO,MAAM,WAAW,SAAS,OAAQ,KAAiC,SAAS,KAAK,OAAO"}

package/dist/lib/selectHelper.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
-const require_react_esm = require("../react.esm-C-es35jP.cjs");
+require("../chunk-CKQMccvm.cjs");
+let _testing_library_react = require("@testing-library/react");
 //#region lib/selectHelper.ts
 /**
 * Click a PDS Select (Radix UI) option using fireEvent.click inside act().
@@ -12,8 +12,8 @@ const require_react_esm = require("../react.esm-C-es35jP.cjs");
 * bypasses all of this cleanly.
 */
 const clickSelectItem = async (name) => {
-	await require_react_esm.act(async () => {
-		require_react_esm.fireEvent.click(require_react_esm.screen.getByRole("option", { name }));
+	await (0, _testing_library_react.act)(async () => {
+		_testing_library_react.fireEvent.click(_testing_library_react.screen.getByRole("option", { name }));
 	});
 };
 //#endregion

package/dist/lib/selectHelper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"selectHelper.cjs","names":["act","screen"],"sources":["../../lib/selectHelper.ts"],"sourcesContent":["import { act, fireEvent, screen } from '@testing-library/react';\n\n/**\n * Click a PDS Select (Radix UI) option using fireEvent.click inside act().\n *\n * userEvent.click doesn't work for Radix SelectItem in React 18 + JSDOM because it fires\n * pointer events that set pointerTypeRef to \"mouse\", routing selection through onPointerUp\n * instead of onClick — and that path doesn't flush React state within act() due to focus()\n * calls from onPointerMove interfering with the concurrent scheduler. fireEvent.click\n * bypasses all of this cleanly.\n */\n// eslint-disable-next-line @persona-id/rtl-user-event\nexport const clickSelectItem = async (name: RegExp | string) => {\n  await act(async () => {\n    // eslint-disable-next-line @persona-id/rtl-user-event\n    fireEvent.click(screen.getByRole('option', { name }));\n  });\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB,OAAO,SAA0B;AAC9D,OAAMA,kBAAAA,IAAI,YAAY;AAEpB,oBAAA,UAAU,MAAMC,kBAAAA,OAAO,UAAU,UAAU,EAAE,MAAM,CAAC,CAAC;GACrD"}
+{"version":3,"file":"selectHelper.cjs","names":["screen"],"sources":["../../lib/selectHelper.ts"],"sourcesContent":["import { act, fireEvent, screen } from '@testing-library/react';\n\n/**\n * Click a PDS Select (Radix UI) option using fireEvent.click inside act().\n *\n * userEvent.click doesn't work for Radix SelectItem in React 18 + JSDOM because it fires\n * pointer events that set pointerTypeRef to \"mouse\", routing selection through onPointerUp\n * instead of onClick — and that path doesn't flush React state within act() due to focus()\n * calls from onPointerMove interfering with the concurrent scheduler. fireEvent.click\n * bypasses all of this cleanly.\n */\n// eslint-disable-next-line @persona-id/rtl-user-event\nexport const clickSelectItem = async (name: RegExp | string) => {\n  await act(async () => {\n    // eslint-disable-next-line @persona-id/rtl-user-event\n    fireEvent.click(screen.getByRole('option', { name }));\n  });\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB,OAAO,SAA0B;AAC9D,QAAA,GAAA,uBAAA,KAAU,YAAY;AAEpB,yBAAA,UAAU,MAAMA,uBAAAA,OAAO,UAAU,UAAU,EAAE,MAAM,CAAC,CAAC;GACrD"}

package/dist/lib/selectHelper.mjs

@@ -1,4 +1,4 @@
-import { a as screen, n as fireEvent, t as act } from "../react.esm-Dv1lMDRs.mjs";
+import { act, fireEvent, screen } from "@testing-library/react";
 //#region lib/selectHelper.ts
 /**
 * Click a PDS Select (Radix UI) option using fireEvent.click inside act().

package/dist/lib/useControlled.cjs

@@ -1,4 +1,4 @@
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 let react = require("react");
 //#region lib/useControlled.ts
 /**

package/dist/lib/useIsOverflow.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 let react = require("react");
 //#region lib/useIsOverflow.ts
 const INITIAL_STATE = {

package/dist/lib/useOutsideClick.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 let react = require("react");
 //#region lib/useOutsideClick.tsx
 const useOutsideClick = ({ ref, onOutsideClick }) => {

package/dist/lib/useScrollOverflow.cjs

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-CKQMccvm.cjs");
+let react = require("react");
+//#region lib/useScrollOverflow.ts
+/**
+* Tracks the horizontal-overflow state of a scroll container.
+*
+* - `hasHorizontalOverflow` — true while the content is wider than the box.
+* - `hasMoreScrollLeft` — true while the user has not yet scrolled to the
+*   left edge. Drives the left-edge fade affordance.
+* - `hasMoreScrollRight` — true while the user has not yet scrolled to the
+*   right edge. Drives the right-edge fade affordance.
+*
+* Listens to `scroll` on the element, size changes via `ResizeObserver`,
+* and content changes via `MutationObserver` (child add/remove and text
+* changes within existing descendants).
+*/
+const useScrollOverflow = (ref, { enabled = true } = {}) => {
+	const [hasHorizontalOverflow, setHasHorizontalOverflow] = (0, react.useState)(false);
+	const [hasMoreScrollLeft, setHasMoreScrollLeft] = (0, react.useState)(false);
+	const [hasMoreScrollRight, setHasMoreScrollRight] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!enabled) {
+			setHasHorizontalOverflow(false);
+			setHasMoreScrollLeft(false);
+			setHasMoreScrollRight(false);
+			return;
+		}
+		const el = ref.current;
+		if (!el) return;
+		const update = () => {
+			setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);
+			setHasMoreScrollLeft(el.scrollLeft > 1);
+			setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+		ro?.observe(el);
+		const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(update) : null;
+		mo?.observe(el, {
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			el.removeEventListener("scroll", update);
+			ro?.disconnect();
+			mo?.disconnect();
+		};
+	}, [ref, enabled]);
+	return {
+		hasHorizontalOverflow,
+		hasMoreScrollLeft,
+		hasMoreScrollRight
+	};
+};
+//#endregion
+exports.useScrollOverflow = useScrollOverflow;
+
+//# sourceMappingURL=useScrollOverflow.cjs.map

package/dist/lib/useScrollOverflow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOverflow.cjs","names":[],"sources":["../../lib/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowOptions {\n  /**\n   * When false, the hook short-circuits — no listeners are attached and\n   * both flags stay `false`. Use to opt out when the consumer is in a\n   * fixed-layout / no-overflow mode where overflow detection is wasted\n   * work, or when the scroll container is not yet mounted (e.g. gated\n   * behind conditional render).\n   */\n  enabled?: boolean;\n}\n\n/**\n * Tracks the horizontal-overflow state of a scroll container.\n *\n * - `hasHorizontalOverflow` — true while the content is wider than the box.\n * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the\n *   left edge. Drives the left-edge fade affordance.\n * - `hasMoreScrollRight` — true while the user has not yet scrolled to the\n *   right edge. Drives the right-edge fade affordance.\n *\n * Listens to `scroll` on the element, size changes via `ResizeObserver`,\n * and content changes via `MutationObserver` (child add/remove and text\n * changes within existing descendants).\n */\nexport const useScrollOverflow = (\n  ref: RefObject<HTMLElement>,\n  { enabled = true }: UseScrollOverflowOptions = {},\n) => {\n  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n  const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);\n  const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) {\n      setHasHorizontalOverflow(false);\n      setHasMoreScrollLeft(false);\n      setHasMoreScrollRight(false);\n      return undefined;\n    }\n    const el = ref.current;\n    if (!el) {\n      return undefined;\n    }\n    const update = () => {\n      // 1px tolerance for sub-pixel rounding on fractional layouts.\n      setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);\n      setHasMoreScrollLeft(el.scrollLeft > 1);\n      setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n    };\n    update();\n    el.addEventListener('scroll', update, { passive: true });\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;\n    ro?.observe(el);\n    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(update) : null;\n    mo?.observe(el, { characterData: true, childList: true, subtree: true });\n    return () => {\n      el.removeEventListener('scroll', update);\n      ro?.disconnect();\n      mo?.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,MAAa,qBACX,KACA,EAAE,UAAU,SAAmC,EAAE,KAC9C;CACH,MAAM,CAAC,uBAAuB,6BAAA,GAAA,MAAA,UAAqC,MAAM;CACzE,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,UAAiC,MAAM;CACjE,MAAM,CAAC,oBAAoB,0BAAA,GAAA,MAAA,UAAkC,MAAM;AAEnE,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,4BAAyB,MAAM;AAC/B,wBAAqB,MAAM;AAC3B,yBAAsB,MAAM;AAC5B;;EAEF,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GACH;EAEF,MAAM,eAAe;AAEnB,4BAAyB,GAAG,cAAc,GAAG,cAAc,EAAE;AAC7D,wBAAqB,GAAG,aAAa,EAAE;AACvC,yBAAsB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;;AAE5E,UAAQ;AACR,KAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM,CAAC;EACxD,MAAM,KAAK,OAAO,mBAAmB,cAAc,IAAI,eAAe,OAAO,GAAG;AAChF,MAAI,QAAQ,GAAG;EACf,MAAM,KAAK,OAAO,qBAAqB,cAAc,IAAI,iBAAiB,OAAO,GAAG;AACpF,MAAI,QAAQ,IAAI;GAAE,eAAe;GAAM,WAAW;GAAM,SAAS;GAAM,CAAC;AACxE,eAAa;AACX,MAAG,oBAAoB,UAAU,OAAO;AACxC,OAAI,YAAY;AAChB,OAAI,YAAY;;IAEjB,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAO;EAAE;EAAuB;EAAmB;EAAoB"}

package/dist/lib/useScrollOverflow.d.cts

@@ -0,0 +1,36 @@
+import { RefObject } from "react";
+
+//#region lib/useScrollOverflow.d.ts
+interface UseScrollOverflowOptions {
+  /**
+   * When false, the hook short-circuits — no listeners are attached and
+   * both flags stay `false`. Use to opt out when the consumer is in a
+   * fixed-layout / no-overflow mode where overflow detection is wasted
+   * work, or when the scroll container is not yet mounted (e.g. gated
+   * behind conditional render).
+   */
+  enabled?: boolean;
+}
+/**
+ * Tracks the horizontal-overflow state of a scroll container.
+ *
+ * - `hasHorizontalOverflow` — true while the content is wider than the box.
+ * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the
+ *   left edge. Drives the left-edge fade affordance.
+ * - `hasMoreScrollRight` — true while the user has not yet scrolled to the
+ *   right edge. Drives the right-edge fade affordance.
+ *
+ * Listens to `scroll` on the element, size changes via `ResizeObserver`,
+ * and content changes via `MutationObserver` (child add/remove and text
+ * changes within existing descendants).
+ */
+declare const useScrollOverflow: (ref: RefObject<HTMLElement>, {
+  enabled
+}?: UseScrollOverflowOptions) => {
+  hasHorizontalOverflow: boolean;
+  hasMoreScrollLeft: boolean;
+  hasMoreScrollRight: boolean;
+};
+//#endregion
+export { useScrollOverflow };
+//# sourceMappingURL=useScrollOverflow.d.cts.map

package/dist/lib/useScrollOverflow.d.mts

@@ -0,0 +1,36 @@
+import { RefObject } from "react";
+
+//#region lib/useScrollOverflow.d.ts
+interface UseScrollOverflowOptions {
+  /**
+   * When false, the hook short-circuits — no listeners are attached and
+   * both flags stay `false`. Use to opt out when the consumer is in a
+   * fixed-layout / no-overflow mode where overflow detection is wasted
+   * work, or when the scroll container is not yet mounted (e.g. gated
+   * behind conditional render).
+   */
+  enabled?: boolean;
+}
+/**
+ * Tracks the horizontal-overflow state of a scroll container.
+ *
+ * - `hasHorizontalOverflow` — true while the content is wider than the box.
+ * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the
+ *   left edge. Drives the left-edge fade affordance.
+ * - `hasMoreScrollRight` — true while the user has not yet scrolled to the
+ *   right edge. Drives the right-edge fade affordance.
+ *
+ * Listens to `scroll` on the element, size changes via `ResizeObserver`,
+ * and content changes via `MutationObserver` (child add/remove and text
+ * changes within existing descendants).
+ */
+declare const useScrollOverflow: (ref: RefObject<HTMLElement>, {
+  enabled
+}?: UseScrollOverflowOptions) => {
+  hasHorizontalOverflow: boolean;
+  hasMoreScrollLeft: boolean;
+  hasMoreScrollRight: boolean;
+};
+//#endregion
+export { useScrollOverflow };
+//# sourceMappingURL=useScrollOverflow.d.mts.map

package/dist/lib/useScrollOverflow.mjs

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+//#region lib/useScrollOverflow.ts
+/**
+* Tracks the horizontal-overflow state of a scroll container.
+*
+* - `hasHorizontalOverflow` — true while the content is wider than the box.
+* - `hasMoreScrollLeft` — true while the user has not yet scrolled to the
+*   left edge. Drives the left-edge fade affordance.
+* - `hasMoreScrollRight` — true while the user has not yet scrolled to the
+*   right edge. Drives the right-edge fade affordance.
+*
+* Listens to `scroll` on the element, size changes via `ResizeObserver`,
+* and content changes via `MutationObserver` (child add/remove and text
+* changes within existing descendants).
+*/
+const useScrollOverflow = (ref, { enabled = true } = {}) => {
+	const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);
+	const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);
+	const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);
+	useEffect(() => {
+		if (!enabled) {
+			setHasHorizontalOverflow(false);
+			setHasMoreScrollLeft(false);
+			setHasMoreScrollRight(false);
+			return;
+		}
+		const el = ref.current;
+		if (!el) return;
+		const update = () => {
+			setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);
+			setHasMoreScrollLeft(el.scrollLeft > 1);
+			setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+		ro?.observe(el);
+		const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(update) : null;
+		mo?.observe(el, {
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			el.removeEventListener("scroll", update);
+			ro?.disconnect();
+			mo?.disconnect();
+		};
+	}, [ref, enabled]);
+	return {
+		hasHorizontalOverflow,
+		hasMoreScrollLeft,
+		hasMoreScrollRight
+	};
+};
+//#endregion
+export { useScrollOverflow };
+
+//# sourceMappingURL=useScrollOverflow.mjs.map

package/dist/lib/useScrollOverflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../lib/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowOptions {\n  /**\n   * When false, the hook short-circuits — no listeners are attached and\n   * both flags stay `false`. Use to opt out when the consumer is in a\n   * fixed-layout / no-overflow mode where overflow detection is wasted\n   * work, or when the scroll container is not yet mounted (e.g. gated\n   * behind conditional render).\n   */\n  enabled?: boolean;\n}\n\n/**\n * Tracks the horizontal-overflow state of a scroll container.\n *\n * - `hasHorizontalOverflow` — true while the content is wider than the box.\n * - `hasMoreScrollLeft` — true while the user has not yet scrolled to the\n *   left edge. Drives the left-edge fade affordance.\n * - `hasMoreScrollRight` — true while the user has not yet scrolled to the\n *   right edge. Drives the right-edge fade affordance.\n *\n * Listens to `scroll` on the element, size changes via `ResizeObserver`,\n * and content changes via `MutationObserver` (child add/remove and text\n * changes within existing descendants).\n */\nexport const useScrollOverflow = (\n  ref: RefObject<HTMLElement>,\n  { enabled = true }: UseScrollOverflowOptions = {},\n) => {\n  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n  const [hasMoreScrollLeft, setHasMoreScrollLeft] = useState(false);\n  const [hasMoreScrollRight, setHasMoreScrollRight] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) {\n      setHasHorizontalOverflow(false);\n      setHasMoreScrollLeft(false);\n      setHasMoreScrollRight(false);\n      return undefined;\n    }\n    const el = ref.current;\n    if (!el) {\n      return undefined;\n    }\n    const update = () => {\n      // 1px tolerance for sub-pixel rounding on fractional layouts.\n      setHasHorizontalOverflow(el.scrollWidth > el.clientWidth + 1);\n      setHasMoreScrollLeft(el.scrollLeft > 1);\n      setHasMoreScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n    };\n    update();\n    el.addEventListener('scroll', update, { passive: true });\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;\n    ro?.observe(el);\n    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(update) : null;\n    mo?.observe(el, { characterData: true, childList: true, subtree: true });\n    return () => {\n      el.removeEventListener('scroll', update);\n      ro?.disconnect();\n      mo?.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight };\n};\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAa,qBACX,KACA,EAAE,UAAU,SAAmC,EAAE,KAC9C;CACH,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CACzE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;AAEnE,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,4BAAyB,MAAM;AAC/B,wBAAqB,MAAM;AAC3B,yBAAsB,MAAM;AAC5B;;EAEF,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GACH;EAEF,MAAM,eAAe;AAEnB,4BAAyB,GAAG,cAAc,GAAG,cAAc,EAAE;AAC7D,wBAAqB,GAAG,aAAa,EAAE;AACvC,yBAAsB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;;AAE5E,UAAQ;AACR,KAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM,CAAC;EACxD,MAAM,KAAK,OAAO,mBAAmB,cAAc,IAAI,eAAe,OAAO,GAAG;AAChF,MAAI,QAAQ,GAAG;EACf,MAAM,KAAK,OAAO,qBAAqB,cAAc,IAAI,iBAAiB,OAAO,GAAG;AACpF,MAAI,QAAQ,IAAI;GAAE,eAAe;GAAM,WAAW;GAAM,SAAS;GAAM,CAAC;AACxE,eAAa;AACX,MAAG,oBAAoB,UAAU,OAAO;AACxC,OAAI,YAAY;AAChB,OAAI,YAAY;;IAEjB,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAO;EAAE;EAAuB;EAAmB;EAAoB"}

package/dist/lib/zindex.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
 //#region lib/zindex.ts
 const Z_INDICES = {
 	withShadow: 1,

package/dist/lib/zindex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"zindex.cjs","names":[],"sources":["../../lib/zindex.ts"],"sourcesContent":["/*\n * Prefer adding these values together instead of adding new ones if possible.\n */\nexport const Z_INDICES = {\n  withShadow: 1,\n\n  sticky: 2,\n\n  loadingOverlays: 5,\n\n  tooltip: 10,\n\n  floatingBar: 100,\n\n  /*\n   * The main levels we have in dashboard\n   */\n  topNav: 1000,\n  dropdown: 1001,\n  layeredDropdown: 1002,\n  banner: 2000,\n  sideNav: 3000,\n  topNavTooltip: 3001,\n  modal: 10000,\n  /*\n   * For elements that should expand out of modals, but NOT cover things like dropdowns\n   */\n  modalElevated: 10001,\n  modalDropdown: 10010,\n  modalDropdownTooltip: 10020,\n  personaAssistant: 10011,\n  /*\n   * Full-app blocking modal overlays that must sit above in-app floating panels and\n   * their portaled UI (e.g. flow editor rule panels at Z_INDICES.modal).\n   */\n  modalBlocking: 10030,\n  toast: 100000,\n} as const;\n\nexport type ZIndex = (typeof Z_INDICES)[keyof typeof Z_INDICES];\n"],"mappings":";;;AAGA,MAAa,YAAY;CACvB,YAAY;CAEZ,QAAQ;CAER,iBAAiB;CAEjB,SAAS;CAET,aAAa;CAKb,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACT,eAAe;CACf,OAAO;CAIP,eAAe;CACf,eAAe;CACf,sBAAsB;CACtB,kBAAkB;CAKlB,eAAe;CACf,OAAO;CACR"}
+{"version":3,"file":"zindex.cjs","names":[],"sources":["../../lib/zindex.ts"],"sourcesContent":["/*\n * Prefer adding these values together instead of adding new ones if possible.\n */\nexport const Z_INDICES = {\n  withShadow: 1,\n\n  sticky: 2,\n\n  loadingOverlays: 5,\n\n  tooltip: 10,\n\n  floatingBar: 100,\n\n  /*\n   * The main levels we have in dashboard\n   */\n  topNav: 1000,\n  dropdown: 1001,\n  layeredDropdown: 1002,\n  banner: 2000,\n  sideNav: 3000,\n  topNavTooltip: 3001,\n  modal: 10000,\n  /*\n   * For elements that should expand out of modals, but NOT cover things like dropdowns\n   */\n  modalElevated: 10001,\n  modalDropdown: 10010,\n  modalDropdownTooltip: 10020,\n  personaAssistant: 10011,\n  /*\n   * Full-app blocking modal overlays that must sit above in-app floating panels and\n   * their portaled UI (e.g. flow editor rule panels at Z_INDICES.modal).\n   */\n  modalBlocking: 10030,\n  toast: 100000,\n} as const;\n\nexport type ZIndex = (typeof Z_INDICES)[keyof typeof Z_INDICES];\n"],"mappings":";;AAGA,MAAa,YAAY;CACvB,YAAY;CAEZ,QAAQ;CAER,iBAAiB;CAEjB,SAAS;CAET,aAAa;CAKb,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACT,eAAe;CACf,OAAO;CAIP,eAAe;CACf,eAAe;CACf,sBAAsB;CACtB,kBAAkB;CAKlB,eAAe;CACf,OAAO;CACR"}

package/dist/message-BfJ87aIU.d.mts

@@ -0,0 +1,9 @@
+//#region lib/message.d.ts
+declare enum MessageType {
+  Success = "success",
+  Failure = "failure",
+  Notice = "notice"
+}
+//#endregion
+export { MessageType as t };
+//# sourceMappingURL=message-BfJ87aIU.d.mts.map

package/dist/message-C2286H-r.d.cts

@@ -0,0 +1,9 @@
+//#region lib/message.d.ts
+declare enum MessageType {
+  Success = "success",
+  Failure = "failure",
+  Notice = "notice"
+}
+//#endregion
+export { MessageType as t };
+//# sourceMappingURL=message-C2286H-r.d.cts.map

package/dist/middleTruncateText.d.mts

@@ -0,0 +1,13 @@
+//#region lib/middleTruncateText.d.ts
+declare function buildMiddleTruncatedText(text: string, charsToShow: number): string;
+declare function isMiddleTruncated(displayText: string, fullText: string): boolean;
+declare function parseMaxWidthPx(maxWidth: number | string): number | null;
+declare function measureTextWidth(text: string, font?: string): number;
+declare function findMiddleTruncatedTextForWidth(text: string, maxWidthPx: number, font?: string): string;
+declare function findMaxMiddleTruncatedCharsThatFit(element: HTMLElement, text: string, maxWidthPx?: number | null, font?: string): {
+  displayText: string;
+  charsToShow: number;
+};
+//#endregion
+export { buildMiddleTruncatedText, findMaxMiddleTruncatedCharsThatFit, findMiddleTruncatedTextForWidth, isMiddleTruncated, measureTextWidth, parseMaxWidthPx };
+//# sourceMappingURL=middleTruncateText.d.mts.map

package/dist/mixins/focus.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("../lib/pseudoClass.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");

package/dist/mixins/focus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"focus.cjs","names":["Color","isFocusedVisible","isNotDisabled"],"sources":["../../mixins/focus.ts"],"sourcesContent":["import { Color } from '@persona/design-tokens';\nimport { css } from 'styled-components';\n\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${Color.BorderFocus} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n"],"mappings":";;;;;;AAKA,MAAa,aAAa,kBAAA,GAAG;;aAEhBA,uBAAAA,MAAM,YAAY;;AAG/B,MAAa,eAAe,kBAAA,GAAG;;;;;eAKhBA,uBAAAA,MAAM,YAAY;;;AAIjC,MAAa,yBAAyB,kBAAA,GAAG;;;KAGpCC,wBAAAA,mBAAmBC,wBAAAA,cAAc;;eAEvBF,uBAAAA,MAAM,YAAY;;;AAIjC,MAAa,qBAAqB,kBAAA,GAAG;;;eAGtBA,uBAAAA,MAAM,YAAY"}
+{"version":3,"file":"focus.cjs","names":["Color","isFocusedVisible","isNotDisabled"],"sources":["../../mixins/focus.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${Color.BorderFocus} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n"],"mappings":";;;;;;AAKA,MAAa,aAAa,kBAAA,GAAG;;aAEhBA,uBAAAA,MAAM,YAAY;;AAG/B,MAAa,eAAe,kBAAA,GAAG;;;;;eAKhBA,uBAAAA,MAAM,YAAY;;;AAIjC,MAAa,yBAAyB,kBAAA,GAAG;;;KAGpCC,wBAAAA,mBAAmBC,wBAAAA,cAAc;;eAEvBF,uBAAAA,MAAM,YAAY;;;AAIjC,MAAa,qBAAqB,kBAAA,GAAG;;;eAGtBA,uBAAAA,MAAM,YAAY"}

package/dist/mixins/focus.d.mts

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

package/dist/mixins/focus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"focus.mjs","names":[],"sources":["../../mixins/focus.ts"],"sourcesContent":["import { Color } from '@persona/design-tokens';\nimport { css } from 'styled-components';\n\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${Color.BorderFocus} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n"],"mappings":";;;;AAKA,MAAa,aAAa,GAAG;;aAEhB,MAAM,YAAY;;AAG/B,MAAa,eAAe,GAAG;;;;;eAKhB,MAAM,YAAY;;;AAIjC,MAAa,yBAAyB,GAAG;;;KAGpC,mBAAmB,cAAc;;eAEvB,MAAM,YAAY;;;AAIjC,MAAa,qBAAqB,GAAG;;;eAGtB,MAAM,YAAY"}
+{"version":3,"file":"focus.mjs","names":[],"sources":["../../mixins/focus.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport const focusStyle = css`\n  outline-offset: 1px;\n  outline: ${Color.BorderFocus} solid 2px;\n`;\n\nexport const focusOutline = css`\n  outline: none;\n\n  &:focus-visible {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusOutlineControlled = css`\n  outline: none;\n\n  &${isFocusedVisible}${isNotDisabled} {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n\nexport const focusWithinOutline = css`\n  &:focus-within {\n    outline-offset: 1px;\n    outline: ${Color.BorderFocus} solid 2px;\n  }\n`;\n"],"mappings":";;;;AAKA,MAAa,aAAa,GAAG;;aAEhB,MAAM,YAAY;;AAG/B,MAAa,eAAe,GAAG;;;;;eAKhB,MAAM,YAAY;;;AAIjC,MAAa,yBAAyB,GAAG;;;KAGpC,mBAAmB,cAAc;;eAEvB,MAAM,YAAY;;;AAIjC,MAAa,qBAAqB,GAAG;;;eAGtB,MAAM,YAAY"}

package/dist/mixins/hoverable.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("../lib/pseudoClass.cjs");
 const require_mixins_focus = require("./focus.cjs");
 require("../variables/effect.cjs");

package/dist/mixins/hoverable.d.mts

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

package/dist/mixins/input.cjs

@@ -1,4 +1,4 @@
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("../lib/pseudoClass.cjs");
 const require_mixins_focus = require("./focus.cjs");
 require("../variables/transitions.cjs");

package/dist/mixins/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":["focusOutlineControlled","isDisabled","isHovered","isNotDisabled","Spacing","Typography","Color","printMixins"],"sources":["../../mixins/input.ts"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { css } from 'styled-components';\n\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport type ErrorProps from 'design-system/types/ErrorProps';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => theme.color.border.input};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => theme.color.text.tertiary};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => theme.color.background.disabled};\n    border-color: ${({ theme }) => theme.color.border.disabled};\n    color: ${({ theme }) => theme.color.text.disabled};\n    ::placeholder {\n      color: ${({ theme }) => theme.color.text.disabled};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    border-color: ${({ theme }) => theme.color.border.inputHover};\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  ${({ theme, hasError, hasWarning }) =>\n    hasError\n      ? css`\n          border-color: ${theme.color.variants.danger.default};\n\n          &${isHovered}${isNotDisabled} {\n            border-color: ${theme.color.variants.danger.default};\n          }\n        `\n      : hasWarning\n        ? css`\n            border-color: ${Color.CoreOrange700};\n\n            ${isHovered}${isNotDisabled} {\n              border-color: ${Color.CoreOrange700};\n            }\n          `\n        : css`\n            border-color: ${theme.color.border.input};\n          `}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,aAAa,kBAAA,GAAoB;iBACtB,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;YAClD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;mBAGhC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;;oBAEtC,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzDA,qBAAAA,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;KAGjDC,wBAAAA,WAAW;mBACG,EAAE,YAAY,MAAM,MAAM,WAAW,SAAS;qBAC5C,EAAE,YAAY,MAAM,MAAM,OAAO,SAAS;cACjD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;gBAEtC,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;KAInDC,wBAAAA,YAAYC,wBAAAA,cAAc;qBACV,EAAE,YAAY,MAAM,MAAM,OAAO,WAAW;;;KAG5D,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,kBAAA,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClCC,uBAAAA,QAAQ,GAAG;2BACTA,uBAAAA,QAAQ,GAAG;4BACVA,uBAAAA,QAAQ,GAAG;0BACbA,uBAAAA,QAAQ,GAAG;YACzBC,uBAAAA,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,kBAAA,GAAG;;yBAEOD,uBAAAA,QAAQ,GAAG;2BACTA,uBAAAA,QAAQ,GAAG;4BACVA,uBAAAA,QAAQ,GAAG;0BACbA,uBAAAA,QAAQ,GAAG;YACzBC,uBAAAA,WAAW,UAAU;;;EAG7B;;KAEC,EAAE,OAAO,UAAU,iBACpB,WACI,kBAAA,GAAG;0BACe,MAAM,MAAM,SAAS,OAAO,QAAQ;;aAEjDH,wBAAAA,YAAYC,wBAAAA,cAAc;4BACX,MAAM,MAAM,SAAS,OAAO,QAAQ;;YAGxD,aACE,kBAAA,GAAG;4BACeG,uBAAAA,MAAM,cAAc;;cAElCJ,wBAAAA,YAAYC,wBAAAA,cAAc;8BACVG,uBAAAA,MAAM,cAAc;;cAGxC,kBAAA,GAAG;4BACe,MAAM,MAAM,OAAO,MAAM;YACzC;;IAERC,2BAAAA,YAAY,KAAK"}
+{"version":3,"file":"input.cjs","names":["focusOutlineControlled","isDisabled","isHovered","isNotDisabled","Spacing","Typography","Color","printMixins"],"sources":["../../mixins/input.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport type ErrorProps from 'design-system/types/ErrorProps';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => theme.color.border.input};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => theme.color.text.tertiary};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => theme.color.background.disabled};\n    border-color: ${({ theme }) => theme.color.border.disabled};\n    color: ${({ theme }) => theme.color.text.disabled};\n    ::placeholder {\n      color: ${({ theme }) => theme.color.text.disabled};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    border-color: ${({ theme }) => theme.color.border.inputHover};\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  ${({ theme, hasError, hasWarning }) =>\n    hasError\n      ? css`\n          border-color: ${theme.color.variants.danger.default};\n\n          &${isHovered}${isNotDisabled} {\n            border-color: ${theme.color.variants.danger.default};\n          }\n        `\n      : hasWarning\n        ? css`\n            border-color: ${Color.CoreOrange700};\n\n            ${isHovered}${isNotDisabled} {\n              border-color: ${Color.CoreOrange700};\n            }\n          `\n        : css`\n            border-color: ${theme.color.border.input};\n          `}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,aAAa,kBAAA,GAAoB;iBACtB,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;YAClD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;mBAGhC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;;oBAEtC,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzDA,qBAAAA,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;KAGjDC,wBAAAA,WAAW;mBACG,EAAE,YAAY,MAAM,MAAM,WAAW,SAAS;qBAC5C,EAAE,YAAY,MAAM,MAAM,OAAO,SAAS;cACjD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;gBAEtC,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;KAInDC,wBAAAA,YAAYC,wBAAAA,cAAc;qBACV,EAAE,YAAY,MAAM,MAAM,OAAO,WAAW;;;KAG5D,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,kBAAA,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClCC,uBAAAA,QAAQ,GAAG;2BACTA,uBAAAA,QAAQ,GAAG;4BACVA,uBAAAA,QAAQ,GAAG;0BACbA,uBAAAA,QAAQ,GAAG;YACzBC,uBAAAA,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,kBAAA,GAAG;;yBAEOD,uBAAAA,QAAQ,GAAG;2BACTA,uBAAAA,QAAQ,GAAG;4BACVA,uBAAAA,QAAQ,GAAG;0BACbA,uBAAAA,QAAQ,GAAG;YACzBC,uBAAAA,WAAW,UAAU;;;EAG7B;;KAEC,EAAE,OAAO,UAAU,iBACpB,WACI,kBAAA,GAAG;0BACe,MAAM,MAAM,SAAS,OAAO,QAAQ;;aAEjDH,wBAAAA,YAAYC,wBAAAA,cAAc;4BACX,MAAM,MAAM,SAAS,OAAO,QAAQ;;YAGxD,aACE,kBAAA,GAAG;4BACeG,uBAAAA,MAAM,cAAc;;cAElCJ,wBAAAA,YAAYC,wBAAAA,cAAc;8BACVG,uBAAAA,MAAM,cAAc;;cAGxC,kBAAA,GAAG;4BACe,MAAM,MAAM,OAAO,MAAM;YACzC;;IAERC,2BAAAA,YAAY,KAAK"}

package/dist/mixins/input.d.cts

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

package/dist/mixins/input.d.mts

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

package/dist/mixins/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../mixins/input.ts"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { css } from 'styled-components';\n\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport type ErrorProps from 'design-system/types/ErrorProps';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => theme.color.border.input};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => theme.color.text.tertiary};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => theme.color.background.disabled};\n    border-color: ${({ theme }) => theme.color.border.disabled};\n    color: ${({ theme }) => theme.color.text.disabled};\n    ::placeholder {\n      color: ${({ theme }) => theme.color.text.disabled};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    border-color: ${({ theme }) => theme.color.border.inputHover};\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  ${({ theme, hasError, hasWarning }) =>\n    hasError\n      ? css`\n          border-color: ${theme.color.variants.danger.default};\n\n          &${isHovered}${isNotDisabled} {\n            border-color: ${theme.color.variants.danger.default};\n          }\n        `\n      : hasWarning\n        ? css`\n            border-color: ${Color.CoreOrange700};\n\n            ${isHovered}${isNotDisabled} {\n              border-color: ${Color.CoreOrange700};\n            }\n          `\n        : css`\n            border-color: ${theme.color.border.input};\n          `}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,aAAa,GAAoB;iBACtB,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;YAClD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;mBAGhC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;;oBAEtC,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzD,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;KAGjD,WAAW;mBACG,EAAE,YAAY,MAAM,MAAM,WAAW,SAAS;qBAC5C,EAAE,YAAY,MAAM,MAAM,OAAO,SAAS;cACjD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;gBAEtC,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;KAInD,YAAY,cAAc;qBACV,EAAE,YAAY,MAAM,MAAM,OAAO,WAAW;;;KAG5D,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClC,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;;yBAEO,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,UAAU;;;EAG7B;;KAEC,EAAE,OAAO,UAAU,iBACpB,WACI,GAAG;0BACe,MAAM,MAAM,SAAS,OAAO,QAAQ;;aAEjD,YAAY,cAAc;4BACX,MAAM,MAAM,SAAS,OAAO,QAAQ;;YAGxD,aACE,GAAG;4BACe,MAAM,cAAc;;cAElC,YAAY,cAAc;8BACV,MAAM,cAAc;;cAGxC,GAAG;4BACe,MAAM,MAAM,OAAO,MAAM;YACzC;;IAER,YAAY,KAAK"}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../mixins/input.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport type ErrorProps from 'design-system/types/ErrorProps';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type InputSizes = 'md' | 'sm';\n\nexport interface InputMixinProps extends ErrorProps, PseudoClassProps {\n  $size?: InputSizes;\n}\n\n/**\n * Provides input-like hover and focus outline effects. Can also be applied to\n * non-input elements (like divs) to give input-like styles.\n */\nconst inputMixin = css<InputMixinProps>`\n  background: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => theme.color.border.input};\n  box-sizing: border-box;\n  border-radius: ${({ theme }) => theme.element.borderRadius};\n\n  width: 100%;\n  min-width: 0;\n\n  ${focusOutlineControlled}\n\n  text-decoration: none;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  /* Some input-likes like <select/> reduce opacity when disabled */\n  opacity: 1;\n\n  &::placeholder {\n    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};\n    color: ${({ theme }) => theme.color.text.tertiary};\n  }\n\n  &${isDisabled} {\n    background: ${({ theme }) => theme.color.background.disabled};\n    border-color: ${({ theme }) => theme.color.border.disabled};\n    color: ${({ theme }) => theme.color.text.disabled};\n    ::placeholder {\n      color: ${({ theme }) => theme.color.text.disabled};\n    }\n  }\n\n  &${isHovered}${isNotDisabled} {\n    border-color: ${({ theme }) => theme.color.border.inputHover};\n  }\n\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          height: ${({ theme }) => theme.element.height.xs};\n          padding-top: ${Spacing[2]};\n          padding-right: ${Spacing[3]};\n          padding-bottom: ${Spacing[2]};\n          padding-left: ${Spacing[3]};\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          height: 24px;\n          padding-top: ${Spacing[1]};\n          padding-right: ${Spacing[2]};\n          padding-bottom: ${Spacing[1]};\n          padding-left: ${Spacing[2]};\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  ${({ theme, hasError, hasWarning }) =>\n    hasError\n      ? css`\n          border-color: ${theme.color.variants.danger.default};\n\n          &${isHovered}${isNotDisabled} {\n            border-color: ${theme.color.variants.danger.default};\n          }\n        `\n      : hasWarning\n        ? css`\n            border-color: ${Color.CoreOrange700};\n\n            ${isHovered}${isNotDisabled} {\n              border-color: ${Color.CoreOrange700};\n            }\n          `\n        : css`\n            border-color: ${theme.color.border.input};\n          `}\n\n  ${printMixins.hide}\n`;\n\nexport default inputMixin;\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,aAAa,GAAoB;iBACtB,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;YAClD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;mBAGhC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;;oBAEtC,EAAE,YAAY,MAAM,QAAQ,aAAa;;;;;IAKzD,uBAAuB;;;iCAGsB;;;;;;;oBAO7B,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;cACvD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;KAGjD,WAAW;mBACG,EAAE,YAAY,MAAM,MAAM,WAAW,SAAS;qBAC5C,EAAE,YAAY,MAAM,MAAM,OAAO,SAAS;cACjD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;gBAEtC,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;KAInD,YAAY,cAAc;qBACV,EAAE,YAAY,MAAM,MAAM,OAAO,WAAW;;;KAG5D,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;qBACG,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;yBAClC,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;;yBAEO,QAAQ,GAAG;2BACT,QAAQ,GAAG;4BACV,QAAQ,GAAG;0BACb,QAAQ,GAAG;YACzB,WAAW,UAAU;;;EAG7B;;KAEC,EAAE,OAAO,UAAU,iBACpB,WACI,GAAG;0BACe,MAAM,MAAM,SAAS,OAAO,QAAQ;;aAEjD,YAAY,cAAc;4BACX,MAAM,MAAM,SAAS,OAAO,QAAQ;;YAGxD,aACE,GAAG;4BACe,MAAM,cAAc;;cAElC,YAAY,cAAc;8BACV,MAAM,cAAc;;cAGxC,GAAG;4BACe,MAAM,MAAM,OAAO,MAAM;YACzC;;IAER,YAAY,KAAK"}

package/dist/mixins/menuItem.cjs

@@ -1,4 +1,4 @@
-require("../chunk-CoPdw6nB.cjs");
+require("../chunk-CKQMccvm.cjs");
 require("../variables/transitions.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");

package/dist/mixins/menuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.cjs","names":["Color"],"sources":["../../mixins/menuItem.ts"],"sourcesContent":["import { Color } from '@persona/design-tokens';\nimport { css } from 'styled-components';\n\nimport type { Variant } from 'design-system/theme';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface MenuItemMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\n/**\n * Adds styles for hovered and selected states. For use with dropdowns, menu\n * items, etc.\n *\n * The mixins are split by interaction state for more flexibility. We need to\n * implement each state differently when used with React Router's NavLink, for\n * example.\n *\n * Note that we override the palette for 'basic' to match the neutral usecase\n * shown in the mocks. There are never menu items that match our basic palette.\n *\n * Default: standard and disabled styles\n * Hover: hover and focus styles\n * Active: active styles\n */\nconst menuItemMixins = {\n  default: css<MenuItemMixinProps>`\n    cursor: pointer;\n    color: ${({ theme, variant = 'basic' }) =>\n      // default text color for these two should be neutral\n      ['basic', 'primary'].includes(variant)\n        ? theme.color.text.primary\n        : theme.color.variants[variant].default};\n\n    ${({ theme }) => css`\n      background-color: ${theme.color.background.primary};\n      border-radius: ${theme.element.borderRadius};\n    `}\n\n    ${({ theme, disabled }) =>\n      disabled &&\n      css`\n        background-color: ${theme.color.background.primary};\n        color: ${theme.color.text.disabled};\n        cursor: default;\n\n        svg * {\n          stroke: ${theme.color.text.disabled};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n  hover: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => {\n      if (variant === 'basic') {\n        return theme.color.text.primary;\n      }\n\n      if (variant === 'danger') {\n        return Color.CoreRed900;\n      }\n\n      return theme.color.variants[variant].default;\n    }};\n\n    background-color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic'\n        ? theme.color.background.secondary\n        : theme.color.variants[variant].highlightLight};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n  active: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic' ? theme.color.text.inverse : theme.color.variants[variant].default};\n    background-color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic'\n        ? theme.color.primary.brand\n        : theme.color.variants[variant].highlightLight};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n};\n\nexport default menuItemMixins;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB;CACrB,SAAS,kBAAA,GAAuB;;cAEpB,EAAE,OAAO,UAAU,cAE3B,CAAC,SAAS,UAAU,CAAC,SAAS,QAAQ,GAClC,MAAM,MAAM,KAAK,UACjB,MAAM,MAAM,SAAS,SAAS,QAAQ;;OAEzC,EAAE,YAAY,kBAAA,GAAG;0BACE,MAAM,MAAM,WAAW,QAAQ;uBAClC,MAAM,QAAQ,aAAa;MAC5C;;OAEC,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;4BACmB,MAAM,MAAM,WAAW,QAAQ;iBAC1C,MAAM,MAAM,KAAK,SAAS;;;;oBAIvB,MAAM,MAAM,KAAK,SAAS;;;;;;;;;;;;QAYtC;;CAEN,OAAO,kBAAA,GAAuB;mCACmB;cACrC,EAAE,OAAO,UAAU,cAAc;AACzC,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;GACrC;;yBAEmB,EAAE,OAAO,UAAU,cACtC,YAAY,UACR,MAAM,MAAM,WAAW,YACvB,MAAM,MAAM,SAAS,SAAS,eAAe;;OAEhD,EAAE,OAAO,UAAU,UAAU,cAC9B,CAAC,YACD,kBAAA,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEN,QAAQ,kBAAA,GAAuB;mCACkB;cACrC,EAAE,OAAO,UAAU,cAC3B,YAAY,UAAU,MAAM,MAAM,KAAK,UAAU,MAAM,MAAM,SAAS,SAAS,QAAQ;yBACpE,EAAE,OAAO,UAAU,cACtC,YAAY,UACR,MAAM,MAAM,QAAQ,QACpB,MAAM,MAAM,SAAS,SAAS,eAAe;;OAEhD,EAAE,OAAO,UAAU,UAAU,cAC9B,CAAC,YACD,kBAAA,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEP"}
+{"version":3,"file":"menuItem.cjs","names":["Color"],"sources":["../../mixins/menuItem.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport type { Variant } from 'design-system/theme';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface MenuItemMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\n/**\n * Adds styles for hovered and selected states. For use with dropdowns, menu\n * items, etc.\n *\n * The mixins are split by interaction state for more flexibility. We need to\n * implement each state differently when used with React Router's NavLink, for\n * example.\n *\n * Note that we override the palette for 'basic' to match the neutral usecase\n * shown in the mocks. There are never menu items that match our basic palette.\n *\n * Default: standard and disabled styles\n * Hover: hover and focus styles\n * Active: active styles\n */\nconst menuItemMixins = {\n  default: css<MenuItemMixinProps>`\n    cursor: pointer;\n    color: ${({ theme, variant = 'basic' }) =>\n      // default text color for these two should be neutral\n      ['basic', 'primary'].includes(variant)\n        ? theme.color.text.primary\n        : theme.color.variants[variant].default};\n\n    ${({ theme }) => css`\n      background-color: ${theme.color.background.primary};\n      border-radius: ${theme.element.borderRadius};\n    `}\n\n    ${({ theme, disabled }) =>\n      disabled &&\n      css`\n        background-color: ${theme.color.background.primary};\n        color: ${theme.color.text.disabled};\n        cursor: default;\n\n        svg * {\n          stroke: ${theme.color.text.disabled};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n  hover: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => {\n      if (variant === 'basic') {\n        return theme.color.text.primary;\n      }\n\n      if (variant === 'danger') {\n        return Color.CoreRed900;\n      }\n\n      return theme.color.variants[variant].default;\n    }};\n\n    background-color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic'\n        ? theme.color.background.secondary\n        : theme.color.variants[variant].highlightLight};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n  active: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic' ? theme.color.text.inverse : theme.color.variants[variant].default};\n    background-color: ${({ theme, variant = 'basic' }) =>\n      variant === 'basic'\n        ? theme.color.primary.brand\n        : theme.color.variants[variant].highlightLight};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        svg.pds-icon {\n          * {\n            stroke: unset;\n          }\n          /* Support icons with stroke */\n          *[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `}\n  `,\n};\n\nexport default menuItemMixins;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB;CACrB,SAAS,kBAAA,GAAuB;;cAEpB,EAAE,OAAO,UAAU,cAE3B,CAAC,SAAS,UAAU,CAAC,SAAS,QAAQ,GAClC,MAAM,MAAM,KAAK,UACjB,MAAM,MAAM,SAAS,SAAS,QAAQ;;OAEzC,EAAE,YAAY,kBAAA,GAAG;0BACE,MAAM,MAAM,WAAW,QAAQ;uBAClC,MAAM,QAAQ,aAAa;MAC5C;;OAEC,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;4BACmB,MAAM,MAAM,WAAW,QAAQ;iBAC1C,MAAM,MAAM,KAAK,SAAS;;;;oBAIvB,MAAM,MAAM,KAAK,SAAS;;;;;;;;;;;;QAYtC;;CAEN,OAAO,kBAAA,GAAuB;mCACmB;cACrC,EAAE,OAAO,UAAU,cAAc;AACzC,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;GACrC;;yBAEmB,EAAE,OAAO,UAAU,cACtC,YAAY,UACR,MAAM,MAAM,WAAW,YACvB,MAAM,MAAM,SAAS,SAAS,eAAe;;OAEhD,EAAE,OAAO,UAAU,UAAU,cAC9B,CAAC,YACD,kBAAA,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEN,QAAQ,kBAAA,GAAuB;mCACkB;cACrC,EAAE,OAAO,UAAU,cAC3B,YAAY,UAAU,MAAM,MAAM,KAAK,UAAU,MAAM,MAAM,SAAS,SAAS,QAAQ;yBACpE,EAAE,OAAO,UAAU,cACtC,YAAY,UACR,MAAM,MAAM,QAAQ,QACpB,MAAM,MAAM,SAAS,SAAS,eAAe;;OAEhD,EAAE,OAAO,UAAU,UAAU,cAC9B,CAAC,YACD,kBAAA,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAOA,uBAAAA,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEP"}

package/dist/mixins/menuItem.d.mts

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