@persona/design-system 0.5.0 → 0.6.0

package/dist/mixins/menuItem.mjs

@@ -1,7 +1,27 @@
-import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
+import { r as css } from "../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticTokens } from "../lib/semanticColor.mjs";
 import "../variables/transitions.mjs";
+import { withAlpha } from "../lib/color.mjs";
 import { Color } from "@persona/design-tokens";
 //#region mixins/menuItem.ts
+const iconStrokeReset = css`
+  svg.pds-icon {
+    * {
+      stroke: unset;
+    }
+    /* Support icons with stroke */
+    *[stroke] {
+      stroke: currentColor;
+    }
+  }
+`;
+const hoverColor = (theme, variant) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) return variant === "danger" ? tokens.FgDanger2 : tokens.FgPrimary;
+	if (variant === "basic") return theme.color.text.primary;
+	if (variant === "danger") return Color.CoreRed900;
+	return theme.color.variants[variant].default;
+};
 /**
 * Adds styles for hovered and selected states. For use with dropdowns, menu
 * items, etc.
@@ -20,86 +40,94 @@ import { Color } from "@persona/design-tokens";
 const menuItemMixins = {
 	default: css`
     cursor: pointer;
-    color: ${({ theme, variant = "basic" }) => ["basic", "primary"].includes(variant) ? theme.color.text.primary : theme.color.variants[variant].default};
+    color: ${({ theme, variant = "basic" }) => {
+		const tokens = semanticTokens(theme);
+		if (tokens) return variant === "danger" ? tokens.FgDanger1 : tokens.FgPrimary;
+		return ["basic", "primary"].includes(variant) ? theme.color.text.primary : theme.color.variants[variant].default;
+	}};
 
     ${({ theme }) => css`
-      background-color: ${theme.color.background.primary};
+      background-color: ${semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
       border-radius: ${theme.element.borderRadius};
     `}
 
-    ${({ theme, disabled }) => disabled && css`
-        background-color: ${theme.color.background.primary};
-        color: ${theme.color.text.disabled};
-        cursor: default;
-
-        svg * {
-          stroke: ${theme.color.text.disabled};
-        }
+    ${({ theme, disabled, variant = "basic" }) => {
+		if (disabled) {
+			const disabledColor = semanticColor(theme, "FgDisabled", theme.color.text.disabled);
+			return css`
+          background-color: ${semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
+          color: ${disabledColor};
+          cursor: default;
 
-        svg.pds-icon {
-          * {
-            stroke: unset;
+          svg * {
+            stroke: ${disabledColor};
           }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
+
+          ${iconStrokeReset}
+        `;
+		}
+		const tokens = semanticTokens(theme);
+		return tokens && variant === "basic" && css`
+          svg * {
+            stroke: ${tokens.FgPrimary};
           }
-        }
-      `}
+
+          ${iconStrokeReset}
+        `;
+	}}
   `,
 	hover: css`
     transition-duration: ${"200ms"};
-    color: ${({ theme, variant = "basic" }) => {
-		if (variant === "basic") return theme.color.text.primary;
-		if (variant === "danger") return Color.CoreRed900;
-		return theme.color.variants[variant].default;
-	}};
+    color: ${({ theme, variant = "basic" }) => hoverColor(theme, variant)};
 
-    background-color: ${({ theme, variant = "basic" }) => variant === "basic" ? theme.color.background.secondary : theme.color.variants[variant].highlightLight};
+    background-color: ${({ theme, variant = "basic" }) => {
+		const tokens = semanticTokens(theme);
+		if (tokens) return variant === "danger" ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25) : tokens.SurfaceHover;
+		return variant === "basic" ? theme.color.background.secondary : theme.color.variants[variant].highlightLight;
+	}};
 
     ${({ theme, disabled, variant = "basic" }) => !disabled && css`
         svg * {
-          stroke: ${(() => {
-		if (variant === "basic") return theme.color.text.primary;
-		if (variant === "danger") return Color.CoreRed900;
-		return theme.color.variants[variant].default;
-	})()};
+          stroke: ${hoverColor(theme, variant)};
         }
 
-        svg.pds-icon {
-          * {
-            stroke: unset;
-          }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
-          }
-        }
+        ${iconStrokeReset}
       `}
   `,
 	active: 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};
+    color: ${({ theme, variant = "basic" }) => {
+		const tokens = semanticTokens(theme);
+		if (tokens) {
+			if (variant === "basic") return tokens.FgAccent;
+			return variant === "danger" ? tokens.FgDanger2 : tokens.FgPrimary;
+		}
+		return variant === "basic" ? theme.color.text.inverse : theme.color.variants[variant].default;
+	}};
+    background-color: ${({ theme, variant = "basic" }) => {
+		const tokens = semanticTokens(theme);
+		if (tokens) {
+			if (variant === "basic") return withAlpha(tokens.SurfaceAccent, tokens.Opacity25);
+			return variant === "danger" ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25) : tokens.SurfaceSecondary;
+		}
+		return variant === "basic" ? theme.color.primary.brand : theme.color.variants[variant].highlightLight;
+	}};
 
     ${({ theme, disabled, variant = "basic" }) => !disabled && css`
         svg * {
           stroke: ${(() => {
+		const tokens = semanticTokens(theme);
+		if (tokens) {
+			if (variant === "basic") return tokens.FgAccent;
+			return variant === "danger" ? tokens.FgDanger2 : tokens.FgPrimary;
+		}
 		if (variant === "basic") return theme.color.text.primary;
 		if (variant === "danger") return Color.CoreRed900;
 		return theme.color.variants[variant].default;
 	})()};
         }
 
-        svg.pds-icon {
-          * {
-            stroke: unset;
-          }
-          /* Support icons with stroke */
-          *[stroke] {
-            stroke: currentColor;
-          }
-        }
+        ${iconStrokeReset}
       `}
   `
 };

