@persona/design-system 0.1.8 → 0.1.9

package/dist/lib/useIsOverflow.cjs

@@ -1,58 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CKQMccvm.cjs");
-let react = require("react");
-//#region lib/useIsOverflow.ts
-const INITIAL_STATE = {
-	isOverflowWidth: false,
-	isOverflowHeight: false
-};
-const subscribers = /* @__PURE__ */ new WeakMap();
-let sharedObserver = null;
-const measureOverflow = (el) => ({
-	isOverflowWidth: el.scrollWidth > el.clientWidth,
-	isOverflowHeight: el.scrollHeight > el.clientHeight
-});
-const getSharedObserver = () => {
-	if (sharedObserver) return sharedObserver;
-	sharedObserver = new ResizeObserver((entries) => {
-		const updates = [];
-		for (const entry of entries) {
-			const setter = subscribers.get(entry.target);
-			if (!setter) continue;
-			const el = entry.target;
-			updates.push({
-				setter,
-				state: measureOverflow(el)
-			});
-		}
-		for (const { setter, state } of updates) setter(state);
-	});
-	return sharedObserver;
-};
-const useIsOverflow = (ref) => {
-	const [state, setState] = (0, react.useState)(INITIAL_STATE);
-	(0, react.useLayoutEffect)(() => {
-		const node = ref.current;
-		if (!node) return;
-		const onUpdate = (next) => {
-			setState((prev) => prev.isOverflowWidth === next.isOverflowWidth && prev.isOverflowHeight === next.isOverflowHeight ? prev : next);
-		};
-		subscribers.set(node, onUpdate);
-		const observer = getSharedObserver();
-		observer.observe(node);
-		onUpdate(measureOverflow(node));
-		return () => {
-			observer.unobserve(node);
-			subscribers.delete(node);
-		};
-	}, [ref]);
-	return (0, react.useMemo)(() => ({
-		isOverflowWidth: state.isOverflowWidth,
-		isOverflowHeight: state.isOverflowHeight,
-		isOverflow: state.isOverflowWidth || state.isOverflowHeight
-	}), [state]);
-};
-//#endregion
-exports.useIsOverflow = useIsOverflow;
-
-//# sourceMappingURL=useIsOverflow.cjs.map

