@persona/design-system 0.1.7 → 0.1.9

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-C2286H-r.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-C2286H-r.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-BkzqXwn7.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"}

package/dist/mixins/menuItem.d.cts

@@ -1,30 +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/menuItem.d.ts
-interface MenuItemMixinProps extends PseudoClassProps {
-  variant?: Variant;
-}
-/**
- * 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
- */
-declare const menuItemMixins: {
-  default: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<MenuItemMixinProps, any>>;
-  hover: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<MenuItemMixinProps, any>>;
-  active: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<MenuItemMixinProps, any>>;
-};
-export = menuItemMixins;
-//# sourceMappingURL=menuItem.d.cts.map

package/dist/mixins/print/index.cjs

@@ -1,25 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../chunk-CKQMccvm.cjs");
-let styled_components = require("styled-components");
-//#region mixins/print/index.ts
-const printMixins = {
-	hide: styled_components.css`
-    @media print {
-      display: none;
-    }
-  `,
-	border: styled_components.css`
-    @media print {
-      border: 1px solid ${({ theme }) => theme.color.border.primary};
-    }
-  `,
-	avoidPageBreak: styled_components.css`
-    @media print {
-      break-inside: avoid;
-    }
-  `
-};
-//#endregion
-exports.printMixins = printMixins;
-
-//# sourceMappingURL=index.cjs.map

package/dist/mixins/print/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../mixins/print/index.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nexport const printMixins = {\n  hide: css`\n    @media print {\n      display: none;\n    }\n  `,\n  border: css`\n    @media print {\n      border: 1px solid ${({ theme }) => theme.color.border.primary};\n    }\n  `,\n  avoidPageBreak: css`\n    @media print {\n      break-inside: avoid;\n    }\n  `,\n};\n"],"mappings":";;;;AAEA,MAAa,cAAc;CACzB,MAAM,kBAAA,GAAG;;;;;CAKT,QAAQ,kBAAA,GAAG;;2BAEc,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;CAGlE,gBAAgB,kBAAA,GAAG;;;;;CAKpB"}

package/dist/mixins/print/index.d.cts

@@ -1,11 +0,0 @@
-import * as _$styled_components0 from "styled-components";
-
-//#region mixins/print/index.d.ts
-declare const printMixins: {
-  hide: _$styled_components0.FlattenSimpleInterpolation;
-  border: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemeProps<any>>;
-  avoidPageBreak: _$styled_components0.FlattenSimpleInterpolation;
-};
-//#endregion
-export { printMixins };
-//# sourceMappingURL=index.d.cts.map