acinguiux-ds-react-framework 0.1.16 → 0.1.19

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

@@ -1,16 +1,16 @@
-import { css as d, styled as l } from "styled-components";
-import { Directions as n, Sizes as c } from "../../react-base/src/consts/index.js";
+import { styled as l, css as d } from "styled-components";
+import { Directions as s, Sizes as g } from "../../react-base/src/consts/index.js";
 import { consts as o } from "../../react-base/src/components/Card/Card.consts.js";
 import { Variables as p } from "../../react-base/src/theme/types/layer.js";
-import { getFocusStyles as g } from "../../react-base/src/utils/stylesUtils.js";
-import { getParagraphTypographySize as f } from "../../react-base/src/utils/sizesUtils.js";
-import { CardBar as x } from "./components/CardBar/CardBar.styles.js";
-const m = l.div`
-  ${({ $size: r, $outlined: i, $direction: e, $isClickable: s, theme: a }) => {
-  const t = a.layer({ foundation: "surface" });
-  return d`
+import { getFocusStyles as f } from "../../react-base/src/utils/stylesUtils.js";
+import { getParagraphTypographySize as x } from "../../react-base/src/utils/sizesUtils.js";
+import { CardBar as $ } from "./components/CardBar/CardBar.styles.js";
+const m = l.div(
+  ({ $size: r, $outlined: i, $direction: e, $isClickable: n, theme: a }) => {
+    const t = a.layer({ foundation: "surface" });
+    return d`
       display: flex;
-      flex-direction: ${e === n.Vertical ? "column" : "row"};
+      flex-direction: ${e === s.Vertical ? "column" : "row"};
       width: 100%;
       background-color: ${t[p.BackgroundFoundation]};
       ${i && d`
@@ -19,7 +19,7 @@ const m = l.div`
       transition: filter 0.3s ease;
       border-radius: ${o[r].borderRadius}px;
 
-      ${s && d`
+      ${n && d`
         text-decoration: none;
         color: inherit;
         cursor: pointer;
@@ -34,87 +34,91 @@ const m = l.div`
       `}
 
       &:focus-visible {
-        ${g(a)};
+        ${f(a)};
       }
     `;
-}};
-`, S = l(m)`
-  ${({ $size: r = `${c.Medium}`, $backgroundImage: i, $interactive: e }) => d`
+  }
+), b = l.div`
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s;
+`, S = l(m)(
+  ({ $size: r = `${g.Medium}`, $backgroundImage: i, $interactive: e, $backgroundPosition: n = "center", theme: a }) => d`
     position: relative;
     align-items: flex-end;
     height: 100%;
     padding: ${o[r].padding}px;
+    border-radius: ${o[r].borderRadius}px;
+    background-color: ${a.layer()[p.BackgroundFoundation]};
+    overflow: hidden;
 
-    & > ${x} {
+    & > ${$} {
       padding: ${o[r].innerCardPadding}px;
       position: relative;
     }
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: ${o[r].borderRadius}px;
-      background-image: url(${i});
-      background-size: cover;
-      transition: all 0.5s;
+    & > ${b} {
+      ${i && d`
+        background-image: url(${i});
+        background-position: ${n};
+        background-size: cover;
+      `}
     }
 
     ${e && d`
-      &:hover::before {
+      &:hover > ${b} {
         transform: scale(1.05);
       }
     `}
-  `}
-`, B = l.div`
-  ${({ $size: r, $padding: i, $bgColor: e, $withHeader: s, $withFooter: a, $direction: t, theme: u }) => {
-  const b = u.layer({ foundation: e ? "section" : "surface" });
+  `
+), C = l.div(({ $size: r, $padding: i, $bgColor: e, $withHeader: n, $withFooter: a, $direction: t, theme: u }) => {
+  const c = u.layer({ foundation: e ? "section" : "surface" });
   return d`
-      ${u.typography("paragraph", f(r))};
-      display: grid;
-      flex-grow: 1;
-      color: ${b[p.TextOnFoundationStrong]};
-      background-color: ${b[p.BackgroundFoundation]};
+    ${u.typography("paragraph", x(r))};
+    display: grid;
+    flex-grow: 1;
+    color: ${c[p.TextOnFoundationStrong]};
+    background-color: ${c[p.BackgroundFoundation]};
 
-      ${i && d`
-        padding: ${o[r].padding}px;
-      `}
+    ${i && d`
+      padding: ${o[r].padding}px;
+    `}
 
-      ${t === n.Horizontal && !s && d`
-        border-top-left-radius: ${o[r].borderRadius}px;
-        border-bottom-left-radius: ${o[r].borderRadius}px;
-      `}
+    ${t === s.Horizontal && !n && d`
+      border-top-left-radius: ${o[r].borderRadius}px;
+      border-bottom-left-radius: ${o[r].borderRadius}px;
+    `}
       
-      ${t === n.Horizontal && !a && d`
-        border-top-right-radius: ${o[r].borderRadius}px;
-        border-bottom-right-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Horizontal && !a && d`
+      border-top-right-radius: ${o[r].borderRadius}px;
+      border-bottom-right-radius: ${o[r].borderRadius}px;
+    `}
 
-      ${t === n.Vertical && !s && d`
-        border-top-left-radius: ${o[r].borderRadius}px;
-        border-top-right-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Vertical && !n && d`
+      border-top-left-radius: ${o[r].borderRadius}px;
+      border-top-right-radius: ${o[r].borderRadius}px;
+    `}
 
-      ${t === n.Vertical && !a && d`
-        border-bottom-right-radius: ${o[r].borderRadius}px;
-        border-bottom-left-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Vertical && !a && d`
+      border-bottom-right-radius: ${o[r].borderRadius}px;
+      border-bottom-left-radius: ${o[r].borderRadius}px;
+    `}
 
       > img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    `;
-}};
-`;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  `;
+});
 export {
   m as Card,
-  B as CardBody,
-  S as InsetCard
+  C as CardBody,
+  S as InsetCard,
+  b as InsetCardBody
 };
 //# sourceMappingURL=Card.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { getParagraphTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ICardProps, IInsetCardProps } from './Card.types';\nimport { CardBar } from './components/CardBar/CardBar.styles';\n\ntype CardStylePropKeys = 'outlined' | 'direction' | 'isClickable' | 'size';\n\nconst Card = styled.div<Required<PickTransient<ICardProps, CardStylePropKeys>>>`\n  ${({ $size, $outlined, $direction, $isClickable, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      flex-direction: ${$direction === Directions.Vertical ? 'column' : 'row'};\n      width: 100%;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      ${$outlined &&\n      css`\n        border: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      `};\n      transition: filter 0.3s ease;\n      border-radius: ${CardConsts.consts[$size].borderRadius}px;\n\n      ${$isClickable &&\n      css`\n        text-decoration: none;\n        color: inherit;\n        cursor: pointer;\n\n        &:hover {\n          filter: ${theme.dropShadows.low2};\n        }\n\n        &:active {\n          filter: ${theme.dropShadows.low1};\n        }\n      `}\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }};\n`;\n\nconst InsetCard = styled(Card)<PickTransient<IInsetCardProps, 'backgroundImage' | 'interactive'>>`\n  ${({ $size = `${Sizes.Medium}`, $backgroundImage, $interactive }) => css`\n    position: relative;\n    align-items: flex-end;\n    height: 100%;\n    padding: ${CardConsts.consts[$size].padding}px;\n\n    & > ${CardBar} {\n      padding: ${CardConsts.consts[$size].innerCardPadding}px;\n      position: relative;\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: ${CardConsts.consts[$size].borderRadius}px;\n      background-image: url(${$backgroundImage});\n      background-size: cover;\n      transition: all 0.5s;\n    }\n\n    ${$interactive &&\n    css`\n      &:hover::before {\n        transform: scale(1.05);\n      }\n    `}\n  `}\n`;\n\ntype CardBodyStylePropKeys = 'padding' | 'bgColor' | 'direction' | 'borders';\n\nconst CardBody = styled.div<\n  Required<PickTransient<ICardProps, 'size'>> &\n    PickTransient<ICardProps, CardBodyStylePropKeys> & {\n      $withHeader?: boolean;\n      $withFooter?: boolean;\n    }\n>`\n  ${({ $size, $padding, $bgColor, $withHeader, $withFooter, $direction, theme }) => {\n    const layer = theme.layer({ foundation: $bgColor ? 'section' : 'surface' });\n\n    return css`\n      ${theme.typography('paragraph', getParagraphTypographySize($size))};\n      display: grid;\n      flex-grow: 1;\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      background-color: ${layer[Variables.BackgroundFoundation]};\n\n      ${$padding &&\n      css`\n        padding: ${CardConsts.consts[$size].padding}px;\n      `}\n\n      ${$direction === Directions.Horizontal &&\n      !$withHeader &&\n      css`\n        border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n        border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      `}\n      \n      ${$direction === Directions.Horizontal &&\n      !$withFooter &&\n      css`\n        border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n        border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      `}\n\n      ${$direction === Directions.Vertical &&\n      !$withHeader &&\n      css`\n        border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n        border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      `}\n\n      ${$direction === Directions.Vertical &&\n      !$withFooter &&\n      css`\n        border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n        border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      `}\n\n      > img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n    `;\n  }};\n`;\n\nexport { Card, InsetCard, CardBody };\n"],"names":["Card","styled","$size","$outlined","$direction","$isClickable","theme","layer","css","Directions","Variables","CardConsts.consts","getFocusStyles","InsetCard","Sizes","$backgroundImage","$interactive","CardBar","CardBody","$padding","$bgColor","$withHeader","$withFooter","getParagraphTypographySize"],"mappings":";;;;;;;AAaA,MAAMA,IAAOC,EAAO;AAAA,IAChB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,YAAAC,GAAY,cAAAC,GAAc,OAAAC,QAAY;AAC3D,QAAMC,IAAQD,EAAM,MAAM,EAAE,YAAY,WAAW;AAEnD,SAAOE;AAAA;AAAA,wBAEaJ,MAAeK,EAAW,WAAW,WAAW,KAAK;AAAA;AAAA,0BAEnDF,EAAMG,EAAU,oBAAoB,CAAC;AAAA,QACvDP,KACFK;AAAA,4BACsBD,EAAMG,EAAU,wBAAwB,CAAC;AAAA,OAC9D;AAAA;AAAA,uBAEgBC,EAAkBT,CAAK,EAAE,YAAY;AAAA;AAAA,QAEpDG,KACFG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMcF,EAAM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA,oBAItBA,EAAM,YAAY,IAAI;AAAA;AAAA,OAEnC;AAAA;AAAA;AAAA,UAGGM,EAAeN,CAAK,CAAC;AAAA;AAAA;AAG7B,CAAC;AAAA,GAGGO,IAAYZ,EAAOD,CAAI;AAAA,IACzB,CAAC,EAAE,OAAAE,IAAQ,GAAGY,EAAM,MAAM,IAAI,kBAAAC,GAAkB,cAAAC,EAAA,MAAmBR;AAAA;AAAA;AAAA;AAAA,eAIxDG,EAAkBT,CAAK,EAAE,OAAO;AAAA;AAAA,UAErCe,CAAO;AAAA,iBACAN,EAAkBT,CAAK,EAAE,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAYnCS,EAAkBT,CAAK,EAAE,YAAY;AAAA,8BAC9Ba,CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKxCC,KACFR;AAAA;AAAA;AAAA;AAAA,KAIC;AAAA,GACF;AAAA,GAKGU,IAAWjB,EAAO;AAAA,IAOpB,CAAC,EAAE,OAAAC,GAAO,UAAAiB,GAAU,UAAAC,GAAU,aAAAC,GAAa,aAAAC,GAAa,YAAAlB,GAAY,OAAAE,QAAY;AAChF,QAAMC,IAAQD,EAAM,MAAM,EAAE,YAAYc,IAAW,YAAY,WAAW;AAE1E,SAAOZ;AAAA,QACHF,EAAM,WAAW,aAAaiB,EAA2BrB,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA,eAGzDK,EAAMG,EAAU,sBAAsB,CAAC;AAAA,0BAC5BH,EAAMG,EAAU,oBAAoB,CAAC;AAAA;AAAA,QAEvDS,KACFX;AAAA,mBACaG,EAAkBT,CAAK,EAAE,OAAO;AAAA,OAC5C;AAAA;AAAA,QAECE,MAAeK,EAAW,cAC5B,CAACY,KACDb;AAAA,kCAC4BG,EAAkBT,CAAK,EAAE,YAAY;AAAA,qCAClCS,EAAkBT,CAAK,EAAE,YAAY;AAAA,OACnE;AAAA;AAAA,QAECE,MAAeK,EAAW,cAC5B,CAACa,KACDd;AAAA,mCAC6BG,EAAkBT,CAAK,EAAE,YAAY;AAAA,sCAClCS,EAAkBT,CAAK,EAAE,YAAY;AAAA,OACpE;AAAA;AAAA,QAECE,MAAeK,EAAW,YAC5B,CAACY,KACDb;AAAA,kCAC4BG,EAAkBT,CAAK,EAAE,YAAY;AAAA,mCACpCS,EAAkBT,CAAK,EAAE,YAAY;AAAA,OACjE;AAAA;AAAA,QAECE,MAAeK,EAAW,YAC5B,CAACa,KACDd;AAAA,sCACgCG,EAAkBT,CAAK,EAAE,YAAY;AAAA,qCACtCS,EAAkBT,CAAK,EAAE,YAAY;AAAA,OACnE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQL,CAAC;AAAA;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { CardConsts } from 'acinguiux-ds-react-base/components/Card';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { getParagraphTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ICardProps, IInsetCardProps } from './Card.types';\nimport { CardBar } from './components/CardBar/CardBar.styles';\n\ntype CardStylePropKeys = 'outlined' | 'direction' | 'isClickable' | 'size';\n\nconst Card = styled.div<Required<PickTransient<ICardProps, CardStylePropKeys>>>(\n  ({ $size, $outlined, $direction, $isClickable, theme }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      display: flex;\n      flex-direction: ${$direction === Directions.Vertical ? 'column' : 'row'};\n      width: 100%;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      ${$outlined &&\n      css`\n        border: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      `};\n      transition: filter 0.3s ease;\n      border-radius: ${CardConsts.consts[$size].borderRadius}px;\n\n      ${$isClickable &&\n      css`\n        text-decoration: none;\n        color: inherit;\n        cursor: pointer;\n\n        &:hover {\n          filter: ${theme.dropShadows.low2};\n        }\n\n        &:active {\n          filter: ${theme.dropShadows.low1};\n        }\n      `}\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  },\n);\n\nconst InsetCardBody = styled.div`\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.5s;\n`;\n\nconst InsetCard = styled(Card)<\n  PickTransient<IInsetCardProps, 'backgroundImage' | 'backgroundPosition' | 'interactive'>\n>(\n  ({ $size = `${Sizes.Medium}`, $backgroundImage, $interactive, $backgroundPosition = 'center', theme }) => css`\n    position: relative;\n    align-items: flex-end;\n    height: 100%;\n    padding: ${CardConsts.consts[$size].padding}px;\n    border-radius: ${CardConsts.consts[$size].borderRadius}px;\n    background-color: ${theme.layer()[Variables.BackgroundFoundation]};\n    overflow: hidden;\n\n    & > ${CardBar} {\n      padding: ${CardConsts.consts[$size].innerCardPadding}px;\n      position: relative;\n    }\n\n    & > ${InsetCardBody} {\n      ${$backgroundImage &&\n      css`\n        background-image: url(${$backgroundImage});\n        background-position: ${$backgroundPosition};\n        background-size: cover;\n      `}\n    }\n\n    ${$interactive &&\n    css`\n      &:hover > ${InsetCardBody} {\n        transform: scale(1.05);\n      }\n    `}\n  `,\n);\n\ntype CardBodyStylePropKeys = 'padding' | 'bgColor' | 'direction' | 'borders';\n\nconst CardBody = styled.div<\n  Required<PickTransient<ICardProps, 'size'>> &\n    PickTransient<ICardProps, CardBodyStylePropKeys> & {\n      $withHeader?: boolean;\n      $withFooter?: boolean;\n    }\n>(({ $size, $padding, $bgColor, $withHeader, $withFooter, $direction, theme }) => {\n  const layer = theme.layer({ foundation: $bgColor ? 'section' : 'surface' });\n\n  return css`\n    ${theme.typography('paragraph', getParagraphTypographySize($size))};\n    display: grid;\n    flex-grow: 1;\n    color: ${layer[Variables.TextOnFoundationStrong]};\n    background-color: ${layer[Variables.BackgroundFoundation]};\n\n    ${$padding &&\n    css`\n      padding: ${CardConsts.consts[$size].padding}px;\n    `}\n\n    ${$direction === Directions.Horizontal &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n      \n      ${$direction === Directions.Horizontal &&\n    !$withFooter &&\n    css`\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withHeader &&\n    css`\n      border-top-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-top-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      ${$direction === Directions.Vertical &&\n    !$withFooter &&\n    css`\n      border-bottom-right-radius: ${CardConsts.consts[$size].borderRadius}px;\n      border-bottom-left-radius: ${CardConsts.consts[$size].borderRadius}px;\n    `}\n\n      > img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n  `;\n});\n\nexport { Card, InsetCard, InsetCardBody, CardBody };\n"],"names":["Card","styled","$size","$outlined","$direction","$isClickable","theme","layer","css","Directions","Variables","CardConsts.consts","getFocusStyles","InsetCardBody","InsetCard","Sizes","$backgroundImage","$interactive","$backgroundPosition","CardBar","CardBody","$padding","$bgColor","$withHeader","$withFooter","getParagraphTypographySize"],"mappings":"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"}

package/build/esm/components/Card/InsetCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InsetCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/InsetCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,SAAS,yHAyCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"InsetCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/InsetCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,SAAS,yHA6Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/esm/components/Card/InsetCard.js

@@ -1,47 +1,53 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import $ from "classnames";
-import { Directions as i, Sizes as C } from "../../react-base/src/consts/index.js";
-import { InsetCard as u } from "./Card.styles.js";
-import g from "./components/CardBar/CardBar.js";
-import { CARD_CLASS as I } from "../../react-base/src/consts/classes.js";
-const h = p(
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import g from "classnames";
+import { Directions as i, Sizes as I } from "../../react-base/src/consts/index.js";
+import { InsetCard as b, InsetCardBody as x } from "./Card.styles.js";
+import S from "./components/CardBar/CardBar.js";
+import { CARD_CLASS as j } from "../../react-base/src/consts/classes.js";
+const h = u(
   ({
     className: a,
-    size: r = `${C.Medium}`,
+    size: r = `${I.Medium}`,
     bar: o,
-    borders: S,
-    outlined: m = !1,
-    fullBar: s,
-    interactive: d,
-    onClick: e,
+    borders: k,
+    outlined: s = !1,
+    fullBar: d,
+    interactive: m,
+    onClick: t,
     isClickable: n,
     backgroundImage: f,
-    ...c
-  }, l) => /* @__PURE__ */ t(
-    u,
+    backgroundPosition: c,
+    children: l,
+    ...p
+  }, $) => /* @__PURE__ */ C(
+    b,
     {
-      ref: l,
-      className: $(I, a),
+      ref: $,
+      className: g(j, a),
       $size: r,
       $direction: i.Horizontal,
-      $outlined: m,
-      $isClickable: !!n || !!e,
-      $interactive: d,
-      onClick: e,
+      $outlined: s,
+      $isClickable: !!n || !!t,
+      $interactive: m,
+      onClick: t,
+      $backgroundPosition: c,
       $backgroundImage: f,
-      ...c,
-      children: !!o && /* @__PURE__ */ t(
-        g,
-        {
-          size: r,
-          bar: o,
-          fullBar: s,
-          padding: !0,
-          direction: i.Vertical,
-          type: "floatingFooter"
-        }
-      )
+      ...p,
+      children: [
+        /* @__PURE__ */ e(x, { children: l }),
+        !!o && /* @__PURE__ */ e(
+          S,
+          {
+            size: r,
+            bar: o,
+            fullBar: d,
+            padding: !0,
+            direction: i.Vertical,
+            type: "floatingFooter"
+          }
+        )
+      ]
     }
   )
 );

package/build/esm/components/Card/InsetCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsetCard.js","sources":["../../../../src/components/Card/InsetCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, CARD_CLASS, Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { IInsetCardProps } from './Card.types';\nimport * as Styled from './Card.styles';\nimport CardBar from './components/CardBar/CardBar';\n\nconst InsetCard = forwardRef<HTMLDivElement, IInsetCardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      bar,\n      borders,\n      outlined = false,\n      fullBar,\n      interactive,\n      onClick,\n      isClickable,\n      backgroundImage,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Styled.InsetCard\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={Directions.Horizontal}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      $interactive={interactive}\n      onClick={onClick}\n      $backgroundImage={backgroundImage}\n      {...rest}\n    >\n      {!!bar && (\n        <CardBar\n          size={size}\n          bar={bar}\n          fullBar={fullBar}\n          padding={true}\n          direction={Directions.Vertical}\n          type=\"floatingFooter\"\n        />\n      )}\n    </Styled.InsetCard>\n  ),\n);\n\nexport default InsetCard;\n"],"names":["InsetCard","forwardRef","className","size","Sizes","bar","borders","outlined","fullBar","interactive","onClick","isClickable","backgroundImage","rest","ref","jsx","Styled.InsetCard","classNames","CARD_CLASS","Directions","CardBar"],"mappings":";;;;;;;AASA,MAAMA,IAAYC;AAAA,EAChB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,KAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAWC,GAAYhB,CAAS;AAAA,MAC3C,OAAOC;AAAA,MACP,YAAYgB,EAAW;AAAA,MACvB,WAAWZ;AAAA,MACX,cAAc,CAAC,CAACI,KAAe,CAAC,CAACD;AAAA,MACjC,cAAcD;AAAA,MACd,SAAAC;AAAA,MACA,kBAAkBE;AAAA,MACjB,GAAGC;AAAA,MAEH,UAAA,CAAC,CAACR,KACD,gBAAAU;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAAjB;AAAA,UACA,KAAAE;AAAA,UACA,SAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWW,EAAW;AAAA,UACtB,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"InsetCard.js","sources":["../../../../src/components/Card/InsetCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, CARD_CLASS, Directions } from 'acinguiux-ds-react-base/consts';\n\nimport type { IInsetCardProps } from './Card.types';\nimport * as Styled from './Card.styles';\nimport CardBar from './components/CardBar/CardBar';\n\nconst InsetCard = forwardRef<HTMLDivElement, IInsetCardProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      bar,\n      borders,\n      outlined = false,\n      fullBar,\n      interactive,\n      onClick,\n      isClickable,\n      backgroundImage,\n      backgroundPosition,\n      children,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Styled.InsetCard\n      ref={ref}\n      className={classNames(CARD_CLASS, className)}\n      $size={size}\n      $direction={Directions.Horizontal}\n      $outlined={outlined}\n      $isClickable={!!isClickable || !!onClick}\n      $interactive={interactive}\n      onClick={onClick}\n      $backgroundPosition={backgroundPosition}\n      $backgroundImage={backgroundImage}\n      {...rest}\n    >\n      <Styled.InsetCardBody>{children}</Styled.InsetCardBody>\n      {!!bar && (\n        <CardBar\n          size={size}\n          bar={bar}\n          fullBar={fullBar}\n          padding={true}\n          direction={Directions.Vertical}\n          type=\"floatingFooter\"\n        />\n      )}\n    </Styled.InsetCard>\n  ),\n);\n\nexport default InsetCard;\n"],"names":["InsetCard","forwardRef","className","size","Sizes","bar","borders","outlined","fullBar","interactive","onClick","isClickable","backgroundImage","backgroundPosition","children","rest","ref","jsxs","Styled.InsetCard","classNames","CARD_CLASS","Directions","jsx","Styled.InsetCardBody","CardBar"],"mappings":";;;;;;;AASA,MAAMA,IAAYC;AAAA,EAChB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,KAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAWC,GAAYlB,CAAS;AAAA,MAC3C,OAAOC;AAAA,MACP,YAAYkB,EAAW;AAAA,MACvB,WAAWd;AAAA,MACX,cAAc,CAAC,CAACI,KAAe,CAAC,CAACD;AAAA,MACjC,cAAcD;AAAA,MACd,SAAAC;AAAA,MACA,qBAAqBG;AAAA,MACrB,kBAAkBD;AAAA,MACjB,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO,EAACC,GAAA,EAAsB,UAAAT,GAAS;AAAA,QAC/B,CAAC,CAACT,KACD,gBAAAiB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAArB;AAAA,YACA,KAAAE;AAAA,YACA,SAAAG;AAAA,YACA,SAAS;AAAA,YACT,WAAWa,EAAW;AAAA,YACtB,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/build/esm/components/Card/_internalComponents/data.d.ts

@@ -1,4 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
+export declare const CustomContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ExampleCustomContent: () => import("react/jsx-runtime").JSX.Element;
 export declare const getTabContent: (tab: string) => ReactNode;
 export declare const Tabs: () => import("react/jsx-runtime").JSX.Element;
 export declare const content: import("react/jsx-runtime").JSX.Element;

package/build/esm/components/Card/_internalComponents/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/_internalComponents/data.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBrD,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,SAAmD,CAAC;AAEhG,eAAO,MAAM,IAAI,+CAoBhB,CAAC;AAEF,eAAO,MAAM,OAAO,yCAA6C,CAAC;AAElE,eAAO,MAAM,SAAS,QAAO,YAAqF,CAAC;AAEnH,eAAO,MAAM,SAAS,0CAA0C,CAAC;AACjE,eAAO,MAAM,QAAQ,iJAC2H,CAAC;AAEjJ,eAAO,MAAM,aAAa;;;;CAIzB,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/_internalComponents/data.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,oBAAoB,6NAUhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAIhC,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,SAAmD,CAAC;AAEhG,eAAO,MAAM,IAAI,+CAoBhB,CAAC;AAEF,eAAO,MAAM,OAAO,yCAA6C,CAAC;AAElE,eAAO,MAAM,SAAS,QAAO,YAAqF,CAAC;AAEnH,eAAO,MAAM,SAAS,0CAA0C,CAAC;AACjE,eAAO,MAAM,QAAQ,iJAC2H,CAAC;AAEjJ,eAAO,MAAM,aAAa;;;;CAIzB,CAAC"}

package/build/esm/components/Chart/Highcharts/HighchartsChart.d.ts

@@ -1,4 +1,5 @@
 import { HighchartsReactRefObject } from 'highcharts-react-official';
+import 'highcharts/modules/accessibility.js';
 import type { IHighchartsChartProps } from './HighchartsChart.types';
 declare const HighchartsChart: import("react").ForwardRefExoticComponent<Omit<IHighchartsChartProps, "ref"> & import("react").RefAttributes<HighchartsReactRefObject>>;
 export default HighchartsChart;

package/build/esm/components/Chart/Highcharts/HighchartsChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighchartsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAM5G,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAcrE,QAAA,MAAM,eAAe,yIAwBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HighchartsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAE5G,OAAO,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAcrE,QAAA,MAAM,eAAe,yIAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/esm/components/Chart/Highcharts/HighchartsChart.js

@@ -1,42 +1,38 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as e, useEffect as d } from "react";
-import { Sizes as l } from "../../../react-base/src/consts/index.js";
-import i from "highcharts";
-import { HighchartsReact as u } from "highcharts-react-official";
-import H from "classnames";
-import { Highcharts as g } from "./HighchartsChart.styles.js";
-import n from "./hooks/useHighchartsOptions.js";
-import { CHART_CLASS as C } from "../../../react-base/src/consts/classes.js";
-let m = !1;
-const R = e(
-  ({ className: s, containerProps: t, ...o }, r) => /* @__PURE__ */ a(
-    u,
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Sizes as e } from "../../../react-base/src/consts/index.js";
+import h from "highcharts";
+import { HighchartsReact as f } from "highcharts-react-official";
+import n from "classnames";
+import "highcharts/modules/accessibility.js";
+import { Highcharts as H } from "./HighchartsChart.styles.js";
+import g from "./hooks/useHighchartsOptions.js";
+import { CHART_CLASS as d } from "../../../react-base/src/consts/classes.js";
+const l = i(
+  ({ className: o, containerProps: r, ...t }, s) => /* @__PURE__ */ m(
+    f,
     {
-      ref: r,
-      containerProps: { ...t, className: H(s, C, t == null ? void 0 : t.className) },
-      ...o
+      ref: s,
+      containerProps: { ...r, className: n(o, d, r?.className) },
+      ...t
     }
   )
-), j = e(
-  ({ size: s = l.Medium, highcharts: t = i, options: o, option: r = [], ...f }, h) => {
-    const c = n(o, s, r);
-    return d(() => {
-      !m && typeof window < "u" && import("highcharts/modules/accessibility.js").then((p) => {
-        p.default(i), m = !0;
-      });
-    }, []), /* @__PURE__ */ a(
-      g,
+), z = i(
+  ({ size: o = e.Medium, highcharts: r = h, options: t, option: s = [], ...a }, p) => {
+    const c = g(t, o, s);
+    return /* @__PURE__ */ m(
+      H,
       {
-        as: R,
-        ref: h,
-        highcharts: t,
+        as: l,
+        ref: p,
+        highcharts: r,
         options: c,
-        ...f
+        ...a
       }
     );
   }
 );
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=HighchartsChart.js.map

package/build/esm/components/Chart/Highcharts/HighchartsChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighchartsChart.js","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"sourcesContent":["import { forwardRef, useEffect } from 'react';\n\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport Highcharts from 'highcharts';\nimport { HighchartsReact, HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';\nimport cx from 'classnames';\n\n// Import accessibility module dynamically on client side to avoid SSR issues\nlet accessibilityLoaded = false;\n\nimport type { IHighchartsChartProps } from './HighchartsChart.types';\nimport * as Styled from './HighchartsChart.styles';\nimport useHighchartsOptions from './hooks/useHighchartsOptions';\n\nconst HighchartsReactComponent = forwardRef<HighchartsReactRefObject, HighchartsReactProps>(\n  ({ className, containerProps, ...rest }, ref) => (\n    <HighchartsReact\n      ref={ref}\n      containerProps={{ ...containerProps, className: cx(className, CHART_CLASS, containerProps?.className) }}\n      {...rest}\n    />\n  ),\n);\n\nconst HighchartsChart = forwardRef<HighchartsReactRefObject, IHighchartsChartProps>(\n  ({ size = Sizes.Medium, highcharts = Highcharts, options, option = [], ...rest }, ref) => {\n    const sdsOptions = useHighchartsOptions(options, size, option);\n\n    // Load accessibility module on client side\n    useEffect(() => {\n      if (!accessibilityLoaded && typeof window !== 'undefined') {\n        import('highcharts/modules/accessibility').then((module) => {\n          module.default(Highcharts);\n          accessibilityLoaded = true;\n        });\n      }\n    }, []);\n\n    return (\n      <Styled.Highcharts\n        as={HighchartsReactComponent}\n        ref={ref}\n        highcharts={highcharts}\n        options={sdsOptions}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default HighchartsChart;\n"],"names":["accessibilityLoaded","HighchartsReactComponent","forwardRef","className","containerProps","rest","ref","jsx","HighchartsReact","cx","CHART_CLASS","HighchartsChart","size","Sizes","highcharts","Highcharts","options","option","sdsOptions","useHighchartsOptions","useEffect","module","Styled.Highcharts"],"mappings":";;;;;;;;;AAQA,IAAIA,IAAsB;AAM1B,MAAMC,IAA2BC;AAAA,EAC/B,CAAC,EAAE,WAAAC,GAAW,gBAAAC,GAAgB,GAAGC,EAAA,GAAQC,MACvC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,gBAAgB,EAAE,GAAGF,GAAgB,WAAWK,EAAGN,GAAWO,GAAaN,KAAA,gBAAAA,EAAgB,SAAS,EAAA;AAAA,MACnG,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAEMM,IAAkBT;AAAA,EACtB,CAAC,EAAE,MAAAU,IAAOC,EAAM,QAAQ,YAAAC,IAAaC,GAAY,SAAAC,GAAS,QAAAC,IAAS,CAAA,GAAI,GAAGZ,EAAA,GAAQC,MAAQ;AACxF,UAAMY,IAAaC,EAAqBH,GAASJ,GAAMK,CAAM;AAG7D,WAAAG,EAAU,MAAM;AACd,MAAI,CAACpB,KAAuB,OAAO,SAAW,OAC5C,OAAO,kCAAkC,EAAE,KAAK,CAACqB,MAAW;AAC1D,QAAAA,EAAO,QAAQN,CAAU,GACzBf,IAAsB;AAAA,MACxB,CAAC;AAAA,IAEL,GAAG,CAAA,CAAE,GAGH,gBAAAO;AAAA,MAACe;AAAAA,MAAA;AAAA,QACC,IAAIrB;AAAA,QACJ,KAAAK;AAAA,QACA,YAAAQ;AAAA,QACA,SAASI;AAAA,QACR,GAAGb;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"HighchartsChart.js","sources":["../../../../../src/components/Chart/Highcharts/HighchartsChart.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { CHART_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport Highcharts from 'highcharts';\nimport { HighchartsReact, HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';\nimport cx from 'classnames';\nimport 'highcharts/modules/accessibility';\n\nimport type { IHighchartsChartProps } from './HighchartsChart.types';\nimport * as Styled from './HighchartsChart.styles';\nimport useHighchartsOptions from './hooks/useHighchartsOptions';\n\nconst HighchartsReactComponent = forwardRef<HighchartsReactRefObject, HighchartsReactProps>(\n  ({ className, containerProps, ...rest }, ref) => (\n    <HighchartsReact\n      ref={ref}\n      containerProps={{ ...containerProps, className: cx(className, CHART_CLASS, containerProps?.className) }}\n      {...rest}\n    />\n  ),\n);\n\nconst HighchartsChart = forwardRef<HighchartsReactRefObject, IHighchartsChartProps>(\n  ({ size = Sizes.Medium, highcharts = Highcharts, options, option = [], ...rest }, ref) => {\n    const sdsOptions = useHighchartsOptions(options, size, option);\n\n    return (\n      <Styled.Highcharts\n        as={HighchartsReactComponent}\n        ref={ref}\n        highcharts={highcharts}\n        options={sdsOptions}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default HighchartsChart;\n"],"names":["HighchartsReactComponent","forwardRef","className","containerProps","rest","ref","jsx","HighchartsReact","cx","CHART_CLASS","HighchartsChart","size","Sizes","highcharts","Highcharts","options","option","sdsOptions","useHighchartsOptions","Styled.Highcharts"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAA2BC;AAAA,EAC/B,CAAC,EAAE,WAAAC,GAAW,gBAAAC,GAAgB,GAAGC,EAAA,GAAQC,MACvC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,gBAAgB,EAAE,GAAGF,GAAgB,WAAWK,EAAGN,GAAWO,GAAaN,GAAgB,SAAS,EAAA;AAAA,MACnG,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAEMM,IAAkBT;AAAA,EACtB,CAAC,EAAE,MAAAU,IAAOC,EAAM,QAAQ,YAAAC,IAAaC,GAAY,SAAAC,GAAS,QAAAC,IAAS,CAAA,GAAI,GAAGZ,EAAA,GAAQC,MAAQ;AACxF,UAAMY,IAAaC,EAAqBH,GAASJ,GAAMK,CAAM;AAE7D,WACE,gBAAAV;AAAA,MAACa;AAAAA,MAAA;AAAA,QACC,IAAInB;AAAA,QACJ,KAAAK;AAAA,QACA,YAAAQ;AAAA,QACA,SAASI;AAAA,QACR,GAAGb;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/build/esm/components/Chart/Highcharts/hooks/useHighchartsOptions.js

@@ -1,26 +1,26 @@
 import { useTheme as m } from "styled-components";
-import { defaultOptions as i, merge as x } from "highcharts";
-import { Option as o } from "../../Chart.types.js";
-import { chart as c } from "../options/chart.options.js";
-import { exporting as p } from "../options/exporting.options.js";
-import { colors as d } from "../options/colors.options.js";
-import { xAxis as n, yAxis as f } from "../options/axis.options.js";
+import { defaultOptions as i, merge as p } from "highcharts";
+import { Option as r } from "../../Chart.types.js";
+import { chart as n } from "../options/chart.options.js";
+import { exporting as x } from "../options/exporting.options.js";
+import { colors as c } from "../options/colors.options.js";
+import { xAxis as d, yAxis as f } from "../options/axis.options.js";
 import { legend as u } from "../options/legend.options.js";
 import { plotOptions as a } from "../options/plotOptions.options.js";
 import { tooltip as g } from "../options/tooltip.options.js";
-const $ = (l, t, e) => {
-  const r = m(), s = {
-    ...c(r, t),
-    plotOptions: a(r, t),
-    exporting: e.includes(o.Exporting) ? p : { enabled: !1 },
-    colors: e.includes(o.Colors) ? d(r) : i.colors,
-    yAxis: e.includes(o.Axis) ? f(r, t) : i.yAxis,
-    xAxis: e.includes(o.Axis) ? n(r, t, l == null ? void 0 : l.xAxis) : i.xAxis,
-    legend: e.includes(o.Legend) ? u(r, t) : i.legend,
-    tooltip: e.includes(o.Tooltip) ? g(r) : i.tooltip,
+const $ = (s, e, t) => {
+  const o = m(), l = {
+    ...n(o, e),
+    plotOptions: a(o, e),
+    exporting: t.includes(r.Exporting) ? x : { enabled: !1 },
+    colors: t.includes(r.Colors) ? c(o) : i.colors,
+    yAxis: t.includes(r.Axis) ? f(o, e) : i.yAxis,
+    xAxis: t.includes(r.Axis) ? d(o, e, s?.xAxis) : i.xAxis,
+    legend: t.includes(r.Legend) ? u(o, e) : i.legend,
+    tooltip: t.includes(r.Tooltip) ? g(o) : i.tooltip,
     accessibility: { enabled: !0 }
   };
-  return x(s, l);
+  return p(l, s);
 };
 export {
   $ as default

package/build/esm/components/Chart/Highcharts/hooks/useHighchartsOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHighchartsOptions.js","sources":["../../../../../../src/components/Chart/Highcharts/hooks/useHighchartsOptions.ts"],"sourcesContent":["import { useTheme } from 'styled-components';\nimport { defaultOptions as highchartsDefaultOptions, merge, type Options } from 'highcharts';\nimport { HighchartsReact } from 'highcharts-react-official';\n\nimport { ChartSize, OptionType, Option } from '../../Chart.types';\nimport { chart } from '../options/chart.options';\nimport { exporting } from '../options/exporting.options';\nimport { colors } from '../options/colors.options';\nimport { xAxis, yAxis } from '../options/axis.options';\nimport { legend } from '../options/legend.options';\nimport { plotOptions } from '../options/plotOptions.options';\nimport { tooltip } from '../options/tooltip.options';\n\nconst useHighchartsOptions = (options: HighchartsReact.Props['options'], size: ChartSize, option: OptionType[]) => {\n  const theme = useTheme();\n\n  const defaultOptions: Highcharts.Options = {\n    ...chart(theme, size),\n    plotOptions: plotOptions(theme, size),\n    exporting: option.includes(Option.Exporting) ? exporting : { enabled: false },\n    colors: option.includes(Option.Colors) ? colors(theme) : highchartsDefaultOptions.colors,\n    yAxis: option.includes(Option.Axis) ? yAxis(theme, size) : highchartsDefaultOptions.yAxis,\n    xAxis: option.includes(Option.Axis)\n      ? xAxis(theme, size, options?.xAxis as Options['xAxis'])\n      : highchartsDefaultOptions.xAxis,\n    legend: option.includes(Option.Legend) ? legend(theme, size) : highchartsDefaultOptions.legend,\n\n    tooltip: option.includes(Option.Tooltip) ? tooltip(theme) : highchartsDefaultOptions.tooltip,\n    accessibility: { enabled: true },\n  };\n\n  return merge(defaultOptions, options);\n};\n\nexport default useHighchartsOptions;\n"],"names":["useHighchartsOptions","options","size","option","theme","useTheme","defaultOptions","chart","plotOptions","Option","exporting","colors","highchartsDefaultOptions","yAxis","xAxis","legend","tooltip","merge"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAuB,CAACC,GAA2CC,GAAiBC,MAAyB;AACjH,QAAMC,IAAQC,EAAA,GAERC,IAAqC;AAAA,IACzC,GAAGC,EAAMH,GAAOF,CAAI;AAAA,IACpB,aAAaM,EAAYJ,GAAOF,CAAI;AAAA,IACpC,WAAWC,EAAO,SAASM,EAAO,SAAS,IAAIC,IAAY,EAAE,SAAS,GAAA;AAAA,IACtE,QAAQP,EAAO,SAASM,EAAO,MAAM,IAAIE,EAAOP,CAAK,IAAIQ,EAAyB;AAAA,IAClF,OAAOT,EAAO,SAASM,EAAO,IAAI,IAAII,EAAMT,GAAOF,CAAI,IAAIU,EAAyB;AAAA,IACpF,OAAOT,EAAO,SAASM,EAAO,IAAI,IAC9BK,EAAMV,GAAOF,GAAMD,KAAA,gBAAAA,EAAS,KAAyB,IACrDW,EAAyB;AAAA,IAC7B,QAAQT,EAAO,SAASM,EAAO,MAAM,IAAIM,EAAOX,GAAOF,CAAI,IAAIU,EAAyB;AAAA,IAExF,SAAST,EAAO,SAASM,EAAO,OAAO,IAAIO,EAAQZ,CAAK,IAAIQ,EAAyB;AAAA,IACrF,eAAe,EAAE,SAAS,GAAA;AAAA,EAAK;AAGjC,SAAOK,EAAMX,GAAgBL,CAAO;AACtC;"}
+{"version":3,"file":"useHighchartsOptions.js","sources":["../../../../../../src/components/Chart/Highcharts/hooks/useHighchartsOptions.ts"],"sourcesContent":["import { useTheme } from 'styled-components';\nimport { defaultOptions as highchartsDefaultOptions, merge, type Options } from 'highcharts';\nimport { HighchartsReact } from 'highcharts-react-official';\n\nimport { ChartSize, OptionType, Option } from '../../Chart.types';\nimport { chart } from '../options/chart.options';\nimport { exporting } from '../options/exporting.options';\nimport { colors } from '../options/colors.options';\nimport { xAxis, yAxis } from '../options/axis.options';\nimport { legend } from '../options/legend.options';\nimport { plotOptions } from '../options/plotOptions.options';\nimport { tooltip } from '../options/tooltip.options';\n\nconst useHighchartsOptions = (options: HighchartsReact.Props['options'], size: ChartSize, option: OptionType[]) => {\n  const theme = useTheme();\n\n  const defaultOptions: Highcharts.Options = {\n    ...chart(theme, size),\n    plotOptions: plotOptions(theme, size),\n    exporting: option.includes(Option.Exporting) ? exporting : { enabled: false },\n    colors: option.includes(Option.Colors) ? colors(theme) : highchartsDefaultOptions.colors,\n    yAxis: option.includes(Option.Axis) ? yAxis(theme, size) : highchartsDefaultOptions.yAxis,\n    xAxis: option.includes(Option.Axis)\n      ? xAxis(theme, size, options?.xAxis as Options['xAxis'])\n      : highchartsDefaultOptions.xAxis,\n    legend: option.includes(Option.Legend) ? legend(theme, size) : highchartsDefaultOptions.legend,\n\n    tooltip: option.includes(Option.Tooltip) ? tooltip(theme) : highchartsDefaultOptions.tooltip,\n    accessibility: { enabled: true },\n  };\n\n  return merge(defaultOptions, options);\n};\n\nexport default useHighchartsOptions;\n"],"names":["useHighchartsOptions","options","size","option","theme","useTheme","defaultOptions","chart","plotOptions","Option","exporting","colors","highchartsDefaultOptions","yAxis","xAxis","legend","tooltip","merge"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAuB,CAACC,GAA2CC,GAAiBC,MAAyB;AACjH,QAAMC,IAAQC,EAAA,GAERC,IAAqC;AAAA,IACzC,GAAGC,EAAMH,GAAOF,CAAI;AAAA,IACpB,aAAaM,EAAYJ,GAAOF,CAAI;AAAA,IACpC,WAAWC,EAAO,SAASM,EAAO,SAAS,IAAIC,IAAY,EAAE,SAAS,GAAA;AAAA,IACtE,QAAQP,EAAO,SAASM,EAAO,MAAM,IAAIE,EAAOP,CAAK,IAAIQ,EAAyB;AAAA,IAClF,OAAOT,EAAO,SAASM,EAAO,IAAI,IAAII,EAAMT,GAAOF,CAAI,IAAIU,EAAyB;AAAA,IACpF,OAAOT,EAAO,SAASM,EAAO,IAAI,IAC9BK,EAAMV,GAAOF,GAAMD,GAAS,KAAyB,IACrDW,EAAyB;AAAA,IAC7B,QAAQT,EAAO,SAASM,EAAO,MAAM,IAAIM,EAAOX,GAAOF,CAAI,IAAIU,EAAyB;AAAA,IAExF,SAAST,EAAO,SAASM,EAAO,OAAO,IAAIO,EAAQZ,CAAK,IAAIQ,EAAyB;AAAA,IACrF,eAAe,EAAE,SAAS,GAAA;AAAA,EAAK;AAGjC,SAAOK,EAAMX,GAAgBL,CAAO;AACtC;"}

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