ods-ant 0.2.0 → 0.4.1

package/dist-lib/forms/Button.js

@@ -0,0 +1,299 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Button as t, ConfigProvider as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/forms/Button.tsx
+var a = "ds-button-styles", o = ({ dsVariant: o = "primary", disabled: s = !1, style: c = {}, className: l = "", ...u }) => {
+	r(() => {
+		if (typeof document < "u" && !document.getElementById(a)) {
+			let t = document.createElement("style");
+			t.id = a;
+			let { button: n } = e;
+			t.textContent = `
+        :root {
+          --ds-btn-primary: ${n.primary.default};
+          --ds-btn-primary-hover: ${n.primary.hover};
+          --ds-btn-primary-pressed: ${n.primary.pressed};
+          --ds-btn-primary-text: ${n.primary.text};
+          --ds-btn-primary-disabled-text: ${n.primary.disabledText};
+          --ds-btn-primary-disabled-bg: ${n.primary.disabledBg};
+
+          --ds-btn-secondary-text: ${n.secondary.defaultText};
+          --ds-btn-secondary-border: ${n.secondary.defaultBorder};
+          --ds-btn-secondary-bg: ${n.secondary.defaultBg};
+          --ds-btn-secondary-hover-text: ${n.secondary.hoverText};
+          --ds-btn-secondary-hover-border: ${n.secondary.hoverBorder};
+          --ds-btn-secondary-hover-bg: ${n.secondary.hoverBg};
+          --ds-btn-secondary-pressed-text: ${n.secondary.pressedText};
+          --ds-btn-secondary-pressed-border: ${n.secondary.pressedBorder};
+          --ds-btn-secondary-pressed-bg: ${n.secondary.pressedBg};
+          --ds-btn-secondary-disabled-text: ${n.secondary.disabledText};
+          --ds-btn-secondary-disabled-border: ${n.secondary.disabledBorder};
+          --ds-btn-secondary-disabled-bg: ${n.secondary.disabledBg};
+
+          --ds-btn-tertiary-text: ${n.tertiary.defaultText};
+          --ds-btn-tertiary-hover-text: ${n.tertiary.hoverText};
+          --ds-btn-tertiary-pressed-text: ${n.tertiary.pressedText};
+          --ds-btn-tertiary-disabled-text: ${n.tertiary.disabledText};
+
+          --ds-btn-tertiary-alt-text: ${n.tertiaryAlt.defaultText};
+          --ds-btn-tertiary-alt-hover-text: ${n.tertiaryAlt.hoverText};
+          --ds-btn-tertiary-alt-pressed-text: ${n.tertiaryAlt.pressedText};
+          --ds-btn-tertiary-alt-disabled-text: ${n.tertiaryAlt.disabledText};
+
+          --ds-btn-font-small-size: ${n.typography.small.fontSize};
+          --ds-btn-font-small-line-height: ${n.typography.small.lineHeight};
+          --ds-btn-font-small-letter-spacing: ${n.typography.small.letterSpacing};
+          --ds-btn-font-middle-size: ${n.typography.middle.fontSize};
+          --ds-btn-font-middle-line-height: ${n.typography.middle.lineHeight};
+          --ds-btn-font-middle-letter-spacing: ${n.typography.middle.letterSpacing};
+          --ds-btn-font-large-size: ${n.typography.large.fontSize};
+          --ds-btn-font-large-line-height: ${n.typography.large.lineHeight};
+          --ds-btn-font-large-letter-spacing: ${n.typography.large.letterSpacing};
+        }
+
+        [data-ds-variant].ant-btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: ${n.typography.fontWeight};
+          text-transform: ${n.typography.textTransform};
+          transition: none !important;
+          animation: none !important;
+          box-shadow: none !important;
+        }
+
+        [data-ds-variant].ant-btn:hover,
+        [data-ds-variant].ant-btn:active,
+        [data-ds-variant].ant-btn:focus,
+        [data-ds-variant].ant-btn:focus-visible,
+        [data-ds-variant].ant-btn.ant-btn-active {
+          box-shadow: none !important;
+          transition: none !important;
+          animation: none !important;
+        }
+
+        [data-ds-variant].ant-btn::before,
+        [data-ds-variant].ant-btn::after {
+          transition: none !important;
+          animation: none !important;
+          box-shadow: none !important;
+        }
+
+        [data-ds-variant].ant-btn.ant-wave::after,
+        [data-ds-variant].ant-btn .ant-wave::after {
+          animation: none !important;
+          opacity: 0 !important;
+        }
+
+        [data-ds-variant].ant-btn .ant-btn-icon {
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+          min-height: 16px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: inherit;
+          line-height: 1;
+          flex: 0 0 16px;
+        }
+
+        [data-ds-variant].ant-btn .ant-btn-icon > .anticon,
+        [data-ds-variant].ant-btn .ant-btn-icon > svg,
+        [data-ds-variant].ant-btn .ant-btn-icon > span > svg {
+          width: 16px !important;
+          height: 16px !important;
+          font-size: 16px !important;
+          line-height: 1;
+          display: block;
+          color: inherit;
+        }
+
+        [data-ds-variant].ant-btn .ant-btn-icon svg [fill]:not([fill="none"]),
+        [data-ds-variant].ant-btn .ant-btn-icon svg path:not([fill="none"]) {
+          fill: currentColor !important;
+        }
+
+        [data-ds-variant].ant-btn .ant-btn-icon svg [stroke]:not([stroke="none"]) {
+          stroke: currentColor !important;
+        }
+
+        /* Optical centering for uppercase labels */
+        [data-ds-variant].ant-btn > span:not(.ant-btn-icon) {
+          display: inline-flex;
+          align-items: center;
+          transform: translateY(-0.5px);
+        }
+
+        [data-ds-variant].ant-btn.ant-btn-sm {
+          font-size: var(--ds-btn-font-small-size);
+          line-height: var(--ds-btn-font-small-line-height);
+          letter-spacing: var(--ds-btn-font-small-letter-spacing);
+        }
+
+        [data-ds-variant].ant-btn.ant-btn-lg {
+          font-size: var(--ds-btn-font-large-size);
+          line-height: var(--ds-btn-font-large-line-height);
+          letter-spacing: var(--ds-btn-font-large-letter-spacing);
+        }
+
+        [data-ds-variant].ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {
+          font-size: var(--ds-btn-font-middle-size);
+          line-height: var(--ds-btn-font-middle-line-height);
+          letter-spacing: var(--ds-btn-font-middle-letter-spacing);
+        }
+
+        /* Primary variant states */
+        [data-ds-variant="primary"].ant-btn,
+        [data-ds-variant="primary"].ant-btn.ant-btn-primary {
+          background-color: var(--ds-btn-primary) !important;
+          border-color: var(--ds-btn-primary) !important;
+          color: var(--ds-btn-primary-text) !important;
+        }
+
+        [data-ds-variant="primary"].ant-btn:hover,
+        [data-ds-variant="primary"].ant-btn.ant-btn-primary:hover {
+          background-color: var(--ds-btn-primary-hover) !important;
+          border-color: var(--ds-btn-primary-hover) !important;
+          color: var(--ds-btn-primary-text) !important;
+        }
+
+        [data-ds-variant="primary"].ant-btn:active,
+        [data-ds-variant="primary"].ant-btn.ant-btn-primary:active,
+        [data-ds-variant="primary"].ant-btn.ant-btn-primary.ant-btn-active {
+          background-color: var(--ds-btn-primary-pressed) !important;
+          border-color: var(--ds-btn-primary-pressed) !important;
+          color: var(--ds-btn-primary-text) !important;
+        }
+
+        [data-ds-variant="primary"].ant-btn:disabled,
+        [data-ds-variant="primary"].ant-btn.ant-btn-disabled {
+          background-color: var(--ds-btn-primary-disabled-bg) !important;
+          border-color: var(--ds-btn-primary-disabled-bg) !important;
+          color: var(--ds-btn-primary-disabled-text) !important;
+        }
+
+        /* Secondary variant states */
+        [data-ds-variant="secondary"].ant-btn {
+          border-color: var(--ds-btn-secondary-border) !important;
+          color: var(--ds-btn-secondary-text) !important;
+          background-color: var(--ds-btn-secondary-bg) !important;
+        }
+        
+        [data-ds-variant="secondary"].ant-btn:hover {
+          border-color: var(--ds-btn-secondary-hover-border) !important;
+          color: var(--ds-btn-secondary-hover-text) !important;
+          background-color: var(--ds-btn-secondary-hover-bg) !important;
+        }
+
+        [data-ds-variant="secondary"].ant-btn:active,
+        [data-ds-variant="secondary"].ant-btn.ant-btn-active {
+          border-color: var(--ds-btn-secondary-pressed-border) !important;
+          color: var(--ds-btn-secondary-pressed-text) !important;
+          background-color: var(--ds-btn-secondary-pressed-bg) !important;
+        }
+        
+        [data-ds-variant="secondary"].ant-btn:disabled,
+        [data-ds-variant="secondary"].ant-btn.ant-btn-disabled {
+          border-color: var(--ds-btn-secondary-disabled-border) !important;
+          border-width: 2px !important;
+          border-style: solid !important;
+          color: var(--ds-btn-secondary-disabled-text) !important;
+          background-color: var(--ds-btn-secondary-disabled-bg) !important;
+        }
+        
+        /* Tertiary variant states */
+        [data-ds-variant="tertiary"].ant-btn {
+          color: var(--ds-btn-tertiary-text) !important;
+          border: none !important;
+          background-color: transparent !important;
+        }
+        
+        [data-ds-variant="tertiary"].ant-btn:hover {
+          color: var(--ds-btn-tertiary-hover-text) !important;
+          background-color: transparent !important;
+        }
+
+        [data-ds-variant="tertiary"].ant-btn:active,
+        [data-ds-variant="tertiary"].ant-btn.ant-btn-active {
+          color: var(--ds-btn-tertiary-pressed-text) !important;
+          background-color: transparent !important;
+        }
+        
+        [data-ds-variant="tertiary"].ant-btn:disabled,
+        [data-ds-variant="tertiary"].ant-btn.ant-btn-disabled {
+          color: var(--ds-btn-tertiary-disabled-text) !important;
+          background-color: transparent !important;
+        }
+
+        /* Tertiary-alt variant states */
+        [data-ds-variant="tertiary-alt"].ant-btn {
+          color: var(--ds-btn-tertiary-alt-text) !important;
+          border: none !important;
+          background-color: transparent !important;
+        }
+
+        [data-ds-variant="tertiary-alt"].ant-btn:hover {
+          color: var(--ds-btn-tertiary-alt-hover-text) !important;
+          background-color: transparent !important;
+        }
+
+        [data-ds-variant="tertiary-alt"].ant-btn:active,
+        [data-ds-variant="tertiary-alt"].ant-btn.ant-btn-active {
+          color: var(--ds-btn-tertiary-alt-pressed-text) !important;
+          background-color: transparent !important;
+        }
+
+        [data-ds-variant="tertiary-alt"].ant-btn:disabled,
+        [data-ds-variant="tertiary-alt"].ant-btn.ant-btn-disabled {
+          color: var(--ds-btn-tertiary-alt-disabled-text) !important;
+          background-color: transparent !important;
+        }
+      `, document.head.appendChild(t);
+		}
+	}, []);
+	let d = () => ({
+		...c,
+		boxShadow: "none",
+		transition: "none",
+		animation: "none",
+		WebkitTapHighlightColor: "transparent"
+	});
+	return o === "secondary" ? /* @__PURE__ */ i(n, {
+		wave: { disabled: !0 },
+		children: /* @__PURE__ */ i(t, {
+			type: "default",
+			disabled: s,
+			style: d(),
+			className: l,
+			"data-ds-variant": o,
+			...u
+		})
+	}) : o === "tertiary" || o === "tertiary-alt" ? /* @__PURE__ */ i(n, {
+		wave: { disabled: !0 },
+		children: /* @__PURE__ */ i(t, {
+			type: "text",
+			disabled: s,
+			style: d(),
+			className: l,
+			"data-ds-variant": o,
+			...u
+		})
+	}) : /* @__PURE__ */ i(n, {
+		wave: { disabled: !0 },
+		children: /* @__PURE__ */ i(t, {
+			type: "primary",
+			disabled: s,
+			style: d(),
+			className: l,
+			"data-ds-variant": o,
+			...u
+		})
+	});
+};
+o.displayName = "Button", o.Group = t.Group;
+//#endregion
+export { o as Button };
+
+//# sourceMappingURL=Button.js.map

