ods-ant 0.2.0 → 0.4.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.cjs","names":[],"sources":["../../src/ds/display/Statistic.tsx"],"sourcesContent":["import { Statistic as AntStatistic } from 'antd';\nimport type { StatisticProps as AntStatisticProps } from 'antd';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSStatisticVariant = 'metric' | 'trend' | 'statusMetric' | 'compact' | 'comparison';\nexport type DSStatisticTrend = 'positive' | 'negative' | 'neutral';\nexport type DSStatisticStatus = 'success' | 'warning' | 'error' | 'neutral' | 'new';\n\ntype RestrictedAntProps = 'valueStyle';\n\nexport type StatisticProps = Omit<AntStatisticProps, RestrictedAntProps> & {\n  /** Semantic DS statistic variant for metric, trend, status, compact, or comparison display. */\n  dsVariant?: DSStatisticVariant;\n  /** Semantic trend direction used by trend and comparison variants. */\n  dsTrend?: DSStatisticTrend;\n  /** Semantic status used by statusMetric variants. */\n  dsStatus?: DSStatisticStatus;\n  /** Supporting label rendered beneath comparison metrics. */\n  dsComparisonLabel?: ReactNode;\n  /** Supporting value rendered beneath comparison metrics. */\n  dsComparisonValue?: ReactNode;\n};\n\ntype DSStatisticComponent = FC<StatisticProps> & {\n  Countdown: typeof AntStatistic.Countdown;\n};\n\nconst STYLE_ID = 'ds-statistic-styles';\nconst DS_STATISTIC_CLASS = 'ds-statistic';\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 { statistic } = 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_STATISTIC_CLASS} {\n      box-sizing: border-box;\n      width: 100%;\n      padding: ${statistic.spacing.default};\n      border: 1px solid ${statistic.border.default};\n      border-radius: ${statistic.border.radius};\n      background: ${statistic.surface.default};\n      color: ${statistic.text.value};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .${DS_STATISTIC_CLASS},\n    .${DS_STATISTIC_CLASS} .ant-statistic,\n    .${DS_STATISTIC_CLASS} .ant-statistic-title,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-prefix,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-suffix {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-title {\n      margin-bottom: 6px;\n      color: ${statistic.text.title};\n      font-size: ${statistic.typography.title.fontSize};\n      font-weight: ${statistic.typography.title.fontWeight};\n      line-height: ${statistic.typography.title.lineHeight};\n      letter-spacing: ${statistic.typography.title.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content {\n      color: ${statistic.text.value};\n      font-size: ${statistic.typography.value.fontSize};\n      font-weight: ${statistic.typography.value.fontWeight};\n      line-height: ${statistic.typography.value.lineHeight};\n      min-height: ${statistic.typography.value.lineHeight};\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-wrap: wrap;\n      overflow: visible;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value-int,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value-decimal {\n      color: inherit;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: inherit;\n      display: inline-flex;\n      align-items: center;\n      min-height: inherit;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-prefix,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-suffix {\n      color: inherit;\n      font-size: 14px;\n      line-height: 18px;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='compact'] {\n      padding: ${statistic.spacing.compact};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='compact'] .ant-statistic-content {\n      font-size: ${statistic.typography.compactValue.fontSize};\n      line-height: ${statistic.typography.compactValue.lineHeight};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='trend'],\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='comparison'] {\n      background: ${statistic.surface.subtle};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='statusMetric'] {\n      background: ${statistic.surface.status};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='comparison'] {\n      padding: ${statistic.spacing.comparison};\n      background: ${statistic.surface.comparison};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='positive'] .ant-statistic-content {\n      color: ${statistic.trend.positive};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='negative'] .ant-statistic-content {\n      color: ${statistic.trend.negative};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='neutral'] .ant-statistic-content {\n      color: ${statistic.trend.neutral};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='success'] {\n      border-color: ${statistic.trend.positive};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='warning'],\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='new'] {\n      border-color: ${dsSemanticTokens.badge.status.warning.light.border};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='error'] {\n      border-color: ${statistic.trend.negative};\n    }\n\n    .${DS_STATISTIC_CLASS}-comparison {\n      margin-top: 8px;\n      color: ${statistic.text.meta};\n      font-size: ${statistic.typography.meta.fontSize};\n      font-weight: ${statistic.typography.meta.fontWeight};\n      line-height: ${statistic.typography.meta.lineHeight};\n      display: flex;\n      gap: 6px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .${DS_STATISTIC_CLASS}-comparison-value {\n      color: ${statistic.text.value};\n      font-weight: 700;\n    }\n  `;\n}\n\nexport const Statistic: DSStatisticComponent = ({\n  dsVariant = 'metric',\n  dsTrend = 'neutral',\n  dsStatus = 'neutral',\n  dsComparisonLabel,\n  dsComparisonValue,\n  className,\n  ...props\n}: StatisticProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <div\n      className={mergeClassNames(DS_STATISTIC_CLASS, className)}\n      data-ds-statistic-status={dsVariant === 'statusMetric' ? dsStatus : undefined}\n      data-ds-statistic-trend={dsVariant === 'trend' || dsVariant === 'comparison' ? dsTrend : undefined}\n      data-ds-statistic-variant={dsVariant}\n    >\n      <AntStatistic {...props} />\n      {dsVariant === 'comparison' && (dsComparisonLabel || dsComparisonValue) ? (\n        <div className={`${DS_STATISTIC_CLASS}-comparison`}>\n          {dsComparisonLabel ? <span>{dsComparisonLabel}</span> : null}\n          {dsComparisonValue ? <span className={`${DS_STATISTIC_CLASS}-comparison-value`}>{dsComparisonValue}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStatistic.displayName = 'Statistic';\nStatistic.Countdown = AntStatistic.Countdown;"],"mappings":"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"}

package/dist-lib/display/Statistic.js

@@ -0,0 +1,165 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Statistic as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ds/display/Statistic.tsx
+var a = "ds-statistic-styles", o = "ds-statistic";
+function s(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function c() {
+	if (typeof document > "u") return;
+	let { statistic: t } = e, n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n)), n.textContent = `
+    .${o} {
+      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;
+    }
+
+    .${o},
+    .${o} .ant-statistic,
+    .${o} .ant-statistic-title,
+    .${o} .ant-statistic-content,
+    .${o} .ant-statistic-content-prefix,
+    .${o} .ant-statistic-content-suffix {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${o} .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;
+    }
+
+    .${o} .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;
+    }
+
+    .${o} .ant-statistic-content-value,
+    .${o} .ant-statistic-content-value-int,
+    .${o} .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;
+    }
+
+    .${o} .ant-statistic-content-prefix,
+    .${o} .ant-statistic-content-suffix {
+      color: inherit;
+      font-size: 14px;
+      line-height: 18px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .${o}[data-ds-statistic-variant='compact'] {
+      padding: ${t.spacing.compact};
+    }
+
+    .${o}[data-ds-statistic-variant='compact'] .ant-statistic-content {
+      font-size: ${t.typography.compactValue.fontSize};
+      line-height: ${t.typography.compactValue.lineHeight};
+    }
+
+    .${o}[data-ds-statistic-variant='trend'],
+    .${o}[data-ds-statistic-variant='comparison'] {
+      background: ${t.surface.subtle};
+    }
+
+    .${o}[data-ds-statistic-variant='statusMetric'] {
+      background: ${t.surface.status};
+    }
+
+    .${o}[data-ds-statistic-variant='comparison'] {
+      padding: ${t.spacing.comparison};
+      background: ${t.surface.comparison};
+    }
+
+    .${o}[data-ds-statistic-trend='positive'] .ant-statistic-content {
+      color: ${t.trend.positive};
+    }
+
+    .${o}[data-ds-statistic-trend='negative'] .ant-statistic-content {
+      color: ${t.trend.negative};
+    }
+
+    .${o}[data-ds-statistic-trend='neutral'] .ant-statistic-content {
+      color: ${t.trend.neutral};
+    }
+
+    .${o}[data-ds-statistic-status='success'] {
+      border-color: ${t.trend.positive};
+    }
+
+    .${o}[data-ds-statistic-status='warning'],
+    .${o}[data-ds-statistic-status='new'] {
+      border-color: ${e.badge.status.warning.light.border};
+    }
+
+    .${o}[data-ds-statistic-status='error'] {
+      border-color: ${t.trend.negative};
+    }
+
+    .${o}-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;
+    }
+
+    .${o}-comparison-value {
+      color: ${t.text.value};
+      font-weight: 700;
+    }
+  `;
+}
+var l = ({ dsVariant: e = "metric", dsTrend: a = "neutral", dsStatus: l = "neutral", dsComparisonLabel: u, dsComparisonValue: d, className: f, ...p }) => (n(() => {
+	c();
+}, []), /* @__PURE__ */ i("div", {
+	className: s(o, f),
+	"data-ds-statistic-status": e === "statusMetric" ? l : void 0,
+	"data-ds-statistic-trend": e === "trend" || e === "comparison" ? a : void 0,
+	"data-ds-statistic-variant": e,
+	children: [/* @__PURE__ */ r(t, { ...p }), e === "comparison" && (u || d) ? /* @__PURE__ */ i("div", {
+		className: `${o}-comparison`,
+		children: [u ? /* @__PURE__ */ r("span", { children: u }) : null, d ? /* @__PURE__ */ r("span", {
+			className: `${o}-comparison-value`,
+			children: d
+		}) : null]
+	}) : null]
+}));
+l.displayName = "Statistic", l.Countdown = t.Countdown;
+//#endregion
+export { l as Statistic };
+
+//# sourceMappingURL=Statistic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.js","names":[],"sources":["../../src/ds/display/Statistic.tsx"],"sourcesContent":["import { Statistic as AntStatistic } from 'antd';\nimport type { StatisticProps as AntStatisticProps } from 'antd';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSStatisticVariant = 'metric' | 'trend' | 'statusMetric' | 'compact' | 'comparison';\nexport type DSStatisticTrend = 'positive' | 'negative' | 'neutral';\nexport type DSStatisticStatus = 'success' | 'warning' | 'error' | 'neutral' | 'new';\n\ntype RestrictedAntProps = 'valueStyle';\n\nexport type StatisticProps = Omit<AntStatisticProps, RestrictedAntProps> & {\n  /** Semantic DS statistic variant for metric, trend, status, compact, or comparison display. */\n  dsVariant?: DSStatisticVariant;\n  /** Semantic trend direction used by trend and comparison variants. */\n  dsTrend?: DSStatisticTrend;\n  /** Semantic status used by statusMetric variants. */\n  dsStatus?: DSStatisticStatus;\n  /** Supporting label rendered beneath comparison metrics. */\n  dsComparisonLabel?: ReactNode;\n  /** Supporting value rendered beneath comparison metrics. */\n  dsComparisonValue?: ReactNode;\n};\n\ntype DSStatisticComponent = FC<StatisticProps> & {\n  Countdown: typeof AntStatistic.Countdown;\n};\n\nconst STYLE_ID = 'ds-statistic-styles';\nconst DS_STATISTIC_CLASS = 'ds-statistic';\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 { statistic } = 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_STATISTIC_CLASS} {\n      box-sizing: border-box;\n      width: 100%;\n      padding: ${statistic.spacing.default};\n      border: 1px solid ${statistic.border.default};\n      border-radius: ${statistic.border.radius};\n      background: ${statistic.surface.default};\n      color: ${statistic.text.value};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .${DS_STATISTIC_CLASS},\n    .${DS_STATISTIC_CLASS} .ant-statistic,\n    .${DS_STATISTIC_CLASS} .ant-statistic-title,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-prefix,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-suffix {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-title {\n      margin-bottom: 6px;\n      color: ${statistic.text.title};\n      font-size: ${statistic.typography.title.fontSize};\n      font-weight: ${statistic.typography.title.fontWeight};\n      line-height: ${statistic.typography.title.lineHeight};\n      letter-spacing: ${statistic.typography.title.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content {\n      color: ${statistic.text.value};\n      font-size: ${statistic.typography.value.fontSize};\n      font-weight: ${statistic.typography.value.fontWeight};\n      line-height: ${statistic.typography.value.lineHeight};\n      min-height: ${statistic.typography.value.lineHeight};\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-wrap: wrap;\n      overflow: visible;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value-int,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-value-decimal {\n      color: inherit;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: inherit;\n      display: inline-flex;\n      align-items: center;\n      min-height: inherit;\n    }\n\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-prefix,\n    .${DS_STATISTIC_CLASS} .ant-statistic-content-suffix {\n      color: inherit;\n      font-size: 14px;\n      line-height: 18px;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='compact'] {\n      padding: ${statistic.spacing.compact};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='compact'] .ant-statistic-content {\n      font-size: ${statistic.typography.compactValue.fontSize};\n      line-height: ${statistic.typography.compactValue.lineHeight};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='trend'],\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='comparison'] {\n      background: ${statistic.surface.subtle};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='statusMetric'] {\n      background: ${statistic.surface.status};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-variant='comparison'] {\n      padding: ${statistic.spacing.comparison};\n      background: ${statistic.surface.comparison};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='positive'] .ant-statistic-content {\n      color: ${statistic.trend.positive};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='negative'] .ant-statistic-content {\n      color: ${statistic.trend.negative};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-trend='neutral'] .ant-statistic-content {\n      color: ${statistic.trend.neutral};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='success'] {\n      border-color: ${statistic.trend.positive};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='warning'],\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='new'] {\n      border-color: ${dsSemanticTokens.badge.status.warning.light.border};\n    }\n\n    .${DS_STATISTIC_CLASS}[data-ds-statistic-status='error'] {\n      border-color: ${statistic.trend.negative};\n    }\n\n    .${DS_STATISTIC_CLASS}-comparison {\n      margin-top: 8px;\n      color: ${statistic.text.meta};\n      font-size: ${statistic.typography.meta.fontSize};\n      font-weight: ${statistic.typography.meta.fontWeight};\n      line-height: ${statistic.typography.meta.lineHeight};\n      display: flex;\n      gap: 6px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .${DS_STATISTIC_CLASS}-comparison-value {\n      color: ${statistic.text.value};\n      font-weight: 700;\n    }\n  `;\n}\n\nexport const Statistic: DSStatisticComponent = ({\n  dsVariant = 'metric',\n  dsTrend = 'neutral',\n  dsStatus = 'neutral',\n  dsComparisonLabel,\n  dsComparisonValue,\n  className,\n  ...props\n}: StatisticProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <div\n      className={mergeClassNames(DS_STATISTIC_CLASS, className)}\n      data-ds-statistic-status={dsVariant === 'statusMetric' ? dsStatus : undefined}\n      data-ds-statistic-trend={dsVariant === 'trend' || dsVariant === 'comparison' ? dsTrend : undefined}\n      data-ds-statistic-variant={dsVariant}\n    >\n      <AntStatistic {...props} />\n      {dsVariant === 'comparison' && (dsComparisonLabel || dsComparisonValue) ? (\n        <div className={`${DS_STATISTIC_CLASS}-comparison`}>\n          {dsComparisonLabel ? <span>{dsComparisonLabel}</span> : null}\n          {dsComparisonValue ? <span className={`${DS_STATISTIC_CLASS}-comparison-value`}>{dsComparisonValue}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStatistic.displayName = 'Statistic';\nStatistic.Countdown = AntStatistic.Countdown;"],"mappings":";;;;;AA6BA,IAAM,IAAW,uBACX,IAAqB;AAE3B,SAAS,EAAgB,GAAG,GAAuC;AACjE,QAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;;AAGpD,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAM,EAAE,iBAAc,GAClB,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;OACf,EAAmB;;;iBAGT,EAAU,QAAQ,QAAQ;0BACjB,EAAU,OAAO,QAAQ;uBAC5B,EAAU,OAAO,OAAO;oBAC3B,EAAU,QAAQ,QAAQ;eAC/B,EAAU,KAAK,MAAM;;;;OAI7B,EAAmB;OACnB,EAAmB;OACnB,EAAmB;OACnB,EAAmB;OACnB,EAAmB;OACnB,EAAmB;;;;;OAKnB,EAAmB;;eAEX,EAAU,KAAK,MAAM;mBACjB,EAAU,WAAW,MAAM,SAAS;qBAClC,EAAU,WAAW,MAAM,WAAW;qBACtC,EAAU,WAAW,MAAM,WAAW;wBACnC,EAAU,WAAW,MAAM,cAAc;;;;OAI1D,EAAmB;eACX,EAAU,KAAK,MAAM;mBACjB,EAAU,WAAW,MAAM,SAAS;qBAClC,EAAU,WAAW,MAAM,WAAW;qBACtC,EAAU,WAAW,MAAM,WAAW;oBACvC,EAAU,WAAW,MAAM,WAAW;;;;;;;;OAQnD,EAAmB;OACnB,EAAmB;OACnB,EAAmB;;;;;;;;;;OAUnB,EAAmB;OACnB,EAAmB;;;;;;;;;OASnB,EAAmB;iBACT,EAAU,QAAQ,QAAQ;;;OAGpC,EAAmB;mBACP,EAAU,WAAW,aAAa,SAAS;qBACzC,EAAU,WAAW,aAAa,WAAW;;;OAG3D,EAAmB;OACnB,EAAmB;oBACN,EAAU,QAAQ,OAAO;;;OAGtC,EAAmB;oBACN,EAAU,QAAQ,OAAO;;;OAGtC,EAAmB;iBACT,EAAU,QAAQ,WAAW;oBAC1B,EAAU,QAAQ,WAAW;;;OAG1C,EAAmB;eACX,EAAU,MAAM,SAAS;;;OAGjC,EAAmB;eACX,EAAU,MAAM,SAAS;;;OAGjC,EAAmB;eACX,EAAU,MAAM,QAAQ;;;OAGhC,EAAmB;sBACJ,EAAU,MAAM,SAAS;;;OAGxC,EAAmB;OACnB,EAAmB;sBACJ,EAAiB,MAAM,OAAO,QAAQ,MAAM,OAAO;;;OAGlE,EAAmB;sBACJ,EAAU,MAAM,SAAS;;;OAGxC,EAAmB;;eAEX,EAAU,KAAK,KAAK;mBAChB,EAAU,WAAW,KAAK,SAAS;qBACjC,EAAU,WAAW,KAAK,WAAW;qBACrC,EAAU,WAAW,KAAK,WAAW;;;;;;;OAOnD,EAAmB;eACX,EAAU,KAAK,MAAM;;;;;AAMpC,IAAa,KAAmC,EAC9C,eAAY,UACZ,aAAU,WACV,cAAW,WACX,sBACA,sBACA,cACA,GAAG,SAEH,QAAgB;AACd,IAAc;GACb,EAAE,CAAC,EAGJ,kBAAC,OAAD;CACE,WAAW,EAAgB,GAAoB,EAAU;CACzD,4BAA0B,MAAc,iBAAiB,IAAW,KAAA;CACpE,2BAAyB,MAAc,WAAW,MAAc,eAAe,IAAU,KAAA;CACzF,6BAA2B;WAJ7B,CAME,kBAAC,GAAD,EAAc,GAAI,GAAS,CAAA,EAC1B,MAAc,iBAAiB,KAAqB,KACnD,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAmB;YAAtC,CACG,IAAoB,kBAAC,QAAD,EAAA,UAAO,GAAyB,CAAA,GAAG,MACvD,IAAoB,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAmB;aAAqB;GAAyB,CAAA,GAAG,KACzG;MACJ,KACA;;AAIV,EAAU,cAAc,aACxB,EAAU,YAAY,EAAa"}