ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Typography.cjs

@@ -0,0 +1,102 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-typography-styles`,a=`ds-typography`,o={pageTitle:`h1`,sectionTitle:`h2`,panelTitle:`h3`,fieldLabel:`label`,helper:`p`,metadata:`span`,emptyTitle:`h3`};function s(...e){return e.filter(Boolean).join(` `).trim()}function c(){if(typeof document>`u`)return;let{typography:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .${a} {
+      display: block;
+      margin: 0;
+      color: ${t.text.body};
+      font-family: ${t.family};
+      min-height: 1em;
+      overflow-wrap: anywhere;
+      overflow: visible;
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a}.ant-typography,
+    .${a}.ant-typography p,
+    .${a}.ant-typography span {
+      margin: 0;
+    }
+
+    .${a}[data-ds-typography-tone='default'] {
+      color: ${t.text.body};
+    }
+
+    .${a}[data-ds-typography-tone='secondary'] {
+      color: ${t.text.secondary};
+    }
+
+    .${a}[data-ds-typography-tone='muted'] {
+      color: ${t.text.muted};
+    }
+
+    .${a}[data-ds-typography-tone='link'] {
+      color: ${t.text.link};
+    }
+
+    .${a}[data-ds-typography-variant='pageTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.pageTitle.fontSize};
+      font-weight: ${t.variants.pageTitle.fontWeight};
+      line-height: ${t.variants.pageTitle.lineHeight};
+      min-height: ${t.variants.pageTitle.minHeight};
+      letter-spacing: ${t.variants.pageTitle.letterSpacing};
+    }
+
+    .${a}[data-ds-typography-variant='sectionTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.sectionTitle.fontSize};
+      font-weight: ${t.variants.sectionTitle.fontWeight};
+      line-height: ${t.variants.sectionTitle.lineHeight};
+      min-height: ${t.variants.sectionTitle.minHeight};
+      letter-spacing: ${t.variants.sectionTitle.letterSpacing};
+    }
+
+    .${a}[data-ds-typography-variant='panelTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.panelTitle.fontSize};
+      font-weight: ${t.variants.panelTitle.fontWeight};
+      line-height: ${t.variants.panelTitle.lineHeight};
+      min-height: ${t.variants.panelTitle.minHeight};
+      letter-spacing: ${t.variants.panelTitle.letterSpacing};
+    }
+
+    .${a}[data-ds-typography-variant='fieldLabel'] {
+      color: ${t.text.body};
+      font-size: ${t.variants.fieldLabel.fontSize};
+      font-weight: ${t.variants.fieldLabel.fontWeight};
+      line-height: ${t.variants.fieldLabel.lineHeight};
+      min-height: ${t.variants.fieldLabel.lineHeight};
+      letter-spacing: ${t.variants.fieldLabel.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .${a}[data-ds-typography-variant='helper'] {
+      color: ${t.text.secondary};
+      font-size: ${t.variants.helper.fontSize};
+      font-weight: ${t.variants.helper.fontWeight};
+      line-height: ${t.variants.helper.lineHeight};
+      min-height: ${t.variants.helper.lineHeight};
+      letter-spacing: ${t.variants.helper.letterSpacing};
+    }
+
+    .${a}[data-ds-typography-variant='metadata'] {
+      color: ${t.text.muted};
+      font-size: ${t.variants.metadata.fontSize};
+      font-weight: ${t.variants.metadata.fontWeight};
+      line-height: ${t.variants.metadata.lineHeight};
+      min-height: ${t.variants.metadata.lineHeight};
+      letter-spacing: ${t.variants.metadata.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .${a}[data-ds-typography-variant='emptyTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.emptyTitle.fontSize};
+      font-weight: ${t.variants.emptyTitle.fontWeight};
+      line-height: ${t.variants.emptyTitle.lineHeight};
+      min-height: ${t.variants.emptyTitle.minHeight};
+      letter-spacing: ${t.variants.emptyTitle.letterSpacing};
+      text-align: center;
+    }
+  `}function l(e,i){return e===`label`||e===`div`?(0,n.createElement)(e,i,i.children):e===`span`?(0,r.jsx)(t.Typography.Text,{...i}):(0,r.jsx)(t.Typography.Paragraph,{...i})}var u=({children:e,className:i,dsElement:u,dsTone:d=`default`,dsVariant:f=`panelTitle`,...p})=>{(0,n.useEffect)(()=>{c()},[]);let m=u??o[f],h={...p,children:e,className:s(a,i),"data-ds-typography-tone":d,"data-ds-typography-variant":f};return m===`h1`?(0,r.jsx)(t.Typography.Title,{...h,level:1,children:e}):m===`h2`?(0,r.jsx)(t.Typography.Title,{...h,level:2,children:e}):m===`h3`?(0,r.jsx)(t.Typography.Title,{...h,level:3,children:e}):m===`h4`?(0,r.jsx)(t.Typography.Title,{...h,level:4,children:e}):l(m,h)};u.displayName=`Typography`,u.Title=t.Typography.Title,u.Paragraph=t.Typography.Paragraph,u.Text=t.Typography.Text,u.Link=t.Typography.Link,exports.Typography=u;
+//# sourceMappingURL=Typography.cjs.map