package/dist-lib/forms/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/ds/forms/Button.tsx"],"sourcesContent":["import { Button as AntButton } from 'antd';\nimport type { ButtonProps as AntButtonProps } from 'antd';\nimport { ConfigProvider } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\ntype DSButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-alt';\n\ntype RestrictedAntVisualProps = 'type' | 'variant' | 'color' | 'danger' | 'ghost';\n\nexport type ButtonProps = Omit<AntButtonProps, RestrictedAntVisualProps> & {\n  /** Design system button variant matching Figma design */\n  dsVariant?: DSButtonVariant;\n};\n\n// Unique ID for this component's style tag\nconst STYLE_ID = 'ds-button-styles';\n\n/**\n * DS Button wrapper that applies design system styling on top of Ant Design's Button.\n * Provides consistent visual appearance aligned with Figma design specifications.\n *\n * Variants:\n * - primary: Solid filled button (default)\n * - secondary: Outlined button\n * - tertiary: Text button\n * - tertiary-alt: Alternative text button\n *\n * @example\n * <Button>Primary</Button>\n * <Button dsVariant=\"secondary\">Secondary</Button>\n * <Button dsVariant=\"tertiary\">Tertiary</Button>\n * <Button disabled>Disabled</Button>\n */\nexport const Button = ({\n  dsVariant = 'primary',\n  disabled = false,\n  style: userStyle = {},\n  className: userClassName = '',\n  ...props\n}: ButtonProps) => {\n  // Ensure global styles are injected once\n  useEffect(() => {\n    if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      const { button } = dsSemanticTokens;\n      style.textContent = `\n        :root {\n          --ds-btn-primary: ${button.primary.default};\n          --ds-btn-primary-hover: ${button.primary.hover};\n          --ds-btn-primary-pressed: ${button.primary.pressed};\n          --ds-btn-primary-text: ${button.primary.text};\n          --ds-btn-primary-disabled-text: ${button.primary.disabledText};\n          --ds-btn-primary-disabled-bg: ${button.primary.disabledBg};\n\n          --ds-btn-secondary-text: ${button.secondary.defaultText};\n          --ds-btn-secondary-border: ${button.secondary.defaultBorder};\n          --ds-btn-secondary-bg: ${button.secondary.defaultBg};\n          --ds-btn-secondary-hover-text: ${button.secondary.hoverText};\n          --ds-btn-secondary-hover-border: ${button.secondary.hoverBorder};\n          --ds-btn-secondary-hover-bg: ${button.secondary.hoverBg};\n          --ds-btn-secondary-pressed-text: ${button.secondary.pressedText};\n          --ds-btn-secondary-pressed-border: ${button.secondary.pressedBorder};\n          --ds-btn-secondary-pressed-bg: ${button.secondary.pressedBg};\n          --ds-btn-secondary-disabled-text: ${button.secondary.disabledText};\n          --ds-btn-secondary-disabled-border: ${button.secondary.disabledBorder};\n          --ds-btn-secondary-disabled-bg: ${button.secondary.disabledBg};\n\n          --ds-btn-tertiary-text: ${button.tertiary.defaultText};\n          --ds-btn-tertiary-hover-text: ${button.tertiary.hoverText};\n          --ds-btn-tertiary-pressed-text: ${button.tertiary.pressedText};\n          --ds-btn-tertiary-disabled-text: ${button.tertiary.disabledText};\n\n          --ds-btn-tertiary-alt-text: ${button.tertiaryAlt.defaultText};\n          --ds-btn-tertiary-alt-hover-text: ${button.tertiaryAlt.hoverText};\n          --ds-btn-tertiary-alt-pressed-text: ${button.tertiaryAlt.pressedText};\n          --ds-btn-tertiary-alt-disabled-text: ${button.tertiaryAlt.disabledText};\n\n          --ds-btn-font-small-size: ${button.typography.small.fontSize};\n          --ds-btn-font-small-line-height: ${button.typography.small.lineHeight};\n          --ds-btn-font-small-letter-spacing: ${button.typography.small.letterSpacing};\n          --ds-btn-font-middle-size: ${button.typography.middle.fontSize};\n          --ds-btn-font-middle-line-height: ${button.typography.middle.lineHeight};\n          --ds-btn-font-middle-letter-spacing: ${button.typography.middle.letterSpacing};\n          --ds-btn-font-large-size: ${button.typography.large.fontSize};\n          --ds-btn-font-large-line-height: ${button.typography.large.lineHeight};\n          --ds-btn-font-large-letter-spacing: ${button.typography.large.letterSpacing};\n        }\n\n        [data-ds-variant].ant-btn {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          font-weight: ${button.typography.fontWeight};\n          text-transform: ${button.typography.textTransform};\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn:hover,\n        [data-ds-variant].ant-btn:active,\n        [data-ds-variant].ant-btn:focus,\n        [data-ds-variant].ant-btn:focus-visible,\n        [data-ds-variant].ant-btn.ant-btn-active {\n          box-shadow: none !important;\n          transition: none !important;\n          animation: none !important;\n        }\n\n        [data-ds-variant].ant-btn::before,\n        [data-ds-variant].ant-btn::after {\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn.ant-wave::after,\n        [data-ds-variant].ant-btn .ant-wave::after {\n          animation: none !important;\n          opacity: 0 !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon {\n          width: 16px;\n          height: 16px;\n          min-width: 16px;\n          min-height: 16px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          color: inherit;\n          line-height: 1;\n          flex: 0 0 16px;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon > .anticon,\n        [data-ds-variant].ant-btn .ant-btn-icon > svg,\n        [data-ds-variant].ant-btn .ant-btn-icon > span > svg {\n          width: 16px !important;\n          height: 16px !important;\n          font-size: 16px !important;\n          line-height: 1;\n          display: block;\n          color: inherit;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [fill]:not([fill=\"none\"]),\n        [data-ds-variant].ant-btn .ant-btn-icon svg path:not([fill=\"none\"]) {\n          fill: currentColor !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [stroke]:not([stroke=\"none\"]) {\n          stroke: currentColor !important;\n        }\n\n        /* Optical centering for uppercase labels */\n        [data-ds-variant].ant-btn > span:not(.ant-btn-icon) {\n          display: inline-flex;\n          align-items: center;\n          transform: translateY(-0.5px);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-sm {\n          font-size: var(--ds-btn-font-small-size);\n          line-height: var(--ds-btn-font-small-line-height);\n          letter-spacing: var(--ds-btn-font-small-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-lg {\n          font-size: var(--ds-btn-font-large-size);\n          line-height: var(--ds-btn-font-large-line-height);\n          letter-spacing: var(--ds-btn-font-large-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {\n          font-size: var(--ds-btn-font-middle-size);\n          line-height: var(--ds-btn-font-middle-line-height);\n          letter-spacing: var(--ds-btn-font-middle-letter-spacing);\n        }\n\n        /* Primary variant states */\n        [data-ds-variant=\"primary\"].ant-btn,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary {\n          background-color: var(--ds-btn-primary) !important;\n          border-color: var(--ds-btn-primary) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:hover,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:hover {\n          background-color: var(--ds-btn-primary-hover) !important;\n          border-color: var(--ds-btn-primary-hover) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary.ant-btn-active {\n          background-color: var(--ds-btn-primary-pressed) !important;\n          border-color: var(--ds-btn-primary-pressed) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:disabled,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-disabled {\n          background-color: var(--ds-btn-primary-disabled-bg) !important;\n          border-color: var(--ds-btn-primary-disabled-bg) !important;\n          color: var(--ds-btn-primary-disabled-text) !important;\n        }\n\n        /* Secondary variant states */\n        [data-ds-variant=\"secondary\"].ant-btn {\n          border-color: var(--ds-btn-secondary-border) !important;\n          color: var(--ds-btn-secondary-text) !important;\n          background-color: var(--ds-btn-secondary-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:hover {\n          border-color: var(--ds-btn-secondary-hover-border) !important;\n          color: var(--ds-btn-secondary-hover-text) !important;\n          background-color: var(--ds-btn-secondary-hover-bg) !important;\n        }\n\n        [data-ds-variant=\"secondary\"].ant-btn:active,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-active {\n          border-color: var(--ds-btn-secondary-pressed-border) !important;\n          color: var(--ds-btn-secondary-pressed-text) !important;\n          background-color: var(--ds-btn-secondary-pressed-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:disabled,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-disabled {\n          border-color: var(--ds-btn-secondary-disabled-border) !important;\n          border-width: 2px !important;\n          border-style: solid !important;\n          color: var(--ds-btn-secondary-disabled-text) !important;\n          background-color: var(--ds-btn-secondary-disabled-bg) !important;\n        }\n        \n        /* Tertiary variant states */\n        [data-ds-variant=\"tertiary\"].ant-btn {\n          color: var(--ds-btn-tertiary-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary\"].ant-btn:active,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-pressed-text) !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-disabled-text) !important;\n          background-color: transparent !important;\n        }\n\n        /* Tertiary-alt variant states */\n        [data-ds-variant=\"tertiary-alt\"].ant-btn {\n          color: var(--ds-btn-tertiary-alt-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-alt-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:active,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-alt-pressed-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-alt-disabled-text) !important;\n          background-color: transparent !important;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  // Build inline styles based on variant\n  const getStyles = (): CSSProperties => {\n    const baseStyle: CSSProperties = {\n      ...userStyle,\n      boxShadow: 'none',\n      transition: 'none',\n      animation: 'none',\n      WebkitTapHighlightColor: 'transparent',\n    };\n\n    return baseStyle;\n  };\n\n  // For secondary and tertiary, use different Ant Design types\n  if (dsVariant === 'secondary') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type=\"default\"\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  if (dsVariant === 'tertiary' || dsVariant === 'tertiary-alt') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type=\"text\"\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  // Primary variant\n  return (\n    <ConfigProvider wave={{ disabled: true }}>\n      <AntButton\n        type=\"primary\"\n        disabled={disabled}\n        style={getStyles()}\n        className={userClassName}\n        data-ds-variant={dsVariant}\n        {...props}\n      />\n    </ConfigProvider>\n  );\n};\n\nButton.displayName = 'Button';\nButton.Group = AntButton.Group;\n"],"mappings":";;;;;AAiBA,IAAM,IAAW,oBAkBJ,KAAU,EACrB,eAAY,WACZ,cAAW,IACX,OAAO,IAAY,EAAE,EACrB,WAAW,IAAgB,IAC3B,GAAG,QACc;AAEjB,SAAgB;AACd,MAAI,OAAO,WAAa,OAAe,CAAC,SAAS,eAAe,EAAS,EAAE;GACzE,IAAM,IAAQ,SAAS,cAAc,QAAQ;AAC7C,KAAM,KAAK;GACX,IAAM,EAAE,cAAW;AAmPnB,GAlPA,EAAM,cAAc;;8BAEI,EAAO,QAAQ,QAAQ;oCACjB,EAAO,QAAQ,MAAM;sCACnB,EAAO,QAAQ,QAAQ;mCAC1B,EAAO,QAAQ,KAAK;4CACX,EAAO,QAAQ,aAAa;0CAC9B,EAAO,QAAQ,WAAW;;qCAE/B,EAAO,UAAU,YAAY;uCAC3B,EAAO,UAAU,cAAc;mCACnC,EAAO,UAAU,UAAU;2CACnB,EAAO,UAAU,UAAU;6CACzB,EAAO,UAAU,YAAY;yCACjC,EAAO,UAAU,QAAQ;6CACrB,EAAO,UAAU,YAAY;+CAC3B,EAAO,UAAU,cAAc;2CACnC,EAAO,UAAU,UAAU;8CACxB,EAAO,UAAU,aAAa;gDAC5B,EAAO,UAAU,eAAe;4CACpC,EAAO,UAAU,WAAW;;oCAEpC,EAAO,SAAS,YAAY;0CACtB,EAAO,SAAS,UAAU;4CACxB,EAAO,SAAS,YAAY;6CAC3B,EAAO,SAAS,aAAa;;wCAElC,EAAO,YAAY,YAAY;8CACzB,EAAO,YAAY,UAAU;gDAC3B,EAAO,YAAY,YAAY;iDAC9B,EAAO,YAAY,aAAa;;sCAE3C,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;uCAC/C,EAAO,WAAW,OAAO,SAAS;8CAC3B,EAAO,WAAW,OAAO,WAAW;iDACjC,EAAO,WAAW,OAAO,cAAc;sCAClD,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;;;;;;;yBAO7D,EAAO,WAAW,WAAW;4BAC1B,EAAO,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkMtD,SAAS,KAAK,YAAY,EAAM;;IAEjC,EAAE,CAAC;CAGN,IAAM,WASG;EAPL,GAAG;EACH,WAAW;EACX,YAAY;EACZ,WAAW;EACX,yBAAyB;EAGpB;AAmCT,QA/BI,MAAc,cAEd,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA,GAIjB,MAAc,cAAc,MAAc,iBAE1C,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA,GAMnB,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA;;AAIrB,EAAO,cAAc,UACrB,EAAO,QAAQ,EAAU"}

package/dist-lib/forms/Cascader.cjs

@@ -0,0 +1,37 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../useCustomIcon-DbSB56Pd.cjs`),t=require(`./FieldShell.cjs`),n=require(`../fieldProps-CuWfEbFx.cjs`),r=require(`../selectStyles-BFeXUMpO.cjs`);let i=require(`antd`),a=require(`react`),o=require(`react/jsx-runtime`);var s=`ds-cascader-styles`,c=`ds-cascader`,l=()=>e.n(`arrowButtonDown`,{size:10}),u=({suffixIcon:e,fieldLabel:u,fieldRequired:d,fieldDescription:f,fieldError:p,fieldActions:m,containerStyle:h,clear:g,clearable:_=!1,clearLabel:v,clearVisibility:y=`always`,onClear:b,onValueChange:x,clearToValue:S,id:C,...w})=>{let T=(0,a.useId)();(0,a.useEffect)(()=>{if(r.s(),typeof document<`u`&&!document.getElementById(s)){let e=document.createElement(`style`);e.id=s,e.textContent=`
+        .${c}.ant-select,
+        .${c}.ant-select .ant-select-selector,
+        .${c} .ant-select-selector {
+          border-radius: 4px !important;
+        }
+
+        .${c} .ant-select-arrow,
+        .${c} .ant-select-suffix,
+        .${c} .ant-cascader-picker-arrow,
+        .${c} .ant-cascader-suffix {
+          width: 24px;
+          height: 24px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .${c} .ant-select-arrow > svg,
+        .${c} .ant-select-suffix > svg,
+        .${c} .ant-select-arrow > .anticon > svg,
+        .${c} .ant-select-suffix > .anticon > svg,
+        .${c} .ant-select-arrow svg svg,
+        .${c} .ant-select-suffix svg svg,
+        .${c} .ant-cascader-picker-arrow > svg,
+        .${c} .ant-cascader-suffix > svg,
+        .${c} .ant-cascader-picker-arrow > .anticon > svg,
+        .${c} .ant-cascader-suffix > .anticon > svg,
+        .${c} .ant-cascader-picker-arrow svg svg,
+        .${c} .ant-cascader-suffix svg svg {
+          width: 10px !important;
+          height: 10px !important;
+          min-width: 10px;
+          min-height: 10px;
+        }
+      `,document.head.appendChild(e)}},[]);let E=(0,a.useMemo)(()=>e===void 0?(0,o.jsx)(l,{}):e,[e]),D=r.c(c,r.t,w.className),O=!!(u||d||f||p||m||_||g||b),k=C??(O?T:void 0),A=k?`${k}-description`:void 0,j=k?`${k}-error`:void 0,M=g?.onClear??b,N=S===void 0?void 0:S,P=n.t(f?A:void 0,p?j:void 0),F=(0,o.jsx)(i.Cascader,{...w,id:k,className:D,suffixIcon:E,"aria-describedby":P,"aria-invalid":p?!0:void 0,onChange:(e,t)=>{w.onChange?.(e,t),x?.(e)}});return O?(0,o.jsx)(t.FieldShell,{label:u,required:d,htmlFor:k,description:f,descriptionId:A,error:p,errorId:j,clear:g,clearable:_,clearLabel:v,clearVisibility:y,clearValue:w.value,onClear:()=>{M?.(),x?.(N),w.onChange?.(N,[])},extraActions:m,style:h,children:F}):F};u.displayName=`Cascader`,exports.Cascader=u;
+//# sourceMappingURL=Cascader.cjs.map

package/dist-lib/forms/Cascader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.cjs","names":[],"sources":["../../src/ds/forms/Cascader.tsx"],"sourcesContent":["import { Cascader as AntCascader } from 'antd';\nimport type { CascaderProps as AntCascaderProps } from 'antd';\nimport { useEffect, useId, useMemo } from 'react';\nimport { useCustomIcon } from '../../utils/icons';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport { DS_SELECT_CLASS, ensureSelectStyles, mergeClassNames } from './selectStyles';\n\nexport type CascaderProps = AntCascaderProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: AntCascaderProps['value']) => void;\n  clearToValue?: AntCascaderProps['value'];\n};\n\nconst STYLE_ID = 'ds-cascader-styles';\nconst DS_CASCADER_CLASS = 'ds-cascader';\n\nconst ArrowButtonDownIcon = () => useCustomIcon('arrowButtonDown', { size: 10 });\n\nexport const Cascader = ({\n  suffixIcon,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  id,\n  ...props\n}: CascaderProps) => {\n  const generatedId = useId();\n  useEffect(() => {\n    ensureSelectStyles();\n    if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      style.textContent = `\n        .${DS_CASCADER_CLASS}.ant-select,\n        .${DS_CASCADER_CLASS}.ant-select .ant-select-selector,\n        .${DS_CASCADER_CLASS} .ant-select-selector {\n          border-radius: 4px !important;\n        }\n\n        .${DS_CASCADER_CLASS} .ant-select-arrow,\n        .${DS_CASCADER_CLASS} .ant-select-suffix,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix {\n          width: 24px;\n          height: 24px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .${DS_CASCADER_CLASS} .ant-select-arrow > svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix > svg,\n        .${DS_CASCADER_CLASS} .ant-select-arrow > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-select-arrow svg svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix svg svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow svg svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix svg svg {\n          width: 10px !important;\n          height: 10px !important;\n          min-width: 10px;\n          min-height: 10px;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  const resolvedSuffixIcon = useMemo(() => {\n    if (suffixIcon !== undefined) {\n      return suffixIcon;\n    }\n\n    return <ArrowButtonDownIcon />;\n  }, [suffixIcon]);\n\n  const mergedClassName = mergeClassNames(DS_CASCADER_CLASS, DS_SELECT_CLASS, props.className);\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const resetValue = clearToValue === undefined ? undefined : clearToValue;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntCascader\n      {...props}\n      id={controlId}\n      className={mergedClassName}\n      suffixIcon={resolvedSuffixIcon}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(nextValue, selectedOptions) => {\n        props.onChange?.(nextValue, selectedOptions);\n        onValueChange?.(nextValue);\n      }}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.(resetValue);\n        props.onChange?.(resetValue as never, []);\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nCascader.displayName = 'Cascader';\n"],"mappings":"6UAcA,IAAM,EAAW,qBACX,EAAoB,cAEpB,MAA4B,EAAA,EAAc,kBAAmB,CAAE,KAAM,GAAI,CAAC,CAEnE,GAAY,CACvB,aACA,aACA,gBACA,mBACA,aACA,eACA,iBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,eACA,KACA,GAAG,KACgB,CACnB,IAAM,GAAA,EAAA,EAAA,QAAqB,EAC3B,EAAA,EAAA,eAAgB,CAEd,GADA,EAAA,GAAoB,CAChB,OAAO,SAAa,KAAe,CAAC,SAAS,eAAe,EAAS,CAAE,CACzE,IAAM,EAAQ,SAAS,cAAc,QAAQ,CAC7C,EAAM,GAAK,EACX,EAAM,YAAc;WACf,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;WAIlB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;;;;;WAQlB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;;;QAOvB,SAAS,KAAK,YAAY,EAAM,GAEjC,EAAE,CAAC,CAEN,IAAM,GAAA,EAAA,EAAA,aACA,IAAe,IAAA,IAIZ,EAAA,EAAA,KAAC,EAAD,EAAuB,CAAA,CAHrB,EAIR,CAAC,EAAW,CAAC,CAEV,EAAkB,EAAA,EAAgB,EAAmB,EAAA,EAAiB,EAAM,UAAU,CACtF,EAAyB,GAC7B,GACE,GACA,GACA,GACA,GACA,GACA,GACA,GAEE,EAAY,IAAO,EAAyB,EAAc,IAAA,IAC1D,EAAgB,EAAY,GAAG,EAAU,cAAgB,IAAA,GACzD,EAAU,EAAY,GAAG,EAAU,QAAU,IAAA,GAC7C,EAAc,GAAO,SAAW,EAChC,EAAa,IAAiB,IAAA,GAAY,IAAA,GAAY,EACtD,EAAc,EAAA,EAClB,EAAmB,EAAgB,IAAA,GACnC,EAAa,EAAU,IAAA,GACxB,CAEK,GACJ,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,GAAI,EACJ,UAAW,EACX,WAAY,EACZ,mBAAkB,EAClB,eAAc,EAAa,GAAO,IAAA,GAClC,UAAW,EAAW,IAAoB,CACxC,EAAM,WAAW,EAAW,EAAgB,CAC5C,IAAgB,EAAU,EAE5B,CAAA,CAOJ,OAJK,GAKH,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAO,EACP,SAAU,EACV,QAAS,EACT,YAAa,EACE,gBACf,MAAO,EACE,UACF,QACI,YACC,aACK,kBACjB,WAAY,EAAM,MAClB,YAAe,CACb,KAAe,CACf,IAAgB,EAAW,CAC3B,EAAM,WAAW,EAAqB,EAAE,CAAC,EAE3C,aAAc,EACd,MAAO,WAEN,EACU,CAAA,CA1BN,GA8BX,EAAS,YAAc"}

package/dist-lib/forms/Cascader.js

@@ -0,0 +1,88 @@
+import { n as e } from "../useCustomIcon-B-VUK-84.js";
+import { FieldShell as t } from "./FieldShell.js";
+import { t as n } from "../fieldProps-EeYy2kXb.js";
+import { c as r, s as i, t as a } from "../selectStyles-C8j5Vvgp.js";
+import { Cascader as o } from "antd";
+import { useEffect as s, useId as c, useMemo as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/ds/forms/Cascader.tsx
+var d = "ds-cascader-styles", f = "ds-cascader", p = () => e("arrowButtonDown", { size: 10 }), m = ({ suffixIcon: e, fieldLabel: m, fieldRequired: h, fieldDescription: g, fieldError: _, fieldActions: v, containerStyle: y, clear: b, clearable: x = !1, clearLabel: S, clearVisibility: C = "always", onClear: w, onValueChange: T, clearToValue: E, id: D, ...O }) => {
+	let k = c();
+	s(() => {
+		if (i(), typeof document < "u" && !document.getElementById(d)) {
+			let e = document.createElement("style");
+			e.id = d, e.textContent = `
+        .${f}.ant-select,
+        .${f}.ant-select .ant-select-selector,
+        .${f} .ant-select-selector {
+          border-radius: 4px !important;
+        }
+
+        .${f} .ant-select-arrow,
+        .${f} .ant-select-suffix,
+        .${f} .ant-cascader-picker-arrow,
+        .${f} .ant-cascader-suffix {
+          width: 24px;
+          height: 24px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .${f} .ant-select-arrow > svg,
+        .${f} .ant-select-suffix > svg,
+        .${f} .ant-select-arrow > .anticon > svg,
+        .${f} .ant-select-suffix > .anticon > svg,
+        .${f} .ant-select-arrow svg svg,
+        .${f} .ant-select-suffix svg svg,
+        .${f} .ant-cascader-picker-arrow > svg,
+        .${f} .ant-cascader-suffix > svg,
+        .${f} .ant-cascader-picker-arrow > .anticon > svg,
+        .${f} .ant-cascader-suffix > .anticon > svg,
+        .${f} .ant-cascader-picker-arrow svg svg,
+        .${f} .ant-cascader-suffix svg svg {
+          width: 10px !important;
+          height: 10px !important;
+          min-width: 10px;
+          min-height: 10px;
+        }
+      `, document.head.appendChild(e);
+		}
+	}, []);
+	let A = l(() => e === void 0 ? /* @__PURE__ */ u(p, {}) : e, [e]), j = r(f, a, O.className), M = !!(m || h || g || _ || v || x || b || w), N = D ?? (M ? k : void 0), P = N ? `${N}-description` : void 0, F = N ? `${N}-error` : void 0, I = b?.onClear ?? w, L = E === void 0 ? void 0 : E, R = n(g ? P : void 0, _ ? F : void 0), z = /* @__PURE__ */ u(o, {
+		...O,
+		id: N,
+		className: j,
+		suffixIcon: A,
+		"aria-describedby": R,
+		"aria-invalid": _ ? !0 : void 0,
+		onChange: (e, t) => {
+			O.onChange?.(e, t), T?.(e);
+		}
+	});
+	return M ? /* @__PURE__ */ u(t, {
+		label: m,
+		required: h,
+		htmlFor: N,
+		description: g,
+		descriptionId: P,
+		error: _,
+		errorId: F,
+		clear: b,
+		clearable: x,
+		clearLabel: S,
+		clearVisibility: C,
+		clearValue: O.value,
+		onClear: () => {
+			I?.(), T?.(L), O.onChange?.(L, []);
+		},
+		extraActions: v,
+		style: y,
+		children: z
+	}) : z;
+};
+m.displayName = "Cascader";
+//#endregion
+export { m as Cascader };
+
+//# sourceMappingURL=Cascader.js.map

package/dist-lib/forms/Cascader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.js","names":[],"sources":["../../src/ds/forms/Cascader.tsx"],"sourcesContent":["import { Cascader as AntCascader } from 'antd';\nimport type { CascaderProps as AntCascaderProps } from 'antd';\nimport { useEffect, useId, useMemo } from 'react';\nimport { useCustomIcon } from '../../utils/icons';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport { DS_SELECT_CLASS, ensureSelectStyles, mergeClassNames } from './selectStyles';\n\nexport type CascaderProps = AntCascaderProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: AntCascaderProps['value']) => void;\n  clearToValue?: AntCascaderProps['value'];\n};\n\nconst STYLE_ID = 'ds-cascader-styles';\nconst DS_CASCADER_CLASS = 'ds-cascader';\n\nconst ArrowButtonDownIcon = () => useCustomIcon('arrowButtonDown', { size: 10 });\n\nexport const Cascader = ({\n  suffixIcon,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  id,\n  ...props\n}: CascaderProps) => {\n  const generatedId = useId();\n  useEffect(() => {\n    ensureSelectStyles();\n    if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      style.textContent = `\n        .${DS_CASCADER_CLASS}.ant-select,\n        .${DS_CASCADER_CLASS}.ant-select .ant-select-selector,\n        .${DS_CASCADER_CLASS} .ant-select-selector {\n          border-radius: 4px !important;\n        }\n\n        .${DS_CASCADER_CLASS} .ant-select-arrow,\n        .${DS_CASCADER_CLASS} .ant-select-suffix,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix {\n          width: 24px;\n          height: 24px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .${DS_CASCADER_CLASS} .ant-select-arrow > svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix > svg,\n        .${DS_CASCADER_CLASS} .ant-select-arrow > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-select-arrow svg svg,\n        .${DS_CASCADER_CLASS} .ant-select-suffix svg svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix > .anticon > svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-picker-arrow svg svg,\n        .${DS_CASCADER_CLASS} .ant-cascader-suffix svg svg {\n          width: 10px !important;\n          height: 10px !important;\n          min-width: 10px;\n          min-height: 10px;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  const resolvedSuffixIcon = useMemo(() => {\n    if (suffixIcon !== undefined) {\n      return suffixIcon;\n    }\n\n    return <ArrowButtonDownIcon />;\n  }, [suffixIcon]);\n\n  const mergedClassName = mergeClassNames(DS_CASCADER_CLASS, DS_SELECT_CLASS, props.className);\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const resetValue = clearToValue === undefined ? undefined : clearToValue;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntCascader\n      {...props}\n      id={controlId}\n      className={mergedClassName}\n      suffixIcon={resolvedSuffixIcon}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(nextValue, selectedOptions) => {\n        props.onChange?.(nextValue, selectedOptions);\n        onValueChange?.(nextValue);\n      }}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.(resetValue);\n        props.onChange?.(resetValue as never, []);\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nCascader.displayName = 'Cascader';\n"],"mappings":";;;;;;;;AAcA,IAAM,IAAW,sBACX,IAAoB,eAEpB,UAA4B,EAAc,mBAAmB,EAAE,MAAM,IAAI,CAAC,EAEnE,KAAY,EACvB,eACA,eACA,kBACA,qBACA,eACA,iBACA,mBACA,UACA,eAAY,IACZ,eACA,qBAAkB,UAClB,YACA,kBACA,iBACA,OACA,GAAG,QACgB;CACnB,IAAM,IAAc,GAAO;AAC3B,SAAgB;AAEd,MADA,GAAoB,EAChB,OAAO,WAAa,OAAe,CAAC,SAAS,eAAe,EAAS,EAAE;GACzE,IAAM,IAAQ,SAAS,cAAc,QAAQ;AAsC7C,GArCA,EAAM,KAAK,GACX,EAAM,cAAc;WACf,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;WAIlB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;;;;;WAQlB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;WAClB,EAAkB;;;;;;SAOvB,SAAS,KAAK,YAAY,EAAM;;IAEjC,EAAE,CAAC;CAEN,IAAM,IAAqB,QACrB,MAAe,KAAA,IAIZ,kBAAC,GAAD,EAAuB,CAAA,GAHrB,GAIR,CAAC,EAAW,CAAC,EAEV,IAAkB,EAAgB,GAAmB,GAAiB,EAAM,UAAU,EACtF,IAAyB,GAC7B,KACE,KACA,KACA,KACA,KACA,KACA,KACA,IAEE,IAAY,MAAO,IAAyB,IAAc,KAAA,IAC1D,IAAgB,IAAY,GAAG,EAAU,gBAAgB,KAAA,GACzD,IAAU,IAAY,GAAG,EAAU,UAAU,KAAA,GAC7C,IAAc,GAAO,WAAW,GAChC,IAAa,MAAiB,KAAA,IAAY,KAAA,IAAY,GACtD,IAAc,EAClB,IAAmB,IAAgB,KAAA,GACnC,IAAa,IAAU,KAAA,EACxB,EAEK,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,IAAI;EACJ,WAAW;EACX,YAAY;EACZ,oBAAkB;EAClB,gBAAc,IAAa,KAAO,KAAA;EAClC,WAAW,GAAW,MAAoB;AAExC,GADA,EAAM,WAAW,GAAW,EAAgB,EAC5C,IAAgB,EAAU;;EAE5B,CAAA;AAOJ,QAJK,IAKH,kBAAC,GAAD;EACE,OAAO;EACP,UAAU;EACV,SAAS;EACT,aAAa;EACE;EACf,OAAO;EACE;EACF;EACI;EACC;EACK;EACjB,YAAY,EAAM;EAClB,eAAe;AAGb,GAFA,KAAe,EACf,IAAgB,EAAW,EAC3B,EAAM,WAAW,GAAqB,EAAE,CAAC;;EAE3C,cAAc;EACd,OAAO;YAEN;EACU,CAAA,GA1BN;;AA8BX,EAAS,cAAc"}