acinguiux-ds-react-framework 0.1.16 → 0.1.19

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

@@ -3,32 +3,34 @@ import { useTheme as d } from "styled-components";
 import { Variables as t } from "../../../../react-base/src/theme/types/layer.js";
 import { useColorByIndex as p } from "./useColorByIndex.js";
 import f from "../components/ChartTooltip/ChartTooltip.js";
-const x = (l, i) => {
+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: e.typography("label", "medium", "strong")
-  }, n = {
+  }, a = {
     height: 28,
-    tick: e.typography("label")
-  }, s = {
+    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", "medium", "regular"),
-    contentStyle: e.typography("label", "small", "regular"),
+    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,IACP,OAAOF,EAAM,WAAW,SAAS,UAAU,QAAQ;AAAA,EAAA,GAG/CM,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"}

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

@@ -1,48 +1,49 @@
-import { css as s, styled as f } from "styled-components";
-import { getLabelFontStyles as w, getFocusStyles as d } from "../../react-base/src/utils/stylesUtils.js";
-import { getInputBorderStyles as h } from "../../react-base/src/components/Input/Input.utils.js";
-import { consts as o } from "../../react-base/src/components/Checkbox/Checkbox.consts.js";
-import { CheckboxStyles as $, FakeCheckboxStyles as b, FakeCheckboxIconStyles as k } from "../../react-base/src/components/Checkbox/Checkbox.styles.js";
-import { getStyles as C } from "../../react-base/src/components/Checkbox/Checkbox.utils.js";
-import { FabricsVariables as l } from "acinguiux-ds-fabrics";
-import { getLabelTypographySize as F } from "../../react-base/src/utils/sizesUtils.js";
-import { Sizes as x } from "../../react-base/src/consts/index.js";
-const n = f.div`
-  ${b};
+import { css as o, styled as p } from "styled-components";
+import { getLabelFontStyles as y, getFocusStyles as b } from "../../react-base/src/utils/stylesUtils.js";
+import { getInputBorderStyles as m } from "../../react-base/src/components/Input/Input.utils.js";
+import * as w from "../../react-base/src/components/Checkbox/Checkbox.consts.js";
+import { getStyles as S } from "../../react-base/src/components/Checkbox/Checkbox.utils.js";
+import { FabricsVariables as s } from "acinguiux-ds-fabrics";
+import { getLabelTypographySize as u } from "../../react-base/src/utils/sizesUtils.js";
+import { Sizes as f } from "../../react-base/src/consts/index.js";
+const { consts: e } = w, r = p.div`
+  position: relative;
+  pointer-events: none;
 
   svg {
-    ${k};
+    width: 100%;
+    height: 100%;
+    opacity: 0;
   }
-`, y = f.input`
-  ${$};
-`, L = f.span`
-  ${({ $size: t, theme: e }) => e.typography("label", F(t))};
-`, m = (t = !1, e = !1, r = !1, a = !1) => t ? "invalid" : !e || !e && r || a ? "normal" : "none", V = f.label`
-  ${({ $size: t, $checked: e, $disabled: r, $invalid: a, $indeterminate: p, $mirrored: S, $multiline: c, theme: g }) => {
-  const i = (u = l.States.Resting, v = !1) => C(g, u, r, a, e ?? v, p);
-  return s`
+`, n = p.input`
+  position: absolute;
+  opacity: 0;
+`, k = p.label`
+  ${({ $size: t, theme: a }) => a.typography("label", u(t))};
+`, j = p.div`
+  ${({ $size: t, $checked: a, $disabled: c, $invalid: l, $indeterminate: d, $mirrored: $, $multiline: h, theme: g }) => {
+  const i = (v = s.States.Resting, x = !1) => S(g, v, c, l, a ?? x, d);
+  return o`
       position: relative;
       width: fit-content;
       display: flex;
-      flex-direction: ${S ? "row-reverse" : "row"};
-      align-items: ${c ? "flex-start" : "center"};
-      gap: ${o[t].labelSpacing}px;
-      cursor: ${r ? "default" : "pointer"};
+      flex-direction: ${$ ? "row-reverse" : "row"};
+      align-items: ${h ? "flex-start" : "center"};
+      gap: ${e[t].labelSpacing}px;
 
-      ${!c && s`
-        max-width: 100%;
+      ${!h && o`
         min-width: 0;
       `};
 
-      ${L} {
-        ${w(g, r)};
-        ${c ? s`
+      ${k} {
+        ${y(g, c)};
+        ${h ? o`
               white-space: pre-line;
 
-              ${[`${x.Large}`, `${x.Medium}`].includes(t) && s`
+              ${[`${f.Large}`, `${f.Medium}`].includes(t) && o`
                 padding-top: 2px;
               `};
-            ` : s`
+            ` : o`
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
@@ -50,81 +51,89 @@ const n = f.div`
       }
 
       ${n} {
+        width: ${e[t].width}px;
+        height: ${e[t].height}px;
+      }
+
+      ${r} {
         display: flex;
         align-items: center;
         justify-content: center;
-        min-width: ${o[t].width}px;
-        width: ${o[t].width}px;
-        height: ${o[t].height}px;
-        ${h(
-    t,
-    m(a, e, r, p),
-    !1,
-    o[t].borderRadius
-  )};
+        min-width: ${e[t].width}px;
+        width: ${e[t].width}px;
+        height: ${e[t].height}px;
+        ${m(t, l ? "invalid" : "normal", !1, e[t].borderRadius)};
+        transition:
+          background-color 200ms,
+          border 200ms,
+          color 200ms;
 
         ${i()};
 
-        ${(p ?? e) && s`
+        ${r} {
+          svg {
+            transition:
+              opacity 200ms,
+              transform 200ms;
+          }
+        }
+
+        ${(d ?? a) && o`
           svg {
             display: inline-flex;
           }
         `}
       }
 
-      ${!p && !r && s`
+      ${!c && o`
         &:hover {
-          ${n} {
-            ${i(l.States.Hover)};
+          ${r} {
+            ${i(s.States.Hover)};
             svg {
-              display: inline-flex;
+              opacity: 1;
             }
           }
         }
 
         &:active {
-          ${n} {
-            ${i(l.States.Press)};
+          ${r} {
+            ${i(s.States.Press)};
             svg {
-              display: inline-flex;
-              width: ${o[t].width - 4}px;
-              height: ${o[t].height - 4}px;
+              opacity: 1;
+              transform: scale(0.85);
             }
           }
         }
       `};
 
-      ${y}:checked ~ ${n} {
-        ${i(l.States.Resting, !0)};
-        ${h(
-    t,
-    m(a, e, r, p),
-    !1,
-    o[t].borderRadius
-  )};
+      ${n}[aria-checked="mixed"] ~ ${r},
+      ${n}:checked ~ ${r} {
+        ${i(s.States.Resting, !0)};
+        ${m(t, l ? "invalid" : "normal", !1, e[t].borderRadius)};
         svg {
+          opacity: 1;
           display: inline-flex;
         }
 
         &:hover {
-          ${i(l.States.Hover, !0)};
+          ${i(s.States.Hover, !0)};
         }
 
         &:active {
-          ${i(l.States.Press, !0)};
+          ${i(s.States.Press, !0)};
         }
       }
 
-      ${y}:focus-visible ~ ${n} {
-        ${d(g)};
+      ${n}:focus-visible ~ ${r} {
+        ${b(g)};
       }
     `;
 }}
 `;
 export {
-  y as Checkbox,
-  L as CheckboxLabel,
-  V as CheckboxWrapper,
-  n as FakeCheckbox
+  n as Checkbox,
+  r as CheckboxIcon,
+  k as CheckboxLabel,
+  j as CheckboxWrapper
 };
 //# sourceMappingURL=Checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sources":["../../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { getLabelFontStyles, getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { InputUtils } from 'acinguiux-ds-react-base/components/Input';\nimport { CheckboxConsts, CheckboxStyles, CheckboxUtils } from 'acinguiux-ds-react-base/components/Checkbox';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport type { ICheckboxProps } from './Checkbox.types';\n\ntype WrapperPropsKeys = 'checked' | 'disabled' | 'invalid' | 'indeterminate' | 'multiline' | 'mirrored';\ntype WrapperProps = Required<PickTransient<ICheckboxProps, 'size'>> & PickTransient<ICheckboxProps, WrapperPropsKeys>;\n\nconst FakeCheckbox = styled.div`\n  ${CheckboxStyles.FakeCheckboxStyles};\n\n  svg {\n    ${CheckboxStyles.FakeCheckboxIconStyles};\n  }\n`;\n\nconst Checkbox = styled.input`\n  ${CheckboxStyles.CheckboxStyles};\n`;\n\nconst CheckboxLabel = styled.span<PickTransient<ICheckboxProps, 'size'>>`\n  ${({ $size, theme }) => theme.typography('label', getLabelTypographySize($size))};\n`;\n\nconst getBorderKind = (invalid = false, checked = false, disabled = false, indeterminate = false) => {\n  if (invalid) {\n    return 'invalid';\n  }\n\n  if (!checked || (!checked && disabled) || indeterminate) {\n    return 'normal';\n  }\n\n  return 'none';\n};\n\nconst CheckboxWrapper = styled.label<WrapperProps>`\n  ${({ $size, $checked, $disabled, $invalid, $indeterminate, $mirrored, $multiline, theme }) => {\n    const getStyles = (state: FabricsVariables.StateType = FabricsVariables.States.Resting, checked = false) =>\n      CheckboxUtils.getStyles(theme, state, $disabled, $invalid, $checked ?? checked, $indeterminate);\n\n    return css`\n      position: relative;\n      width: fit-content;\n      display: flex;\n      flex-direction: ${$mirrored ? 'row-reverse' : 'row'};\n      align-items: ${$multiline ? 'flex-start' : 'center'};\n      gap: ${CheckboxConsts.consts[$size].labelSpacing}px;\n      cursor: ${$disabled ? 'default' : 'pointer'};\n\n      ${!$multiline &&\n      css`\n        max-width: 100%;\n        min-width: 0;\n      `};\n\n      ${CheckboxLabel} {\n        ${getLabelFontStyles(theme, $disabled)};\n        ${!$multiline\n          ? css`\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n            `\n          : css`\n              white-space: pre-line;\n\n              ${[`${Sizes.Large}`, `${Sizes.Medium}`].includes($size) &&\n              css`\n                padding-top: 2px;\n              `};\n            `};\n      }\n\n      ${FakeCheckbox} {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-width: ${CheckboxConsts.consts[$size].width}px;\n        width: ${CheckboxConsts.consts[$size].width}px;\n        height: ${CheckboxConsts.consts[$size].height}px;\n        ${InputUtils.getInputBorderStyles(\n          $size,\n          getBorderKind($invalid, $checked, $disabled, $indeterminate),\n          false,\n          CheckboxConsts.consts[$size].borderRadius,\n        )};\n\n        ${getStyles()};\n\n        ${($indeterminate ?? $checked) &&\n        css`\n          svg {\n            display: inline-flex;\n          }\n        `}\n      }\n\n      ${!$indeterminate &&\n      !$disabled &&\n      css`\n        &:hover {\n          ${FakeCheckbox} {\n            ${getStyles(FabricsVariables.States.Hover)};\n            svg {\n              display: inline-flex;\n            }\n          }\n        }\n\n        &:active {\n          ${FakeCheckbox} {\n            ${getStyles(FabricsVariables.States.Press)};\n            svg {\n              display: inline-flex;\n              width: ${CheckboxConsts.consts[$size].width - 4}px;\n              height: ${CheckboxConsts.consts[$size].height - 4}px;\n            }\n          }\n        }\n      `};\n\n      ${Checkbox}:checked ~ ${FakeCheckbox} {\n        ${getStyles(FabricsVariables.States.Resting, true)};\n        ${InputUtils.getInputBorderStyles(\n          $size,\n          getBorderKind($invalid, $checked, $disabled, $indeterminate),\n          false,\n          CheckboxConsts.consts[$size].borderRadius,\n        )};\n        svg {\n          display: inline-flex;\n        }\n\n        &:hover {\n          ${getStyles(FabricsVariables.States.Hover, true)};\n        }\n\n        &:active {\n          ${getStyles(FabricsVariables.States.Press, true)};\n        }\n      }\n\n      ${Checkbox}:focus-visible ~ ${FakeCheckbox} {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }}\n`;\n\nexport { CheckboxWrapper, Checkbox, FakeCheckbox, CheckboxLabel };\n"],"names":["FakeCheckbox","styled","CheckboxStyles.FakeCheckboxStyles","CheckboxStyles.FakeCheckboxIconStyles","Checkbox","CheckboxStyles.CheckboxStyles","CheckboxLabel","$size","theme","getLabelTypographySize","getBorderKind","invalid","checked","disabled","indeterminate","CheckboxWrapper","$checked","$disabled","$invalid","$indeterminate","$mirrored","$multiline","getStyles","state","FabricsVariables","CheckboxUtils.getStyles","css","CheckboxConsts.consts","getLabelFontStyles","Sizes","InputUtils.getInputBorderStyles","getFocusStyles"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAeC,EAAO;AAAA,IACxBC,CAAiC;AAAA;AAAA;AAAA,MAG/BC,CAAqC;AAAA;AAAA,GAIrCC,IAAWH,EAAO;AAAA,IACpBI,CAA6B;AAAA,GAG3BC,IAAgBL,EAAO;AAAA,IACzB,CAAC,EAAE,OAAAM,GAAO,OAAAC,QAAYA,EAAM,WAAW,SAASC,EAAuBF,CAAK,CAAC,CAAC;AAAA,GAG5EG,IAAgB,CAACC,IAAU,IAAOC,IAAU,IAAOC,IAAW,IAAOC,IAAgB,OACrFH,IACK,YAGL,CAACC,KAAY,CAACA,KAAWC,KAAaC,IACjC,WAGF,QAGHC,IAAkBd,EAAO;AAAA,IAC3B,CAAC,EAAE,OAAAM,GAAO,UAAAS,GAAU,WAAAC,GAAW,UAAAC,GAAU,gBAAAC,GAAgB,WAAAC,GAAW,YAAAC,GAAY,OAAAb,QAAY;AAC5F,QAAMc,IAAY,CAACC,IAAoCC,EAAiB,OAAO,SAASZ,IAAU,OAChGa,EAAwBjB,GAAOe,GAAON,GAAWC,GAAUF,KAAYJ,GAASO,CAAc;AAEhG,SAAOO;AAAA;AAAA;AAAA;AAAA,wBAIaN,IAAY,gBAAgB,KAAK;AAAA,qBACpCC,IAAa,eAAe,QAAQ;AAAA,aAC5CM,EAAsBpB,CAAK,EAAE,YAAY;AAAA,gBACtCU,IAAY,YAAY,SAAS;AAAA;AAAA,QAEzC,CAACI,KACHK;AAAA;AAAA;AAAA,OAGC;AAAA;AAAA,QAECpB,CAAa;AAAA,UACXsB,EAAmBpB,GAAOS,CAAS,CAAC;AAAA,UACnCI,IAMCK;AAAA;AAAA;AAAA,gBAGI,CAAC,GAAGG,EAAM,KAAK,IAAI,GAAGA,EAAM,MAAM,EAAE,EAAE,SAAStB,CAAK,KACtDmB;AAAA;AAAA,eAEC;AAAA,gBAXHA;AAAA;AAAA;AAAA;AAAA,aAYC;AAAA;AAAA;AAAA,QAGL1B,CAAY;AAAA;AAAA;AAAA;AAAA,qBAIC2B,EAAsBpB,CAAK,EAAE,KAAK;AAAA,iBACtCoB,EAAsBpB,CAAK,EAAE,KAAK;AAAA,kBACjCoB,EAAsBpB,CAAK,EAAE,MAAM;AAAA,UAC3CuB;AAAAA,IACAvB;AAAA,IACAG,EAAcQ,GAAUF,GAAUC,GAAWE,CAAc;AAAA,IAC3D;AAAA,IACAQ,EAAsBpB,CAAK,EAAE;AAAA,EAAA,CAC9B;AAAA;AAAA,UAECe,GAAW;AAAA;AAAA,WAEVH,KAAkBH,MACrBU;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA,QAGD,CAACP,KACH,CAACF,KACDS;AAAA;AAAA,YAEM1B,CAAY;AAAA,cACVsB,EAAUE,EAAiB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ1CxB,CAAY;AAAA,cACVsB,EAAUE,EAAiB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,uBAG/BG,EAAsBpB,CAAK,EAAE,QAAQ,CAAC;AAAA,wBACrCoB,EAAsBpB,CAAK,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,OAIxD;AAAA;AAAA,QAECH,CAAQ,cAAcJ,CAAY;AAAA,UAChCsB,EAAUE,EAAiB,OAAO,SAAS,EAAI,CAAC;AAAA,UAChDM;AAAAA,IACAvB;AAAA,IACAG,EAAcQ,GAAUF,GAAUC,GAAWE,CAAc;AAAA,IAC3D;AAAA,IACAQ,EAAsBpB,CAAK,EAAE;AAAA,EAAA,CAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMGe,EAAUE,EAAiB,OAAO,OAAO,EAAI,CAAC;AAAA;AAAA;AAAA;AAAA,YAI9CF,EAAUE,EAAiB,OAAO,OAAO,EAAI,CAAC;AAAA;AAAA;AAAA;AAAA,QAIlDpB,CAAQ,oBAAoBJ,CAAY;AAAA,UACtC+B,EAAevB,CAAK,CAAC;AAAA;AAAA;AAG7B,CAAC;AAAA;"}
+{"version":3,"file":"Checkbox.styles.js","sources":["../../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { getLabelFontStyles, getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { InputUtils } from 'acinguiux-ds-react-base/components/Input';\nimport { CheckboxConsts, CheckboxUtils } from 'acinguiux-ds-react-base/components/Checkbox';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport type { ICheckboxProps } from './Checkbox.types';\n\ntype WrapperPropsKeys = 'checked' | 'disabled' | 'invalid' | 'indeterminate' | 'multiline' | 'mirrored';\ntype WrapperProps = Required<PickTransient<ICheckboxProps, 'size'>> & PickTransient<ICheckboxProps, WrapperPropsKeys>;\n\nconst { consts } = CheckboxConsts;\n\nconst CheckboxIcon = styled.div`\n  position: relative;\n  pointer-events: none;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n`;\n\nconst Checkbox = styled.input`\n  position: absolute;\n  opacity: 0;\n`;\n\nconst CheckboxLabel = styled.label<PickTransient<ICheckboxProps, 'size'>>`\n  ${({ $size, theme }) => theme.typography('label', getLabelTypographySize($size))};\n`;\n\nconst CheckboxWrapper = styled.div<WrapperProps>`\n  ${({ $size, $checked, $disabled, $invalid, $indeterminate, $mirrored, $multiline, theme }) => {\n    const getStyles = (state: FabricsVariables.StateType = FabricsVariables.States.Resting, checked = false) =>\n      CheckboxUtils.getStyles(theme, state, $disabled, $invalid, $checked ?? checked, $indeterminate);\n\n    return css`\n      position: relative;\n      width: fit-content;\n      display: flex;\n      flex-direction: ${$mirrored ? 'row-reverse' : 'row'};\n      align-items: ${$multiline ? 'flex-start' : 'center'};\n      gap: ${consts[$size].labelSpacing}px;\n\n      ${!$multiline &&\n      css`\n        min-width: 0;\n      `};\n\n      ${CheckboxLabel} {\n        ${getLabelFontStyles(theme, $disabled)};\n        ${!$multiline\n          ? css`\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n            `\n          : css`\n              white-space: pre-line;\n\n              ${[`${Sizes.Large}`, `${Sizes.Medium}`].includes($size) &&\n              css`\n                padding-top: 2px;\n              `};\n            `};\n      }\n\n      ${Checkbox} {\n        width: ${consts[$size].width}px;\n        height: ${consts[$size].height}px;\n      }\n\n      ${CheckboxIcon} {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-width: ${consts[$size].width}px;\n        width: ${consts[$size].width}px;\n        height: ${consts[$size].height}px;\n        ${InputUtils.getInputBorderStyles($size, $invalid ? 'invalid' : 'normal', false, consts[$size].borderRadius)};\n        transition:\n          background-color 200ms,\n          border 200ms,\n          color 200ms;\n\n        ${getStyles()};\n\n        ${CheckboxIcon} {\n          svg {\n            transition:\n              opacity 200ms,\n              transform 200ms;\n          }\n        }\n\n        ${($indeterminate ?? $checked) &&\n        css`\n          svg {\n            display: inline-flex;\n          }\n        `}\n      }\n\n      ${!$disabled &&\n      css`\n        &:hover {\n          ${CheckboxIcon} {\n            ${getStyles(FabricsVariables.States.Hover)};\n            svg {\n              opacity: 1;\n            }\n          }\n        }\n\n        &:active {\n          ${CheckboxIcon} {\n            ${getStyles(FabricsVariables.States.Press)};\n            svg {\n              opacity: 1;\n              transform: scale(0.85);\n            }\n          }\n        }\n      `};\n\n      ${Checkbox}[aria-checked=\"mixed\"] ~ ${CheckboxIcon},\n      ${Checkbox}:checked ~ ${CheckboxIcon} {\n        ${getStyles(FabricsVariables.States.Resting, true)};\n        ${InputUtils.getInputBorderStyles($size, $invalid ? 'invalid' : 'normal', false, consts[$size].borderRadius)};\n        svg {\n          opacity: 1;\n          display: inline-flex;\n        }\n\n        &:hover {\n          ${getStyles(FabricsVariables.States.Hover, true)};\n        }\n\n        &:active {\n          ${getStyles(FabricsVariables.States.Press, true)};\n        }\n      }\n\n      ${Checkbox}:focus-visible ~ ${CheckboxIcon} {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }}\n`;\n\nexport { CheckboxWrapper, Checkbox, CheckboxIcon, CheckboxLabel };\n"],"names":["consts","CheckboxConsts","CheckboxIcon","styled","Checkbox","CheckboxLabel","$size","theme","getLabelTypographySize","CheckboxWrapper","$checked","$disabled","$invalid","$indeterminate","$mirrored","$multiline","getStyles","state","FabricsVariables","checked","CheckboxUtils.getStyles","css","getLabelFontStyles","Sizes","InputUtils.getInputBorderStyles","getFocusStyles"],"mappings":";;;;;;;;AAcA,MAAM,EAAE,QAAAA,MAAWC,GAEbC,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWtBC,IAAWD,EAAO;AAAA;AAAA;AAAA,GAKlBE,IAAgBF,EAAO;AAAA,IACzB,CAAC,EAAE,OAAAG,GAAO,OAAAC,QAAYA,EAAM,WAAW,SAASC,EAAuBF,CAAK,CAAC,CAAC;AAAA,GAG5EG,IAAkBN,EAAO;AAAA,IAC3B,CAAC,EAAE,OAAAG,GAAO,UAAAI,GAAU,WAAAC,GAAW,UAAAC,GAAU,gBAAAC,GAAgB,WAAAC,GAAW,YAAAC,GAAY,OAAAR,QAAY;AAC5F,QAAMS,IAAY,CAACC,IAAoCC,EAAiB,OAAO,SAASC,IAAU,OAChGC,EAAwBb,GAAOU,GAAON,GAAWC,GAAUF,KAAYS,GAASN,CAAc;AAEhG,SAAOQ;AAAA;AAAA;AAAA;AAAA,wBAIaP,IAAY,gBAAgB,KAAK;AAAA,qBACpCC,IAAa,eAAe,QAAQ;AAAA,aAC5Cf,EAAOM,CAAK,EAAE,YAAY;AAAA;AAAA,QAE/B,CAACS,KACHM;AAAA;AAAA,OAEC;AAAA;AAAA,QAEChB,CAAa;AAAA,UACXiB,EAAmBf,GAAOI,CAAS,CAAC;AAAA,UACnCI,IAMCM;AAAA;AAAA;AAAA,gBAGI,CAAC,GAAGE,EAAM,KAAK,IAAI,GAAGA,EAAM,MAAM,EAAE,EAAE,SAASjB,CAAK,KACtDe;AAAA;AAAA,eAEC;AAAA,gBAXHA;AAAA;AAAA;AAAA;AAAA,aAYC;AAAA;AAAA;AAAA,QAGLjB,CAAQ;AAAA,iBACCJ,EAAOM,CAAK,EAAE,KAAK;AAAA,kBAClBN,EAAOM,CAAK,EAAE,MAAM;AAAA;AAAA;AAAA,QAG9BJ,CAAY;AAAA;AAAA;AAAA;AAAA,qBAICF,EAAOM,CAAK,EAAE,KAAK;AAAA,iBACvBN,EAAOM,CAAK,EAAE,KAAK;AAAA,kBAClBN,EAAOM,CAAK,EAAE,MAAM;AAAA,UAC5BkB,EAAgClB,GAAOM,IAAW,YAAY,UAAU,IAAOZ,EAAOM,CAAK,EAAE,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM1GU,GAAW;AAAA;AAAA,UAEXd,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQXW,KAAkBH,MACrBW;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA,QAGD,CAACV,KACHU;AAAA;AAAA,YAEMnB,CAAY;AAAA,cACVc,EAAUE,EAAiB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ1ChB,CAAY;AAAA,cACVc,EAAUE,EAAiB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAO/C;AAAA;AAAA,QAECd,CAAQ,4BAA4BF,CAAY;AAAA,QAChDE,CAAQ,cAAcF,CAAY;AAAA,UAChCc,EAAUE,EAAiB,OAAO,SAAS,EAAI,CAAC;AAAA,UAChDM,EAAgClB,GAAOM,IAAW,YAAY,UAAU,IAAOZ,EAAOM,CAAK,EAAE,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxGU,EAAUE,EAAiB,OAAO,OAAO,EAAI,CAAC;AAAA;AAAA;AAAA;AAAA,YAI9CF,EAAUE,EAAiB,OAAO,OAAO,EAAI,CAAC;AAAA;AAAA;AAAA;AAAA,QAIlDd,CAAQ,oBAAoBF,CAAY;AAAA,UACtCuB,EAAelB,CAAK,CAAC;AAAA;AAAA;AAG7B,CAAC;AAAA;"}