package/dist/mixins/menuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.mjs","names":[],"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,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,GAAG;0BACE,MAAM,MAAM,WAAW,QAAQ;uBAClC,MAAM,QAAQ,aAAa;MAC5C;;OAEC,EAAE,OAAO,eACV,YACA,GAAG;4BACmB,MAAM,MAAM,WAAW,QAAQ;iBAC1C,MAAM,MAAM,KAAK,SAAS;;;;oBAIvB,MAAM,MAAM,KAAK,SAAS;;;;;;;;;;;;QAYtC;;CAEN,OAAO,GAAuB;mCACmB;cACrC,EAAE,OAAO,UAAU,cAAc;AACzC,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAO,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,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAO,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEN,QAAQ,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,GAAG;;2BAEkB;AACf,MAAI,YAAY,QACd,QAAO,MAAM,MAAM,KAAK;AAG1B,MAAI,YAAY,SACd,QAAO,MAAM;AAGf,SAAO,MAAM,MAAM,SAAS,SAAS;KACnC,CAAC;;;;;;;;;;;;QAYP;;CAEP"}
+{"version":3,"file":"menuItem.mjs","names":[],"sources":["../../mixins/menuItem.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport type { PersonaTheme, 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\nconst iconStrokeReset = css`\n  svg.pds-icon {\n    * {\n      stroke: unset;\n    }\n    /* Support icons with stroke */\n    *[stroke] {\n      stroke: currentColor;\n    }\n  }\n`;\n\nconst hoverColor = (theme: PersonaTheme, variant: Variant) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n  }\n  if (variant === 'basic') {\n    return theme.color.text.primary;\n  }\n  if (variant === 'danger') {\n    return Color.CoreRed900;\n  }\n  return theme.color.variants[variant].default;\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      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger' ? tokens.FgDanger1 : tokens.FgPrimary;\n      }\n      // default text color for these two should be neutral\n      return ['basic', 'primary'].includes(variant)\n        ? theme.color.text.primary\n        : theme.color.variants[variant].default;\n    }};\n\n    ${({ theme }) => css`\n      background-color: ${semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      border-radius: ${theme.element.borderRadius};\n    `}\n\n    ${({ theme, disabled, variant = 'basic' }) => {\n      if (disabled) {\n        const disabledColor = semanticColor(theme, 'FgDisabled', theme.color.text.disabled);\n        return css`\n          background-color: ${semanticColor(\n            theme,\n            'SurfacePrimary',\n            theme.color.background.primary,\n          )};\n          color: ${disabledColor};\n          cursor: default;\n\n          svg * {\n            stroke: ${disabledColor};\n          }\n\n          ${iconStrokeReset}\n        `;\n      }\n\n      const tokens = semanticTokens(theme);\n      return (\n        tokens &&\n        variant === 'basic' &&\n        css`\n          svg * {\n            stroke: ${tokens.FgPrimary};\n          }\n\n          ${iconStrokeReset}\n        `\n      );\n    }}\n  `,\n  hover: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => hoverColor(theme, variant)};\n\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceHover;\n      }\n      return variant === 'basic'\n        ? theme.color.background.secondary\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${hoverColor(theme, variant)};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n  active: css<MenuItemMixinProps>`\n    transition-duration: ${TransitionDuration.Fast};\n    color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return tokens.FgAccent;\n        }\n        return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n      }\n      return variant === 'basic' ? theme.color.text.inverse : theme.color.variants[variant].default;\n    }};\n    background-color: ${({ theme, variant = 'basic' }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (variant === 'basic') {\n          return withAlpha(tokens.SurfaceAccent, tokens.Opacity25);\n        }\n        return variant === 'danger'\n          ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n          : tokens.SurfaceSecondary;\n      }\n      return variant === 'basic'\n        ? theme.color.primary.brand\n        : theme.color.variants[variant].highlightLight;\n    }};\n\n    ${({ theme, disabled, variant = 'basic' }) =>\n      !disabled &&\n      css`\n        svg * {\n          stroke: ${(() => {\n            const tokens = semanticTokens(theme);\n            if (tokens) {\n              if (variant === 'basic') {\n                return tokens.FgAccent;\n              }\n              return variant === 'danger' ? tokens.FgDanger2 : tokens.FgPrimary;\n            }\n            if (variant === 'basic') {\n              return theme.color.text.primary;\n            }\n            if (variant === 'danger') {\n              return Color.CoreRed900;\n            }\n            return theme.color.variants[variant].default;\n          })()};\n        }\n\n        ${iconStrokeReset}\n      `}\n  `,\n};\n\nexport default menuItemMixins;\n"],"mappings":"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"}