package/dist/lib/useIsOverflow.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsOverflow.cjs","names":[],"sources":["../../lib/useIsOverflow.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useMemo, useState } from 'react';\n\ntype OverflowState = {\n  isOverflowWidth: boolean;\n  isOverflowHeight: boolean;\n};\n\nconst INITIAL_STATE: OverflowState = { isOverflowWidth: false, isOverflowHeight: false };\n\nconst subscribers = new WeakMap<Element, (state: OverflowState) => void>();\nlet sharedObserver: ResizeObserver | null = null;\n\nconst measureOverflow = (el: HTMLElement): OverflowState => ({\n  isOverflowWidth: el.scrollWidth > el.clientWidth,\n  isOverflowHeight: el.scrollHeight > el.clientHeight,\n});\n\nconst getSharedObserver = (): ResizeObserver => {\n  if (sharedObserver) {\n    return sharedObserver;\n  }\n  sharedObserver = new ResizeObserver((entries) => {\n    const updates: { setter: (state: OverflowState) => void; state: OverflowState }[] = [];\n    for (const entry of entries) {\n      const setter = subscribers.get(entry.target);\n      if (!setter) {\n        continue;\n      }\n      const el = entry.target as HTMLElement;\n      updates.push({\n        setter,\n        state: measureOverflow(el),\n      });\n    }\n    for (const { setter, state } of updates) {\n      setter(state);\n    }\n  });\n  return sharedObserver;\n};\n\nexport const useIsOverflow = <T extends HTMLElement>(ref: RefObject<T>) => {\n  const [state, setState] = useState<OverflowState>(INITIAL_STATE);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n\n    const onUpdate = (next: OverflowState) => {\n      setState((prev) =>\n        prev.isOverflowWidth === next.isOverflowWidth &&\n        prev.isOverflowHeight === next.isOverflowHeight\n          ? prev\n          : next,\n      );\n    };\n\n    subscribers.set(node, onUpdate);\n    const observer = getSharedObserver();\n    observer.observe(node);\n    onUpdate(measureOverflow(node));\n\n    return () => {\n      observer.unobserve(node);\n      subscribers.delete(node);\n    };\n  }, [ref]);\n\n  return useMemo(\n    () => ({\n      isOverflowWidth: state.isOverflowWidth,\n      isOverflowHeight: state.isOverflowHeight,\n      isOverflow: state.isOverflowWidth || state.isOverflowHeight,\n    }),\n    [state],\n  );\n};\n"],"mappings":";;;;AAOA,MAAM,gBAA+B;CAAE,iBAAiB;CAAO,kBAAkB;CAAO;AAExF,MAAM,8BAAc,IAAI,SAAkD;AAC1E,IAAI,iBAAwC;AAE5C,MAAM,mBAAmB,QAAoC;CAC3D,iBAAiB,GAAG,cAAc,GAAG;CACrC,kBAAkB,GAAG,eAAe,GAAG;CACxC;AAED,MAAM,0BAA0C;AAC9C,KAAI,eACF,QAAO;AAET,kBAAiB,IAAI,gBAAgB,YAAY;EAC/C,MAAM,UAA8E,EAAE;AACtF,OAAK,MAAM,SAAS,SAAS;GAC3B,MAAM,SAAS,YAAY,IAAI,MAAM,OAAO;AAC5C,OAAI,CAAC,OACH;GAEF,MAAM,KAAK,MAAM;AACjB,WAAQ,KAAK;IACX;IACA,OAAO,gBAAgB,GAAG;IAC3B,CAAC;;AAEJ,OAAK,MAAM,EAAE,QAAQ,WAAW,QAC9B,QAAO,MAAM;GAEf;AACF,QAAO;;AAGT,MAAa,iBAAwC,QAAsB;CACzE,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAoC,cAAc;AAEhE,EAAA,GAAA,MAAA,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAGF,MAAM,YAAY,SAAwB;AACxC,aAAU,SACR,KAAK,oBAAoB,KAAK,mBAC9B,KAAK,qBAAqB,KAAK,mBAC3B,OACA,KACL;;AAGH,cAAY,IAAI,MAAM,SAAS;EAC/B,MAAM,WAAW,mBAAmB;AACpC,WAAS,QAAQ,KAAK;AACtB,WAAS,gBAAgB,KAAK,CAAC;AAE/B,eAAa;AACX,YAAS,UAAU,KAAK;AACxB,eAAY,OAAO,KAAK;;IAEzB,CAAC,IAAI,CAAC;AAET,SAAA,GAAA,MAAA,gBACS;EACL,iBAAiB,MAAM;EACvB,kBAAkB,MAAM;EACxB,YAAY,MAAM,mBAAmB,MAAM;EAC5C,GACD,CAAC,MAAM,CACR"}

package/dist/lib/useIsOverflow.d.cts

@@ -1,11 +0,0 @@
-import { RefObject } from "react";
-
-//#region lib/useIsOverflow.d.ts
-declare const useIsOverflow: <T extends HTMLElement>(ref: RefObject<T>) => {
-  isOverflowWidth: boolean;
-  isOverflowHeight: boolean;
-  isOverflow: boolean;
-};
-//#endregion
-export { useIsOverflow };
-//# sourceMappingURL=useIsOverflow.d.cts.map

package/dist/lib/useOutsideClick.cjs

@@ -1,19 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../chunk-CKQMccvm.cjs");
-let react = require("react");
-//#region lib/useOutsideClick.tsx
-const useOutsideClick = ({ ref, onOutsideClick }) => {
-	(0, react.useEffect)(() => {
-		const handleClick = (event) => {
-			if (ref.current && !ref.current.contains(event.target)) onOutsideClick(event);
-		};
-		document.addEventListener("mousedown", handleClick);
-		return () => {
-			document.removeEventListener("mousedown", handleClick);
-		};
-	}, [ref, onOutsideClick]);
-};
-//#endregion
-exports.useOutsideClick = useOutsideClick;
-
-//# sourceMappingURL=useOutsideClick.cjs.map