package/dist-lib/display/Typography.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.cjs","names":[],"sources":["../../src/ds/display/Typography.tsx"],"sourcesContent":["import { Typography as AntTypography } from 'antd';\nimport type { TypographyProps as AntTypographyProps } from 'antd/es/typography/Typography';\nimport type { TextProps as AntTextProps } from 'antd/es/typography/Text';\nimport type { FC, ReactNode } from 'react';\nimport { createElement } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTypographyVariant = 'pageTitle' | 'sectionTitle' | 'panelTitle' | 'fieldLabel' | 'helper' | 'metadata' | 'emptyTitle';\nexport type DSTypographyTone = 'default' | 'secondary' | 'muted' | 'link';\nexport type DSTypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'label' | 'div';\n\ntype RestrictedAntProps = 'prefixCls' | 'direction';\n\nexport type TypographyProps = Omit<AntTypographyProps<'div'>, RestrictedAntProps> & {\n  /** Semantic DS typography variant for common product hierarchy and helper text. */\n  dsVariant?: DSTypographyVariant;\n  /** Semantic text tone using DS colors. */\n  dsTone?: DSTypographyTone;\n  /** Override the rendered element when the default semantic element is not appropriate. */\n  dsElement?: DSTypographyElement;\n  /** Content rendered by the typography wrapper. */\n  children?: ReactNode;\n};\n\ntype DSTypographyComponent = FC<TypographyProps> & {\n  Title: typeof AntTypography.Title;\n  Paragraph: typeof AntTypography.Paragraph;\n  Text: typeof AntTypography.Text;\n  Link: typeof AntTypography.Link;\n};\n\nconst STYLE_ID = 'ds-typography-styles';\nconst DS_TYPOGRAPHY_CLASS = 'ds-typography';\n\nconst DEFAULT_ELEMENT_BY_VARIANT: Record<DSTypographyVariant, DSTypographyElement> = {\n  pageTitle: 'h1',\n  sectionTitle: 'h2',\n  panelTitle: 'h3',\n  fieldLabel: 'label',\n  helper: 'p',\n  metadata: 'span',\n  emptyTitle: 'h3',\n};\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 { typography } = 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_TYPOGRAPHY_CLASS} {\n      display: block;\n      margin: 0;\n      color: ${typography.text.body};\n      font-family: ${typography.family};\n      min-height: 1em;\n      overflow-wrap: anywhere;\n      overflow: visible;\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography,\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography p,\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography span {\n      margin: 0;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='default'] {\n      color: ${typography.text.body};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='secondary'] {\n      color: ${typography.text.secondary};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='muted'] {\n      color: ${typography.text.muted};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='link'] {\n      color: ${typography.text.link};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='pageTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.pageTitle.fontSize};\n      font-weight: ${typography.variants.pageTitle.fontWeight};\n      line-height: ${typography.variants.pageTitle.lineHeight};\n      min-height: ${typography.variants.pageTitle.minHeight};\n      letter-spacing: ${typography.variants.pageTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='sectionTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.sectionTitle.fontSize};\n      font-weight: ${typography.variants.sectionTitle.fontWeight};\n      line-height: ${typography.variants.sectionTitle.lineHeight};\n      min-height: ${typography.variants.sectionTitle.minHeight};\n      letter-spacing: ${typography.variants.sectionTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='panelTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.panelTitle.fontSize};\n      font-weight: ${typography.variants.panelTitle.fontWeight};\n      line-height: ${typography.variants.panelTitle.lineHeight};\n      min-height: ${typography.variants.panelTitle.minHeight};\n      letter-spacing: ${typography.variants.panelTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='fieldLabel'] {\n      color: ${typography.text.body};\n      font-size: ${typography.variants.fieldLabel.fontSize};\n      font-weight: ${typography.variants.fieldLabel.fontWeight};\n      line-height: ${typography.variants.fieldLabel.lineHeight};\n      min-height: ${typography.variants.fieldLabel.lineHeight};\n      letter-spacing: ${typography.variants.fieldLabel.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='helper'] {\n      color: ${typography.text.secondary};\n      font-size: ${typography.variants.helper.fontSize};\n      font-weight: ${typography.variants.helper.fontWeight};\n      line-height: ${typography.variants.helper.lineHeight};\n      min-height: ${typography.variants.helper.lineHeight};\n      letter-spacing: ${typography.variants.helper.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='metadata'] {\n      color: ${typography.text.muted};\n      font-size: ${typography.variants.metadata.fontSize};\n      font-weight: ${typography.variants.metadata.fontWeight};\n      line-height: ${typography.variants.metadata.lineHeight};\n      min-height: ${typography.variants.metadata.lineHeight};\n      letter-spacing: ${typography.variants.metadata.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='emptyTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.emptyTitle.fontSize};\n      font-weight: ${typography.variants.emptyTitle.fontWeight};\n      line-height: ${typography.variants.emptyTitle.lineHeight};\n      min-height: ${typography.variants.emptyTitle.minHeight};\n      letter-spacing: ${typography.variants.emptyTitle.letterSpacing};\n      text-align: center;\n    }\n  `;\n}\n\nfunction renderTextElement(element: DSTypographyElement, props: AntTextProps & { children?: ReactNode }) {\n  if (element === 'label' || element === 'div') {\n    return createElement(element, props, props.children);\n  }\n\n  if (element === 'span') {\n    return <AntTypography.Text {...props} />;\n  }\n\n  return <AntTypography.Paragraph {...props} />;\n}\n\nexport const Typography: DSTypographyComponent = ({\n  children,\n  className,\n  dsElement,\n  dsTone = 'default',\n  dsVariant = 'panelTitle',\n  ...props\n}: TypographyProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const element = dsElement ?? DEFAULT_ELEMENT_BY_VARIANT[dsVariant];\n  const sharedProps = {\n    ...props,\n    children,\n    className: mergeClassNames(DS_TYPOGRAPHY_CLASS, className),\n    'data-ds-typography-tone': dsTone,\n    'data-ds-typography-variant': dsVariant,\n  };\n\n  if (element === 'h1') return <AntTypography.Title {...sharedProps} level={1}>{children}</AntTypography.Title>;\n  if (element === 'h2') return <AntTypography.Title {...sharedProps} level={2}>{children}</AntTypography.Title>;\n  if (element === 'h3') return <AntTypography.Title {...sharedProps} level={3}>{children}</AntTypography.Title>;\n  if (element === 'h4') return <AntTypography.Title {...sharedProps} level={4}>{children}</AntTypography.Title>;\n\n  return renderTextElement(element, sharedProps as AntTextProps & { children?: ReactNode });\n};\n\nTypography.displayName = 'Typography';\nTypography.Title = AntTypography.Title;\nTypography.Paragraph = AntTypography.Paragraph;\nTypography.Text = AntTypography.Text;\nTypography.Link = AntTypography.Link;\n"],"mappings":"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"}

package/dist-lib/display/Typography.js

@@ -0,0 +1,159 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Typography as t } from "antd";
+import { createElement as n, useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/display/Typography.tsx
+var a = "ds-typography-styles", o = "ds-typography", s = {
+	pageTitle: "h1",
+	sectionTitle: "h2",
+	panelTitle: "h3",
+	fieldLabel: "label",
+	helper: "p",
+	metadata: "span",
+	emptyTitle: "h3"
+};
+function c(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function l() {
+	if (typeof document > "u") return;
+	let { typography: t } = e, n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n)), n.textContent = `
+    .${o} {
+      display: block;
+      margin: 0;
+      color: ${t.text.body};
+      font-family: ${t.family};
+      min-height: 1em;
+      overflow-wrap: anywhere;
+      overflow: visible;
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${o}.ant-typography,
+    .${o}.ant-typography p,
+    .${o}.ant-typography span {
+      margin: 0;
+    }
+
+    .${o}[data-ds-typography-tone='default'] {
+      color: ${t.text.body};
+    }
+
+    .${o}[data-ds-typography-tone='secondary'] {
+      color: ${t.text.secondary};
+    }
+
+    .${o}[data-ds-typography-tone='muted'] {
+      color: ${t.text.muted};
+    }
+
+    .${o}[data-ds-typography-tone='link'] {
+      color: ${t.text.link};
+    }
+
+    .${o}[data-ds-typography-variant='pageTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.pageTitle.fontSize};
+      font-weight: ${t.variants.pageTitle.fontWeight};
+      line-height: ${t.variants.pageTitle.lineHeight};
+      min-height: ${t.variants.pageTitle.minHeight};
+      letter-spacing: ${t.variants.pageTitle.letterSpacing};
+    }
+
+    .${o}[data-ds-typography-variant='sectionTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.sectionTitle.fontSize};
+      font-weight: ${t.variants.sectionTitle.fontWeight};
+      line-height: ${t.variants.sectionTitle.lineHeight};
+      min-height: ${t.variants.sectionTitle.minHeight};
+      letter-spacing: ${t.variants.sectionTitle.letterSpacing};
+    }
+
+    .${o}[data-ds-typography-variant='panelTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.panelTitle.fontSize};
+      font-weight: ${t.variants.panelTitle.fontWeight};
+      line-height: ${t.variants.panelTitle.lineHeight};
+      min-height: ${t.variants.panelTitle.minHeight};
+      letter-spacing: ${t.variants.panelTitle.letterSpacing};
+    }
+
+    .${o}[data-ds-typography-variant='fieldLabel'] {
+      color: ${t.text.body};
+      font-size: ${t.variants.fieldLabel.fontSize};
+      font-weight: ${t.variants.fieldLabel.fontWeight};
+      line-height: ${t.variants.fieldLabel.lineHeight};
+      min-height: ${t.variants.fieldLabel.lineHeight};
+      letter-spacing: ${t.variants.fieldLabel.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .${o}[data-ds-typography-variant='helper'] {
+      color: ${t.text.secondary};
+      font-size: ${t.variants.helper.fontSize};
+      font-weight: ${t.variants.helper.fontWeight};
+      line-height: ${t.variants.helper.lineHeight};
+      min-height: ${t.variants.helper.lineHeight};
+      letter-spacing: ${t.variants.helper.letterSpacing};
+    }
+
+    .${o}[data-ds-typography-variant='metadata'] {
+      color: ${t.text.muted};
+      font-size: ${t.variants.metadata.fontSize};
+      font-weight: ${t.variants.metadata.fontWeight};
+      line-height: ${t.variants.metadata.lineHeight};
+      min-height: ${t.variants.metadata.lineHeight};
+      letter-spacing: ${t.variants.metadata.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .${o}[data-ds-typography-variant='emptyTitle'] {
+      color: ${t.text.heading};
+      font-size: ${t.variants.emptyTitle.fontSize};
+      font-weight: ${t.variants.emptyTitle.fontWeight};
+      line-height: ${t.variants.emptyTitle.lineHeight};
+      min-height: ${t.variants.emptyTitle.minHeight};
+      letter-spacing: ${t.variants.emptyTitle.letterSpacing};
+      text-align: center;
+    }
+  `;
+}
+function u(e, r) {
+	return e === "label" || e === "div" ? n(e, r, r.children) : i(e === "span" ? t.Text : t.Paragraph, { ...r });
+}
+var d = ({ children: e, className: n, dsElement: a, dsTone: d = "default", dsVariant: f = "panelTitle", ...p }) => {
+	r(() => {
+		l();
+	}, []);
+	let m = a ?? s[f], h = {
+		...p,
+		children: e,
+		className: c(o, n),
+		"data-ds-typography-tone": d,
+		"data-ds-typography-variant": f
+	};
+	return m === "h1" ? /* @__PURE__ */ i(t.Title, {
+		...h,
+		level: 1,
+		children: e
+	}) : m === "h2" ? /* @__PURE__ */ i(t.Title, {
+		...h,
+		level: 2,
+		children: e
+	}) : m === "h3" ? /* @__PURE__ */ i(t.Title, {
+		...h,
+		level: 3,
+		children: e
+	}) : m === "h4" ? /* @__PURE__ */ i(t.Title, {
+		...h,
+		level: 4,
+		children: e
+	}) : u(m, h);
+};
+d.displayName = "Typography", d.Title = t.Title, d.Paragraph = t.Paragraph, d.Text = t.Text, d.Link = t.Link;
+//#endregion
+export { d as Typography };
+
+//# sourceMappingURL=Typography.js.map

package/dist-lib/display/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","names":[],"sources":["../../src/ds/display/Typography.tsx"],"sourcesContent":["import { Typography as AntTypography } from 'antd';\nimport type { TypographyProps as AntTypographyProps } from 'antd/es/typography/Typography';\nimport type { TextProps as AntTextProps } from 'antd/es/typography/Text';\nimport type { FC, ReactNode } from 'react';\nimport { createElement } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTypographyVariant = 'pageTitle' | 'sectionTitle' | 'panelTitle' | 'fieldLabel' | 'helper' | 'metadata' | 'emptyTitle';\nexport type DSTypographyTone = 'default' | 'secondary' | 'muted' | 'link';\nexport type DSTypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'label' | 'div';\n\ntype RestrictedAntProps = 'prefixCls' | 'direction';\n\nexport type TypographyProps = Omit<AntTypographyProps<'div'>, RestrictedAntProps> & {\n  /** Semantic DS typography variant for common product hierarchy and helper text. */\n  dsVariant?: DSTypographyVariant;\n  /** Semantic text tone using DS colors. */\n  dsTone?: DSTypographyTone;\n  /** Override the rendered element when the default semantic element is not appropriate. */\n  dsElement?: DSTypographyElement;\n  /** Content rendered by the typography wrapper. */\n  children?: ReactNode;\n};\n\ntype DSTypographyComponent = FC<TypographyProps> & {\n  Title: typeof AntTypography.Title;\n  Paragraph: typeof AntTypography.Paragraph;\n  Text: typeof AntTypography.Text;\n  Link: typeof AntTypography.Link;\n};\n\nconst STYLE_ID = 'ds-typography-styles';\nconst DS_TYPOGRAPHY_CLASS = 'ds-typography';\n\nconst DEFAULT_ELEMENT_BY_VARIANT: Record<DSTypographyVariant, DSTypographyElement> = {\n  pageTitle: 'h1',\n  sectionTitle: 'h2',\n  panelTitle: 'h3',\n  fieldLabel: 'label',\n  helper: 'p',\n  metadata: 'span',\n  emptyTitle: 'h3',\n};\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 { typography } = 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_TYPOGRAPHY_CLASS} {\n      display: block;\n      margin: 0;\n      color: ${typography.text.body};\n      font-family: ${typography.family};\n      min-height: 1em;\n      overflow-wrap: anywhere;\n      overflow: visible;\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography,\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography p,\n    .${DS_TYPOGRAPHY_CLASS}.ant-typography span {\n      margin: 0;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='default'] {\n      color: ${typography.text.body};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='secondary'] {\n      color: ${typography.text.secondary};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='muted'] {\n      color: ${typography.text.muted};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-tone='link'] {\n      color: ${typography.text.link};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='pageTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.pageTitle.fontSize};\n      font-weight: ${typography.variants.pageTitle.fontWeight};\n      line-height: ${typography.variants.pageTitle.lineHeight};\n      min-height: ${typography.variants.pageTitle.minHeight};\n      letter-spacing: ${typography.variants.pageTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='sectionTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.sectionTitle.fontSize};\n      font-weight: ${typography.variants.sectionTitle.fontWeight};\n      line-height: ${typography.variants.sectionTitle.lineHeight};\n      min-height: ${typography.variants.sectionTitle.minHeight};\n      letter-spacing: ${typography.variants.sectionTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='panelTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.panelTitle.fontSize};\n      font-weight: ${typography.variants.panelTitle.fontWeight};\n      line-height: ${typography.variants.panelTitle.lineHeight};\n      min-height: ${typography.variants.panelTitle.minHeight};\n      letter-spacing: ${typography.variants.panelTitle.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='fieldLabel'] {\n      color: ${typography.text.body};\n      font-size: ${typography.variants.fieldLabel.fontSize};\n      font-weight: ${typography.variants.fieldLabel.fontWeight};\n      line-height: ${typography.variants.fieldLabel.lineHeight};\n      min-height: ${typography.variants.fieldLabel.lineHeight};\n      letter-spacing: ${typography.variants.fieldLabel.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='helper'] {\n      color: ${typography.text.secondary};\n      font-size: ${typography.variants.helper.fontSize};\n      font-weight: ${typography.variants.helper.fontWeight};\n      line-height: ${typography.variants.helper.lineHeight};\n      min-height: ${typography.variants.helper.lineHeight};\n      letter-spacing: ${typography.variants.helper.letterSpacing};\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='metadata'] {\n      color: ${typography.text.muted};\n      font-size: ${typography.variants.metadata.fontSize};\n      font-weight: ${typography.variants.metadata.fontWeight};\n      line-height: ${typography.variants.metadata.lineHeight};\n      min-height: ${typography.variants.metadata.lineHeight};\n      letter-spacing: ${typography.variants.metadata.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_TYPOGRAPHY_CLASS}[data-ds-typography-variant='emptyTitle'] {\n      color: ${typography.text.heading};\n      font-size: ${typography.variants.emptyTitle.fontSize};\n      font-weight: ${typography.variants.emptyTitle.fontWeight};\n      line-height: ${typography.variants.emptyTitle.lineHeight};\n      min-height: ${typography.variants.emptyTitle.minHeight};\n      letter-spacing: ${typography.variants.emptyTitle.letterSpacing};\n      text-align: center;\n    }\n  `;\n}\n\nfunction renderTextElement(element: DSTypographyElement, props: AntTextProps & { children?: ReactNode }) {\n  if (element === 'label' || element === 'div') {\n    return createElement(element, props, props.children);\n  }\n\n  if (element === 'span') {\n    return <AntTypography.Text {...props} />;\n  }\n\n  return <AntTypography.Paragraph {...props} />;\n}\n\nexport const Typography: DSTypographyComponent = ({\n  children,\n  className,\n  dsElement,\n  dsTone = 'default',\n  dsVariant = 'panelTitle',\n  ...props\n}: TypographyProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const element = dsElement ?? DEFAULT_ELEMENT_BY_VARIANT[dsVariant];\n  const sharedProps = {\n    ...props,\n    children,\n    className: mergeClassNames(DS_TYPOGRAPHY_CLASS, className),\n    'data-ds-typography-tone': dsTone,\n    'data-ds-typography-variant': dsVariant,\n  };\n\n  if (element === 'h1') return <AntTypography.Title {...sharedProps} level={1}>{children}</AntTypography.Title>;\n  if (element === 'h2') return <AntTypography.Title {...sharedProps} level={2}>{children}</AntTypography.Title>;\n  if (element === 'h3') return <AntTypography.Title {...sharedProps} level={3}>{children}</AntTypography.Title>;\n  if (element === 'h4') return <AntTypography.Title {...sharedProps} level={4}>{children}</AntTypography.Title>;\n\n  return renderTextElement(element, sharedProps as AntTextProps & { children?: ReactNode });\n};\n\nTypography.displayName = 'Typography';\nTypography.Title = AntTypography.Title;\nTypography.Paragraph = AntTypography.Paragraph;\nTypography.Text = AntTypography.Text;\nTypography.Link = AntTypography.Link;\n"],"mappings":"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"}

package/dist-lib/display/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Tooltip.cjs`),t=require(`./Badge.cjs`),n=require(`./Empty.cjs`),r=require(`./Icon.cjs`),i=require(`./Tag.cjs`),a=require(`./List.cjs`),o=require(`./Descriptions.cjs`),s=require(`./Statistic.cjs`),c=require(`./Typography.cjs`),l=require(`./Avatar.cjs`),u=require(`./Tree.cjs`),d=require(`./Timeline.cjs`),f=require(`./Segmented.cjs`),p=require(`./Calendar.cjs`),m=require(`./Table.cjs`),h=require(`./Popover.cjs`),g=require(`./Collapse.cjs`),_=require(`./Card.cjs`),v=require(`./Image.cjs`);exports.Avatar=l.Avatar,exports.Badge=t.Badge,exports.Calendar=p.Calendar,exports.Card=_.Card,exports.Collapse=g.Collapse,exports.DS_ICON_GROUPS=r.DS_ICON_GROUPS,exports.DS_ICON_NAMES=r.DS_ICON_NAMES,exports.DS_STATUS_ICON_MAP=r.DS_STATUS_ICON_MAP,exports.Descriptions=o.Descriptions,exports.Empty=n.Empty,exports.Icon=r.Icon,exports.Image=v.Image,exports.List=a.List,exports.Popover=h.Popover,exports.Segmented=f.Segmented,exports.Statistic=s.Statistic,exports.Table=m.Table,exports.Tag=i.Tag,exports.Timeline=d.Timeline,exports.Tooltip=e.Tooltip,exports.Tree=u.Tree,exports.Typography=c.Typography,exports.ensureTooltipStyles=e.ensureTooltipStyles;

package/dist-lib/display/index.js

@@ -0,0 +1,20 @@
+import { Tooltip as e, ensureTooltipStyles as t } from "./Tooltip.js";
+import { Badge as n } from "./Badge.js";
+import { Empty as r } from "./Empty.js";
+import { DS_ICON_GROUPS as i, DS_ICON_NAMES as a, DS_STATUS_ICON_MAP as o, Icon as s } from "./Icon.js";
+import { Tag as c } from "./Tag.js";
+import { List as l } from "./List.js";
+import { Descriptions as u } from "./Descriptions.js";
+import { Statistic as d } from "./Statistic.js";
+import { Typography as f } from "./Typography.js";
+import { Avatar as p } from "./Avatar.js";
+import { Tree as m } from "./Tree.js";
+import { Timeline as h } from "./Timeline.js";
+import { Segmented as g } from "./Segmented.js";
+import { Calendar as _ } from "./Calendar.js";
+import { Table as v } from "./Table.js";
+import { Popover as y } from "./Popover.js";
+import { Collapse as b } from "./Collapse.js";
+import { Card as x } from "./Card.js";
+import { Image as S } from "./Image.js";
+export { p as Avatar, n as Badge, _ as Calendar, x as Card, b as Collapse, i as DS_ICON_GROUPS, a as DS_ICON_NAMES, o as DS_STATUS_ICON_MAP, u as Descriptions, r as Empty, s as Icon, S as Image, l as List, y as Popover, g as Segmented, d as Statistic, v as Table, c as Tag, h as Timeline, e as Tooltip, m as Tree, f as Typography, t as ensureTooltipStyles };

package/dist-lib/feedback/Drawer.cjs

@@ -0,0 +1,169 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`../forms/Button.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-drawer-styles`,o={details:`standard`,edit:`wide`,filter:`narrow`,confirmation:`narrow`,workflowPanel:`full`},s={details:`none`,edit:`actions`,filter:`actions`,confirmation:`actions`,workflowPanel:`actions`},c={details:`Done`,edit:`Save`,filter:`Apply filters`,confirmation:`Confirm`,workflowPanel:`Continue`},l={details:`Close`,edit:`Cancel`,filter:`Reset`,confirmation:`Cancel`,workflowPanel:`Back`},u=(...e)=>e.filter(Boolean).join(` `).trim();function d(){if(typeof document>`u`)return;let{drawer:t}=e.dsSemanticTokens,n=document.getElementById(a);n||(n=document.createElement(`style`),n.id=a,document.head.appendChild(n)),n.textContent=`
+    .ds-drawer-root .ant-drawer-mask {
+      background: ${t.backdrop} !important;
+    }
+
+    .ds-drawer-root .ant-drawer-content-wrapper {
+      box-shadow: ${t.shadow} !important;
+    }
+
+    .ds-drawer-root .ant-drawer-content,
+    .ds-drawer.ant-drawer-content {
+      background: ${t.surface.background};
+      border-radius: ${t.border.radius};
+      overflow: hidden;
+    }
+
+    .ds-drawer-root .ant-drawer-header {
+      flex: 0 0 auto !important;
+      min-height: 64px;
+      height: auto !important;
+      padding: ${t.spacing.header};
+      background: ${t.surface.header};
+      border-bottom: ${t.border.width} solid ${t.border.color};
+      align-items: flex-start;
+      box-sizing: border-box;
+    }
+
+    .ds-drawer-root .ant-drawer-header-title {
+      width: 100%;
+      min-width: 0;
+      min-height: 0;
+      height: auto !important;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .ds-drawer-root .ant-drawer-title {
+      flex: 1 1 auto;
+      min-width: 0;
+      color: ${t.text.title};
+      font-family: 'Nunito', sans-serif;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 24px;
+      letter-spacing: 0;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .ds-drawer-title-stack {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .ds-drawer-title-text,
+    .ds-drawer-description {
+      overflow-wrap: anywhere;
+    }
+
+    .ds-drawer-description {
+      color: ${t.text.description};
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .ds-drawer-root .ant-drawer-close {
+      width: ${t.closeButton.size};
+      height: ${t.closeButton.size};
+      padding: 0;
+      margin-inline-end: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 ${t.closeButton.size};
+      color: ${t.closeButton.color};
+      border-radius: ${t.closeButton.radius};
+      background: transparent !important;
+      border: 0 !important;
+      box-shadow: none !important;
+    }
+
+    .ds-drawer-root .ant-drawer-close svg {
+      width: ${t.closeButton.iconSize};
+      height: ${t.closeButton.iconSize};
+    }
+
+    .ds-drawer-root .ant-drawer-body {
+      padding: ${t.spacing.body};
+      background: ${t.surface.background};
+      color: ${t.text.body};
+      font-family: 'Nunito', sans-serif;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .ds-drawer-root .ant-drawer-footer {
+      min-height: 64px;
+      margin: 0;
+      padding: ${t.spacing.footer};
+      background: ${t.surface.footer};
+      border-top: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-drawer-actions {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .ds-drawer-actions-main {
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-inline-start: auto;
+    }
+
+    .ds-drawer-root.ds-drawer-variant-details .ant-drawer-body {
+      background: ${t.surface.details};
+    }
+
+    .ds-drawer-root.ds-drawer-variant-edit .ant-drawer-body,
+    .ds-drawer-root.ds-drawer-variant-workflowPanel .ant-drawer-body {
+      padding: ${t.spacing.body};
+    }
+
+    .ds-drawer-root.ds-drawer-variant-filter .ant-drawer-body {
+      padding: ${t.spacing.bodyCompact};
+    }
+
+    .ds-drawer-root.ds-drawer-footer-none .ant-drawer-footer {
+      display: none;
+    }
+
+    @media (max-width: 640px) {
+      .ds-drawer-root .ant-drawer-content-wrapper {
+        max-width: 100vw !important;
+      }
+
+      .ds-drawer-root .ant-drawer-header,
+      .ds-drawer-root .ant-drawer-body,
+      .ds-drawer-root .ant-drawer-footer {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+      .ds-drawer-actions,
+      .ds-drawer-actions-main {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+
+      .ds-drawer-actions-main {
+        width: 100%;
+        margin-inline-start: 0;
+      }
+
+      .ds-drawer-actions .ant-btn {
+        width: 100%;
+      }
+    }
+  `}function f(e,t){return t?(0,i.jsxs)(`span`,{className:`ds-drawer-title-stack`,children:[(0,i.jsx)(`span`,{className:`ds-drawer-title-text`,children:e}),(0,i.jsx)(`span`,{className:`ds-drawer-description`,children:t})]}):e}function p(e,n,r){return(0,i.jsx)(t.Button,{dsVariant:n,disabled:e.disabled,loading:e.loading,onClick:e.onClick??r,children:e.label})}var m=({dsVariant:t=`details`,dsSize:a,dsFooter:m=`auto`,dsDescription:h,dsPrimaryAction:g,dsSecondaryAction:_,dsTertiaryAction:v,rootClassName:y,className:b,title:x,footer:S,onClose:C,placement:w=`right`,children:T,...E})=>{(0,r.useEffect)(()=>{d()},[]);let D=a??o[t],O=m===`auto`?s[t]:m,k=e=>C?.(e),A=g??{label:c[t]},j=_??{label:l[t]},M=S===void 0?O===`none`?null:(0,i.jsxs)(`div`,{className:`ds-drawer-actions`,children:[(0,i.jsx)(`div`,{children:v?p(v,`tertiary`,k):null}),(0,i.jsxs)(`div`,{className:`ds-drawer-actions-main`,children:[p(j,`secondary`,k),p(A,`primary`)]})]}):S;return(0,i.jsx)(n.Drawer,{...E,placement:w,size:e.dsSemanticTokens.drawer.width[D],title:f(x,h),footer:M,onClose:C,rootClassName:u(`ds-drawer-root`,`ds-drawer-variant-${t}`,`ds-drawer-size-${D}`,`ds-drawer-footer-${O}`,y),className:u(`ds-drawer`,b),"data-ds-drawer-variant":t,"data-ds-drawer-size":D,"data-ds-drawer-footer":O,children:T})};m.displayName=`Drawer`,exports.Drawer=m;
+//# sourceMappingURL=Drawer.cjs.map

package/dist-lib/feedback/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../src/ds/feedback/Drawer.tsx"],"sourcesContent":["import { Drawer as AntDrawer } from 'antd';\nimport type { DrawerProps as AntDrawerProps } from 'antd';\nimport type { MouseEventHandler, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { Button } from '../forms';\nimport type { ButtonProps } from '../forms';\n\nexport type DSDrawerVariant = 'details' | 'edit' | 'filter' | 'confirmation' | 'workflowPanel';\nexport type DSDrawerSize = 'narrow' | 'standard' | 'wide' | 'full';\nexport type DSDrawerFooter = 'auto' | 'actions' | 'none';\n\nexport type DSDrawerAction = {\n  label: ReactNode;\n  onClick?: ButtonProps['onClick'];\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type DrawerProps = Omit<AntDrawerProps, 'size'> & {\n  /** DS workflow variant controlling width, density, surface, and default footer behavior. */\n  dsVariant?: DSDrawerVariant;\n  /** DS width preset. Defaults from the selected workflow variant. */\n  dsSize?: DSDrawerSize;\n  /** DS footer mode. `auto` follows the selected workflow variant. */\n  dsFooter?: DSDrawerFooter;\n  /** Optional supporting text rendered below the drawer title. */\n  dsDescription?: ReactNode;\n  /** Primary footer action rendered last in the action group. */\n  dsPrimaryAction?: DSDrawerAction;\n  /** Secondary footer action rendered before the primary action. */\n  dsSecondaryAction?: DSDrawerAction;\n  /** Tertiary footer action rendered at the start edge of the footer. */\n  dsTertiaryAction?: DSDrawerAction;\n};\n\nconst STYLE_ID = 'ds-drawer-styles';\n\nconst SIZE_BY_VARIANT: Record<DSDrawerVariant, DSDrawerSize> = {\n  details: 'standard',\n  edit: 'wide',\n  filter: 'narrow',\n  confirmation: 'narrow',\n  workflowPanel: 'full',\n};\n\nconst DEFAULT_FOOTER_BY_VARIANT: Record<DSDrawerVariant, DSDrawerFooter> = {\n  details: 'none',\n  edit: 'actions',\n  filter: 'actions',\n  confirmation: 'actions',\n  workflowPanel: 'actions',\n};\n\nconst DEFAULT_PRIMARY_LABEL: Record<DSDrawerVariant, ReactNode> = {\n  details: 'Done',\n  edit: 'Save',\n  filter: 'Apply filters',\n  confirmation: 'Confirm',\n  workflowPanel: 'Continue',\n};\n\nconst DEFAULT_SECONDARY_LABEL: Record<DSDrawerVariant, ReactNode> = {\n  details: 'Close',\n  edit: 'Cancel',\n  filter: 'Reset',\n  confirmation: 'Cancel',\n  workflowPanel: 'Back',\n};\n\nconst mergeClassNames = (...classNames: Array<string | undefined>): string =>\n  classNames.filter(Boolean).join(' ').trim();\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { drawer } = 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-drawer-root .ant-drawer-mask {\n      background: ${drawer.backdrop} !important;\n    }\n\n    .ds-drawer-root .ant-drawer-content-wrapper {\n      box-shadow: ${drawer.shadow} !important;\n    }\n\n    .ds-drawer-root .ant-drawer-content,\n    .ds-drawer.ant-drawer-content {\n      background: ${drawer.surface.background};\n      border-radius: ${drawer.border.radius};\n      overflow: hidden;\n    }\n\n    .ds-drawer-root .ant-drawer-header {\n      flex: 0 0 auto !important;\n      min-height: 64px;\n      height: auto !important;\n      padding: ${drawer.spacing.header};\n      background: ${drawer.surface.header};\n      border-bottom: ${drawer.border.width} solid ${drawer.border.color};\n      align-items: flex-start;\n      box-sizing: border-box;\n    }\n\n    .ds-drawer-root .ant-drawer-header-title {\n      width: 100%;\n      min-width: 0;\n      min-height: 0;\n      height: auto !important;\n      gap: 12px;\n      align-items: flex-start;\n    }\n\n    .ds-drawer-root .ant-drawer-title {\n      flex: 1 1 auto;\n      min-width: 0;\n      color: ${drawer.text.title};\n      font-family: 'Nunito', sans-serif;\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 24px;\n      letter-spacing: 0;\n      white-space: normal;\n      overflow-wrap: anywhere;\n    }\n\n    .ds-drawer-title-stack {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      width: 100%;\n      min-width: 0;\n    }\n\n    .ds-drawer-title-text,\n    .ds-drawer-description {\n      overflow-wrap: anywhere;\n    }\n\n    .ds-drawer-description {\n      color: ${drawer.text.description};\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n\n    .ds-drawer-root .ant-drawer-close {\n      width: ${drawer.closeButton.size};\n      height: ${drawer.closeButton.size};\n      padding: 0;\n      margin-inline-end: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex: 0 0 ${drawer.closeButton.size};\n      color: ${drawer.closeButton.color};\n      border-radius: ${drawer.closeButton.radius};\n      background: transparent !important;\n      border: 0 !important;\n      box-shadow: none !important;\n    }\n\n    .ds-drawer-root .ant-drawer-close svg {\n      width: ${drawer.closeButton.iconSize};\n      height: ${drawer.closeButton.iconSize};\n    }\n\n    .ds-drawer-root .ant-drawer-body {\n      padding: ${drawer.spacing.body};\n      background: ${drawer.surface.background};\n      color: ${drawer.text.body};\n      font-family: 'Nunito', sans-serif;\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .ds-drawer-root .ant-drawer-footer {\n      min-height: 64px;\n      margin: 0;\n      padding: ${drawer.spacing.footer};\n      background: ${drawer.surface.footer};\n      border-top: ${drawer.border.width} solid ${drawer.border.color};\n    }\n\n    .ds-drawer-actions {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .ds-drawer-actions-main {\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 12px;\n      margin-inline-start: auto;\n    }\n\n    .ds-drawer-root.ds-drawer-variant-details .ant-drawer-body {\n      background: ${drawer.surface.details};\n    }\n\n    .ds-drawer-root.ds-drawer-variant-edit .ant-drawer-body,\n    .ds-drawer-root.ds-drawer-variant-workflowPanel .ant-drawer-body {\n      padding: ${drawer.spacing.body};\n    }\n\n    .ds-drawer-root.ds-drawer-variant-filter .ant-drawer-body {\n      padding: ${drawer.spacing.bodyCompact};\n    }\n\n    .ds-drawer-root.ds-drawer-footer-none .ant-drawer-footer {\n      display: none;\n    }\n\n    @media (max-width: 640px) {\n      .ds-drawer-root .ant-drawer-content-wrapper {\n        max-width: 100vw !important;\n      }\n\n      .ds-drawer-root .ant-drawer-header,\n      .ds-drawer-root .ant-drawer-body,\n      .ds-drawer-root .ant-drawer-footer {\n        padding-left: 16px;\n        padding-right: 16px;\n      }\n\n      .ds-drawer-actions,\n      .ds-drawer-actions-main {\n        flex-direction: column-reverse;\n        align-items: stretch;\n      }\n\n      .ds-drawer-actions-main {\n        width: 100%;\n        margin-inline-start: 0;\n      }\n\n      .ds-drawer-actions .ant-btn {\n        width: 100%;\n      }\n    }\n  `;\n}\n\nfunction renderTitle(title: ReactNode, description?: ReactNode) {\n  if (!description) return title;\n\n  return (\n    <span className=\"ds-drawer-title-stack\">\n      <span className=\"ds-drawer-title-text\">{title}</span>\n      <span className=\"ds-drawer-description\">{description}</span>\n    </span>\n  );\n}\n\nfunction actionButton(action: DSDrawerAction, dsVariant: ButtonProps['dsVariant'], fallbackOnClick?: ButtonProps['onClick']) {\n  return (\n    <Button dsVariant={dsVariant} disabled={action.disabled} loading={action.loading} onClick={action.onClick ?? fallbackOnClick}>\n      {action.label}\n    </Button>\n  );\n}\n\nexport const Drawer = ({\n  dsVariant = 'details',\n  dsSize,\n  dsFooter = 'auto',\n  dsDescription,\n  dsPrimaryAction,\n  dsSecondaryAction,\n  dsTertiaryAction,\n  rootClassName,\n  className,\n  title,\n  footer,\n  onClose,\n  placement = 'right',\n  children,\n  ...props\n}: DrawerProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const resolvedSize = dsSize ?? SIZE_BY_VARIANT[dsVariant];\n  const resolvedFooterMode = dsFooter === 'auto' ? DEFAULT_FOOTER_BY_VARIANT[dsVariant] : dsFooter;\n  const fallbackOnClose: MouseEventHandler<HTMLElement> = (event) => onClose?.(event);\n  const primaryAction = dsPrimaryAction ?? { label: DEFAULT_PRIMARY_LABEL[dsVariant] };\n  const secondaryAction = dsSecondaryAction ?? { label: DEFAULT_SECONDARY_LABEL[dsVariant] };\n\n  const resolvedFooter = footer !== undefined\n    ? footer\n    : resolvedFooterMode === 'none'\n      ? null\n      : (\n        <div className=\"ds-drawer-actions\">\n          <div>{dsTertiaryAction ? actionButton(dsTertiaryAction, 'tertiary', fallbackOnClose) : null}</div>\n          <div className=\"ds-drawer-actions-main\">\n            {actionButton(secondaryAction, 'secondary', fallbackOnClose)}\n            {actionButton(primaryAction, 'primary')}\n          </div>\n        </div>\n        );\n\n  return (\n    <AntDrawer\n      {...props}\n      placement={placement}\n      size={dsSemanticTokens.drawer.width[resolvedSize]}\n      title={renderTitle(title, dsDescription)}\n      footer={resolvedFooter}\n      onClose={onClose}\n      rootClassName={mergeClassNames('ds-drawer-root', `ds-drawer-variant-${dsVariant}`, `ds-drawer-size-${resolvedSize}`, `ds-drawer-footer-${resolvedFooterMode}`, rootClassName)}\n      className={mergeClassNames('ds-drawer', className)}\n      data-ds-drawer-variant={dsVariant}\n      data-ds-drawer-size={resolvedSize}\n      data-ds-drawer-footer={resolvedFooterMode}\n    >\n      {children}\n    </AntDrawer>\n  );\n};\n\nDrawer.displayName = 'Drawer';"],"mappings":"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"}