package/dist/mixins/print/index.mjs

@@ -1,4 +1,5 @@
-import { r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
 //#region mixins/print/index.ts
 const printMixins = {
 	hide: css`
@@ -8,7 +9,8 @@ const printMixins = {
   `,
 	border: css`
     @media print {
-      border: 1px solid ${({ theme }) => theme.color.border.primary};
+      border: 1px solid
+        ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
     }
   `,
 	avoidPageBreak: css`

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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,GAAG;;;;;CAKT,QAAQ,GAAG;;2BAEc,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;CAGlE,gBAAgB,GAAG;;;;;CAKpB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../mixins/print/index.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { semanticColor } from 'design-system/lib/semanticColor';\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\n        ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n    }\n  `,\n  avoidPageBreak: css`\n    @media print {\n      break-inside: avoid;\n    }\n  `,\n};\n"],"mappings":";;;AAIA,MAAa,cAAc;CACzB,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;WAGF,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;CAGzF,gBAAgB,GAAG;;;;;CAKpB"}

package/dist/mixins/text.d.mts

@@ -1,2 +1,2 @@
-import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-DjTGRUM1.mjs";
+import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-BaQdW8qa.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };

package/dist/mixins/text.mjs

@@ -1,4 +1,4 @@
-import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
+import { r as css } from "../styledComponentsInterop-NxwFjeA4.mjs";
 import { Typography } from "@persona/design-tokens";
 //#region mixins/text.ts
 const fontFamilyMixin = css`

package/dist/{operators-CXkmvFpP.d.mts → operators-F8X0hyQB.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, l as FilterRule, r as DateRangeFilterValue, s as FilterFieldType, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
+import { a as FilterField, c as FilterOperator, l as FilterRule, r as DateRangeFilterValue, s as FilterFieldType, u as FilterRuleValue } from "./types-1_JSe9Wr.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/operators.d.ts
 declare function getOperatorsForType(type: FilterFieldType): ReadonlyArray<FilterOperator>;
@@ -68,4 +68,4 @@ declare function emptyValueForRule(field: Pick<FilterField, 'type'>, operator: F
 declare function reconcileValueForOperator(field: Pick<FilterField, 'type'>, nextOperator: FilterOperator, previousOperator: FilterOperator, value: FilterRuleValue): FilterRuleValue;
 //#endregion
 export { getDefaultOperatorForType as a, getOperatorsForType as c, isValuelessOperator as d, reconcileValueForOperator as f, fieldHasMultipleOperators as i, isCompleteDateRange as l, emptyValueForFieldType as n, getOperatorLabel as o, withValue as p, emptyValueForRule as r, getOperatorsForField as s, carriesDateRange as t, isRangeOperator as u };
-//# sourceMappingURL=operators-CXkmvFpP.d.mts.map
+//# sourceMappingURL=operators-F8X0hyQB.d.mts.map

package/dist/operators.d.mts

@@ -1,2 +1,2 @@
-import { a as getDefaultOperatorForType, c as getOperatorsForType, d as isValuelessOperator, f as reconcileValueForOperator, i as fieldHasMultipleOperators, l as isCompleteDateRange, n as emptyValueForFieldType, o as getOperatorLabel, p as withValue, r as emptyValueForRule, s as getOperatorsForField, t as carriesDateRange, u as isRangeOperator } from "./operators-CXkmvFpP.mjs";
+import { a as getDefaultOperatorForType, c as getOperatorsForType, d as isValuelessOperator, f as reconcileValueForOperator, i as fieldHasMultipleOperators, l as isCompleteDateRange, n as emptyValueForFieldType, o as getOperatorLabel, p as withValue, r as emptyValueForRule, s as getOperatorsForField, t as carriesDateRange, u as isRangeOperator } from "./operators-F8X0hyQB.mjs";
 export { carriesDateRange, emptyValueForFieldType, emptyValueForRule, fieldHasMultipleOperators, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, isCompleteDateRange, isRangeOperator, isValuelessOperator, reconcileValueForOperator, withValue };

package/dist/palette-BANY1Xfs.d.mts

@@ -0,0 +1,21 @@
+import { n as PdsColor } from "./color-fQTsW4gq.mjs";
+import { i as PersonaTheme } from "./theme-D02MOaH6.mjs";
+import { Color } from "@persona/design-tokens";
+
+//#region components/Button/palette.d.ts
+type ButtonVariant = 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';
+interface ButtonPalette {
+  default: PdsColor;
+  hover: Color;
+  active: Color;
+  disabled: PdsColor;
+  text: Color;
+  textDisabled: PdsColor;
+  /** Set only under semantic theming; legacy leaves disabled icon colour to the stroke rules. */
+  iconDisabled?: PdsColor;
+  highlightDark: Color;
+}
+declare const buttonPalette: (theme: PersonaTheme, variant: ButtonVariant) => ButtonPalette;
+//#endregion
+export { ButtonVariant as n, buttonPalette as r, ButtonPalette as t };
+//# sourceMappingURL=palette-BANY1Xfs.d.mts.map

package/dist/palette.d.mts

@@ -0,0 +1,2 @@
+import { n as ButtonVariant, r as buttonPalette, t as ButtonPalette } from "./palette-BANY1Xfs.mjs";
+export { ButtonPalette, ButtonVariant, buttonPalette };