ods-ant 0.2.0 → 0.4.0

package/dist-lib/forms/ClearableTransfer.js

@@ -0,0 +1,337 @@
+import { t as e } from "../core-C-tv3mqr.js";
+import { dsSemanticTokens as t } from "../theme.js";
+import { Button as n } from "./Button.js";
+import { t as r } from "../useCustomIcon-B-VUK-84.js";
+import { FieldShell as i } from "./FieldShell.js";
+import { Checkbox as a } from "./Checkbox.js";
+import { Transfer as o } from "antd";
+import { useEffect as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/ds/forms/ClearableTransfer.tsx
+var d = "ds-transfer-styles", f = {
+	assignment: {
+		showSearch: !0,
+		oneWay: !1
+	},
+	reconciliation: {
+		showSearch: !0,
+		oneWay: !0
+	},
+	review: {
+		showSearch: !1,
+		oneWay: !1
+	},
+	compact: {
+		showSearch: !0,
+		oneWay: !1
+	}
+};
+function p(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function m(e) {
+	e.querySelectorAll(".ant-transfer-list-checkbox.ant-checkbox-wrapper").forEach((e) => {
+		e.classList.add("ds-checkbox", "ds-checkbox-size-md");
+	}), e.querySelectorAll(".ant-transfer-list-body-search-wrapper").forEach((e) => {
+		let t = e;
+		t.style.padding = "8px 10px";
+	}), e.querySelectorAll(".ant-transfer-list-search").forEach((e) => {
+		let t = e;
+		t.style.margin = "0", t.style.width = "100%";
+	});
+}
+function h() {
+	if (typeof document > "u") return;
+	let { button: n, form: r, table: i } = t, a = document.getElementById(d);
+	a || (a = document.createElement("style"), a.id = d, document.head.appendChild(a)), a.textContent = `
+    .ds-transfer {
+      width: 100%;
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-transfer .ant-transfer {
+      display: flex;
+      gap: 12px;
+      align-items: stretch;
+    }
+
+    .ds-transfer .ant-transfer-list {
+      border: 1px solid ${n.secondary.defaultBorder};
+      border-radius: 8px;
+      min-width: 220px;
+      background: ${i.surface.base};
+      overflow: hidden;
+    }
+
+    .ds-transfer .ant-transfer-list-header {
+      background: ${i.surface.header};
+      border-bottom: 1px solid ${i.border.bodyDivider};
+      padding: 8px 10px;
+      min-height: 40px;
+    }
+
+    .ds-transfer .ant-transfer-list-header-title {
+      color: ${i.text.header};
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {
+      display: none !important;
+    }
+
+    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {
+      padding: 8px 10px !important;
+    }
+
+    .ds-transfer .ant-transfer-list-search {
+      margin: 0;
+      width: 100%;
+      border-radius: 6px;
+    }
+
+    .ds-transfer .ant-transfer-list-content-item {
+      color: ${i.text.body};
+      min-height: 32px;
+      padding-inline: 10px;
+      transition: none !important;
+      position: relative;
+      border-inline-start: 4px solid transparent;
+    }
+
+    .ds-transfer .ant-transfer-list-content-item:hover {
+      background: ${i.surface.hover};
+    }
+
+    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,
+    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,
+    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,
+    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),
+    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,
+    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {
+      background: ${e.accent.highlightSoft} !important;
+      background-color: ${e.accent.highlightSoft} !important;
+      background-image: none !important;
+      border-inline-start-color: ${e.accent.highlight} !important;
+      color: ${e.text.strong} !important;
+      font-weight: 600 !important;
+    }
+
+    .ds-transfer .ant-transfer-actions,
+    .ds-transfer .ant-transfer-operation {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 8px;
+      margin-inline: 12px;
+    }
+
+    .ds-transfer .ant-transfer-actions .ant-btn,
+    .ds-transfer .ant-transfer-operation .ant-btn {
+      border-radius: 6px;
+      border: 1px solid ${n.secondary.defaultBorder};
+      background: ${n.secondary.defaultBg};
+      color: ${n.secondary.defaultText};
+      min-width: 36px;
+      min-height: 32px;
+    }
+
+    .ds-transfer .ant-transfer-actions .ant-btn:hover,
+    .ds-transfer .ant-transfer-actions .ant-btn:focus,
+    .ds-transfer .ant-transfer-actions .ant-btn:active,
+    .ds-transfer .ant-transfer-operation .ant-btn:hover,
+    .ds-transfer .ant-transfer-operation .ant-btn:focus,
+    .ds-transfer .ant-transfer-operation .ant-btn:active {
+      border-color: ${n.secondary.hoverBorder};
+      color: ${n.secondary.hoverText};
+      background: ${n.secondary.hoverBg};
+    }
+
+    .ds-transfer .ant-transfer-actions .ant-btn .anticon,
+    .ds-transfer .ant-transfer-operation .ant-btn .anticon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      color: inherit;
+    }
+
+    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {
+      border-color: ${n.secondary.defaultBorder};
+      border-radius: 6px;
+      background: ${n.secondary.defaultBg};
+      box-shadow: none;
+    }
+
+    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,
+    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,
+    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {
+      border-color: ${n.secondary.hoverBorder};
+      box-shadow: none;
+    }
+
+    .ds-transfer .ant-transfer-list-search .ant-input {
+      color: ${i.text.body};
+      background: transparent;
+    }
+
+    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {
+      color: ${i.text.muted};
+      opacity: 1;
+    }
+
+    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,
+    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,
+    .ds-transfer .ant-transfer-list-header .anticon {
+      color: ${n.secondary.defaultText};
+      width: 14px;
+      height: 14px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {
+      border-color: ${n.secondary.defaultBorder};
+      border-radius: 4px;
+      width: 16px;
+      height: 16px;
+      background: ${n.secondary.defaultBg};
+    }
+
+    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,
+    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {
+      background: ${n.primary.default};
+      border-color: ${n.primary.default};
+    }
+
+    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,
+    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {
+      border-color: ${n.secondary.hoverBorder};
+    }
+
+    .ds-transfer.ds-transfer--compact .ant-transfer {
+      gap: 8px;
+    }
+
+    .ds-transfer.ds-transfer--compact .ant-transfer-list {
+      min-width: 190px;
+    }
+
+    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {
+      min-height: 34px;
+      padding: 6px 8px;
+    }
+
+    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {
+      min-height: 28px;
+      padding-inline: 8px;
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {
+      cursor: default;
+    }
+
+    .ds-transfer.ds-transfer--review .ant-transfer-list {
+      background: ${r.surface.standard};
+    }
+  `;
+}
+var g = ({ fieldLabel: e, fieldRequired: t, fieldDescription: d, fieldError: g, clear: _, clearable: v = !1, clearLabel: y, clearVisibility: b = "always", onClear: x, onValueChange: S, clearToValue: C = [], targetKeys: w, containerStyle: T, fieldActions: E, dsVariant: D = "assignment", className: O, ...k }) => {
+	let A = c(null);
+	s(() => {
+		h();
+		let e = A.current;
+		if (!e || typeof MutationObserver > "u") return;
+		m(e);
+		let t = new MutationObserver(() => {
+			m(e);
+		});
+		return t.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => t.disconnect();
+	}, []);
+	let j = _?.onClear ?? x, M = f[D], N = k.showSearch ?? M.showSearch, P = k.oneWay ?? M.oneWay, F = k.actions ?? (P ? [/* @__PURE__ */ l(n, {
+		dsVariant: "secondary",
+		size: "small",
+		icon: /* @__PURE__ */ l(r, {
+			name: "arrowRight1",
+			size: 16
+		}),
+		"aria-label": "Move selected items to target list"
+	}, "move-right")] : [/* @__PURE__ */ l(n, {
+		dsVariant: "secondary",
+		size: "small",
+		icon: /* @__PURE__ */ l(r, {
+			name: "arrowRight1",
+			size: 16
+		}),
+		"aria-label": "Move selected items to target list"
+	}, "move-right"), /* @__PURE__ */ l(n, {
+		dsVariant: "secondary",
+		size: "small",
+		icon: /* @__PURE__ */ l(r, {
+			name: "arrowLeft1",
+			size: 16
+		}),
+		"aria-label": "Move selected items to source list"
+	}, "move-left")]), I = k.selectionsIcon ?? null, L = D === "compact" ? {
+		width: 190,
+		height: 176
+	} : void 0, R = k.listStyle, z = typeof R == "function" ? R : {
+		...L,
+		...R
+	}, B = () => {
+		j?.(), S?.(C), k.onChange?.(C, "left", []);
+	}, V = !!(e || t || d || g || E || v || _ || x), H = /* @__PURE__ */ u("div", {
+		ref: A,
+		children: [/* @__PURE__ */ l("span", {
+			style: { display: "none" },
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ l(a, {})
+		}), /* @__PURE__ */ l(o, {
+			...k,
+			className: p("ds-transfer", `ds-transfer--${D}`, O),
+			"data-ds-transfer-variant": D,
+			actions: F,
+			selectionsIcon: I,
+			showSearch: N,
+			oneWay: P,
+			listStyle: z,
+			targetKeys: w,
+			onChange: (e, t, n) => {
+				k.onChange?.(e, t, n), S?.(e);
+			}
+		})]
+	});
+	return V ? /* @__PURE__ */ l(i, {
+		label: e,
+		required: t,
+		description: d,
+		error: g,
+		clear: {
+			enabled: _?.enabled ?? v,
+			label: _?.label ?? y,
+			visibility: _?.visibility ?? b,
+			onClear: B
+		},
+		clearValue: w,
+		extraActions: E,
+		style: T,
+		children: H
+	}) : H;
+}, _ = ({ clearable: e = !0, ...t }) => /* @__PURE__ */ l(g, {
+	...t,
+	clearable: e
+});
+//#endregion
+export { _ as ClearableTransfer, g as Transfer };
+
+//# sourceMappingURL=ClearableTransfer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearableTransfer.js","names":[],"sources":["../../src/ds/forms/ClearableTransfer.tsx"],"sourcesContent":["import { Transfer as AntTransfer } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { FieldShell } from './FieldShell';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\nimport { Icon } from '../../utils/icons';\n\ntype AntTransferProps = React.ComponentProps<typeof AntTransfer>;\n\ntype TransferTargetKeys = AntTransferProps['targetKeys'];\n\nexport type DSTransferVariant = 'assignment' | 'reconciliation' | 'review' | 'compact';\n\nexport type TransferProps = AntTransferProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: TransferTargetKeys) => void;\n  clearToValue?: TransferTargetKeys;\n  dsVariant?: DSTransferVariant;\n};\n\nexport type ClearableTransferProps = TransferProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-transfer-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTransferVariant, Pick<AntTransferProps, 'showSearch' | 'oneWay'>> = {\n  assignment: { showSearch: true, oneWay: false },\n  reconciliation: { showSearch: true, oneWay: true },\n  review: { showSearch: false, oneWay: false },\n  compact: { showSearch: true, oneWay: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction applyDSCheckboxClasses(root: HTMLElement) {\n  const wrappers = root.querySelectorAll('.ant-transfer-list-checkbox.ant-checkbox-wrapper');\n  wrappers.forEach((wrapper) => {\n    wrapper.classList.add('ds-checkbox', 'ds-checkbox-size-md');\n  });\n\n  const searchWrappers = root.querySelectorAll('.ant-transfer-list-body-search-wrapper');\n  searchWrappers.forEach((wrapper) => {\n    const element = wrapper as HTMLElement;\n    element.style.padding = '8px 10px';\n  });\n\n  const searchInputs = root.querySelectorAll('.ant-transfer-list-search');\n  searchInputs.forEach((input) => {\n    const element = input as HTMLElement;\n    element.style.margin = '0';\n    element.style.width = '100%';\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, form, table } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-transfer {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-transfer .ant-transfer {\n      display: flex;\n      gap: 12px;\n      align-items: stretch;\n    }\n\n    .ds-transfer .ant-transfer-list {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      min-width: 220px;\n      background: ${table.surface.base};\n      overflow: hidden;\n    }\n\n    .ds-transfer .ant-transfer-list-header {\n      background: ${table.surface.header};\n      border-bottom: 1px solid ${table.border.bodyDivider};\n      padding: 8px 10px;\n      min-height: 40px;\n    }\n\n    .ds-transfer .ant-transfer-list-header-title {\n      color: ${table.text.header};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {\n      display: none !important;\n    }\n\n    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {\n      padding: 8px 10px !important;\n    }\n\n    .ds-transfer .ant-transfer-list-search {\n      margin: 0;\n      width: 100%;\n      border-radius: 6px;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item {\n      color: ${table.text.body};\n      min-height: 32px;\n      padding-inline: 10px;\n      transition: none !important;\n      position: relative;\n      border-inline-start: 4px solid transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item:hover {\n      background: ${table.surface.hover};\n    }\n\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {\n      background: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-color: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-image: none !important;\n      border-inline-start-color: ${CORE_COLORS.accent.highlight} !important;\n      color: ${CORE_COLORS.text.strong} !important;\n      font-weight: 600 !important;\n    }\n\n    .ds-transfer .ant-transfer-actions,\n    .ds-transfer .ant-transfer-operation {\n      display: inline-flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 8px;\n      margin-inline: 12px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn,\n    .ds-transfer .ant-transfer-operation .ant-btn {\n      border-radius: 6px;\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n      min-width: 36px;\n      min-height: 32px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn:hover,\n    .ds-transfer .ant-transfer-actions .ant-btn:focus,\n    .ds-transfer .ant-transfer-actions .ant-btn:active,\n    .ds-transfer .ant-transfer-operation .ant-btn:hover,\n    .ds-transfer .ant-transfer-operation .ant-btn:focus,\n    .ds-transfer .ant-transfer-operation .ant-btn:active {\n      border-color: ${button.secondary.hoverBorder};\n      color: ${button.secondary.hoverText};\n      background: ${button.secondary.hoverBg};\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn .anticon,\n    .ds-transfer .ant-transfer-operation .ant-btn .anticon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: inherit;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 6px;\n      background: ${button.secondary.defaultBg};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {\n      border-color: ${button.secondary.hoverBorder};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input {\n      color: ${table.text.body};\n      background: transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {\n      color: ${table.text.muted};\n      opacity: 1;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,\n    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,\n    .ds-transfer .ant-transfer-list-header .anticon {\n      color: ${button.secondary.defaultText};\n      width: 14px;\n      height: 14px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 4px;\n      width: 16px;\n      height: 16px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background: ${button.primary.default};\n      border-color: ${button.primary.default};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {\n      border-color: ${button.secondary.hoverBorder};\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer {\n      gap: 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list {\n      min-width: 190px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {\n      min-height: 34px;\n      padding: 6px 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {\n      min-height: 28px;\n      padding-inline: 8px;\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {\n      cursor: default;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list {\n      background: ${form.surface.standard};\n    }\n  `;\n}\n\nexport const Transfer = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  targetKeys,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'assignment',\n  className,\n  ...transferProps\n}: TransferProps) => {\n  const transferRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    const root = transferRef.current;\n    if (!root || typeof MutationObserver === 'undefined') return;\n\n    applyDSCheckboxClasses(root);\n    const observer = new MutationObserver(() => {\n      applyDSCheckboxClasses(root);\n    });\n    observer.observe(root, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const resolvedShowSearch = transferProps.showSearch ?? defaults.showSearch;\n  const resolvedOneWay = transferProps.oneWay ?? defaults.oneWay;\n  const resolvedActions =\n    transferProps.actions ??\n    (resolvedOneWay\n      ? [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n        ]\n      : [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n          <Button\n            key=\"move-left\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowLeft1\" size={16} />}\n            aria-label=\"Move selected items to source list\"\n          />,\n        ]);\n  const resolvedSelectionsIcon = transferProps.selectionsIcon ?? null;\n  const compactListStyle = dsVariant === 'compact' ? { width: 190, height: 176 } : undefined;\n  const userListStyle = transferProps.listStyle;\n  const resolvedListStyle =\n    typeof userListStyle === 'function'\n      ? userListStyle\n      : { ...compactListStyle, ...userListStyle };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n    transferProps.onChange?.(clearToValue, 'left', []);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const transferNode = (\n    <div ref={transferRef}>\n      <span style={{ display: 'none' }} aria-hidden=\"true\">\n        <Checkbox />\n      </span>\n      <AntTransfer\n        {...transferProps}\n        className={mergeClassNames('ds-transfer', `ds-transfer--${dsVariant}`, className)}\n        data-ds-transfer-variant={dsVariant}\n        actions={resolvedActions}\n        selectionsIcon={resolvedSelectionsIcon}\n        showSearch={resolvedShowSearch}\n        oneWay={resolvedOneWay}\n        listStyle={resolvedListStyle}\n        targetKeys={targetKeys}\n        onChange={(nextTargetKeys, direction, moveKeys) => {\n          transferProps.onChange?.(nextTargetKeys, direction, moveKeys);\n          onValueChange?.(nextTargetKeys);\n        }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return transferNode;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={targetKeys}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {transferNode}\n    </FieldShell>\n  );\n};\n\nexport const ClearableTransfer = ({\n  clearable = true,\n  ...props\n}: ClearableTransferProps) => {\n  return <Transfer {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}

package/dist-lib/forms/ClearableTreeSelect.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`./TreeSelect.cjs`);let t=require(`react/jsx-runtime`);var n=({fieldLabel:n,fieldRequired:r,clear:i,clearable:a=!0,clearLabel:o,clearVisibility:s=`always`,onClear:c,onValueChange:l,clearToValue:u,value:d,containerStyle:f,fieldActions:p,id:m,...h})=>(0,t.jsx)(e.TreeSelect,{...h,id:m,value:d,fieldLabel:n,fieldRequired:r,fieldActions:p,containerStyle:f,clear:i,clearable:a,clearLabel:o,clearVisibility:s,onClear:c,onValueChange:l,clearToValue:u,style:{width:`100%`,...h.style}});exports.ClearableTreeSelect=n;
+//# sourceMappingURL=ClearableTreeSelect.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearableTreeSelect.cjs","names":[],"sources":["../../src/ds/forms/ClearableTreeSelect.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { TreeSelect } from './TreeSelect';\nimport type { DSTreeSelectProps } from './TreeSelect';\n\ntype TreeSelectProps = DSTreeSelectProps;\n\nexport type ClearableTreeSelectProps = Omit<TreeSelectProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: TreeSelectProps['value']) => void;\n  clearToValue?: TreeSelectProps['value'];\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nexport const ClearableTreeSelect = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  ...treeProps\n}: ClearableTreeSelectProps) => {\n  return (\n    <TreeSelect\n      {...treeProps}\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      clearToValue={clearToValue}\n      style={{ width: '100%', ...treeProps.style }}\n    />\n  );\n};\n"],"mappings":"2KAqBA,IAAa,GAAuB,CAClC,aACA,gBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,eACA,QACA,iBACA,eACA,KACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,GAAI,EACA,KACG,QACK,aACG,gBACD,eACE,iBACT,QACI,YACC,aACK,kBACR,UACM,gBACD,eACd,MAAO,CAAE,MAAO,OAAQ,GAAG,EAAU,MAAO,CAC5C,CAAA"}

package/dist-lib/forms/ClearableTreeSelect.js

@@ -0,0 +1,27 @@
+import { TreeSelect as e } from "./TreeSelect.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/ds/forms/ClearableTreeSelect.tsx
+var n = ({ fieldLabel: n, fieldRequired: r, clear: i, clearable: a = !0, clearLabel: o, clearVisibility: s = "always", onClear: c, onValueChange: l, clearToValue: u, value: d, containerStyle: f, fieldActions: p, id: m, ...h }) => /* @__PURE__ */ t(e, {
+	...h,
+	id: m,
+	value: d,
+	fieldLabel: n,
+	fieldRequired: r,
+	fieldActions: p,
+	containerStyle: f,
+	clear: i,
+	clearable: a,
+	clearLabel: o,
+	clearVisibility: s,
+	onClear: c,
+	onValueChange: l,
+	clearToValue: u,
+	style: {
+		width: "100%",
+		...h.style
+	}
+});
+//#endregion
+export { n as ClearableTreeSelect };
+
+//# sourceMappingURL=ClearableTreeSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearableTreeSelect.js","names":[],"sources":["../../src/ds/forms/ClearableTreeSelect.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { TreeSelect } from './TreeSelect';\nimport type { DSTreeSelectProps } from './TreeSelect';\n\ntype TreeSelectProps = DSTreeSelectProps;\n\nexport type ClearableTreeSelectProps = Omit<TreeSelectProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: TreeSelectProps['value']) => void;\n  clearToValue?: TreeSelectProps['value'];\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nexport const ClearableTreeSelect = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  ...treeProps\n}: ClearableTreeSelectProps) => {\n  return (\n    <TreeSelect\n      {...treeProps}\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      clearToValue={clearToValue}\n      style={{ width: '100%', ...treeProps.style }}\n    />\n  );\n};\n"],"mappings":";;;AAqBA,IAAa,KAAuB,EAClC,eACA,kBACA,UACA,eAAY,IACZ,eACA,qBAAkB,UAClB,YACA,kBACA,iBACA,UACA,mBACA,iBACA,OACA,GAAG,QAGD,kBAAC,GAAD;CACE,GAAI;CACA;CACG;CACK;CACG;CACD;CACE;CACT;CACI;CACC;CACK;CACR;CACM;CACD;CACd,OAAO;EAAE,OAAO;EAAQ,GAAG,EAAU;EAAO;CAC5C,CAAA"}

package/dist-lib/forms/ClearableUpload.cjs

@@ -0,0 +1,111 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./Button.cjs`),n=require(`./FieldShell.cjs`);let r=require(`antd`),i=require(`react`),a=require(`react/jsx-runtime`);var o=`ds-upload-styles`;function s(...e){return e.filter(Boolean).join(` `).trim()}function c(){if(typeof document>`u`)return;let{button:t,tag:n}=e.dsSemanticTokens,r=document.getElementById(o);r||(r=document.createElement(`style`),r.id=o,document.head.appendChild(r)),r.textContent=`
+    .ds-upload {
+      width: 100%;
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-upload .ant-upload,
+    .ds-upload .ant-upload-wrapper {
+      width: 100%;
+    }
+
+    .ds-upload .ant-upload-list {
+      margin-top: 8px;
+    }
+
+    .ds-upload .ant-upload-list-item {
+      border-radius: 6px;
+    }
+
+    .ds-upload .ant-upload-list-item-name {
+      color: ${t.secondary.defaultText};
+    }
+
+    .ds-upload .ant-upload-list-item-actions a,
+    .ds-upload .ant-upload-list-item-actions button {
+      color: ${t.secondary.defaultText};
+    }
+
+    .ds-upload[data-ds-upload-variant='compact'] .ant-upload-list {
+      margin-top: 4px;
+    }
+
+    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag {
+      border: 1px dashed ${t.secondary.defaultBorder};
+      border-radius: 8px;
+      background: ${n.status.neutral.light.bg};
+      padding: 18px 16px;
+      transition: none !important;
+    }
+
+    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag:hover,
+    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag.ant-upload-drag-hover {
+      border-color: ${t.secondary.hoverBorder};
+      background: ${n.status.neutral.light.bg};
+    }
+
+    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag .ant-upload-drag-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+      justify-content: center;
+      min-height: 120px;
+    }
+
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-card-wrapper .ant-upload-select,
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-circle-wrapper .ant-upload-select {
+      border: 1px dashed ${t.secondary.defaultBorder};
+      border-radius: 8px;
+      background: ${n.status.neutral.light.bg};
+      transition: none !important;
+    }
+
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-card-wrapper .ant-upload-select:hover,
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-circle-wrapper .ant-upload-select:hover {
+      border-color: ${t.secondary.hoverBorder};
+      background: ${n.status.neutral.light.bg};
+    }
+
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-card-container,
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-circle-container {
+      margin-inline-end: 8px;
+      margin-bottom: 8px;
+    }
+
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-card .ant-upload-list-item,
+    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-circle .ant-upload-list-item {
+      border: 1px solid ${t.secondary.defaultBorder};
+      border-radius: 8px;
+      background: ${t.secondary.defaultBg};
+    }
+
+    .ds-upload .ds-upload-dropzone-title {
+      color: ${t.secondary.defaultText};
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .ds-upload .ds-upload-dropzone-subtitle {
+      color: ${t.secondary.defaultText};
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+      opacity: 0.72;
+    }
+
+    .ds-upload .ds-upload-gallery-trigger {
+      min-width: 104px;
+      min-height: 104px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      border-radius: 0;
+      color: ${t.secondary.defaultText};
+      background: transparent;
+    }
+  `}function l(e){return e===`dropzone`?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{className:`ds-upload-dropzone-title`,children:`Click or drag files to this area to upload`}),(0,a.jsx)(`div`,{className:`ds-upload-dropzone-subtitle`,children:`Support for a single or bulk upload`})]}):e===`gallery`?(0,a.jsx)(`div`,{className:`ds-upload-gallery-trigger`,children:`+ Upload`}):e===`compact`?(0,a.jsx)(t.Button,{dsVariant:`secondary`,size:`small`,children:`Click to Upload`}):(0,a.jsx)(t.Button,{dsVariant:`secondary`,children:`Click to Upload`})}var u=({fieldLabel:e,fieldRequired:t,fieldDescription:o,fieldError:u,clear:d,clearable:f=!1,clearLabel:p,clearVisibility:m=`always`,onClear:h,onValueChange:g,clearToValue:_=[],fileList:v,children:y,containerStyle:b,fieldActions:x,dsVariant:S=`attachment`,...C})=>{(0,i.useEffect)(()=>{c()},[]);let w=d?.onClear??h,T=C.listType??(S===`gallery`?`picture-card`:`text`),E=y??l(S),D=()=>{w?.(),g?.(_)},O=!!(e||t||o||u||x||f||d||h),k=S===`dropzone`?(0,a.jsx)(r.Upload.Dragger,{...C,listType:T,fileList:v,onChange:e=>{C.onChange?.(e),g?.(e.fileList)},children:E}):(0,a.jsx)(r.Upload,{...C,listType:T,fileList:v,onChange:e=>{C.onChange?.(e),g?.(e.fileList)},children:E}),A=(0,a.jsx)(`div`,{className:s(`ds-upload`,`ds-upload--${S}`),"data-ds-upload-variant":S,children:k});return O?(0,a.jsx)(n.FieldShell,{label:e,required:t,description:o,error:u,clear:{enabled:d?.enabled??f,label:d?.label??p,visibility:d?.visibility??m,onClear:D},clearValue:v,extraActions:x,style:b,children:A}):A},d=({clearable:e=!0,...t})=>(0,a.jsx)(u,{...t,clearable:e});exports.ClearableUpload=d,exports.Upload=u;
+//# sourceMappingURL=ClearableUpload.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearableUpload.cjs","names":[],"sources":["../../src/ds/forms/ClearableUpload.tsx"],"sourcesContent":["import { Upload as AntUpload } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { Button } from './Button';\nimport { FieldShell } from './FieldShell';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\ntype AntUploadProps = React.ComponentProps<typeof AntUpload>;\n\ntype UploadFileList = AntUploadProps['fileList'];\n\nexport type DSUploadVariant = 'attachment' | 'dropzone' | 'gallery' | 'compact';\n\nexport type UploadProps = AntUploadProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: UploadFileList) => void;\n  clearToValue?: UploadFileList;\n  dsVariant?: DSUploadVariant;\n};\n\nexport type ClearableUploadProps = UploadProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-upload-styles';\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, tag } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-upload {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-upload .ant-upload,\n    .ds-upload .ant-upload-wrapper {\n      width: 100%;\n    }\n\n    .ds-upload .ant-upload-list {\n      margin-top: 8px;\n    }\n\n    .ds-upload .ant-upload-list-item {\n      border-radius: 6px;\n    }\n\n    .ds-upload .ant-upload-list-item-name {\n      color: ${button.secondary.defaultText};\n    }\n\n    .ds-upload .ant-upload-list-item-actions a,\n    .ds-upload .ant-upload-list-item-actions button {\n      color: ${button.secondary.defaultText};\n    }\n\n    .ds-upload[data-ds-upload-variant='compact'] .ant-upload-list {\n      margin-top: 4px;\n    }\n\n    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag {\n      border: 1px dashed ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      background: ${tag.status.neutral.light.bg};\n      padding: 18px 16px;\n      transition: none !important;\n    }\n\n    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag:hover,\n    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag.ant-upload-drag-hover {\n      border-color: ${button.secondary.hoverBorder};\n      background: ${tag.status.neutral.light.bg};\n    }\n\n    .ds-upload[data-ds-upload-variant='dropzone'] .ant-upload-drag .ant-upload-drag-container {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      align-items: center;\n      justify-content: center;\n      min-height: 120px;\n    }\n\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-card-wrapper .ant-upload-select,\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-circle-wrapper .ant-upload-select {\n      border: 1px dashed ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      background: ${tag.status.neutral.light.bg};\n      transition: none !important;\n    }\n\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-card-wrapper .ant-upload-select:hover,\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-picture-circle-wrapper .ant-upload-select:hover {\n      border-color: ${button.secondary.hoverBorder};\n      background: ${tag.status.neutral.light.bg};\n    }\n\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-card-container,\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-circle-container {\n      margin-inline-end: 8px;\n      margin-bottom: 8px;\n    }\n\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-card .ant-upload-list-item,\n    .ds-upload[data-ds-upload-variant='gallery'] .ant-upload-list-picture-circle .ant-upload-list-item {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-upload .ds-upload-dropzone-title {\n      color: ${button.secondary.defaultText};\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 18px;\n      text-align: center;\n    }\n\n    .ds-upload .ds-upload-dropzone-subtitle {\n      color: ${button.secondary.defaultText};\n      font-size: 12px;\n      line-height: 16px;\n      text-align: center;\n      opacity: 0.72;\n    }\n\n    .ds-upload .ds-upload-gallery-trigger {\n      min-width: 104px;\n      min-height: 104px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 0;\n      border-radius: 0;\n      color: ${button.secondary.defaultText};\n      background: transparent;\n    }\n  `;\n}\n\nfunction getDefaultChildren(dsVariant: DSUploadVariant) {\n  if (dsVariant === 'dropzone') {\n    return (\n      <>\n        <div className=\"ds-upload-dropzone-title\">Click or drag files to this area to upload</div>\n        <div className=\"ds-upload-dropzone-subtitle\">Support for a single or bulk upload</div>\n      </>\n    );\n  }\n\n  if (dsVariant === 'gallery') {\n    return <div className=\"ds-upload-gallery-trigger\">+ Upload</div>;\n  }\n\n  if (dsVariant === 'compact') {\n    return <Button dsVariant=\"secondary\" size=\"small\">Click to Upload</Button>;\n  }\n\n  return <Button dsVariant=\"secondary\">Click to Upload</Button>;\n}\n\nexport const Upload = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  fileList,\n  children,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'attachment',\n  ...uploadProps\n}: UploadProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const resolvedListType = uploadProps.listType ?? (dsVariant === 'gallery' ? 'picture-card' : 'text');\n  const resolvedChildren = children ?? getDefaultChildren(dsVariant);\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const uploadNode = dsVariant === 'dropzone' ? (\n    <AntUpload.Dragger\n      {...uploadProps}\n      listType={resolvedListType}\n      fileList={fileList}\n      onChange={(info) => {\n        uploadProps.onChange?.(info);\n        onValueChange?.(info.fileList);\n      }}\n    >\n      {resolvedChildren}\n    </AntUpload.Dragger>\n  ) : (\n    <AntUpload\n      {...uploadProps}\n      listType={resolvedListType}\n      fileList={fileList}\n      onChange={(info) => {\n        uploadProps.onChange?.(info);\n        onValueChange?.(info.fileList);\n      }}\n    >\n      {resolvedChildren}\n    </AntUpload>\n  );\n\n  const uploadWrapper = (\n    <div className={mergeClassNames('ds-upload', `ds-upload--${dsVariant}`)} data-ds-upload-variant={dsVariant}>\n      {uploadNode}\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return uploadWrapper;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={fileList}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {uploadWrapper}\n    </FieldShell>\n  );\n};\n\nexport const ClearableUpload = ({\n  clearable = true,\n  ...props\n}: ClearableUploadProps) => {\n  return <Upload {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}