@persona/design-system 0.1.5-pre.4

package/dist/mergeRefs-BgcbK0Qy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs-BgcbK0Qy.mjs","names":[],"sources":["../../../node_modules/@react-aria/utils/dist/mergeRefs.mjs"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ function $5dc95899b306f630$export$c9058316764c140e(...refs) {\n    if (refs.length === 1 && refs[0]) return refs[0];\n    return (value)=>{\n        let hasCleanup = false;\n        const cleanups = refs.map((ref)=>{\n            const cleanup = $5dc95899b306f630$var$setRef(ref, value);\n            hasCleanup || (hasCleanup = typeof cleanup == 'function');\n            return cleanup;\n        });\n        if (hasCleanup) return ()=>{\n            cleanups.forEach((cleanup, i)=>{\n                if (typeof cleanup === 'function') cleanup();\n                else $5dc95899b306f630$var$setRef(refs[i], null);\n            });\n        };\n    };\n}\nfunction $5dc95899b306f630$var$setRef(ref, value) {\n    if (typeof ref === 'function') return ref(value);\n    else if (ref != null) ref.current = value;\n}\n\n\nexport {$5dc95899b306f630$export$c9058316764c140e as mergeRefs};\n//# sourceMappingURL=mergeRefs.module.js.map\n"],"x_google_ignoreList":[0],"mappings":";AAUI,SAAS,0CAA0C,GAAG,MAAM;AAC5D,KAAI,KAAK,WAAW,KAAK,KAAK,GAAI,QAAO,KAAK;AAC9C,SAAQ,UAAQ;EACZ,IAAI,aAAa;EACjB,MAAM,WAAW,KAAK,KAAK,QAAM;GAC7B,MAAM,UAAU,6BAA6B,KAAK,MAAM;AACxD,kBAAe,aAAa,OAAO,WAAW;AAC9C,UAAO;IACT;AACF,MAAI,WAAY,cAAW;AACvB,YAAS,SAAS,SAAS,MAAI;AAC3B,QAAI,OAAO,YAAY,WAAY,UAAS;QACvC,8BAA6B,KAAK,IAAI,KAAK;KAClD;;;;AAId,SAAS,6BAA6B,KAAK,OAAO;AAC9C,KAAI,OAAO,QAAQ,WAAY,QAAO,IAAI,MAAM;UACvC,OAAO,KAAM,KAAI,UAAU"}

package/dist/mixins/focus.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-CoPdw6nB.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

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

package/dist/mixins/focus.d.cts

@@ -0,0 +1,11 @@
+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/focus.d.mts

@@ -0,0 +1,11 @@
+import { t as PseudoClassProps } from "../PseudoClassProps-mZgO_iZJ.mjs";
+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.mts.map

package/dist/mixins/focus.mjs

@@ -0,0 +1,34 @@
+import { isFocusedVisible, isNotDisabled } from "../lib/pseudoClass.mjs";
+import { Color } from "@persona/design-tokens";
+import { css } from "styled-components";
+//#region mixins/focus.ts
+const focusStyle = css`
+  outline-offset: 1px;
+  outline: ${Color.BorderFocus} solid 2px;
+`;
+const focusOutline = css`
+  outline: none;
+
+  &:focus-visible {
+    outline-offset: 1px;
+    outline: ${Color.BorderFocus} solid 2px;
+  }
+`;
+const focusOutlineControlled = css`
+  outline: none;
+
+  &${isFocusedVisible}${isNotDisabled} {
+    outline-offset: 1px;
+    outline: ${Color.BorderFocus} solid 2px;
+  }
+`;
+const focusWithinOutline = css`
+  &:focus-within {
+    outline-offset: 1px;
+    outline: ${Color.BorderFocus} solid 2px;
+  }
+`;
+//#endregion
+export { focusOutline, focusOutlineControlled, focusStyle, focusWithinOutline };
+
+//# sourceMappingURL=focus.mjs.map

package/dist/mixins/focus.mjs.map

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

package/dist/mixins/hoverable.cjs

@@ -0,0 +1,38 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../chunk-CoPdw6nB.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

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

@@ -0,0 +1,16 @@
+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/hoverable.d.mts

