ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Popover.js

@@ -0,0 +1,130 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Popover as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ds/display/Popover.tsx
+var i = "ds-popover-styles";
+function a() {
+	if (typeof document > "u") return;
+	let { tooltip: t } = e, n = document.getElementById(i);
+	n || (n = document.createElement("style"), n.id = i, document.head.appendChild(n)), n.textContent = `
+    .ds-popover-overlay .ant-popover-inner {
+      background: ${t.surface.background};
+      border-radius: ${t.radius};
+      box-shadow: none;
+      filter: ${t.elevation};
+      color: ${t.surface.body};
+      letter-spacing: 0;
+      max-width: ${t.width.normal.max};
+      min-width: ${t.width.normal.min};
+      padding: ${t.padding.normal};
+    }
+
+    .ds-popover-overlay .ant-popover-arrow {
+      width: ${t.arrow.width};
+      height: ${t.arrow.height};
+    }
+
+    .ds-popover-overlay .ant-popover-arrow::before,
+    .ds-popover-overlay .ant-popover-arrow::after {
+      background: ${t.surface.background};
+    }
+
+    .ds-popover-overlay.ds-popover-size-mini .ant-popover-inner {
+      min-width: ${t.width.mini.min};
+      max-width: ${t.width.mini.max};
+      padding: ${t.padding.mini};
+      text-align: center;
+    }
+
+    .ds-popover-overlay .ant-popover-title,
+    .ds-popover-title {
+      margin: 0 0 4px;
+      color: ${t.surface.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      border: 0;
+      padding: 0;
+      min-height: 0;
+    }
+
+    .ds-popover-overlay .ant-popover-inner-content,
+    .ds-popover-body {
+      margin: 0;
+      color: ${t.surface.body};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .ds-popover-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .ds-popover-content-mini {
+      align-items: center;
+    }
+  `;
+}
+function o(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function s(e, t) {
+	return e === "mini" ? /* @__PURE__ */ r("div", {
+		className: "ds-popover-content ds-popover-content-mini",
+		children: /* @__PURE__ */ r("p", {
+			className: "ds-popover-body",
+			children: t
+		})
+	}) : /* @__PURE__ */ r("p", {
+		className: "ds-popover-body",
+		children: t
+	});
+}
+var c = ({ dsSize: i = "normal", dsTitle: c, dsBody: l, title: u, content: d, color: f, arrow: p, styles: m, classNames: h, overlayClassName: g, ..._ }) => {
+	let { tooltip: v } = e;
+	n(() => {
+		a();
+	}, []);
+	let y = d === void 0 ? s(i, l ?? (i === "mini" ? "Mini Popover" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.")) : d, b = u === void 0 ? i === "normal" && c ? /* @__PURE__ */ r("p", {
+		className: "ds-popover-title",
+		children: c
+	}) : void 0 : u, x = i === "mini" ? {
+		minWidth: v.width.mini.min,
+		maxWidth: v.width.mini.max,
+		padding: v.padding.mini,
+		textAlign: "center"
+	} : {
+		minWidth: v.width.normal.min,
+		maxWidth: v.width.normal.max,
+		padding: v.padding.normal
+	};
+	return /* @__PURE__ */ r(t, {
+		..._,
+		title: b,
+		content: y,
+		color: f ?? v.surface.background,
+		arrow: p ?? !0,
+		styles: {
+			...m,
+			body: {
+				borderRadius: v.radius,
+				color: v.surface.body,
+				letterSpacing: 0,
+				...x,
+				...m?.body
+			}
+		},
+		classNames: {
+			...h,
+			root: o("ds-popover-overlay", `ds-popover-size-${i}`, h?.root, g)
+		}
+	});
+};
+//#endregion
+export { c as Popover };
+
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../src/ds/display/Popover.tsx"],"sourcesContent":["import { Popover as AntPopover } from 'antd';\nimport type { PopoverProps as AntPopoverProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSPopoverSize = 'mini' | 'normal';\n\nexport type PopoverProps = AntPopoverProps & {\n  /** DS size variant from Figma. */\n  dsSize?: DSPopoverSize;\n  /** Optional DS title text for normal popover variant. */\n  dsTitle?: string;\n  /** DS body text used when Ant `content` prop is not provided. */\n  dsBody?: string;\n};\n\nconst STYLE_ID = 'ds-popover-styles';\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { tooltip } = 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-popover-overlay .ant-popover-inner {\n      background: ${tooltip.surface.background};\n      border-radius: ${tooltip.radius};\n      box-shadow: none;\n      filter: ${tooltip.elevation};\n      color: ${tooltip.surface.body};\n      letter-spacing: 0;\n      max-width: ${tooltip.width.normal.max};\n      min-width: ${tooltip.width.normal.min};\n      padding: ${tooltip.padding.normal};\n    }\n\n    .ds-popover-overlay .ant-popover-arrow {\n      width: ${tooltip.arrow.width};\n      height: ${tooltip.arrow.height};\n    }\n\n    .ds-popover-overlay .ant-popover-arrow::before,\n    .ds-popover-overlay .ant-popover-arrow::after {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-popover-overlay.ds-popover-size-mini .ant-popover-inner {\n      min-width: ${tooltip.width.mini.min};\n      max-width: ${tooltip.width.mini.max};\n      padding: ${tooltip.padding.mini};\n      text-align: center;\n    }\n\n    .ds-popover-overlay .ant-popover-title,\n    .ds-popover-title {\n      margin: 0 0 4px;\n      color: ${tooltip.surface.title};\n      font-size: ${tooltip.typography.title.fontSize};\n      font-weight: ${tooltip.typography.title.fontWeight};\n      line-height: ${tooltip.typography.title.lineHeight};\n      border: 0;\n      padding: 0;\n      min-height: 0;\n    }\n\n    .ds-popover-overlay .ant-popover-inner-content,\n    .ds-popover-body {\n      margin: 0;\n      color: ${tooltip.surface.body};\n      font-size: ${tooltip.typography.body.fontSize};\n      font-weight: ${tooltip.typography.body.fontWeight};\n      line-height: ${tooltip.typography.body.lineHeight};\n    }\n\n    .ds-popover-content {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .ds-popover-content-mini {\n      align-items: center;\n    }\n  `;\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nfunction getDefaultContent(dsSize: DSPopoverSize, dsBody: string) {\n  if (dsSize === 'mini') {\n    return (\n      <div className=\"ds-popover-content ds-popover-content-mini\">\n        <p className=\"ds-popover-body\">{dsBody}</p>\n      </div>\n    );\n  }\n\n  return <p className=\"ds-popover-body\">{dsBody}</p>;\n}\n\nexport const Popover = ({\n  dsSize = 'normal',\n  dsTitle,\n  dsBody,\n  title,\n  content,\n  color,\n  arrow,\n  styles,\n  classNames,\n  overlayClassName,\n  ...props\n}: PopoverProps) => {\n  const { tooltip } = dsSemanticTokens;\n\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaultBody = dsSize === 'mini'\n    ? 'Mini Popover'\n    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.';\n\n  const resolvedBody = dsBody ?? defaultBody;\n  const resolvedContent: ReactNode =\n    content !== undefined ? content : getDefaultContent(dsSize, resolvedBody);\n\n  const resolvedTitle: ReactNode =\n    title !== undefined\n      ? title\n      : dsSize === 'normal' && dsTitle\n        ? <p className=\"ds-popover-title\">{dsTitle}</p>\n        : undefined;\n\n  const sizeBodyStyles = dsSize === 'mini'\n    ? {\n      minWidth: tooltip.width.mini.min,\n      maxWidth: tooltip.width.mini.max,\n      padding: tooltip.padding.mini,\n      textAlign: 'center' as const,\n    }\n    : {\n      minWidth: tooltip.width.normal.min,\n      maxWidth: tooltip.width.normal.max,\n      padding: tooltip.padding.normal,\n    };\n\n  return (\n    <AntPopover\n      {...props}\n      title={resolvedTitle}\n      content={resolvedContent}\n      color={color ?? tooltip.surface.background}\n      arrow={arrow ?? true}\n      styles={{\n        ...styles,\n        body: {\n          borderRadius: tooltip.radius,\n          color: tooltip.surface.body,\n          letterSpacing: 0,\n          ...sizeBodyStyles,\n          ...styles?.body,\n        },\n      }}\n      classNames={{\n        ...classNames,\n        root: mergeClassNames('ds-popover-overlay', `ds-popover-size-${dsSize}`, classNames?.root, overlayClassName),\n      }}\n    />\n  );\n};"],"mappings":";;;;;AAiBA,IAAM,IAAW;AAEjB,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAM,EAAE,eAAY,GAChB,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;;oBAEF,EAAQ,QAAQ,WAAW;uBACxB,EAAQ,OAAO;;gBAEtB,EAAQ,UAAU;eACnB,EAAQ,QAAQ,KAAK;;mBAEjB,EAAQ,MAAM,OAAO,IAAI;mBACzB,EAAQ,MAAM,OAAO,IAAI;iBAC3B,EAAQ,QAAQ,OAAO;;;;eAIzB,EAAQ,MAAM,MAAM;gBACnB,EAAQ,MAAM,OAAO;;;;;oBAKjB,EAAQ,QAAQ,WAAW;;;;mBAI5B,EAAQ,MAAM,KAAK,IAAI;mBACvB,EAAQ,MAAM,KAAK,IAAI;iBACzB,EAAQ,QAAQ,KAAK;;;;;;;eAOvB,EAAQ,QAAQ,MAAM;mBAClB,EAAQ,WAAW,MAAM,SAAS;qBAChC,EAAQ,WAAW,MAAM,WAAW;qBACpC,EAAQ,WAAW,MAAM,WAAW;;;;;;;;;eAS1C,EAAQ,QAAQ,KAAK;mBACjB,EAAQ,WAAW,KAAK,SAAS;qBAC/B,EAAQ,WAAW,KAAK,WAAW;qBACnC,EAAQ,WAAW,KAAK,WAAW;;;;;;;;;;;;;;AAexD,SAAS,EAAgB,GAAG,GAAkC;AAC5D,QAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI;;AAGxC,SAAS,EAAkB,GAAuB,GAAgB;AAShE,QARI,MAAW,SAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAAmB;GAAW,CAAA;EACvC,CAAA,GAIH,kBAAC,KAAD;EAAG,WAAU;YAAmB;EAAW,CAAA;;AAGpD,IAAa,KAAW,EACtB,YAAS,UACT,YACA,WACA,UACA,YACA,UACA,UACA,WACA,eACA,qBACA,GAAG,QACe;CAClB,IAAM,EAAE,eAAY;AAEpB,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAON,IAAM,IACJ,MAAY,KAAA,IAAsB,EAAkB,GAFjC,MAJD,MAAW,SAC3B,iBACA,qGAIuE,GAAjD,GAEpB,IACJ,MAAU,KAAA,IAEN,MAAW,YAAY,IACrB,kBAAC,KAAD;EAAG,WAAU;YAAoB;EAAY,CAAA,GAC7C,KAAA,IAHF,GAKA,IAAiB,MAAW,SAC9B;EACA,UAAU,EAAQ,MAAM,KAAK;EAC7B,UAAU,EAAQ,MAAM,KAAK;EAC7B,SAAS,EAAQ,QAAQ;EACzB,WAAW;EACZ,GACC;EACA,UAAU,EAAQ,MAAM,OAAO;EAC/B,UAAU,EAAQ,MAAM,OAAO;EAC/B,SAAS,EAAQ,QAAQ;EAC1B;AAEH,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,OAAO;EACP,SAAS;EACT,OAAO,KAAS,EAAQ,QAAQ;EAChC,OAAO,KAAS;EAChB,QAAQ;GACN,GAAG;GACH,MAAM;IACJ,cAAc,EAAQ;IACtB,OAAO,EAAQ,QAAQ;IACvB,eAAe;IACf,GAAG;IACH,GAAG,GAAQ;IACZ;GACF;EACD,YAAY;GACV,GAAG;GACH,MAAM,EAAgB,sBAAsB,mBAAmB,KAAU,GAAY,MAAM,EAAiB;GAC7G;EACD,CAAA"}

package/dist-lib/display/Segmented.cjs

@@ -0,0 +1,115 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=`ds-segmented-styles`,i={sm:`small`,md:`middle`,lg:`large`};function a(e){return e===`small`?`sm`:e===`large`?`lg`:`md`}function o(e){return!e||e.length===0?[]:e.map(e=>typeof e==`string`||typeof e==`number`?{value:e,label:e}:{value:e.value,label:e.label??e.value,icon:e.icon,disabled:e.disabled,title:e.title})}function s(){if(typeof document>`u`||document.getElementById(r))return;let{segmented:t}=e.dsSemanticTokens,n=document.createElement(`style`);n.id=r,n.textContent=`
+    [data-ds-segmented] {
+      box-sizing: border-box;
+      height: var(--ds-segmented-control-height);
+      width: var(--ds-segmented-width, auto);
+      font-family: var(--ant-font-family, 'Nunito', sans-serif);
+      background: ${t.container.background};
+      border: ${t.container.borderWidth} solid ${t.container.border};
+      border-radius: ${t.container.radius};
+      padding: ${t.container.padding};
+      box-shadow: none;
+      display: inline-flex;
+    }
+
+    [data-ds-segmented][data-ds-block='true'] {
+      width: 100%;
+      display: flex;
+    }
+
+    [data-ds-segmented][data-ds-bordered='false'] {
+      border: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-group {
+      gap: 0;
+      height: var(--ds-segmented-item-height);
+      display: flex;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    [data-ds-segmented] .ds-segmented-item {
+      box-sizing: border-box;
+      display: flex;
+      align-items: stretch;
+      flex: 1 1 0;
+      height: var(--ds-segmented-item-height);
+      min-height: 0;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: ${t.item.unselectedRadius};
+      line-height: normal;
+      transition: none;
+      background: transparent;
+      color: ${t.text.inactive};
+      font-family: inherit;
+      font-size: inherit;
+      cursor: pointer;
+      padding: 0;
+      outline: none;
+      appearance: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-item[aria-checked='true'] {
+      background: ${t.item.selectedBackground};
+      border-color: ${t.item.selectedBorder};
+      border-radius: ${t.item.selectedRadius};
+      color: ${t.text.active};
+    }
+
+    [data-ds-segmented][data-ds-bordered='false'] .ds-segmented-item[aria-checked='true'] {
+      border: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-item[aria-disabled='true'] {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ds-segmented-item-gap);
+      min-height: 0 !important;
+      height: 100% !important;
+      width: 100%;
+      padding: 0 var(--ds-segmented-item-padding-x);
+      color: inherit;
+      font-size: var(--ds-segmented-font-size);
+      line-height: var(--ds-segmented-line-height) !important;
+      font-weight: ${t.typography.fontWeight};
+      letter-spacing: var(--ds-segmented-letter-spacing);
+      text-align: center;
+      box-sizing: border-box;
+      white-space: nowrap;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-icon {
+      width: var(--ds-segmented-icon-size);
+      height: var(--ds-segmented-icon-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+      font-size: var(--ds-segmented-icon-size);
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-icon svg {
+      width: var(--ds-segmented-icon-size);
+      height: var(--ds-segmented-icon-size);
+      display: block;
+    }
+
+    [data-ds-segmented] .ds-segmented-item,
+    [data-ds-segmented] .ds-segmented-item-label,
+    [data-ds-segmented] .ds-segmented-item-icon {
+      transition: none !important;
+      animation: none !important;
+    }
+
+  `,document.head.appendChild(n)}var c=({dsSize:r=`md`,dsBordered:c=!0,size:l,style:u,...d})=>{(0,t.useEffect)(()=>{s()},[]);let{options:f,value:p,defaultValue:m,onChange:h,disabled:g,block:_,className:v,name:y,id:b,...x}=d,S=r??a(l),C=(0,t.useMemo)(()=>o(f),[f]),w=C[0],[T,E]=(0,t.useState)(m??w?.value),D=p??T,O=e.dsSemanticTokens.segmented.size[S],k=e=>{g||e.disabled||(p===void 0&&E(e.value),h?.(e.value))},A={...u,"--ds-segmented-item-height":O.itemHeight,"--ds-segmented-control-height":O.controlHeight,"--ds-segmented-item-gap":O.gap,"--ds-segmented-item-padding-x":O.paddingX,"--ds-segmented-font-size":O.fontSize,"--ds-segmented-line-height":O.lineHeight,"--ds-segmented-letter-spacing":O.letterSpacing,"--ds-segmented-icon-size":O.iconSize};return _&&(A[`--ds-segmented-width`]=`100%`),(0,n.jsx)(`div`,{...x,id:b,className:v,role:`radiogroup`,"aria-disabled":g?`true`:`false`,"data-ds-block":_?`true`:`false`,style:A,"data-ds-segmented":!0,"data-ds-bordered":c?`true`:`false`,"data-ds-size":S,"data-ds-ant-size":l??i[S],children:(0,n.jsx)(`div`,{className:`ds-segmented-group`,children:C.map((e,t)=>{let r=e.value===D,i=g||e.disabled;return(0,n.jsx)(`button`,{type:`button`,className:`ds-segmented-item`,role:`radio`,"aria-checked":r?`true`:`false`,"aria-disabled":i?`true`:`false`,tabIndex:r?0:-1,onClick:()=>k(e),title:e.title,name:y,disabled:!!i,children:(0,n.jsxs)(`span`,{className:`ds-segmented-item-label`,children:[e.icon?(0,n.jsx)(`span`,{className:`ds-segmented-item-icon`,children:e.icon}):null,(0,n.jsx)(`span`,{children:e.label??e.value})]})},`${String(e.value)}-${t}`)})})})};exports.Segmented=c;
+//# sourceMappingURL=Segmented.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.cjs","names":[],"sources":["../../src/ds/display/Segmented.tsx"],"sourcesContent":["import type { SegmentedProps as AntSegmentedProps } from 'antd';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSSegmentedSize = 'sm' | 'md' | 'lg';\n\nexport type SegmentedProps = AntSegmentedProps & {\n  /** DS size mapped from Figma segmented variants. */\n  dsSize?: DSSegmentedSize;\n  /** Show or remove borders around the control and selected state. */\n  dsBordered?: boolean;\n};\n\nconst STYLE_ID = 'ds-segmented-styles';\n\nconst DS_TO_ANT_SIZE: Record<DSSegmentedSize, 'small' | 'middle' | 'large'> = {\n  sm: 'small',\n  md: 'middle',\n  lg: 'large',\n};\n\ntype SegmentValue = string | number;\n\ntype DSOption = {\n  label?: ReactNode;\n  value: SegmentValue;\n  icon?: ReactNode;\n  disabled?: boolean;\n  title?: string;\n};\n\nfunction mapAntSizeToDS(size: AntSegmentedProps['size']): DSSegmentedSize {\n  if (size === 'small') return 'sm';\n  if (size === 'large') return 'lg';\n  return 'md';\n}\n\nfunction normalizeOptions(options: AntSegmentedProps['options']): DSOption[] {\n  if (!options || options.length === 0) return [];\n\n  return options.map((option) => {\n    if (typeof option === 'string' || typeof option === 'number') {\n      return {\n        value: option,\n        label: option,\n      };\n    }\n\n    return {\n      value: option.value as SegmentValue,\n      label: option.label ?? option.value,\n      icon: (option as { icon?: ReactNode }).icon,\n      disabled: option.disabled,\n      title: option.title,\n    };\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { segmented } = dsSemanticTokens;\n\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    [data-ds-segmented] {\n      box-sizing: border-box;\n      height: var(--ds-segmented-control-height);\n      width: var(--ds-segmented-width, auto);\n      font-family: var(--ant-font-family, 'Nunito', sans-serif);\n      background: ${segmented.container.background};\n      border: ${segmented.container.borderWidth} solid ${segmented.container.border};\n      border-radius: ${segmented.container.radius};\n      padding: ${segmented.container.padding};\n      box-shadow: none;\n      display: inline-flex;\n    }\n\n    [data-ds-segmented][data-ds-block='true'] {\n      width: 100%;\n      display: flex;\n    }\n\n    [data-ds-segmented][data-ds-bordered='false'] {\n      border: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-group {\n      gap: 0;\n      height: var(--ds-segmented-item-height);\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    [data-ds-segmented] .ds-segmented-item {\n      box-sizing: border-box;\n      display: flex;\n      align-items: stretch;\n      flex: 1 1 0;\n      height: var(--ds-segmented-item-height);\n      min-height: 0;\n      margin: 0;\n      border: 1px solid transparent;\n      border-radius: ${segmented.item.unselectedRadius};\n      line-height: normal;\n      transition: none;\n      background: transparent;\n      color: ${segmented.text.inactive};\n      font-family: inherit;\n      font-size: inherit;\n      cursor: pointer;\n      padding: 0;\n      outline: none;\n      appearance: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-item[aria-checked='true'] {\n      background: ${segmented.item.selectedBackground};\n      border-color: ${segmented.item.selectedBorder};\n      border-radius: ${segmented.item.selectedRadius};\n      color: ${segmented.text.active};\n    }\n\n    [data-ds-segmented][data-ds-bordered='false'] .ds-segmented-item[aria-checked='true'] {\n      border: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-item[aria-disabled='true'] {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-label {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--ds-segmented-item-gap);\n      min-height: 0 !important;\n      height: 100% !important;\n      width: 100%;\n      padding: 0 var(--ds-segmented-item-padding-x);\n      color: inherit;\n      font-size: var(--ds-segmented-font-size);\n      line-height: var(--ds-segmented-line-height) !important;\n      font-weight: ${segmented.typography.fontWeight};\n      letter-spacing: var(--ds-segmented-letter-spacing);\n      text-align: center;\n      box-sizing: border-box;\n      white-space: nowrap;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-icon {\n      width: var(--ds-segmented-icon-size);\n      height: var(--ds-segmented-icon-size);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: inherit;\n      font-size: var(--ds-segmented-icon-size);\n      line-height: 1;\n      flex: 0 0 auto;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-icon svg {\n      width: var(--ds-segmented-icon-size);\n      height: var(--ds-segmented-icon-size);\n      display: block;\n    }\n\n    [data-ds-segmented] .ds-segmented-item,\n    [data-ds-segmented] .ds-segmented-item-label,\n    [data-ds-segmented] .ds-segmented-item-icon {\n      transition: none !important;\n      animation: none !important;\n    }\n\n  `;\n\n  document.head.appendChild(style);\n}\n\nexport const Segmented = ({ dsSize = 'md', dsBordered = true, size, style, ...props }: SegmentedProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const {\n    options,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    block,\n    className,\n    name,\n    id,\n    ...restProps\n  } = props;\n\n  const resolvedSize = dsSize ?? mapAntSizeToDS(size);\n  const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);\n\n  const firstOption = normalizedOptions[0];\n  const [uncontrolledValue, setUncontrolledValue] = useState<SegmentValue | undefined>(\n    (defaultValue as SegmentValue | undefined) ?? firstOption?.value,\n  );\n\n  const selectedValue = (value as SegmentValue | undefined) ?? uncontrolledValue;\n\n  const tokens = dsSemanticTokens.segmented.size[resolvedSize];\n\n  const handleSelect = (option: DSOption) => {\n    if (disabled || option.disabled) return;\n\n    if (value === undefined) {\n      setUncontrolledValue(option.value);\n    }\n\n    onChange?.(option.value);\n  };\n\n  const rootStyle: CSSProperties = {\n    ...style,\n    ['--ds-segmented-item-height' as string]: tokens.itemHeight,\n    ['--ds-segmented-control-height' as string]: tokens.controlHeight,\n    ['--ds-segmented-item-gap' as string]: tokens.gap,\n    ['--ds-segmented-item-padding-x' as string]: tokens.paddingX,\n    ['--ds-segmented-font-size' as string]: tokens.fontSize,\n    ['--ds-segmented-line-height' as string]: tokens.lineHeight,\n    ['--ds-segmented-letter-spacing' as string]: tokens.letterSpacing,\n    ['--ds-segmented-icon-size' as string]: tokens.iconSize,\n  };\n\n  if (block) {\n    rootStyle['--ds-segmented-width' as string] = '100%';\n  }\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={className}\n      role=\"radiogroup\"\n      aria-disabled={disabled ? 'true' : 'false'}\n      data-ds-block={block ? 'true' : 'false'}\n      style={rootStyle}\n      data-ds-segmented\n      data-ds-bordered={dsBordered ? 'true' : 'false'}\n      data-ds-size={resolvedSize}\n      data-ds-ant-size={size ?? DS_TO_ANT_SIZE[resolvedSize]}\n    >\n      <div className=\"ds-segmented-group\">\n        {normalizedOptions.map((option, index) => {\n          const checked = option.value === selectedValue;\n          const optionDisabled = disabled || option.disabled;\n\n          return (\n            <button\n              key={`${String(option.value)}-${index}`}\n              type=\"button\"\n              className=\"ds-segmented-item\"\n              role=\"radio\"\n              aria-checked={checked ? 'true' : 'false'}\n              aria-disabled={optionDisabled ? 'true' : 'false'}\n              tabIndex={checked ? 0 : -1}\n              onClick={() => handleSelect(option)}\n              title={option.title}\n              name={name}\n              disabled={!!optionDisabled}\n            >\n              <span className=\"ds-segmented-item-label\">\n                {option.icon ? <span className=\"ds-segmented-item-icon\">{option.icon}</span> : null}\n                <span>{option.label ?? option.value}</span>\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist-lib/display/Segmented.js

@@ -0,0 +1,202 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { useEffect as t, useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/ds/display/Segmented.tsx
+var o = "ds-segmented-styles", s = {
+	sm: "small",
+	md: "middle",
+	lg: "large"
+};
+function c(e) {
+	return e === "small" ? "sm" : e === "large" ? "lg" : "md";
+}
+function l(e) {
+	return !e || e.length === 0 ? [] : e.map((e) => typeof e == "string" || typeof e == "number" ? {
+		value: e,
+		label: e
+	} : {
+		value: e.value,
+		label: e.label ?? e.value,
+		icon: e.icon,
+		disabled: e.disabled,
+		title: e.title
+	});
+}
+function u() {
+	if (typeof document > "u" || document.getElementById(o)) return;
+	let { segmented: t } = e, n = document.createElement("style");
+	n.id = o, n.textContent = `
+    [data-ds-segmented] {
+      box-sizing: border-box;
+      height: var(--ds-segmented-control-height);
+      width: var(--ds-segmented-width, auto);
+      font-family: var(--ant-font-family, 'Nunito', sans-serif);
+      background: ${t.container.background};
+      border: ${t.container.borderWidth} solid ${t.container.border};
+      border-radius: ${t.container.radius};
+      padding: ${t.container.padding};
+      box-shadow: none;
+      display: inline-flex;
+    }
+
+    [data-ds-segmented][data-ds-block='true'] {
+      width: 100%;
+      display: flex;
+    }
+
+    [data-ds-segmented][data-ds-bordered='false'] {
+      border: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-group {
+      gap: 0;
+      height: var(--ds-segmented-item-height);
+      display: flex;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    [data-ds-segmented] .ds-segmented-item {
+      box-sizing: border-box;
+      display: flex;
+      align-items: stretch;
+      flex: 1 1 0;
+      height: var(--ds-segmented-item-height);
+      min-height: 0;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: ${t.item.unselectedRadius};
+      line-height: normal;
+      transition: none;
+      background: transparent;
+      color: ${t.text.inactive};
+      font-family: inherit;
+      font-size: inherit;
+      cursor: pointer;
+      padding: 0;
+      outline: none;
+      appearance: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-item[aria-checked='true'] {
+      background: ${t.item.selectedBackground};
+      border-color: ${t.item.selectedBorder};
+      border-radius: ${t.item.selectedRadius};
+      color: ${t.text.active};
+    }
+
+    [data-ds-segmented][data-ds-bordered='false'] .ds-segmented-item[aria-checked='true'] {
+      border: none;
+    }
+
+    [data-ds-segmented] .ds-segmented-item[aria-disabled='true'] {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ds-segmented-item-gap);
+      min-height: 0 !important;
+      height: 100% !important;
+      width: 100%;
+      padding: 0 var(--ds-segmented-item-padding-x);
+      color: inherit;
+      font-size: var(--ds-segmented-font-size);
+      line-height: var(--ds-segmented-line-height) !important;
+      font-weight: ${t.typography.fontWeight};
+      letter-spacing: var(--ds-segmented-letter-spacing);
+      text-align: center;
+      box-sizing: border-box;
+      white-space: nowrap;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-icon {
+      width: var(--ds-segmented-icon-size);
+      height: var(--ds-segmented-icon-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+      font-size: var(--ds-segmented-icon-size);
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+
+    [data-ds-segmented] .ds-segmented-item-icon svg {
+      width: var(--ds-segmented-icon-size);
+      height: var(--ds-segmented-icon-size);
+      display: block;
+    }
+
+    [data-ds-segmented] .ds-segmented-item,
+    [data-ds-segmented] .ds-segmented-item-label,
+    [data-ds-segmented] .ds-segmented-item-icon {
+      transition: none !important;
+      animation: none !important;
+    }
+
+  `, document.head.appendChild(n);
+}
+var d = ({ dsSize: o = "md", dsBordered: d = !0, size: f, style: p, ...m }) => {
+	t(() => {
+		u();
+	}, []);
+	let { options: h, value: g, defaultValue: _, onChange: v, disabled: y, block: b, className: x, name: S, id: C, ...w } = m, T = o ?? c(f), E = n(() => l(h), [h]), D = E[0], [O, k] = r(_ ?? D?.value), A = g ?? O, j = e.segmented.size[T], M = (e) => {
+		y || e.disabled || (g === void 0 && k(e.value), v?.(e.value));
+	}, N = {
+		...p,
+		"--ds-segmented-item-height": j.itemHeight,
+		"--ds-segmented-control-height": j.controlHeight,
+		"--ds-segmented-item-gap": j.gap,
+		"--ds-segmented-item-padding-x": j.paddingX,
+		"--ds-segmented-font-size": j.fontSize,
+		"--ds-segmented-line-height": j.lineHeight,
+		"--ds-segmented-letter-spacing": j.letterSpacing,
+		"--ds-segmented-icon-size": j.iconSize
+	};
+	return b && (N["--ds-segmented-width"] = "100%"), /* @__PURE__ */ i("div", {
+		...w,
+		id: C,
+		className: x,
+		role: "radiogroup",
+		"aria-disabled": y ? "true" : "false",
+		"data-ds-block": b ? "true" : "false",
+		style: N,
+		"data-ds-segmented": !0,
+		"data-ds-bordered": d ? "true" : "false",
+		"data-ds-size": T,
+		"data-ds-ant-size": f ?? s[T],
+		children: /* @__PURE__ */ i("div", {
+			className: "ds-segmented-group",
+			children: E.map((e, t) => {
+				let n = e.value === A, r = y || e.disabled;
+				return /* @__PURE__ */ i("button", {
+					type: "button",
+					className: "ds-segmented-item",
+					role: "radio",
+					"aria-checked": n ? "true" : "false",
+					"aria-disabled": r ? "true" : "false",
+					tabIndex: n ? 0 : -1,
+					onClick: () => M(e),
+					title: e.title,
+					name: S,
+					disabled: !!r,
+					children: /* @__PURE__ */ a("span", {
+						className: "ds-segmented-item-label",
+						children: [e.icon ? /* @__PURE__ */ i("span", {
+							className: "ds-segmented-item-icon",
+							children: e.icon
+						}) : null, /* @__PURE__ */ i("span", { children: e.label ?? e.value })]
+					})
+				}, `${String(e.value)}-${t}`);
+			})
+		})
+	});
+};
+//#endregion
+export { d as Segmented };
+
+//# sourceMappingURL=Segmented.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.js","names":[],"sources":["../../src/ds/display/Segmented.tsx"],"sourcesContent":["import type { SegmentedProps as AntSegmentedProps } from 'antd';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSSegmentedSize = 'sm' | 'md' | 'lg';\n\nexport type SegmentedProps = AntSegmentedProps & {\n  /** DS size mapped from Figma segmented variants. */\n  dsSize?: DSSegmentedSize;\n  /** Show or remove borders around the control and selected state. */\n  dsBordered?: boolean;\n};\n\nconst STYLE_ID = 'ds-segmented-styles';\n\nconst DS_TO_ANT_SIZE: Record<DSSegmentedSize, 'small' | 'middle' | 'large'> = {\n  sm: 'small',\n  md: 'middle',\n  lg: 'large',\n};\n\ntype SegmentValue = string | number;\n\ntype DSOption = {\n  label?: ReactNode;\n  value: SegmentValue;\n  icon?: ReactNode;\n  disabled?: boolean;\n  title?: string;\n};\n\nfunction mapAntSizeToDS(size: AntSegmentedProps['size']): DSSegmentedSize {\n  if (size === 'small') return 'sm';\n  if (size === 'large') return 'lg';\n  return 'md';\n}\n\nfunction normalizeOptions(options: AntSegmentedProps['options']): DSOption[] {\n  if (!options || options.length === 0) return [];\n\n  return options.map((option) => {\n    if (typeof option === 'string' || typeof option === 'number') {\n      return {\n        value: option,\n        label: option,\n      };\n    }\n\n    return {\n      value: option.value as SegmentValue,\n      label: option.label ?? option.value,\n      icon: (option as { icon?: ReactNode }).icon,\n      disabled: option.disabled,\n      title: option.title,\n    };\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { segmented } = dsSemanticTokens;\n\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    [data-ds-segmented] {\n      box-sizing: border-box;\n      height: var(--ds-segmented-control-height);\n      width: var(--ds-segmented-width, auto);\n      font-family: var(--ant-font-family, 'Nunito', sans-serif);\n      background: ${segmented.container.background};\n      border: ${segmented.container.borderWidth} solid ${segmented.container.border};\n      border-radius: ${segmented.container.radius};\n      padding: ${segmented.container.padding};\n      box-shadow: none;\n      display: inline-flex;\n    }\n\n    [data-ds-segmented][data-ds-block='true'] {\n      width: 100%;\n      display: flex;\n    }\n\n    [data-ds-segmented][data-ds-bordered='false'] {\n      border: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-group {\n      gap: 0;\n      height: var(--ds-segmented-item-height);\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    [data-ds-segmented] .ds-segmented-item {\n      box-sizing: border-box;\n      display: flex;\n      align-items: stretch;\n      flex: 1 1 0;\n      height: var(--ds-segmented-item-height);\n      min-height: 0;\n      margin: 0;\n      border: 1px solid transparent;\n      border-radius: ${segmented.item.unselectedRadius};\n      line-height: normal;\n      transition: none;\n      background: transparent;\n      color: ${segmented.text.inactive};\n      font-family: inherit;\n      font-size: inherit;\n      cursor: pointer;\n      padding: 0;\n      outline: none;\n      appearance: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-item[aria-checked='true'] {\n      background: ${segmented.item.selectedBackground};\n      border-color: ${segmented.item.selectedBorder};\n      border-radius: ${segmented.item.selectedRadius};\n      color: ${segmented.text.active};\n    }\n\n    [data-ds-segmented][data-ds-bordered='false'] .ds-segmented-item[aria-checked='true'] {\n      border: none;\n    }\n\n    [data-ds-segmented] .ds-segmented-item[aria-disabled='true'] {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-label {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--ds-segmented-item-gap);\n      min-height: 0 !important;\n      height: 100% !important;\n      width: 100%;\n      padding: 0 var(--ds-segmented-item-padding-x);\n      color: inherit;\n      font-size: var(--ds-segmented-font-size);\n      line-height: var(--ds-segmented-line-height) !important;\n      font-weight: ${segmented.typography.fontWeight};\n      letter-spacing: var(--ds-segmented-letter-spacing);\n      text-align: center;\n      box-sizing: border-box;\n      white-space: nowrap;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-icon {\n      width: var(--ds-segmented-icon-size);\n      height: var(--ds-segmented-icon-size);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: inherit;\n      font-size: var(--ds-segmented-icon-size);\n      line-height: 1;\n      flex: 0 0 auto;\n    }\n\n    [data-ds-segmented] .ds-segmented-item-icon svg {\n      width: var(--ds-segmented-icon-size);\n      height: var(--ds-segmented-icon-size);\n      display: block;\n    }\n\n    [data-ds-segmented] .ds-segmented-item,\n    [data-ds-segmented] .ds-segmented-item-label,\n    [data-ds-segmented] .ds-segmented-item-icon {\n      transition: none !important;\n      animation: none !important;\n    }\n\n  `;\n\n  document.head.appendChild(style);\n}\n\nexport const Segmented = ({ dsSize = 'md', dsBordered = true, size, style, ...props }: SegmentedProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const {\n    options,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    block,\n    className,\n    name,\n    id,\n    ...restProps\n  } = props;\n\n  const resolvedSize = dsSize ?? mapAntSizeToDS(size);\n  const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);\n\n  const firstOption = normalizedOptions[0];\n  const [uncontrolledValue, setUncontrolledValue] = useState<SegmentValue | undefined>(\n    (defaultValue as SegmentValue | undefined) ?? firstOption?.value,\n  );\n\n  const selectedValue = (value as SegmentValue | undefined) ?? uncontrolledValue;\n\n  const tokens = dsSemanticTokens.segmented.size[resolvedSize];\n\n  const handleSelect = (option: DSOption) => {\n    if (disabled || option.disabled) return;\n\n    if (value === undefined) {\n      setUncontrolledValue(option.value);\n    }\n\n    onChange?.(option.value);\n  };\n\n  const rootStyle: CSSProperties = {\n    ...style,\n    ['--ds-segmented-item-height' as string]: tokens.itemHeight,\n    ['--ds-segmented-control-height' as string]: tokens.controlHeight,\n    ['--ds-segmented-item-gap' as string]: tokens.gap,\n    ['--ds-segmented-item-padding-x' as string]: tokens.paddingX,\n    ['--ds-segmented-font-size' as string]: tokens.fontSize,\n    ['--ds-segmented-line-height' as string]: tokens.lineHeight,\n    ['--ds-segmented-letter-spacing' as string]: tokens.letterSpacing,\n    ['--ds-segmented-icon-size' as string]: tokens.iconSize,\n  };\n\n  if (block) {\n    rootStyle['--ds-segmented-width' as string] = '100%';\n  }\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={className}\n      role=\"radiogroup\"\n      aria-disabled={disabled ? 'true' : 'false'}\n      data-ds-block={block ? 'true' : 'false'}\n      style={rootStyle}\n      data-ds-segmented\n      data-ds-bordered={dsBordered ? 'true' : 'false'}\n      data-ds-size={resolvedSize}\n      data-ds-ant-size={size ?? DS_TO_ANT_SIZE[resolvedSize]}\n    >\n      <div className=\"ds-segmented-group\">\n        {normalizedOptions.map((option, index) => {\n          const checked = option.value === selectedValue;\n          const optionDisabled = disabled || option.disabled;\n\n          return (\n            <button\n              key={`${String(option.value)}-${index}`}\n              type=\"button\"\n              className=\"ds-segmented-item\"\n              role=\"radio\"\n              aria-checked={checked ? 'true' : 'false'}\n              aria-disabled={optionDisabled ? 'true' : 'false'}\n              tabIndex={checked ? 0 : -1}\n              onClick={() => handleSelect(option)}\n              title={option.title}\n              name={name}\n              disabled={!!optionDisabled}\n            >\n              <span className=\"ds-segmented-item-label\">\n                {option.icon ? <span className=\"ds-segmented-item-icon\">{option.icon}</span> : null}\n                <span>{option.label ?? option.value}</span>\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist-lib/display/Statistic.cjs

@@ -0,0 +1,133 @@
+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-statistic-styles`,a=`ds-statistic`;function o(...e){return e.filter(Boolean).join(` `).trim()}function s(){if(typeof document>`u`)return;let{statistic:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .${a} {
+      box-sizing: border-box;
+      width: 100%;
+      padding: ${t.spacing.default};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      background: ${t.surface.default};
+      color: ${t.text.value};
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .${a},
+    .${a} .ant-statistic,
+    .${a} .ant-statistic-title,
+    .${a} .ant-statistic-content,
+    .${a} .ant-statistic-content-prefix,
+    .${a} .ant-statistic-content-suffix {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a} .ant-statistic-title {
+      margin-bottom: 6px;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      letter-spacing: ${t.typography.title.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .${a} .ant-statistic-content {
+      color: ${t.text.value};
+      font-size: ${t.typography.value.fontSize};
+      font-weight: ${t.typography.value.fontWeight};
+      line-height: ${t.typography.value.lineHeight};
+      min-height: ${t.typography.value.lineHeight};
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      overflow: visible;
+    }
+
+    .${a} .ant-statistic-content-value,
+    .${a} .ant-statistic-content-value-int,
+    .${a} .ant-statistic-content-value-decimal {
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      display: inline-flex;
+      align-items: center;
+      min-height: inherit;
+    }
+
+    .${a} .ant-statistic-content-prefix,
+    .${a} .ant-statistic-content-suffix {
+      color: inherit;
+      font-size: 14px;
+      line-height: 18px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .${a}[data-ds-statistic-variant='compact'] {
+      padding: ${t.spacing.compact};
+    }
+
+    .${a}[data-ds-statistic-variant='compact'] .ant-statistic-content {
+      font-size: ${t.typography.compactValue.fontSize};
+      line-height: ${t.typography.compactValue.lineHeight};
+    }
+
+    .${a}[data-ds-statistic-variant='trend'],
+    .${a}[data-ds-statistic-variant='comparison'] {
+      background: ${t.surface.subtle};
+    }
+
+    .${a}[data-ds-statistic-variant='statusMetric'] {
+      background: ${t.surface.status};
+    }
+
+    .${a}[data-ds-statistic-variant='comparison'] {
+      padding: ${t.spacing.comparison};
+      background: ${t.surface.comparison};
+    }
+
+    .${a}[data-ds-statistic-trend='positive'] .ant-statistic-content {
+      color: ${t.trend.positive};
+    }
+
+    .${a}[data-ds-statistic-trend='negative'] .ant-statistic-content {
+      color: ${t.trend.negative};
+    }
+
+    .${a}[data-ds-statistic-trend='neutral'] .ant-statistic-content {
+      color: ${t.trend.neutral};
+    }
+
+    .${a}[data-ds-statistic-status='success'] {
+      border-color: ${t.trend.positive};
+    }
+
+    .${a}[data-ds-statistic-status='warning'],
+    .${a}[data-ds-statistic-status='new'] {
+      border-color: ${e.dsSemanticTokens.badge.status.warning.light.border};
+    }
+
+    .${a}[data-ds-statistic-status='error'] {
+      border-color: ${t.trend.negative};
+    }
+
+    .${a}-comparison {
+      margin-top: 8px;
+      color: ${t.text.meta};
+      font-size: ${t.typography.meta.fontSize};
+      font-weight: ${t.typography.meta.fontWeight};
+      line-height: ${t.typography.meta.lineHeight};
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .${a}-comparison-value {
+      color: ${t.text.value};
+      font-weight: 700;
+    }
+  `}var c=({dsVariant:e=`metric`,dsTrend:i=`neutral`,dsStatus:c=`neutral`,dsComparisonLabel:l,dsComparisonValue:u,className:d,...f})=>((0,n.useEffect)(()=>{s()},[]),(0,r.jsxs)(`div`,{className:o(a,d),"data-ds-statistic-status":e===`statusMetric`?c:void 0,"data-ds-statistic-trend":e===`trend`||e===`comparison`?i:void 0,"data-ds-statistic-variant":e,children:[(0,r.jsx)(t.Statistic,{...f}),e===`comparison`&&(l||u)?(0,r.jsxs)(`div`,{className:`${a}-comparison`,children:[l?(0,r.jsx)(`span`,{children:l}):null,u?(0,r.jsx)(`span`,{className:`${a}-comparison-value`,children:u}):null]}):null]}));c.displayName=`Statistic`,c.Countdown=t.Statistic.Countdown,exports.Statistic=c;
+//# sourceMappingURL=Statistic.cjs.map