package/dist/lib/useOutsideClick.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOutsideClick.cjs","names":[],"sources":["../../lib/useOutsideClick.tsx"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\nexport const useOutsideClick = ({\n  ref,\n  onOutsideClick,\n}: {\n  ref: RefObject<HTMLElement>;\n  onOutsideClick: (event: MouseEvent) => void;\n}) => {\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onOutsideClick(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, [ref, onOutsideClick]);\n};\n"],"mappings":";;;;AAEA,MAAa,mBAAmB,EAC9B,KACA,qBAII;AACJ,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,eAAe,UAAsB;AACzC,OAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,OAAe,CAC5D,gBAAe,MAAM;;AAIzB,WAAS,iBAAiB,aAAa,YAAY;AACnD,eAAa;AACX,YAAS,oBAAoB,aAAa,YAAY;;IAEvD,CAAC,KAAK,eAAe,CAAC"}

package/dist/lib/useOutsideClick.d.cts

@@ -1,13 +0,0 @@
-import { RefObject } from "react";
-
-//#region lib/useOutsideClick.d.ts
-declare const useOutsideClick: ({
-  ref,
-  onOutsideClick
-}: {
-  ref: RefObject<HTMLElement>;
-  onOutsideClick: (event: MouseEvent) => void;
-}) => void;
-//#endregion
-export { useOutsideClick };
-//# sourceMappingURL=useOutsideClick.d.cts.map

package/dist/lib/useScrollOverflow.cjs

@@ -1,61 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,36 +0,0 @@
-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/zindex.cjs

@@ -1,26 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region lib/zindex.ts
-const Z_INDICES = {
-	withShadow: 1,
-	sticky: 2,
-	loadingOverlays: 5,
-	tooltip: 10,
-	floatingBar: 100,
-	topNav: 1e3,
-	dropdown: 1001,
-	layeredDropdown: 1002,
-	banner: 2e3,
-	sideNav: 3e3,
-	topNavTooltip: 3001,
-	modal: 1e4,
-	modalElevated: 10001,
-	modalDropdown: 10010,
-	modalDropdownTooltip: 10020,
-	personaAssistant: 10011,
-	modalBlocking: 10030,
-	toast: 1e5
-};
-//#endregion
-exports.Z_INDICES = Z_INDICES;
-
-//# sourceMappingURL=zindex.cjs.map

package/dist/lib/zindex.cjs.map