@@ -0,0 +1,16 @@
+import { t as PseudoClassProps } from "../PseudoClassProps-mZgO_iZJ.mjs";
+import { i as Variant } from "../theme-DGAqgnUa.mjs";
+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.mts.map

package/dist/mixins/hoverable.mjs

@@ -0,0 +1,32 @@
+import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
+import { focusOutlineControlled } from "./focus.mjs";
+import "../variables/effect.mjs";
+import "../variables/transitions.mjs";
+import { css } from "styled-components";
+//#region mixins/hoverable.ts
+const hoverMixin = css`
+  box-shadow:
+    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 = css`
+  cursor: pointer;
+  &${isDisabled} {
+    cursor: not-allowed;
+  }
+
+  transition: box-shadow ${"200ms"};
+
+  &${isHovered}${isNotDisabled} {
+    ${hoverMixin};
+  }
+
+  ${focusOutlineControlled}
+`;
+//#endregion
+export { hoverableMixin as default, hoverMixin };
+
+//# sourceMappingURL=hoverable.mjs.map

package/dist/mixins/hoverable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hoverable.mjs","names":[],"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,GAAwB;;;mFAG9B;;;;;AAMpB,MAAM,iBAAiB,GAAwB;;KAE1C,WAAW;;;;mCAImC;;KAE9C,YAAY,cAAc;MACzB,WAAW;;;IAGb,uBAAuB"}

package/dist/mixins/input.cjs

@@ -0,0 +1,95 @@
+require("../chunk-CoPdw6nB.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

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

package/dist/mixins/input.d.cts

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

package/dist/mixins/input.d.mts

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

package/dist/mixins/input.mjs

@@ -0,0 +1,94 @@
+import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
+import { focusOutlineControlled } from "./focus.mjs";
+import "../variables/transitions.mjs";
+import { printMixins } from "./print/index.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { css } from "styled-components";
+//#region mixins/input.ts
+/**
+* Provides input-like hover and focus outline effects. Can also be applied to
+* non-input elements (like divs) to give input-like styles.
+*/
+const inputMixin = 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;
+
+  ${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};
+  }
+
+  &${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};
+    }
+  }
+
+  &${isHovered}${isNotDisabled} {
+    border-color: ${({ theme }) => theme.color.border.inputHover};
+  }
+
+  ${({ $size }) => {
+	switch ($size) {
+		default:
+		case "md": return css`
+          height: ${({ theme }) => theme.element.height.xs};
+          padding-top: ${Spacing[2]};
+          padding-right: ${Spacing[3]};
+          padding-bottom: ${Spacing[2]};
+          padding-left: ${Spacing[3]};
+          ${Typography.TextMedium};
+        `;
+		case "sm": return css`
+          height: 24px;
+          padding-top: ${Spacing[1]};
+          padding-right: ${Spacing[2]};
+          padding-bottom: ${Spacing[1]};
+          padding-left: ${Spacing[2]};
+          ${Typography.TextSmall};
+        `;
+	}
+}}
+
+  ${({ theme, hasError, hasWarning }) => hasError ? css`
+          border-color: ${theme.color.variants.danger.default};
+
+          &${isHovered}${isNotDisabled} {
+            border-color: ${theme.color.variants.danger.default};
+          }
+        ` : hasWarning ? css`
+            border-color: ${Color.CoreOrange700};
+
+            ${isHovered}${isNotDisabled} {
+              border-color: ${Color.CoreOrange700};
+            }
+          ` : css`
+            border-color: ${theme.color.border.input};
+          `}
+
+  ${printMixins.hide}
+`;
+//#endregion
+export { inputMixin as default };
+
+//# sourceMappingURL=input.mjs.map

package/dist/mixins/input.mjs.map

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

package/dist/mixins/menuItem.cjs

@@ -0,0 +1,110 @@
+require("../chunk-CoPdw6nB.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

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

package/dist/mixins/menuItem.d.cts

@@ -0,0 +1,30 @@
+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/menuItem.d.mts

@@ -0,0 +1,31 @@
+import { t as PseudoClassProps } from "../PseudoClassProps-mZgO_iZJ.mjs";
+import { i as Variant } from "../theme-DGAqgnUa.mjs";
+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>>;
+};
+//#endregion
+export { menuItemMixins as default };
+//# sourceMappingURL=menuItem.d.mts.map