acinguiux-ds-react-framework 0.1.18 → 0.1.19

package/build/esm/components/Chart/Highcharts/options/legend.options.js

@@ -1,5 +1,5 @@
-import { Variables as e } from "../../../../react-base/src/theme/types/layer.js";
-const a = (o, n) => {
+import { Variables as n } from "../../../../react-base/src/theme/types/layer.js";
+const a = (o, e) => {
   const t = o.layer({ foundation: "surface" });
   return {
     align: "center",
@@ -8,15 +8,15 @@ const a = (o, n) => {
     y: 20,
     maxHeight: 110,
     itemStyle: {
-      ...o.typography("label", n),
-      color: t[e.TextOnFoundationStrong]
+      ...o.typography("label", e),
+      color: t[n.TextOnFoundationStrong]
     },
     itemHoverStyle: {
-      ...o.typography("label", n, "regular"),
-      color: t[e.TextOnFoundationStrong]
+      ...o.typography("label", e, "strong"),
+      color: t[n.TextOnFoundationStrong]
     },
     itemHiddenStyle: {
-      color: t[e.TextOnFoundationSubtle],
+      color: t[n.TextOnFoundationSubtle],
       textDecoration: "normal"
     },
     margin: 20

package/build/esm/components/Chart/Highcharts/options/legend.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend.options.js","sources":["../../../../../../src/components/Chart/Highcharts/options/legend.options.ts"],"sourcesContent":["import type { Options } from 'highcharts';\nimport type { DefaultTheme } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { ChartSize } from '../../Chart.types';\n\nexport const legend = (theme: DefaultTheme, size: ChartSize): Options['legend'] => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return {\n    align: 'center',\n    verticalAlign: 'bottom',\n    x: 0,\n    y: 20,\n    maxHeight: 110,\n    itemStyle: {\n      ...theme.typography('label', size),\n      color: layer[Variables.TextOnFoundationStrong],\n    },\n    itemHoverStyle: {\n      ...theme.typography('label', size, 'regular'),\n      color: layer[Variables.TextOnFoundationStrong],\n    },\n    itemHiddenStyle: {\n      color: layer[Variables.TextOnFoundationSubtle],\n      textDecoration: 'normal',\n    },\n    margin: 20,\n  };\n};\n"],"names":["legend","theme","size","layer","Variables"],"mappings":";AAMO,MAAMA,IAAS,CAACC,GAAqBC,MAAuC;AACjF,QAAMC,IAAQF,EAAM,MAAM,EAAE,YAAY,WAAW;AAEnD,SAAO;AAAA,IACL,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAGA,EAAM,WAAW,SAASC,CAAI;AAAA,MACjC,OAAOC,EAAMC,EAAU,sBAAsB;AAAA,IAAA;AAAA,IAE/C,gBAAgB;AAAA,MACd,GAAGH,EAAM,WAAW,SAASC,GAAM,SAAS;AAAA,MAC5C,OAAOC,EAAMC,EAAU,sBAAsB;AAAA,IAAA;AAAA,IAE/C,iBAAiB;AAAA,MACf,OAAOD,EAAMC,EAAU,sBAAsB;AAAA,MAC7C,gBAAgB;AAAA,IAAA;AAAA,IAElB,QAAQ;AAAA,EAAA;AAEZ;"}
+{"version":3,"file":"legend.options.js","sources":["../../../../../../src/components/Chart/Highcharts/options/legend.options.ts"],"sourcesContent":["import type { Options } from 'highcharts';\nimport type { DefaultTheme } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { ChartSize } from '../../Chart.types';\n\nexport const legend = (theme: DefaultTheme, size: ChartSize): Options['legend'] => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return {\n    align: 'center',\n    verticalAlign: 'bottom',\n    x: 0,\n    y: 20,\n    maxHeight: 110,\n    itemStyle: {\n      ...theme.typography('label', size),\n      color: layer[Variables.TextOnFoundationStrong],\n    },\n    itemHoverStyle: {\n      ...theme.typography('label', size, 'strong'),\n      color: layer[Variables.TextOnFoundationStrong],\n    },\n    itemHiddenStyle: {\n      color: layer[Variables.TextOnFoundationSubtle],\n      textDecoration: 'normal',\n    },\n    margin: 20,\n  };\n};\n"],"names":["legend","theme","size","layer","Variables"],"mappings":";AAMO,MAAMA,IAAS,CAACC,GAAqBC,MAAuC;AACjF,QAAMC,IAAQF,EAAM,MAAM,EAAE,YAAY,WAAW;AAEnD,SAAO;AAAA,IACL,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAGA,EAAM,WAAW,SAASC,CAAI;AAAA,MACjC,OAAOC,EAAMC,EAAU,sBAAsB;AAAA,IAAA;AAAA,IAE/C,gBAAgB;AAAA,MACd,GAAGH,EAAM,WAAW,SAASC,GAAM,QAAQ;AAAA,MAC3C,OAAOC,EAAMC,EAAU,sBAAsB;AAAA,IAAA;AAAA,IAE/C,iBAAiB;AAAA,MACf,OAAOD,EAAMC,EAAU,sBAAsB;AAAA,MAC7C,gBAAgB;AAAA,IAAA;AAAA,IAElB,QAAQ;AAAA,EAAA;AAEZ;"}

package/build/esm/components/Chart/Recharts/BaseRechartsChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRechartsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chart/Recharts/BaseRechartsChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,uBAAuB,EAA0B,MAAM,2BAA2B,CAAC;AAQjG,QAAA,MAAM,iBAAiB,mHAYpB,uBAAuB,4CAwBzB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"BaseRechartsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chart/Recharts/BaseRechartsChart.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,uBAAuB,EAA0B,MAAM,2BAA2B,CAAC;AAQjG,QAAA,MAAM,iBAAiB,mHAYpB,uBAAuB,4CA6BzB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/build/esm/components/Chart/Recharts/BaseRechartsChart.js

@@ -1,45 +1,48 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { ResponsiveContainer as A, XAxis as y, YAxis as g, CartesianGrid as E, Tooltip as R, Legend as S, Brush as B } from "recharts";
-import K from "classnames";
-import { Sizes as L } from "../../../react-base/src/consts/index.js";
-import { BaseRechartsChartTypes as T } from "./BaseRechartsChart.types.js";
-import { ChartWrapper as j } from "./BaseRechartsChart.styles.js";
-import G from "./components/ChartHeader/ChartHeader.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Children as G, isValidElement as R } from "react";
+import { CartesianGrid as m, ResponsiveContainer as S, XAxis as B, YAxis as K, Tooltip as L, Legend as T, Brush as b } from "recharts";
+import j from "classnames";
+import { Sizes as H } from "../../../react-base/src/consts/index.js";
+import { BaseRechartsChartTypes as N } from "./BaseRechartsChart.types.js";
+import { ChartWrapper as P } from "./BaseRechartsChart.styles.js";
+import v from "./components/ChartHeader/ChartHeader.js";
 import t from "./hooks/useChartElementStyles.js";
-import { getChartElements as H } from "../utils.js";
-import { CHART_CLASS as N } from "../../../react-base/src/consts/classes.js";
-const b = [], q = ({
-  className: m,
-  size: i = L.Medium,
-  type: o = T.Line,
-  title: h,
-  subtitle: p,
-  children: d,
-  elements: a = b,
-  withBrush: n,
-  xAxisDataKey: f,
-  yAxisDataKey: C,
-  ...c
+import { getChartElements as w } from "../utils.js";
+import { CHART_CLASS as z } from "../../../react-base/src/consts/classes.js";
+const M = [], J = ({
+  className: n,
+  size: s = H.Medium,
+  type: a = N.Line,
+  title: p,
+  subtitle: h,
+  children: o,
+  elements: d = M,
+  withBrush: l,
+  xAxisDataKey: C,
+  yAxisDataKey: c,
+  ...f
 }) => {
-  const [l, x] = H(o);
-  return /* @__PURE__ */ s(j, { className: K(N, m), $size: i, children: [
-    /* @__PURE__ */ r(G, { title: h, subtitle: p, size: i }),
-    /* @__PURE__ */ r(A, { width: "100%", height: 400, children: /* @__PURE__ */ s(l, { ...c, children: [
-      d,
-      a == null ? void 0 : a.map((e, u) => (
+  const [u, x] = w(a), y = t("brush"), A = t("cartesianGrid"), E = G.toArray(o).some(
+    (e) => R(e) && e.type === m
+  );
+  return /* @__PURE__ */ i(P, { className: j(z, n), $size: s, children: [
+    /* @__PURE__ */ r(v, { title: p, subtitle: h, size: s }),
+    /* @__PURE__ */ r(S, { width: "100%", height: 400, children: /* @__PURE__ */ i(u, { ...f, children: [
+      !E && /* @__PURE__ */ r(m, { ...A }),
+      o,
+      d?.map((e, g) => (
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        /* @__PURE__ */ r(x, { dataKey: e, ...t(o, u) }, e)
+        /* @__PURE__ */ r(x, { dataKey: e, ...t(a, g) }, e)
       )),
-      /* @__PURE__ */ r(y, { dataKey: f, ...t("xAxis") }),
-      /* @__PURE__ */ r(g, { dataKey: C, ...t("yAxis") }),
-      /* @__PURE__ */ r(E, { ...t("cartesianGrid") }),
-      /* @__PURE__ */ r(R, { ...t("tooltip") }),
-      /* @__PURE__ */ r(S, { ...t("legend") }),
-      !!n && /* @__PURE__ */ r(B, { ...t("brush") })
+      /* @__PURE__ */ r(B, { dataKey: C, ...t("xAxis") }),
+      /* @__PURE__ */ r(K, { dataKey: c, ...t("yAxis") }),
+      /* @__PURE__ */ r(L, { ...t("tooltip") }),
+      /* @__PURE__ */ r(T, { ...t("legend") }),
+      !!l && /* @__PURE__ */ r(b, { ...y })
     ] }) })
   ] });
 };
 export {
-  q as default
+  J as default
 };
 //# sourceMappingURL=BaseRechartsChart.js.map

package/build/esm/components/Chart/Recharts/BaseRechartsChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRechartsChart.js","sources":["../../../../../src/components/Chart/Recharts/BaseRechartsChart.tsx"],"sourcesContent":["import { ResponsiveContainer, XAxis, YAxis, Tooltip, Legend, CartesianGrid, Brush } from 'recharts';\nimport classNames from 'classnames';\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport { type IBaseRechartsChartProps, BaseRechartsChartTypes } from './BaseRechartsChart.types';\nimport * as Styled from './BaseRechartsChart.styles';\nimport ChartHeader from './components/ChartHeader/ChartHeader';\nimport useChartElementStyles from './hooks/useChartElementStyles';\nimport { getChartElements } from '../utils';\n\nconst defaultElements: string[] = [];\n\nconst BaseRechartsChart = ({\n  className,\n  size = Sizes.Medium,\n  type = BaseRechartsChartTypes.Line,\n  title,\n  subtitle,\n  children,\n  elements = defaultElements,\n  withBrush,\n  xAxisDataKey,\n  yAxisDataKey,\n  ...rest\n}: IBaseRechartsChartProps) => {\n  const [Chart, ChartElement] = getChartElements(type);\n\n  return (\n    <Styled.ChartWrapper className={classNames(CHART_CLASS, className)} $size={size}>\n      <ChartHeader title={title} subtitle={subtitle} size={size} />\n      <ResponsiveContainer width=\"100%\" height={400}>\n        <Chart {...rest}>\n          {children}\n          {elements?.map((element, index) => (\n            // eslint-disable-next-line react-hooks/rules-of-hooks\n            <ChartElement key={element} dataKey={element} {...useChartElementStyles(type, index)} />\n          ))}\n          <XAxis dataKey={xAxisDataKey} {...useChartElementStyles('xAxis')} />\n          <YAxis dataKey={yAxisDataKey} {...useChartElementStyles('yAxis')} />\n          <CartesianGrid {...useChartElementStyles('cartesianGrid')} />\n          <Tooltip {...useChartElementStyles('tooltip')} />\n          <Legend {...useChartElementStyles('legend')} />\n          {/* eslint-disable-next-line react-hooks/rules-of-hooks */}\n          {!!withBrush && <Brush {...useChartElementStyles('brush')} />}\n        </Chart>\n      </ResponsiveContainer>\n    </Styled.ChartWrapper>\n  );\n};\n\nexport default BaseRechartsChart;\n"],"names":["defaultElements","BaseRechartsChart","className","size","Sizes","type","BaseRechartsChartTypes","title","subtitle","children","elements","withBrush","xAxisDataKey","yAxisDataKey","rest","Chart","ChartElement","getChartElements","jsxs","Styled.ChartWrapper","classNames","CHART_CLASS","jsx","ChartHeader","ResponsiveContainer","element","index","useChartElementStyles","XAxis","YAxis","CartesianGrid","Tooltip","Legend","Brush"],"mappings":";;;;;;;;;;AAUA,MAAMA,IAA4B,CAAA,GAE5BC,IAAoB,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC,IAAOC,EAAM;AAAA,EACb,MAAAC,IAAOC,EAAuB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAWV;AAAA,EACX,WAAAW;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AAC7B,QAAM,CAACC,GAAOC,CAAY,IAAIC,EAAiBZ,CAAI;AAEnD,SACE,gBAAAa,EAACC,GAAA,EAAoB,WAAWC,EAAWC,GAAanB,CAAS,GAAG,OAAOC,GACzE,UAAA;AAAA,IAAA,gBAAAmB,EAACC,GAAA,EAAY,OAAAhB,GAAc,UAAAC,GAAoB,MAAAL,EAAA,CAAY;AAAA,IAC3D,gBAAAmB,EAACE,KAAoB,OAAM,QAAO,QAAQ,KACxC,UAAA,gBAAAN,EAACH,GAAA,EAAO,GAAGD,GACR,UAAA;AAAA,MAAAL;AAAA,MACAC,KAAA,gBAAAA,EAAU,IAAI,CAACe,GAASC;AAAA;AAAA,QAEvB,gBAAAJ,EAACN,KAA2B,SAASS,GAAU,GAAGE,EAAsBtB,GAAMqB,CAAK,EAAA,GAAhED,CAAmE;AAAA;AAAA,wBAEvFG,GAAA,EAAM,SAAShB,GAAe,GAAGe,EAAsB,OAAO,GAAG;AAAA,wBACjEE,GAAA,EAAM,SAAShB,GAAe,GAAGc,EAAsB,OAAO,GAAG;AAAA,MAClE,gBAAAL,EAACQ,GAAA,EAAe,GAAGH,EAAsB,eAAe,EAAA,CAAG;AAAA,MAC3D,gBAAAL,EAACS,GAAA,EAAS,GAAGJ,EAAsB,SAAS,EAAA,CAAG;AAAA,MAC/C,gBAAAL,EAACU,GAAA,EAAQ,GAAGL,EAAsB,QAAQ,EAAA,CAAG;AAAA,MAE5C,CAAC,CAAChB,KAAa,gBAAAW,EAACW,KAAO,GAAGN,EAAsB,OAAO,EAAA,CAAG;AAAA,IAAA,EAAA,CAC7D,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"BaseRechartsChart.js","sources":["../../../../../src/components/Chart/Recharts/BaseRechartsChart.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { ResponsiveContainer, XAxis, YAxis, Tooltip, Legend, CartesianGrid, Brush } from 'recharts';\nimport classNames from 'classnames';\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport { type IBaseRechartsChartProps, BaseRechartsChartTypes } from './BaseRechartsChart.types';\nimport * as Styled from './BaseRechartsChart.styles';\nimport ChartHeader from './components/ChartHeader/ChartHeader';\nimport useChartElementStyles from './hooks/useChartElementStyles';\nimport { getChartElements } from '../utils';\n\nconst defaultElements: string[] = [];\n\nconst BaseRechartsChart = ({\n  className,\n  size = Sizes.Medium,\n  type = BaseRechartsChartTypes.Line,\n  title,\n  subtitle,\n  children,\n  elements = defaultElements,\n  withBrush,\n  xAxisDataKey,\n  yAxisDataKey,\n  ...rest\n}: IBaseRechartsChartProps) => {\n  const [Chart, ChartElement] = getChartElements(type);\n\n  const brushProps = useChartElementStyles('brush');\n  const cartesianGridProps = useChartElementStyles('cartesianGrid');\n  const hasCustomCartesianGrid = Children.toArray(children).some(\n    (child) => isValidElement(child) && child.type === CartesianGrid,\n  );\n\n  return (\n    <Styled.ChartWrapper className={classNames(CHART_CLASS, className)} $size={size}>\n      <ChartHeader title={title} subtitle={subtitle} size={size} />\n      <ResponsiveContainer width=\"100%\" height={400}>\n        <Chart {...rest}>\n          {!hasCustomCartesianGrid && <CartesianGrid {...cartesianGridProps} />}\n          {children}\n          {elements?.map((element, index) => (\n            // eslint-disable-next-line react-hooks/rules-of-hooks\n            <ChartElement key={element} dataKey={element} {...useChartElementStyles(type, index)} />\n          ))}\n          <XAxis dataKey={xAxisDataKey} {...useChartElementStyles('xAxis')} />\n          <YAxis dataKey={yAxisDataKey} {...useChartElementStyles('yAxis')} />\n          <Tooltip {...useChartElementStyles('tooltip')} />\n          <Legend {...useChartElementStyles('legend')} />\n          {!!withBrush && <Brush {...brushProps} />}\n        </Chart>\n      </ResponsiveContainer>\n    </Styled.ChartWrapper>\n  );\n};\n\nexport default BaseRechartsChart;\n"],"names":["defaultElements","BaseRechartsChart","className","size","Sizes","type","BaseRechartsChartTypes","title","subtitle","children","elements","withBrush","xAxisDataKey","yAxisDataKey","rest","Chart","ChartElement","getChartElements","brushProps","useChartElementStyles","cartesianGridProps","hasCustomCartesianGrid","Children","child","isValidElement","CartesianGrid","jsxs","Styled.ChartWrapper","classNames","CHART_CLASS","jsx","ChartHeader","ResponsiveContainer","element","index","XAxis","YAxis","Tooltip","Legend","Brush"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA4B,CAAA,GAE5BC,IAAoB,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC,IAAOC,EAAM;AAAA,EACb,MAAAC,IAAOC,EAAuB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAWV;AAAA,EACX,WAAAW;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AAC7B,QAAM,CAACC,GAAOC,CAAY,IAAIC,EAAiBZ,CAAI,GAE7Ca,IAAaC,EAAsB,OAAO,GAC1CC,IAAqBD,EAAsB,eAAe,GAC1DE,IAAyBC,EAAS,QAAQb,CAAQ,EAAE;AAAA,IACxD,CAACc,MAAUC,EAAeD,CAAK,KAAKA,EAAM,SAASE;AAAA,EAAA;AAGrD,SACE,gBAAAC,EAACC,GAAA,EAAoB,WAAWC,EAAWC,GAAa3B,CAAS,GAAG,OAAOC,GACzE,UAAA;AAAA,IAAA,gBAAA2B,EAACC,GAAA,EAAY,OAAAxB,GAAc,UAAAC,GAAoB,MAAAL,EAAA,CAAY;AAAA,IAC3D,gBAAA2B,EAACE,KAAoB,OAAM,QAAO,QAAQ,KACxC,UAAA,gBAAAN,EAACX,GAAA,EAAO,GAAGD,GACR,UAAA;AAAA,MAAA,CAACO,KAA0B,gBAAAS,EAACL,GAAA,EAAe,GAAGL,EAAA,CAAoB;AAAA,MAClEX;AAAA,MACAC,GAAU,IAAI,CAACuB,GAASC;AAAA;AAAA,QAEvB,gBAAAJ,EAACd,KAA2B,SAASiB,GAAU,GAAGd,EAAsBd,GAAM6B,CAAK,EAAA,GAAhED,CAAmE;AAAA,OACvF;AAAA,wBACAE,GAAA,EAAM,SAASvB,GAAe,GAAGO,EAAsB,OAAO,GAAG;AAAA,wBACjEiB,GAAA,EAAM,SAASvB,GAAe,GAAGM,EAAsB,OAAO,GAAG;AAAA,MAClE,gBAAAW,EAACO,GAAA,EAAS,GAAGlB,EAAsB,SAAS,EAAA,CAAG;AAAA,MAC/C,gBAAAW,EAACQ,GAAA,EAAQ,GAAGnB,EAAsB,QAAQ,EAAA,CAAG;AAAA,MAC5C,CAAC,CAACR,KAAa,gBAAAmB,EAACS,GAAA,EAAO,GAAGrB,EAAA,CAAY;AAAA,IAAA,EAAA,CACzC,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/build/esm/components/Chart/Recharts/components/ChartTooltip/ChartTooltip.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as o, Fragment as n } from "react/jsx-runtime";
+import { jsx as t, jsxs as i, Fragment as n } from "react/jsx-runtime";
 import e from "../../../../Text/components/Label/Label.js";
-import h from "../../../../Flexbox/Flexbox.js";
-import { ChartTooltip as m, ChartDot as c } from "./ChartTooltip.styles.js";
-const g = ({ payload: r, label: i }) => /* @__PURE__ */ t(m, { flexDirection: "column", gap: "8px", children: !!r && /* @__PURE__ */ o(n, { children: [
-  /* @__PURE__ */ t(e, { children: r == null ? void 0 : r.length }),
-  !!r[0] && /* @__PURE__ */ o(h, { gap: "8px", alignItems: "center", children: [
-    !!r[0].stroke && /* @__PURE__ */ t(c, { $bgColor: r[0].stroke }),
-    !!i && /* @__PURE__ */ t(e, { children: `${i}:` }),
+import l from "../../../../Flexbox/Flexbox.js";
+import { ChartTooltip as h, ChartDot as m } from "./ChartTooltip.styles.js";
+const g = ({ payload: r, label: o }) => /* @__PURE__ */ t(h, { flexDirection: "column", gap: "8px", children: !!r && /* @__PURE__ */ i(n, { children: [
+  /* @__PURE__ */ t(e, { children: r?.length }),
+  !!r[0] && /* @__PURE__ */ i(l, { gap: "8px", alignItems: "center", children: [
+    !!r[0].stroke && /* @__PURE__ */ t(m, { $bgColor: r[0].stroke }),
+    !!o && /* @__PURE__ */ t(e, { children: `${o}:` }),
     !!r[0].value && /* @__PURE__ */ t(e, { bold: !0, children: r[0].value })
   ] })
 ] }) });

package/build/esm/components/Chart/Recharts/components/ChartTooltip/ChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.js","sources":["../../../../../../../src/components/Chart/Recharts/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';\nimport type { TooltipProps } from 'recharts';\n\nimport Label from '../../../../Text/components/Label/Label';\nimport Flexbox from '../../../../Flexbox/Flexbox';\nimport * as Styled from './ChartTooltip.styles';\n\nconst ChartTooltip = ({ payload, label }: TooltipProps<ValueType, NameType>) => (\n  <Styled.ChartTooltip flexDirection=\"column\" gap=\"8px\">\n    {!!payload && (\n      <>\n        <Label>{payload?.length}</Label>\n        {!!payload[0] && (\n          <Flexbox gap=\"8px\" alignItems=\"center\">\n            {!!payload[0].stroke && <Styled.ChartDot $bgColor={payload[0].stroke} />}\n            {!!label && <Label>{`${label}:`}</Label>}\n            {!!payload[0].value && <Label bold={true}>{payload[0].value}</Label>}\n          </Flexbox>\n        )}\n      </>\n    )}\n  </Styled.ChartTooltip>\n);\nexport default ChartTooltip;\n"],"names":["ChartTooltip","payload","label","jsx","Styled.ChartTooltip","jsxs","Fragment","Label","Flexbox","Styled.ChartDot"],"mappings":";;;;AAOA,MAAMA,IAAe,CAAC,EAAE,SAAAC,GAAS,OAAAC,EAAA,MAC/B,gBAAAC,EAACC,GAAA,EAAoB,eAAc,UAAS,KAAI,OAC7C,UAAA,CAAC,CAACH,KACD,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAH,EAACI,GAAA,EAAO,iCAAS,OAAA,CAAO;AAAA,EACvB,CAAC,CAACN,EAAQ,CAAC,uBACTO,GAAA,EAAQ,KAAI,OAAM,YAAW,UAC3B,UAAA;AAAA,IAAA,CAAC,CAACP,EAAQ,CAAC,EAAE,UAAU,gBAAAE,EAACM,GAAA,EAAgB,UAAUR,EAAQ,CAAC,EAAE,OAAA,CAAQ;AAAA,IACrE,CAAC,CAACC,uBAAUK,GAAA,EAAO,UAAA,GAAGL,CAAK,KAAI;AAAA,IAC/B,CAAC,CAACD,EAAQ,CAAC,EAAE,SAAS,gBAAAE,EAACI,GAAA,EAAM,MAAM,IAAO,UAAAN,EAAQ,CAAC,EAAE,MAAA,CAAM;AAAA,EAAA,EAAA,CAC9D;AAAA,EAAA,CAEJ,EAAA,CAEJ;"}
+{"version":3,"file":"ChartTooltip.js","sources":["../../../../../../../src/components/Chart/Recharts/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';\nimport type { TooltipProps } from 'recharts';\n\nimport Label from '../../../../Text/components/Label/Label';\nimport Flexbox from '../../../../Flexbox/Flexbox';\nimport * as Styled from './ChartTooltip.styles';\n\nconst ChartTooltip = ({ payload, label }: TooltipProps<ValueType, NameType>) => (\n  <Styled.ChartTooltip flexDirection=\"column\" gap=\"8px\">\n    {!!payload && (\n      <>\n        <Label>{payload?.length}</Label>\n        {!!payload[0] && (\n          <Flexbox gap=\"8px\" alignItems=\"center\">\n            {!!payload[0].stroke && <Styled.ChartDot $bgColor={payload[0].stroke} />}\n            {!!label && <Label>{`${label}:`}</Label>}\n            {!!payload[0].value && <Label bold={true}>{payload[0].value}</Label>}\n          </Flexbox>\n        )}\n      </>\n    )}\n  </Styled.ChartTooltip>\n);\nexport default ChartTooltip;\n"],"names":["ChartTooltip","payload","label","jsx","Styled.ChartTooltip","jsxs","Fragment","Label","Flexbox","Styled.ChartDot"],"mappings":";;;;AAOA,MAAMA,IAAe,CAAC,EAAE,SAAAC,GAAS,OAAAC,EAAA,MAC/B,gBAAAC,EAACC,GAAA,EAAoB,eAAc,UAAS,KAAI,OAC7C,UAAA,CAAC,CAACH,KACD,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAH,EAACI,GAAA,EAAO,aAAS,OAAA,CAAO;AAAA,EACvB,CAAC,CAACN,EAAQ,CAAC,uBACTO,GAAA,EAAQ,KAAI,OAAM,YAAW,UAC3B,UAAA;AAAA,IAAA,CAAC,CAACP,EAAQ,CAAC,EAAE,UAAU,gBAAAE,EAACM,GAAA,EAAgB,UAAUR,EAAQ,CAAC,EAAE,OAAA,CAAQ;AAAA,IACrE,CAAC,CAACC,uBAAUK,GAAA,EAAO,UAAA,GAAGL,CAAK,KAAI;AAAA,IAC/B,CAAC,CAACD,EAAQ,CAAC,EAAE,SAAS,gBAAAE,EAACI,GAAA,EAAM,MAAM,IAAO,UAAAN,EAAQ,CAAC,EAAE,MAAA,CAAM;AAAA,EAAA,EAAA,CAC9D;AAAA,EAAA,CAEJ,EAAA,CAEJ;"}

package/build/esm/components/Chart/Recharts/hooks/useChartElementStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChartElementStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chart/Recharts/hooks/useChartElementStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAIzE,MAAM,MAAM,gBAAgB,GACxB,GAAG,sBAAsB,EAAE,GAC3B,KAAK,GACL,OAAO,GACP,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,QAAQ,GACR,MAAM,GACN,eAAe,CAAC;AAEpB,QAAA,MAAM,qBAAqB,UAAW,gBAAgB,UAAU,MAAM,KAAG,aA8FxE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"useChartElementStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chart/Recharts/hooks/useChartElementStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAIzE,MAAM,MAAM,gBAAgB,GACxB,GAAG,sBAAsB,EAAE,GAC3B,KAAK,GACL,OAAO,GACP,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,QAAQ,GACR,MAAM,GACN,eAAe,CAAC;AAEpB,QAAA,MAAM,qBAAqB,UAAW,gBAAgB,UAAU,MAAM,KAAG,aAgGxE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/build/esm/components/Chart/Recharts/hooks/useChartElementStyles.js

@@ -1,34 +1,36 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useTheme as d } from "styled-components";
 import { Variables as t } from "../../../../react-base/src/theme/types/layer.js";
-import { useColorByIndex as f } from "./useColorByIndex.js";
-import p from "../components/ChartTooltip/ChartTooltip.js";
-const x = (l, i) => {
-  const e = d(), r = f(i), o = {
+import { useColorByIndex as p } from "./useColorByIndex.js";
+import f from "../components/ChartTooltip/ChartTooltip.js";
+const x = (s, i) => {
+  const e = d(), r = p(i), o = {
     stroke: r,
     strokeWidth: 2,
     dot: !1
-  }, a = {
+  }, n = {
     strokeWidth: 2,
     fill: r,
     cx: "50%",
     cy: "50%",
-    label: !0
-    // style: theme.typography('label', 'medium', 'strong'),
-  }, n = {
+    label: !0,
+    style: e.typography("label", "medium", "strong")
+  }, a = {
     height: 28,
-    tick: e.typography("label")
-  }, s = {
-    content: ({ payload: c, label: u }) => /* @__PURE__ */ m(p, { payload: c, label: u }),
-    labelStyle: e.typography("label", "medium", "regular"),
-    contentStyle: e.typography("label", "small", "regular"),
+    tick: { ...e.typography("label"), fill: "currentColor" },
+    axisLine: { stroke: "currentColor" },
+    tickLine: { stroke: "currentColor" }
+  }, l = {
+    content: ({ payload: c, label: u }) => /* @__PURE__ */ m(f, { payload: c, label: u }),
+    labelStyle: e.typography("label"),
+    contentStyle: e.typography("label", "small"),
     cursor: {
       stroke: e.globals("others").mask,
       strokeWidth: 2,
       fill: e.layer({ foundation: "section" })[t.BackgroundFoundation]
     }
   };
-  switch (l) {
+  switch (s) {
     case "line":
       return o;
     case "area":
@@ -38,10 +40,10 @@ const x = (l, i) => {
         fill: r
       };
     case "pie":
-      return a;
+      return n;
     case "donut":
       return {
-        ...a,
+        ...n,
         innerRadius: 50
       };
     case "cell":
@@ -49,16 +51,16 @@ const x = (l, i) => {
         fill: r
       };
     case "xAxis":
-      return n;
+      return a;
     case "yAxis":
       return {
-        ...n,
+        ...a,
         axisLine: !1,
         tickLine: !1
       };
     case "cartesianGrid":
       return {
-        stroke: e.layer({ foundation: "surface" })[t.BorderOnFoundationStrong],
+        stroke: e.layer({ foundation: "surface" })[t.BorderOnFoundationSubtle],
         vertical: !1
       };
     case "brush":
@@ -67,9 +69,9 @@ const x = (l, i) => {
         stroke: e.layer({ foundation: "surface" })[t.BorderOnFoundationMedium]
       };
     case "tooltip":
-      return s;
+      return l;
     case "tooltipBar":
-      return s;
+      return l;
     case "legend":
       return {
         align: "left",

package/build/esm/components/Chart/Recharts/hooks/useChartElementStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartElementStyles.js","sources":["../../../../../../src/components/Chart/Recharts/hooks/useChartElementStyles.tsx"],"sourcesContent":["import { useTheme, type CSSProperties } from 'styled-components';\nimport type { TooltipProps } from 'recharts';\nimport type { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { BaseRechartsChartTypes } from '../BaseRechartsChart.types';\nimport { useColorByIndex } from './useColorByIndex';\nimport ChartTooltip from '../components/ChartTooltip/ChartTooltip';\n\nexport type ChartElementType =\n  | `${BaseRechartsChartTypes}`\n  | 'pie'\n  | 'donut'\n  | 'xAxis'\n  | 'yAxis'\n  | 'cartesianGrid'\n  | 'brush'\n  | 'tooltip'\n  | 'tooltipBar'\n  | 'tooltipPie'\n  | 'legend'\n  | 'cell'\n  | 'referenceLine';\n\nconst useChartElementStyles = (type?: ChartElementType, index?: number): CSSProperties => {\n  const theme = useTheme();\n  const colorByIndex = useColorByIndex(index);\n\n  const commonElementProps = {\n    stroke: colorByIndex,\n    strokeWidth: 2,\n    dot: false,\n  };\n\n  const commonPieProps = {\n    strokeWidth: 2,\n    fill: colorByIndex,\n    cx: '50%',\n    cy: '50%',\n    label: true,\n    // style: theme.typography('label', 'medium', 'strong'),\n  };\n\n  const commonAxisProps = {\n    height: 28,\n    tick: theme.typography('label'),\n  };\n\n  const commonTooltipProps = {\n    content: ({ payload, label }: TooltipProps<ValueType, NameType>) => (\n      <ChartTooltip payload={payload} label={label} />\n    ),\n    labelStyle: theme.typography('label', 'medium', 'regular'),\n    contentStyle: theme.typography('label', 'small', 'regular'),\n    cursor: {\n      stroke: theme.globals('others').mask,\n      strokeWidth: 2,\n      fill: theme.layer({ foundation: 'section' })[Variables.BackgroundFoundation],\n    },\n  };\n\n  switch (type) {\n    case 'line':\n      return commonElementProps;\n    case 'area':\n    case 'bar':\n      return {\n        ...commonElementProps,\n        fill: colorByIndex,\n      };\n    case 'pie':\n      return commonPieProps;\n    case 'donut':\n      return {\n        ...commonPieProps,\n        innerRadius: 50,\n      };\n    case 'cell':\n      return {\n        fill: colorByIndex,\n      };\n    case 'xAxis':\n      return commonAxisProps;\n    case 'yAxis':\n      return {\n        ...commonAxisProps,\n        axisLine: false,\n        tickLine: false,\n      };\n    case 'cartesianGrid':\n      return {\n        stroke: theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationStrong],\n        vertical: false,\n      };\n    case 'brush':\n      return {\n        fill: theme.layer({})[Variables.BackgroundFoundation],\n        stroke: theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationMedium],\n      };\n    case 'tooltip':\n      return commonTooltipProps;\n    case 'tooltipBar':\n      return commonTooltipProps;\n    case 'legend':\n      return {\n        align: 'left',\n        wrapperStyle: {\n          display: 'block',\n          left: 25,\n          bottom: -20,\n        },\n      };\n    case 'referenceLine':\n    default:\n      return {\n        stroke: colorByIndex,\n      };\n  }\n};\n\nexport default useChartElementStyles;\n"],"names":["useChartElementStyles","type","index","theme","useTheme","colorByIndex","useColorByIndex","commonElementProps","commonPieProps","commonAxisProps","commonTooltipProps","payload","label","jsx","ChartTooltip","Variables"],"mappings":";;;;;AAwBA,MAAMA,IAAwB,CAACC,GAAyBC,MAAkC;AACxF,QAAMC,IAAQC,EAAA,GACRC,IAAeC,EAAgBJ,CAAK,GAEpCK,IAAqB;AAAA,IACzB,QAAQF;AAAA,IACR,aAAa;AAAA,IACb,KAAK;AAAA,EAAA,GAGDG,IAAiB;AAAA,IACrB,aAAa;AAAA,IACb,MAAMH;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA;AAAA,EAAA,GAIHI,IAAkB;AAAA,IACtB,QAAQ;AAAA,IACR,MAAMN,EAAM,WAAW,OAAO;AAAA,EAAA,GAG1BO,IAAqB;AAAA,IACzB,SAAS,CAAC,EAAE,SAAAC,GAAS,OAAAC,QACnB,gBAAAC,EAACC,GAAA,EAAa,SAAAH,GAAkB,OAAAC,GAAc;AAAA,IAEhD,YAAYT,EAAM,WAAW,SAAS,UAAU,SAAS;AAAA,IACzD,cAAcA,EAAM,WAAW,SAAS,SAAS,SAAS;AAAA,IAC1D,QAAQ;AAAA,MACN,QAAQA,EAAM,QAAQ,QAAQ,EAAE;AAAA,MAChC,aAAa;AAAA,MACb,MAAMA,EAAM,MAAM,EAAE,YAAY,UAAA,CAAW,EAAEY,EAAU,oBAAoB;AAAA,IAAA;AAAA,EAC7E;AAGF,UAAQd,GAAA;AAAA,IACN,KAAK;AACH,aAAOM;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,MAAMF;AAAA,MAAA;AAAA,IAEV,KAAK;AACH,aAAOG;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,aAAa;AAAA,MAAA;AAAA,IAEjB,KAAK;AACH,aAAO;AAAA,QACL,MAAMH;AAAA,MAAA;AAAA,IAEV,KAAK;AACH,aAAOI;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd,KAAK;AACH,aAAO;AAAA,QACL,QAAQN,EAAM,MAAM,EAAE,YAAY,WAAW,EAAEY,EAAU,wBAAwB;AAAA,QACjF,UAAU;AAAA,MAAA;AAAA,IAEd,KAAK;AACH,aAAO;AAAA,QACL,MAAMZ,EAAM,MAAM,CAAA,CAAE,EAAEY,EAAU,oBAAoB;AAAA,QACpD,QAAQZ,EAAM,MAAM,EAAE,YAAY,UAAA,CAAW,EAAEY,EAAU,wBAAwB;AAAA,MAAA;AAAA,IAErF,KAAK;AACH,aAAOL;AAAA,IACT,KAAK;AACH,aAAOA;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,MAAM;AAAA,UACN,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAEJ,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,QAAQL;AAAA,MAAA;AAAA,EACV;AAEN;"}
+{"version":3,"file":"useChartElementStyles.js","sources":["../../../../../../src/components/Chart/Recharts/hooks/useChartElementStyles.tsx"],"sourcesContent":["import { useTheme, type CSSProperties } from 'styled-components';\nimport type { TooltipProps } from 'recharts';\nimport type { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { BaseRechartsChartTypes } from '../BaseRechartsChart.types';\nimport { useColorByIndex } from './useColorByIndex';\nimport ChartTooltip from '../components/ChartTooltip/ChartTooltip';\n\nexport type ChartElementType =\n  | `${BaseRechartsChartTypes}`\n  | 'pie'\n  | 'donut'\n  | 'xAxis'\n  | 'yAxis'\n  | 'cartesianGrid'\n  | 'brush'\n  | 'tooltip'\n  | 'tooltipBar'\n  | 'tooltipPie'\n  | 'legend'\n  | 'cell'\n  | 'referenceLine';\n\nconst useChartElementStyles = (type?: ChartElementType, index?: number): CSSProperties => {\n  const theme = useTheme();\n  const colorByIndex = useColorByIndex(index);\n\n  const commonElementProps = {\n    stroke: colorByIndex,\n    strokeWidth: 2,\n    dot: false,\n  };\n\n  const commonPieProps = {\n    strokeWidth: 2,\n    fill: colorByIndex,\n    cx: '50%',\n    cy: '50%',\n    label: true,\n    style: theme.typography('label', 'medium', 'strong'),\n  };\n\n  const commonAxisProps = {\n    height: 28,\n    tick: { ...theme.typography('label'), fill: 'currentColor' },\n    axisLine: { stroke: 'currentColor' },\n    tickLine: { stroke: 'currentColor' },\n  };\n\n  const commonTooltipProps = {\n    content: ({ payload, label }: TooltipProps<ValueType, NameType>) => (\n      <ChartTooltip payload={payload} label={label} />\n    ),\n    labelStyle: theme.typography('label'),\n    contentStyle: theme.typography('label', 'small'),\n    cursor: {\n      stroke: theme.globals('others').mask,\n      strokeWidth: 2,\n      fill: theme.layer({ foundation: 'section' })[Variables.BackgroundFoundation],\n    },\n  };\n\n  switch (type) {\n    case 'line':\n      return commonElementProps;\n    case 'area':\n    case 'bar':\n      return {\n        ...commonElementProps,\n        fill: colorByIndex,\n      };\n    case 'pie':\n      return commonPieProps;\n    case 'donut':\n      return {\n        ...commonPieProps,\n        innerRadius: 50,\n      };\n    case 'cell':\n      return {\n        fill: colorByIndex,\n      };\n    case 'xAxis':\n      return commonAxisProps;\n    case 'yAxis':\n      return {\n        ...commonAxisProps,\n        axisLine: false,\n        tickLine: false,\n      };\n    case 'cartesianGrid':\n      return {\n        stroke: theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationSubtle],\n        vertical: false,\n      };\n    case 'brush':\n      return {\n        fill: theme.layer({})[Variables.BackgroundFoundation],\n        stroke: theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationMedium],\n      };\n    case 'tooltip':\n      return commonTooltipProps;\n    case 'tooltipBar':\n      return commonTooltipProps;\n    case 'legend':\n      return {\n        align: 'left',\n        wrapperStyle: {\n          display: 'block',\n          left: 25,\n          bottom: -20,\n        },\n      };\n    case 'referenceLine':\n    default:\n      return {\n        stroke: colorByIndex,\n      };\n  }\n};\n\nexport default useChartElementStyles;\n"],"names":["useChartElementStyles","type","index","theme","useTheme","colorByIndex","useColorByIndex","commonElementProps","commonPieProps","commonAxisProps","commonTooltipProps","payload","label","jsx","ChartTooltip","Variables"],"mappings":";;;;;AAwBA,MAAMA,IAAwB,CAACC,GAAyBC,MAAkC;AACxF,QAAMC,IAAQC,EAAA,GACRC,IAAeC,EAAgBJ,CAAK,GAEpCK,IAAqB;AAAA,IACzB,QAAQF;AAAA,IACR,aAAa;AAAA,IACb,KAAK;AAAA,EAAA,GAGDG,IAAiB;AAAA,IACrB,aAAa;AAAA,IACb,MAAMH;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAOF,EAAM,WAAW,SAAS,UAAU,QAAQ;AAAA,EAAA,GAG/CM,IAAkB;AAAA,IACtB,QAAQ;AAAA,IACR,MAAM,EAAE,GAAGN,EAAM,WAAW,OAAO,GAAG,MAAM,eAAA;AAAA,IAC5C,UAAU,EAAE,QAAQ,eAAA;AAAA,IACpB,UAAU,EAAE,QAAQ,eAAA;AAAA,EAAe,GAG/BO,IAAqB;AAAA,IACzB,SAAS,CAAC,EAAE,SAAAC,GAAS,OAAAC,QACnB,gBAAAC,EAACC,GAAA,EAAa,SAAAH,GAAkB,OAAAC,GAAc;AAAA,IAEhD,YAAYT,EAAM,WAAW,OAAO;AAAA,IACpC,cAAcA,EAAM,WAAW,SAAS,OAAO;AAAA,IAC/C,QAAQ;AAAA,MACN,QAAQA,EAAM,QAAQ,QAAQ,EAAE;AAAA,MAChC,aAAa;AAAA,MACb,MAAMA,EAAM,MAAM,EAAE,YAAY,UAAA,CAAW,EAAEY,EAAU,oBAAoB;AAAA,IAAA;AAAA,EAC7E;AAGF,UAAQd,GAAA;AAAA,IACN,KAAK;AACH,aAAOM;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,MAAMF;AAAA,MAAA;AAAA,IAEV,KAAK;AACH,aAAOG;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,aAAa;AAAA,MAAA;AAAA,IAEjB,KAAK;AACH,aAAO;AAAA,QACL,MAAMH;AAAA,MAAA;AAAA,IAEV,KAAK;AACH,aAAOI;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd,KAAK;AACH,aAAO;AAAA,QACL,QAAQN,EAAM,MAAM,EAAE,YAAY,WAAW,EAAEY,EAAU,wBAAwB;AAAA,QACjF,UAAU;AAAA,MAAA;AAAA,IAEd,KAAK;AACH,aAAO;AAAA,QACL,MAAMZ,EAAM,MAAM,CAAA,CAAE,EAAEY,EAAU,oBAAoB;AAAA,QACpD,QAAQZ,EAAM,MAAM,EAAE,YAAY,UAAA,CAAW,EAAEY,EAAU,wBAAwB;AAAA,MAAA;AAAA,IAErF,KAAK;AACH,aAAOL;AAAA,IACT,KAAK;AACH,aAAOA;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,MAAM;AAAA,UACN,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAEJ,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,QAAQL;AAAA,MAAA;AAAA,EACV;AAEN;"}

package/build/esm/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,QAAQ,0HA6Cb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,QAAQ,0HAwDb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/esm/components/Checkbox/Checkbox.js

@@ -1,60 +1,66 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
-import n from "classnames";
-import { Sizes as $, NOOP as b } from "../../react-base/src/consts/index.js";
-import u from "../Icon/components/Check.js";
-import N from "../Icon/components/Minus.js";
-import { CheckboxWrapper as O, Checkbox as S, FakeCheckbox as j, CheckboxLabel as z } from "./Checkbox.styles.js";
-import { CHECKBOX_CLASS as L } from "../../react-base/src/consts/classes.js";
-const H = k(
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b, useId as k } from "react";
+import u from "classnames";
+import { Sizes as I, NOOP as N } from "../../react-base/src/consts/index.js";
+import O from "../Icon/components/Check.js";
+import S from "../Icon/components/Minus.js";
+import { CheckboxWrapper as j, Checkbox as z, CheckboxIcon as B, CheckboxLabel as L } from "./Checkbox.styles.js";
+import { CHECKBOX_CLASS as M } from "../../react-base/src/consts/classes.js";
+const P = b(
   ({
-    className: c = "",
-    size: r = $.Medium,
+    id: i,
+    className: f = "",
+    size: m = I.Medium,
     checked: o,
-    disabled: i,
-    label: m,
-    onChange: f = b,
-    indeterminate: a = !1,
-    wrapperProps: t,
-    invalid: s = !1,
+    disabled: a,
+    label: s,
+    onChange: l = N,
+    indeterminate: e = !1,
+    wrapperProps: d,
+    invalid: c = !1,
     multiline: h = !1,
-    mirrored: l = !1,
-    value: p = "",
-    ...d
-  }, x) => /* @__PURE__ */ C(
-    O,
-    {
-      $size: r,
-      className: n(L, c),
-      $disabled: i,
-      $checked: o,
-      $invalid: s,
-      $indeterminate: a,
-      $multiline: h,
-      $mirrored: l,
-      ...t,
-      children: [
-        /* @__PURE__ */ e(
-          S,
-          {
-            type: "checkbox",
-            disabled: i,
-            checked: o,
-            onChange: f,
-            "aria-invalid": s,
-            tabIndex: 0,
-            ref: x,
-            value: p,
-            ...d
-          }
-        ),
-        /* @__PURE__ */ e(j, { "aria-hidden": !0, children: a ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ e(u, {}) }),
-        !!m && /* @__PURE__ */ e(z, { $size: r, children: m })
-      ]
-    }
-  )
+    mirrored: p = !1,
+    value: x = "",
+    ...n
+  }, C) => {
+    const t = k();
+    return /* @__PURE__ */ $(
+      j,
+      {
+        $size: m,
+        className: u(M, f),
+        $disabled: a,
+        $checked: o,
+        $invalid: c,
+        $indeterminate: e,
+        $multiline: h,
+        $mirrored: p,
+        ...d,
+        children: [
+          /* @__PURE__ */ r(
+            z,
+            {
+              type: "checkbox",
+              id: i ?? t,
+              disabled: a,
+              checked: o,
+              onChange: l,
+              "aria-invalid": c,
+              "aria-checked": e ? "mixed" : !!o,
+              tabIndex: 0,
+              ref: C,
+              value: x,
+              ...n
+            }
+          ),
+          /* @__PURE__ */ r(B, { "aria-hidden": !0, children: e ? /* @__PURE__ */ r(S, {}) : /* @__PURE__ */ r(O, {}) }),
+          !!s && /* @__PURE__ */ r(L, { htmlFor: i ?? t, $size: m, children: s })
+        ]
+      }
+    );
+  }
 );
 export {
-  H as default
+  P as default
 };
 //# sourceMappingURL=Checkbox.js.map

package/build/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { type ReactElement, forwardRef, type ForwardedRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, NOOP, CHECKBOX_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport Check from '../Icon/components/Check';\nimport Minus from '../Icon/components/Minus';\nimport * as Styled from './Checkbox.styles';\nimport type { ICheckboxProps } from './Checkbox.types';\n\nconst Checkbox = forwardRef(\n  (\n    {\n      className = '',\n      size = Sizes.Medium,\n      checked,\n      disabled,\n      label,\n      onChange = NOOP,\n      indeterminate = false,\n      wrapperProps,\n      invalid = false,\n      multiline = false,\n      mirrored = false,\n      value = '',\n      ...rest\n    }: ICheckboxProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ): ReactElement => (\n    <Styled.CheckboxWrapper\n      $size={size}\n      className={classNames(CHECKBOX_CLASS, className)}\n      $disabled={disabled}\n      $checked={checked}\n      $invalid={invalid}\n      $indeterminate={indeterminate}\n      $multiline={multiline}\n      $mirrored={mirrored}\n      {...wrapperProps}\n    >\n      <Styled.Checkbox\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n        aria-invalid={invalid}\n        tabIndex={0}\n        ref={ref}\n        value={value}\n        {...rest}\n      />\n      <Styled.FakeCheckbox aria-hidden={true}>{indeterminate ? <Minus /> : <Check />}</Styled.FakeCheckbox>\n      {!!label && <Styled.CheckboxLabel $size={size}>{label}</Styled.CheckboxLabel>}\n    </Styled.CheckboxWrapper>\n  ),\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","className","size","Sizes","checked","disabled","label","onChange","NOOP","indeterminate","wrapperProps","invalid","multiline","mirrored","value","rest","ref","jsxs","Styled.CheckboxWrapper","classNames","CHECKBOX_CLASS","jsx","Styled.Checkbox","Styled.FakeCheckbox","Minus","Check","Styled.CheckboxLabel"],"mappings":";;;;;;;;AAUA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAOC,EAAM;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAOhB;AAAA,MACP,WAAWiB,EAAWC,GAAgBnB,CAAS;AAAA,MAC/C,WAAWI;AAAA,MACX,UAAUD;AAAA,MACV,UAAUO;AAAA,MACV,gBAAgBF;AAAA,MAChB,YAAYG;AAAA,MACZ,WAAWC;AAAA,MACV,GAAGH;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAW;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAAjB;AAAA,YACA,SAAAD;AAAA,YACA,UAAAG;AAAA,YACA,gBAAcI;AAAA,YACd,UAAU;AAAA,YACV,KAAAK;AAAA,YACA,OAAAF;AAAA,YACC,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,gBAAAM,EAACE,GAAA,EAAoB,eAAa,IAAO,UAAAd,IAAgB,gBAAAY,EAACG,GAAA,CAAA,CAAM,IAAK,gBAAAH,EAACI,GAAA,CAAA,CAAM,EAAA,CAAG;AAAA,QAC9E,CAAC,CAACnB,KAAS,gBAAAe,EAACK,GAAA,EAAqB,OAAOxB,GAAO,UAAAI,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { type ReactElement, forwardRef, type ForwardedRef, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, NOOP, CHECKBOX_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport Check from '../Icon/components/Check';\nimport Minus from '../Icon/components/Minus';\nimport * as Styled from './Checkbox.styles';\nimport type { ICheckboxProps } from './Checkbox.types';\n\nconst Checkbox = forwardRef(\n  (\n    {\n      id,\n      className = '',\n      size = Sizes.Medium,\n      checked,\n      disabled,\n      label,\n      onChange = NOOP,\n      indeterminate = false,\n      wrapperProps,\n      invalid = false,\n      multiline = false,\n      mirrored = false,\n      value = '',\n      ...rest\n    }: ICheckboxProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ): ReactElement => {\n    const uid = useId();\n\n    return (\n      <Styled.CheckboxWrapper\n        $size={size}\n        className={classNames(CHECKBOX_CLASS, className)}\n        $disabled={disabled}\n        $checked={checked}\n        $invalid={invalid}\n        $indeterminate={indeterminate}\n        $multiline={multiline}\n        $mirrored={mirrored}\n        {...wrapperProps}\n      >\n        <Styled.Checkbox\n          type=\"checkbox\"\n          id={id ?? uid}\n          disabled={disabled}\n          checked={checked}\n          onChange={onChange}\n          aria-invalid={invalid}\n          aria-checked={indeterminate ? 'mixed' : Boolean(checked)}\n          tabIndex={0}\n          ref={ref}\n          value={value}\n          {...rest}\n        />\n        <Styled.CheckboxIcon aria-hidden={true}>{indeterminate ? <Minus /> : <Check />}</Styled.CheckboxIcon>\n        {!!label && (\n          <Styled.CheckboxLabel htmlFor={id ?? uid} $size={size}>\n            {label}\n          </Styled.CheckboxLabel>\n        )}\n      </Styled.CheckboxWrapper>\n    );\n  },\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","id","className","size","Sizes","checked","disabled","label","onChange","NOOP","indeterminate","wrapperProps","invalid","multiline","mirrored","value","rest","ref","uid","useId","jsxs","Styled.CheckboxWrapper","classNames","CHECKBOX_CLASS","jsx","Styled.Checkbox","Styled.CheckboxIcon","Minus","Check","Styled.CheckboxLabel"],"mappings":";;;;;;;;AAUA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAOC,EAAM;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,GAELC,MACiB;AACjB,UAAMC,IAAMC,EAAA;AAEZ,WACE,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAOlB;AAAA,QACP,WAAWmB,EAAWC,GAAgBrB,CAAS;AAAA,QAC/C,WAAWI;AAAA,QACX,UAAUD;AAAA,QACV,UAAUO;AAAA,QACV,gBAAgBF;AAAA,QAChB,YAAYG;AAAA,QACZ,WAAWC;AAAA,QACV,GAAGH;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAIxB,KAAMiB;AAAA,cACV,UAAAZ;AAAA,cACA,SAAAD;AAAA,cACA,UAAAG;AAAA,cACA,gBAAcI;AAAA,cACd,gBAAcF,IAAgB,UAAU,EAAQL;AAAA,cAChD,UAAU;AAAA,cACV,KAAAY;AAAA,cACA,OAAAF;AAAA,cACC,GAAGC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,gBAAAQ,EAACE,GAAA,EAAoB,eAAa,IAAO,UAAAhB,IAAgB,gBAAAc,EAACG,GAAA,CAAA,CAAM,IAAK,gBAAAH,EAACI,GAAA,CAAA,CAAM,EAAA,CAAG;AAAA,UAC9E,CAAC,CAACrB,KACD,gBAAAiB,EAACK,GAAA,EAAqB,SAAS5B,KAAMiB,GAAK,OAAOf,GAC9C,UAAAI,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/build/esm/components/Checkbox/Checkbox.styles.d.ts

@@ -2,9 +2,9 @@ import type { PickTransient } from '../../react-base/src/types';
 import type { ICheckboxProps } from './Checkbox.types';
 type WrapperPropsKeys = 'checked' | 'disabled' | 'invalid' | 'indeterminate' | 'multiline' | 'mirrored';
 type WrapperProps = Required<PickTransient<ICheckboxProps, 'size'>> & PickTransient<ICheckboxProps, WrapperPropsKeys>;
-declare const FakeCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const CheckboxIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-declare const CheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, PickTransient<ICheckboxProps, "size">>> & string;
-declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, WrapperProps>> & string;
-export { CheckboxWrapper, Checkbox, FakeCheckbox, CheckboxLabel };
+declare const CheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, PickTransient<ICheckboxProps, "size">>> & string;
+declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps>> & string;
+export { CheckboxWrapper, Checkbox, CheckboxIcon, CheckboxLabel };
 //# sourceMappingURL=Checkbox.styles.d.ts.map

package/build/esm/components/Checkbox/Checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,KAAK,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,GAAG,WAAW,GAAG,UAAU,CAAC;AACxG,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEtH,QAAA,MAAM,YAAY,6NAMjB,CAAC;AAEF,QAAA,MAAM,QAAQ,sOAEb,CAAC;AAEF,QAAA,MAAM,aAAa,4QAElB,CAAC;AAcF,QAAA,MAAM,eAAe,0PAgHpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,KAAK,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,GAAG,WAAW,GAAG,UAAU,CAAC;AACxG,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAItH,QAAA,MAAM,YAAY,6NASjB,CAAC;AAEF,QAAA,MAAM,QAAQ,sOAGb,CAAC;AAEF,QAAA,MAAM,aAAa,mRAElB,CAAC;AAEF,QAAA,MAAM,eAAe,iPAqHpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}