@@ -1 +0,0 @@
-{"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/lib/zindex.d.cts

@@ -1,25 +0,0 @@
-//#region lib/zindex.d.ts
-declare const Z_INDICES: {
-  readonly withShadow: 1;
-  readonly sticky: 2;
-  readonly loadingOverlays: 5;
-  readonly tooltip: 10;
-  readonly floatingBar: 100;
-  readonly topNav: 1000;
-  readonly dropdown: 1001;
-  readonly layeredDropdown: 1002;
-  readonly banner: 2000;
-  readonly sideNav: 3000;
-  readonly topNavTooltip: 3001;
-  readonly modal: 10000;
-  readonly modalElevated: 10001;
-  readonly modalDropdown: 10010;
-  readonly modalDropdownTooltip: 10020;
-  readonly personaAssistant: 10011;
-  readonly modalBlocking: 10030;
-  readonly toast: 100000;
-};
-type ZIndex = (typeof Z_INDICES)[keyof typeof Z_INDICES];
-//#endregion
-export { ZIndex, Z_INDICES };
-//# sourceMappingURL=zindex.d.cts.map

package/dist/message-BEgtEjQC.d.cts

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

package/dist/mixins/focus.cjs

@@ -1,39 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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");
-//#region mixins/focus.ts
-const focusStyle = styled_components.css`
-  outline-offset: 1px;
-  outline: ${_persona_design_tokens.Color.BorderFocus} solid 2px;
-`;
-const focusOutline = styled_components.css`
-  outline: none;
-
-  &:focus-visible {
-    outline-offset: 1px;
-    outline: ${_persona_design_tokens.Color.BorderFocus} solid 2px;
-  }
-`;
-const focusOutlineControlled = styled_components.css`
-  outline: none;
-
-  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} {
-    outline-offset: 1px;
-    outline: ${_persona_design_tokens.Color.BorderFocus} solid 2px;
-  }
-`;
-const focusWithinOutline = styled_components.css`
-  &:focus-within {
-    outline-offset: 1px;
-    outline: ${_persona_design_tokens.Color.BorderFocus} solid 2px;
-  }
-`;
-//#endregion
-exports.focusOutline = focusOutline;
-exports.focusOutlineControlled = focusOutlineControlled;
-exports.focusStyle = focusStyle;
-exports.focusWithinOutline = focusWithinOutline;
-
-//# sourceMappingURL=focus.cjs.map

package/dist/mixins/focus.cjs.map

@@ -1 +0,0 @@
-{"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.cts

@@ -1,11 +0,0 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-C5jpj6Rp.cjs";
-import * as _$styled_components0 from "styled-components";
-
-//#region mixins/focus.d.ts
-declare const focusStyle: _$styled_components0.FlattenSimpleInterpolation;
-declare const focusOutline: _$styled_components0.FlattenSimpleInterpolation;
-declare const focusOutlineControlled: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<PseudoClassProps, any>>;
-declare const focusWithinOutline: _$styled_components0.FlattenSimpleInterpolation;
-//#endregion
-export { focusOutline, focusOutlineControlled, focusStyle, focusWithinOutline };
-//# sourceMappingURL=focus.d.cts.map

package/dist/mixins/hoverable.cjs

@@ -1,38 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-require("../chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("../lib/pseudoClass.cjs");
-const require_mixins_focus = require("./focus.cjs");
-require("../variables/effect.cjs");
-require("../variables/transitions.cjs");
-let styled_components = require("styled-components");
-//#region mixins/hoverable.ts
-const hoverMixin = styled_components.css`
-  box-shadow:
-    0 0 0 3px transparent,
-    ${"0px 8px 14px 0px rgba(0, 0, 0, 0.06), 0px 3px 24px 0px rgba(0, 0, 0, 0.06)"};
-`;
-/**
-* Adds an outline for a11y when focused, and a shadow when hovered.
-*/
-const hoverableMixin = styled_components.css`
-  cursor: pointer;
-  &${require_lib_pseudoClass.isDisabled} {
-    cursor: not-allowed;
-  }
-
-  transition: box-shadow ${"200ms"};
-
-  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-    ${hoverMixin};
-  }
-
-  ${require_mixins_focus.focusOutlineControlled}
-`;
-//#endregion
-exports.default = hoverableMixin;
-exports.hoverMixin = hoverMixin;
-
-//# sourceMappingURL=hoverable.cjs.map

package/dist/mixins/hoverable.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"hoverable.cjs","names":["isDisabled","isHovered","isNotDisabled","focusOutlineControlled"],"sources":["../../mixins/hoverable.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport type { Variant } from 'design-system/theme';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { Elevation } from 'design-system/variables/effect';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface HoverableMixinProps extends PseudoClassProps {\n  variant?: Variant;\n}\n\nexport const hoverMixin = css<HoverableMixinProps>`\n  box-shadow:\n    0 0 0 3px transparent,\n    ${Elevation.Mid};\n`;\n\n/**\n * Adds an outline for a11y when focused, and a shadow when hovered.\n */\nconst hoverableMixin = css<HoverableMixinProps>`\n  cursor: pointer;\n  &${isDisabled} {\n    cursor: not-allowed;\n  }\n\n  transition: box-shadow ${TransitionDuration.Fast};\n\n  &${isHovered}${isNotDisabled} {\n    ${hoverMixin};\n  }\n\n  ${focusOutlineControlled}\n`;\n\nexport default hoverableMixin;\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,aAAa,kBAAA,GAAwB;;;mFAG9B;;;;;AAMpB,MAAM,iBAAiB,kBAAA,GAAwB;;KAE1CA,wBAAAA,WAAW;;;;mCAImC;;KAE9CC,wBAAAA,YAAYC,wBAAAA,cAAc;MACzB,WAAW;;;IAGbC,qBAAAA,uBAAuB"}

package/dist/mixins/hoverable.d.cts

@@ -1,16 +0,0 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-C5jpj6Rp.cjs";
-import { i as Variant } from "../theme-Cadb1xzQ.cjs";
-import * as _$styled_components0 from "styled-components";
-
-//#region mixins/hoverable.d.ts
-interface HoverableMixinProps extends PseudoClassProps {
-  variant?: Variant;
-}
-declare const hoverMixin: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<HoverableMixinProps, any>>;
-/**
- * Adds an outline for a11y when focused, and a shadow when hovered.
- */
-declare const hoverableMixin: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<HoverableMixinProps, any>>;
-//#endregion
-export { hoverableMixin as default, hoverMixin };
-//# sourceMappingURL=hoverable.d.cts.map

package/dist/mixins/input.cjs

@@ -1,95 +0,0 @@
-require("../chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("../lib/pseudoClass.cjs");
-const require_mixins_focus = require("./focus.cjs");
-require("../variables/transitions.cjs");
-const require_mixins_print_index = require("./print/index.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-//#region mixins/input.ts
-/**
-* Provides input-like hover and focus outline effects. Can also be applied to
-* non-input elements (like divs) to give input-like styles.
-*/
-const inputMixin = styled_components.css`
-  background: ${({ theme }) => theme.color.background.primary};
-  color: ${({ theme }) => theme.color.text.primary};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({ theme }) => theme.color.border.input};
-  box-sizing: border-box;
-  border-radius: ${({ theme }) => theme.element.borderRadius};
-
-  width: 100%;
-  min-width: 0;
-
-  ${require_mixins_focus.focusOutlineControlled}
-
-  text-decoration: none;
-  transition-duration: ${"200ms"};
-  transition-property: background-color, color, border-color, width, height;
-
-  /* Some input-likes like <select/> reduce opacity when disabled */
-  opacity: 1;
-
-  &::placeholder {
-    font-weight: ${({ theme }) => theme.text.paragraph.md.fontWeight};
-    color: ${({ theme }) => theme.color.text.tertiary};
-  }
-
-  &${require_lib_pseudoClass.isDisabled} {
-    background: ${({ theme }) => theme.color.background.disabled};
-    border-color: ${({ theme }) => theme.color.border.disabled};
-    color: ${({ theme }) => theme.color.text.disabled};
-    ::placeholder {
-      color: ${({ theme }) => theme.color.text.disabled};
-    }
-  }
-
-  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-    border-color: ${({ theme }) => theme.color.border.inputHover};
-  }
-
-  ${({ $size }) => {
-	switch ($size) {
-		default:
-		case "md": return styled_components.css`
-          height: ${({ theme }) => theme.element.height.xs};
-          padding-top: ${_persona_design_tokens.Spacing[2]};
-          padding-right: ${_persona_design_tokens.Spacing[3]};
-          padding-bottom: ${_persona_design_tokens.Spacing[2]};
-          padding-left: ${_persona_design_tokens.Spacing[3]};
-          ${_persona_design_tokens.Typography.TextMedium};
-        `;
-		case "sm": return styled_components.css`
-          height: 24px;
-          padding-top: ${_persona_design_tokens.Spacing[1]};
-          padding-right: ${_persona_design_tokens.Spacing[2]};
-          padding-bottom: ${_persona_design_tokens.Spacing[1]};
-          padding-left: ${_persona_design_tokens.Spacing[2]};
-          ${_persona_design_tokens.Typography.TextSmall};
-        `;
-	}
-}}
-
-  ${({ theme, hasError, hasWarning }) => hasError ? styled_components.css`
-          border-color: ${theme.color.variants.danger.default};
-
-          &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-            border-color: ${theme.color.variants.danger.default};
-          }
-        ` : hasWarning ? styled_components.css`
-            border-color: ${_persona_design_tokens.Color.CoreOrange700};
-
-            ${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-              border-color: ${_persona_design_tokens.Color.CoreOrange700};
-            }
-          ` : styled_components.css`
-            border-color: ${theme.color.border.input};
-          `}
-
-  ${require_mixins_print_index.printMixins.hide}
-`;
-//#endregion
-module.exports = inputMixin;
-
-//# sourceMappingURL=input.cjs.map

package/dist/mixins/input.cjs.map

@@ -1 +0,0 @@
-{"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 +0,0 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-DPB0cX2m.cjs";
-export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/menuItem.cjs

@@ -1,110 +0,0 @@
-require("../chunk-CKQMccvm.cjs");
-require("../variables/transitions.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-//#region mixins/menuItem.ts
-/**
-* Adds styles for hovered and selected states. For use with dropdowns, menu
-* items, etc.
-*
-* The mixins are split by interaction state for more flexibility. We need to
-* implement each state differently when used with React Router's NavLink, for
-* example.
-*
-* Note that we override the palette for 'basic' to match the neutral usecase
-* shown in the mocks. There are never menu items that match our basic palette.
-*
-* Default: standard and disabled styles
-* Hover: hover and focus styles
-* Active: active styles
-*/
-const menuItemMixins = {
-	default: styled_components.css`
-    cursor: pointer;
-    color: ${({ theme, variant = "basic" }) => ["basic", "primary"].includes(variant) ? theme.color.text.primary : theme.color.variants[variant].default};
-
-    ${({ theme }) => styled_components.css`
-      background-color: ${theme.color.background.primary};
-      border-radius: ${theme.element.borderRadius};
-    `}
-
-    ${({ theme, disabled }) => disabled && styled_components.css`
-        background-color: ${theme.color.background.primary};
-        color: ${theme.color.text.disabled};
-        cursor: default;
-
-        svg * {
-          stroke: ${theme.color.text.disabled};
-        }
-
-        svg.pds-icon {
-          * {
-            stroke: unset;
-          }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
-          }
-        }
-      `}
-  `,
-	hover: styled_components.css`
-    transition-duration: ${"200ms"};
-    color: ${({ theme, variant = "basic" }) => {
-		if (variant === "basic") return theme.color.text.primary;
-		if (variant === "danger") return _persona_design_tokens.Color.CoreRed900;
-		return theme.color.variants[variant].default;
-	}};
-
-    background-color: ${({ theme, variant = "basic" }) => variant === "basic" ? theme.color.background.secondary : theme.color.variants[variant].highlightLight};
-
-    ${({ theme, disabled, variant = "basic" }) => !disabled && styled_components.css`
-        svg * {
-          stroke: ${(() => {
-		if (variant === "basic") return theme.color.text.primary;
-		if (variant === "danger") return _persona_design_tokens.Color.CoreRed900;
-		return theme.color.variants[variant].default;
-	})()};
-        }
-
-        svg.pds-icon {
-          * {
-            stroke: unset;
-          }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
-          }
-        }
-      `}
-  `,
-	active: styled_components.css`
-    transition-duration: ${"200ms"};
-    color: ${({ theme, variant = "basic" }) => variant === "basic" ? theme.color.text.inverse : theme.color.variants[variant].default};
-    background-color: ${({ theme, variant = "basic" }) => variant === "basic" ? theme.color.primary.brand : theme.color.variants[variant].highlightLight};
-
-    ${({ theme, disabled, variant = "basic" }) => !disabled && styled_components.css`
-        svg * {
-          stroke: ${(() => {
-		if (variant === "basic") return theme.color.text.primary;
-		if (variant === "danger") return _persona_design_tokens.Color.CoreRed900;
-		return theme.color.variants[variant].default;
-	})()};
-        }
-
-        svg.pds-icon {
-          * {
-            stroke: unset;
-          }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
-          }
-        }
-      `}
-  `
-};
-//#endregion
-module.exports = menuItemMixins;
-
-//# sourceMappingURL=menuItem.cjs.map

package/dist/mixins/menuItem.cjs.map

@@ -1 +0,0 @@
-{"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"}