acinguiux-ds-react-framework 0.1.18 → 0.1.19

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":"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"}
+{"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;"}

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

@@ -2,6 +2,6 @@ import type { ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
 import type { WithConditionalCssProp } from '../../react-base/src/types';
 import type { CheckboxTypes } from '../../react-base/src/components/Checkbox';
 export interface ICheckboxProps extends Omit<WithConditionalCssProp<ComponentPropsWithRef<'input'>>, 'size'>, CheckboxTypes.IProps {
-    wrapperProps?: ComponentPropsWithoutRef<'label'>;
+    wrapperProps?: ComponentPropsWithoutRef<'div'>;
 }
 //# sourceMappingURL=Checkbox.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAEjF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,EAC1E,aAAa,CAAC,MAAM;IACtB,YAAY,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;CAClD"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAEjF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,EAC1E,aAAa,CAAC,MAAM;IACtB,YAAY,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC;CAChD"}

package/build/esm/components/DateInput/DateInput.js

@@ -1,46 +1,46 @@
-import { jsxs as F, jsx as p } from "react/jsx-runtime";
-import { forwardRef as E } from "react";
-import N from "classnames";
-import { Sizes as S } from "../../react-base/src/consts/index.js";
-import { DateInputWrapper as U } from "./DateInput.styles.js";
-import m from "./components/DateInputField/DateInputField.js";
-import { DATE_PICKER_CLASS as s, DATE_INPUT_DAY_ID_SUFFIX as c, DATE_INPUT_MONTH_ID_SUFFIX as h, DATE_INPUT_YEAR_ID_SUFFIX as v } from "../../react-base/src/consts/classes.js";
-const X = E(
+import { jsxs as $, jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import A from "classnames";
+import { Sizes as F } from "../../react-base/src/consts/index.js";
+import { DateInputWrapper as E } from "./DateInput.styles.js";
+import p from "./components/DateInputField/DateInputField.js";
+import { DATE_PICKER_CLASS as _, DATE_INPUT_DAY_ID_SUFFIX as N, DATE_INPUT_MONTH_ID_SUFFIX as S, DATE_INPUT_YEAR_ID_SUFFIX as U } from "../../react-base/src/consts/classes.js";
+const f = d(
   ({
-    className: I,
-    id: r = s,
-    size: o = `${S.Medium}`,
-    invalid: n,
-    disabled: _,
-    day: D,
-    month: T,
-    year: u,
-    ...$
-  }, A) => {
+    className: s,
+    id: r = _,
+    size: o = `${F.Medium}`,
+    invalid: m,
+    disabled: n,
+    day: I,
+    month: D,
+    year: T,
+    ...u
+  }, i) => {
     const t = (a) => ({
-      ...(a == null ? void 0 : a.value) && { value: a.value },
-      ...(a == null ? void 0 : a.onChange) && { onChange: a.onChange },
-      ...(_ || (a == null ? void 0 : a.disabled)) && { disabled: _ || (a == null ? void 0 : a.disabled) },
-      ...(n || (a == null ? void 0 : a.invalid)) && { invalid: n || (a == null ? void 0 : a.invalid) }
+      ...a?.value && { value: a.value },
+      ...a?.onChange && { onChange: a.onChange },
+      ...(n || a?.disabled) && { disabled: n || a?.disabled },
+      ...(m || a?.invalid) && { invalid: m || a?.invalid }
     });
-    return /* @__PURE__ */ F(
-      U,
+    return /* @__PURE__ */ $(
+      E,
       {
-        ref: A,
+        ref: i,
         id: r,
-        className: N(I, s),
+        className: A(s, _),
         $size: o,
-        ...$,
+        ...u,
         children: [
-          /* @__PURE__ */ p(m, { size: o, id: `${r}-${c}`, dateType: "Day", ...t(D) }),
-          /* @__PURE__ */ p(m, { size: o, id: `${r}-${h}`, dateType: "Month", ...t(T) }),
-          /* @__PURE__ */ p(m, { size: o, id: `${r}-${v}`, dateType: "Year", ...t(u) })
+          /* @__PURE__ */ e(p, { size: o, id: `${r}-${N}`, dateType: "Day", ...t(I) }),
+          /* @__PURE__ */ e(p, { size: o, id: `${r}-${S}`, dateType: "Month", ...t(D) }),
+          /* @__PURE__ */ e(p, { size: o, id: `${r}-${U}`, dateType: "Year", ...t(T) })
         ]
       }
     );
   }
 );
 export {
-  X as default
+  f as default
 };
 //# sourceMappingURL=DateInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport {\n  Sizes,\n  DATE_PICKER_CLASS,\n  DATE_INPUT_DAY_ID_SUFFIX,\n  DATE_INPUT_MONTH_ID_SUFFIX,\n  DATE_INPUT_YEAR_ID_SUFFIX,\n} from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './DateInput.styles';\nimport DateInputField from './components/DateInputField/DateInputField';\nimport type { DateInputDateField, IDateInputProps } from './DateInput.types';\n\nconst DateInput = forwardRef(\n  (\n    {\n      className,\n      id = DATE_PICKER_CLASS,\n      size = `${Sizes.Medium}`,\n      invalid,\n      disabled,\n      day,\n      month,\n      year,\n      ...rest\n    }: IDateInputProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const props = (field?: DateInputDateField) => ({\n      ...(field?.value && { value: field.value }),\n      ...(field?.onChange && { onChange: field.onChange }),\n      ...((disabled || field?.disabled) && { disabled: disabled || field?.disabled }),\n      ...((invalid || field?.invalid) && { invalid: invalid || field?.invalid }),\n    });\n\n    return (\n      <Styled.DateInputWrapper\n        ref={ref}\n        id={id}\n        className={classNames(className, DATE_PICKER_CLASS)}\n        $size={size}\n        {...rest}\n      >\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_DAY_ID_SUFFIX}`} dateType=\"Day\" {...props(day)} />\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_MONTH_ID_SUFFIX}`} dateType=\"Month\" {...props(month)} />\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_YEAR_ID_SUFFIX}`} dateType=\"Year\" {...props(year)} />\n      </Styled.DateInputWrapper>\n    );\n  },\n);\n\nexport default DateInput;\n"],"names":["DateInput","forwardRef","className","id","DATE_PICKER_CLASS","size","Sizes","invalid","disabled","day","month","year","rest","ref","props","field","jsxs","Styled.DateInputWrapper","classNames","jsx","DateInputField","DATE_INPUT_DAY_ID_SUFFIX","DATE_INPUT_MONTH_ID_SUFFIX","DATE_INPUT_YEAR_ID_SUFFIX"],"mappings":";;;;;;;AAeA,MAAMA,IAAYC;AAAA,EAChB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC,IAAKC;AAAA,IACL,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAQ,CAACC,OAAgC;AAAA,MAC7C,IAAIA,KAAA,gBAAAA,EAAO,UAAS,EAAE,OAAOA,EAAM,MAAA;AAAA,MACnC,IAAIA,KAAA,gBAAAA,EAAO,aAAY,EAAE,UAAUA,EAAM,SAAA;AAAA,MACzC,IAAKP,MAAYO,KAAA,gBAAAA,EAAO,cAAa,EAAE,UAAUP,MAAYO,KAAA,gBAAAA,EAAO,UAAA;AAAA,MACpE,IAAKR,MAAWQ,KAAA,gBAAAA,EAAO,aAAY,EAAE,SAASR,MAAWQ,KAAA,gBAAAA,EAAO,SAAA;AAAA,IAAQ;AAG1E,WACE,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,IAAAV;AAAA,QACA,WAAWe,EAAWhB,GAAWE,CAAiB;AAAA,QAClD,OAAOC;AAAA,QACN,GAAGO;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAIkB,CAAwB,IAAI,UAAS,OAAO,GAAGP,EAAML,CAAG,GAAG;AAAA,UACpG,gBAAAU,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAImB,CAA0B,IAAI,UAAS,SAAS,GAAGR,EAAMJ,CAAK,GAAG;AAAA,UAC1G,gBAAAS,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAIoB,CAAyB,IAAI,UAAS,QAAQ,GAAGT,EAAMH,CAAI,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7G;AACF;"}
+{"version":3,"file":"DateInput.js","sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport {\n  Sizes,\n  DATE_PICKER_CLASS,\n  DATE_INPUT_DAY_ID_SUFFIX,\n  DATE_INPUT_MONTH_ID_SUFFIX,\n  DATE_INPUT_YEAR_ID_SUFFIX,\n} from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './DateInput.styles';\nimport DateInputField from './components/DateInputField/DateInputField';\nimport type { DateInputDateField, IDateInputProps } from './DateInput.types';\n\nconst DateInput = forwardRef(\n  (\n    {\n      className,\n      id = DATE_PICKER_CLASS,\n      size = `${Sizes.Medium}`,\n      invalid,\n      disabled,\n      day,\n      month,\n      year,\n      ...rest\n    }: IDateInputProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const props = (field?: DateInputDateField) => ({\n      ...(field?.value && { value: field.value }),\n      ...(field?.onChange && { onChange: field.onChange }),\n      ...((disabled || field?.disabled) && { disabled: disabled || field?.disabled }),\n      ...((invalid || field?.invalid) && { invalid: invalid || field?.invalid }),\n    });\n\n    return (\n      <Styled.DateInputWrapper\n        ref={ref}\n        id={id}\n        className={classNames(className, DATE_PICKER_CLASS)}\n        $size={size}\n        {...rest}\n      >\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_DAY_ID_SUFFIX}`} dateType=\"Day\" {...props(day)} />\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_MONTH_ID_SUFFIX}`} dateType=\"Month\" {...props(month)} />\n        <DateInputField size={size} id={`${id}-${DATE_INPUT_YEAR_ID_SUFFIX}`} dateType=\"Year\" {...props(year)} />\n      </Styled.DateInputWrapper>\n    );\n  },\n);\n\nexport default DateInput;\n"],"names":["DateInput","forwardRef","className","id","DATE_PICKER_CLASS","size","Sizes","invalid","disabled","day","month","year","rest","ref","props","field","jsxs","Styled.DateInputWrapper","classNames","jsx","DateInputField","DATE_INPUT_DAY_ID_SUFFIX","DATE_INPUT_MONTH_ID_SUFFIX","DATE_INPUT_YEAR_ID_SUFFIX"],"mappings":";;;;;;;AAeA,MAAMA,IAAYC;AAAA,EAChB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC,IAAKC;AAAA,IACL,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAQ,CAACC,OAAgC;AAAA,MAC7C,GAAIA,GAAO,SAAS,EAAE,OAAOA,EAAM,MAAA;AAAA,MACnC,GAAIA,GAAO,YAAY,EAAE,UAAUA,EAAM,SAAA;AAAA,MACzC,IAAKP,KAAYO,GAAO,aAAa,EAAE,UAAUP,KAAYO,GAAO,SAAA;AAAA,MACpE,IAAKR,KAAWQ,GAAO,YAAY,EAAE,SAASR,KAAWQ,GAAO,QAAA;AAAA,IAAQ;AAG1E,WACE,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,IAAAV;AAAA,QACA,WAAWe,EAAWhB,GAAWE,CAAiB;AAAA,QAClD,OAAOC;AAAA,QACN,GAAGO;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAIkB,CAAwB,IAAI,UAAS,OAAO,GAAGP,EAAML,CAAG,GAAG;AAAA,UACpG,gBAAAU,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAImB,CAA0B,IAAI,UAAS,SAAS,GAAGR,EAAMJ,CAAK,GAAG;AAAA,UAC1G,gBAAAS,EAACC,GAAA,EAAe,MAAAf,GAAY,IAAI,GAAGF,CAAE,IAAIoB,CAAyB,IAAI,UAAS,QAAQ,GAAGT,EAAMH,CAAI,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7G;AACF;"}

package/build/esm/components/DatePicker/components/Calendar/Calendar.d.ts

@@ -1,19 +1,9 @@
-import { PropsBase, PropsRange, PropsRangeRequired, PropsSingle, PropsSingleRequired } from 'react-day-picker';
-import { type DatePickerTypes } from '../../../../react-base/src/components/DatePicker';
-type DayPickerPropsSingle = Omit<PropsSingle | PropsSingleRequired, 'mode'> & {
-    variant: 'single';
-};
-type DayPickerPropsRange = Omit<PropsRange | PropsRangeRequired, 'mode'> & {
-    variant: 'range';
-};
-export type DayPickerProps<T extends 'single' | 'range'> = PropsBase & (DayPickerPropsSingle | DayPickerPropsRange) & {
-    variant: T;
-};
+import type { ICalendarProps } from './Calendar.types';
 /**
  * Calendar component based on react-day-picker and originally implemented in geneva-component.
  * @param {DatePickerTypes.PickerType} picker right now, will only render for 'day'
  * @returns the Calendar component for selecting dates
  */
-declare const Calendar: <T extends "single" | "range">({ variant, size, picker, selected, onSelect, month, footer, onMonthChange, showToday, ...props }: DatePickerTypes.ICalendarProps & DayPickerProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+declare const Calendar: <T extends "single" | "range">({ variant, size, picker, selected, zIndex, onSelect, month, footer, onMonthChange, showToday, ...props }: ICalendarProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export default Calendar;
 //# sourceMappingURL=Calendar.d.ts.map

package/build/esm/components/DatePicker/components/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAMrF,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,mBAAmB,EAAE,MAAM,CAAC,GAAG;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;AACpG,KAAK,mBAAmB,GAAG,IAAI,CAAC,UAAU,GAAG,kBAAkB,EAAE,MAAM,CAAC,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,IAAI,SAAS,GAClE,CAAC,oBAAoB,GAAG,mBAAmB,CAAC,GAAG;IAC7C,OAAO,EAAE,CAAC,CAAC;CACZ,CAAC;AAEJ;;;;GAIG;AACH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,QAAQ,GAAG,OAAO,oGAW3C,eAAe,CAAC,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,mDAkDpD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,QAAQ,GAAG,OAAO,4GAY3C,cAAc,CAAC,CAAC,CAAC,mDAyFnB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/esm/components/DatePicker/components/Calendar/Calendar.js

@@ -1,51 +1,62 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useState as i } from "react";
-import c from "../../../Flexbox/Flexbox.js";
-import j from "../../../Button/Button.js";
-import { CalendarStyled as k } from "./Calendar.styles.js";
-const q = ({
-  variant: t = "single",
+import { jsx as e, jsxs as B } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { isBefore as I, isAfter as $ } from "date-fns";
+import y from "../../../Flexbox/Flexbox.js";
+import z from "../../../Button/Button.js";
+import { CalendarStyled as A } from "./Calendar.styles.js";
+const J = ({
+  variant: f = "single",
   size: s = "medium",
-  picker: m = "day",
-  selected: u,
-  onSelect: n,
-  month: f,
-  footer: a,
-  onMonthChange: r,
-  showToday: p = !0,
-  ...x
+  picker: C = "day",
+  selected: O,
+  zIndex: w,
+  onSelect: m,
+  month: b,
+  footer: d,
+  onMonthChange: D,
+  showToday: j = !0,
+  ...l
 }) => {
-  const [y, D] = i(f ?? /* @__PURE__ */ new Date()), [h, w] = i(u);
-  if (m !== "day")
+  const [k, M] = x(b ?? /* @__PURE__ */ new Date()), [i, r] = x(O);
+  if (C !== "day")
     return null;
-  const d = (e) => {
-    D(e), r == null || r(e);
-  }, l = (e, O, C, b) => {
-    n == null || n(e, O, C, b), w(e);
+  const { bound: a } = l, h = (o) => {
+    M(o), D?.(o);
+  }, T = (o, n, t) => {
+    if (!(f !== "range" || o instanceof Date || n instanceof Date))
+      return a === "end" ? o?.from && I(t, o.from) ? { from: t, to: o.from } : { from: o?.from, to: t } : a === "start" ? o?.to && $(t, o.to) ? { from: o?.to, to: t } : { from: t, to: o?.to } : !o?.from && !o?.to || o?.from && o?.to ? { from: t } : n;
+  }, u = (o, n, t, c) => {
+    if (o instanceof Date)
+      r(o), m?.(o, n, t, c);
+    else {
+      const p = T(i, o, n);
+      r(p), m?.(p, n, t, c);
+    }
   };
-  return /* @__PURE__ */ o(c, { flexDirection: "column", gap: "16px", alignItems: "flex-start", children: /* @__PURE__ */ o(
-    k,
+  return /* @__PURE__ */ e(y, { flexDirection: "column", gap: "16px", alignItems: "flex-start", children: /* @__PURE__ */ e(
+    A,
     {
       $size: s,
-      mode: t,
-      month: y,
-      onMonthChange: d,
-      selected: h,
-      onSelect: l,
+      $zIndex: w,
+      mode: f,
+      month: k,
+      onMonthChange: h,
+      selected: i,
+      onSelect: u,
       captionLayout: "dropdown",
       showOutsideDays: !0,
-      footer: t === "single" && p ? /* @__PURE__ */ g(c, { flexDirection: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ o(j, { size: s, onClick: (e) => {
-          l(/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date(), {}, e), d(/* @__PURE__ */ new Date());
+      footer: f === "single" && j ? /* @__PURE__ */ B(y, { flexDirection: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ e(z, { size: s, onClick: (o) => {
+          u(/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date(), {}, o), h(/* @__PURE__ */ new Date());
         }, children: "Today" }),
-        a
-      ] }) : a,
-      ...t === "range" ? { numberOfMonths: 2 } : {},
-      ...x
+        d
+      ] }) : d,
+      ...f === "range" ? { numberOfMonths: 2 } : {},
+      ...l
     }
   ) });
 };
 export {
-  q as default
+  J as default
 };
 //# sourceMappingURL=Calendar.js.map

package/build/esm/components/DatePicker/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.tsx"],"sourcesContent":["import { MouseEventHandler, useState } from 'react';\n\nimport {\n  DateRange,\n  OnSelectHandler,\n  PropsBase,\n  PropsRange,\n  PropsRangeRequired,\n  PropsSingle,\n  PropsSingleRequired,\n} from 'react-day-picker';\nimport { type DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport Button from '../../../Button/Button';\nimport { CalendarStyled } from './Calendar.styles';\n\ntype DayPickerPropsSingle = Omit<PropsSingle | PropsSingleRequired, 'mode'> & { variant: 'single' };\ntype DayPickerPropsRange = Omit<PropsRange | PropsRangeRequired, 'mode'> & { variant: 'range' };\n\nexport type DayPickerProps<T extends 'single' | 'range'> = PropsBase &\n  (DayPickerPropsSingle | DayPickerPropsRange) & {\n    variant: T;\n  };\n\n/**\n * Calendar component based on react-day-picker and originally implemented in geneva-component.\n * @param {DatePickerTypes.PickerType} picker right now, will only render for 'day'\n * @returns the Calendar component for selecting dates\n */\nconst Calendar = <T extends 'single' | 'range'>({\n  variant = 'single' as T,\n  size = 'medium',\n  picker = 'day',\n  selected,\n  onSelect,\n  month,\n  footer,\n  onMonthChange,\n  showToday = true,\n  ...props\n}: DatePickerTypes.ICalendarProps & DayPickerProps<T>) => {\n  const [currentMonth, setCurrentMonth] = useState(month ?? new Date());\n  const [selectedDate, setSelectedDate] = useState<typeof selected>(selected);\n  if (picker !== 'day') {\n    return null;\n  }\n\n  const handleOnMonthChange = (newMonth: Date) => {\n    setCurrentMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const handleOnSelect: OnSelectHandler<typeof selected> = (newSelection, triggerDate, selectModifiers, e) => {\n    onSelect?.(newSelection as Date & DateRange, triggerDate, selectModifiers, e);\n    setSelectedDate(newSelection);\n  };\n\n  const handleOnTodayClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    handleOnSelect(new Date(), new Date(), {}, event);\n    handleOnMonthChange(new Date());\n  };\n\n  return (\n    <Flexbox flexDirection=\"column\" gap=\"16px\" alignItems=\"flex-start\">\n      <CalendarStyled\n        $size={size}\n        mode={variant}\n        month={currentMonth}\n        onMonthChange={handleOnMonthChange}\n        selected={selectedDate as Date & DateRange & Date[]}\n        onSelect={handleOnSelect as OnSelectHandler<unknown>}\n        captionLayout=\"dropdown\"\n        showOutsideDays={true}\n        footer={\n          variant === 'single' && showToday ? (\n            <Flexbox flexDirection=\"row\" justifyContent=\"space-between\">\n              <Button size={size} onClick={handleOnTodayClick}>\n                Today\n              </Button>\n              {footer}\n            </Flexbox>\n          ) : (\n            footer\n          )\n        }\n        {...(variant === 'range' ? { numberOfMonths: 2 } : {})}\n        {...props}\n      />\n    </Flexbox>\n  );\n};\n\nexport default Calendar;\n"],"names":["Calendar","variant","size","picker","selected","onSelect","month","footer","onMonthChange","showToday","props","currentMonth","setCurrentMonth","useState","selectedDate","setSelectedDate","handleOnMonthChange","newMonth","handleOnSelect","newSelection","triggerDate","selectModifiers","e","Flexbox","jsx","CalendarStyled","Button","event"],"mappings":";;;;;AA8BA,MAAMA,IAAW,CAA+B;AAAA,EAC9C,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAA0D;AACxD,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASP,KAAS,oBAAI,MAAM,GAC9D,CAACQ,GAAcC,CAAe,IAAIF,EAA0BT,CAAQ;AAC1E,MAAID,MAAW;AACb,WAAO;AAGT,QAAMa,IAAsB,CAACC,MAAmB;AAC9C,IAAAL,EAAgBK,CAAQ,GACxBT,KAAA,QAAAA,EAAgBS;AAAA,EAClB,GAEMC,IAAmD,CAACC,GAAcC,GAAaC,GAAiBC,MAAM;AAC1G,IAAAjB,KAAA,QAAAA,EAAWc,GAAkCC,GAAaC,GAAiBC,IAC3EP,EAAgBI,CAAY;AAAA,EAC9B;AAOA,2BACGI,GAAA,EAAQ,eAAc,UAAS,KAAI,QAAO,YAAW,cACpD,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOvB;AAAA,MACP,MAAMD;AAAA,MACN,OAAOU;AAAA,MACP,eAAeK;AAAA,MACf,UAAUF;AAAA,MACV,UAAUI;AAAA,MACV,eAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,QACEjB,MAAY,YAAYQ,sBACrBc,GAAA,EAAQ,eAAc,OAAM,gBAAe,iBAC1C,UAAA;AAAA,QAAA,gBAAAC,EAACE,GAAA,EAAO,MAAAxB,GAAY,SAnBiC,CAACyB,MAAU;AAC1E,UAAAT,EAAe,oBAAI,QAAQ,oBAAI,QAAQ,CAAA,GAAIS,CAAK,GAChDX,EAAoB,oBAAI,MAAM;AAAA,QAChC,GAgB6D,UAAA,SAEjD;AAAA,QACCT;AAAA,MAAA,EAAA,CACH,IAEAA;AAAA,MAGH,GAAIN,MAAY,UAAU,EAAE,gBAAgB,EAAA,IAAM,CAAA;AAAA,MAClD,GAAGS;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.tsx"],"sourcesContent":["import { MouseEventHandler, useState } from 'react';\n\nimport type { DateRange, OnSelectHandler } from 'react-day-picker';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\nimport { isAfter, isBefore } from 'date-fns';\n\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport Button from '../../../Button/Button';\nimport { CalendarStyled } from './Calendar.styles';\nimport type { ICalendarProps } from './Calendar.types';\n\n/**\n * Calendar component based on react-day-picker and originally implemented in geneva-component.\n * @param {DatePickerTypes.PickerType} picker right now, will only render for 'day'\n * @returns the Calendar component for selecting dates\n */\nconst Calendar = <T extends 'single' | 'range'>({\n  variant = 'single' as T,\n  size = 'medium',\n  picker = 'day',\n  selected,\n  zIndex,\n  onSelect,\n  month,\n  footer,\n  onMonthChange,\n  showToday = true,\n  ...props\n}: ICalendarProps<T>) => {\n  const [currentMonth, setCurrentMonth] = useState(month ?? new Date());\n  const [selectedDate, setSelectedDate] = useState<typeof selected>(selected);\n  if (picker !== 'day') {\n    return null;\n  }\n\n  const { bound } = props as DatePickerTypes.IRangeCalendarProps;\n\n  const handleOnMonthChange = (newMonth: Date) => {\n    setCurrentMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const getNewRange = (\n    currentRange: Date | DateRange | undefined,\n    newSelection: Date | DateRange | undefined,\n    triggerDate: Date,\n  ) => {\n    if (variant !== 'range' || currentRange instanceof Date || newSelection instanceof Date) {\n      return undefined;\n    }\n\n    if (bound === 'end') {\n      if (currentRange?.from && isBefore(triggerDate, currentRange.from)) {\n        return { from: triggerDate, to: currentRange.from };\n      }\n      return { from: currentRange?.from, to: triggerDate };\n    }\n\n    if (bound === 'start') {\n      if (currentRange?.to && isAfter(triggerDate, currentRange.to)) {\n        return { from: currentRange?.to, to: triggerDate };\n      }\n      return { from: triggerDate, to: currentRange?.to };\n    }\n\n    if ((!currentRange?.from && !currentRange?.to) || (currentRange?.from && currentRange?.to)) {\n      return { from: triggerDate };\n    }\n\n    return newSelection;\n  };\n\n  const handleOnSelect: OnSelectHandler<typeof selected> = (newSelection, triggerDate, selectModifiers, e) => {\n    if (newSelection instanceof Date) {\n      setSelectedDate(newSelection);\n      onSelect?.(newSelection as Date & DateRange, triggerDate, selectModifiers, e);\n    } else {\n      const newRange = getNewRange(selectedDate, newSelection, triggerDate);\n      setSelectedDate(newRange);\n      onSelect?.(newRange as Date & DateRange, triggerDate, selectModifiers, e);\n    }\n  };\n\n  const handleOnTodayClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    handleOnSelect(new Date(), new Date(), {}, event);\n    handleOnMonthChange(new Date());\n  };\n\n  return (\n    <Flexbox flexDirection=\"column\" gap=\"16px\" alignItems=\"flex-start\">\n      <CalendarStyled\n        $size={size}\n        $zIndex={zIndex}\n        mode={variant}\n        month={currentMonth}\n        onMonthChange={handleOnMonthChange}\n        selected={selectedDate as Date & DateRange & Date[]}\n        onSelect={handleOnSelect as OnSelectHandler<unknown>}\n        captionLayout=\"dropdown\"\n        showOutsideDays={true}\n        footer={\n          variant === 'single' && showToday ? (\n            <Flexbox flexDirection=\"row\" justifyContent=\"space-between\">\n              <Button size={size} onClick={handleOnTodayClick}>\n                Today\n              </Button>\n              {footer}\n            </Flexbox>\n          ) : (\n            footer\n          )\n        }\n        {...(variant === 'range' ? { numberOfMonths: 2 } : {})}\n        {...props}\n      />\n    </Flexbox>\n  );\n};\n\nexport default Calendar;\n"],"names":["Calendar","variant","size","picker","selected","zIndex","onSelect","month","footer","onMonthChange","showToday","props","currentMonth","setCurrentMonth","useState","selectedDate","setSelectedDate","bound","handleOnMonthChange","newMonth","getNewRange","currentRange","newSelection","triggerDate","isBefore","isAfter","handleOnSelect","selectModifiers","e","newRange","Flexbox","jsx","CalendarStyled","Button","event"],"mappings":";;;;;;AAgBA,MAAMA,IAAW,CAA+B;AAAA,EAC9C,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAyB;AACvB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASP,KAAS,oBAAI,MAAM,GAC9D,CAACQ,GAAcC,CAAe,IAAIF,EAA0BV,CAAQ;AAC1E,MAAID,MAAW;AACb,WAAO;AAGT,QAAM,EAAE,OAAAc,MAAUN,GAEZO,IAAsB,CAACC,MAAmB;AAC9C,IAAAN,EAAgBM,CAAQ,GACxBV,IAAgBU,CAAQ;AAAA,EAC1B,GAEMC,IAAc,CAClBC,GACAC,GACAC,MACG;AACH,QAAI,EAAAtB,MAAY,WAAWoB,aAAwB,QAAQC,aAAwB;AAInF,aAAIL,MAAU,QACRI,GAAc,QAAQG,EAASD,GAAaF,EAAa,IAAI,IACxD,EAAE,MAAME,GAAa,IAAIF,EAAa,KAAA,IAExC,EAAE,MAAMA,GAAc,MAAM,IAAIE,EAAA,IAGrCN,MAAU,UACRI,GAAc,MAAMI,EAAQF,GAAaF,EAAa,EAAE,IACnD,EAAE,MAAMA,GAAc,IAAI,IAAIE,EAAA,IAEhC,EAAE,MAAMA,GAAa,IAAIF,GAAc,GAAA,IAG3C,CAACA,GAAc,QAAQ,CAACA,GAAc,MAAQA,GAAc,QAAQA,GAAc,KAC9E,EAAE,MAAME,EAAA,IAGVD;AAAA,EACT,GAEMI,IAAmD,CAACJ,GAAcC,GAAaI,GAAiBC,MAAM;AAC1G,QAAIN,aAAwB;AAC1B,MAAAN,EAAgBM,CAAY,GAC5BhB,IAAWgB,GAAkCC,GAAaI,GAAiBC,CAAC;AAAA,SACvE;AACL,YAAMC,IAAWT,EAAYL,GAAcO,GAAcC,CAAW;AACpE,MAAAP,EAAgBa,CAAQ,GACxBvB,IAAWuB,GAA8BN,GAAaI,GAAiBC,CAAC;AAAA,IAC1E;AAAA,EACF;AAOA,2BACGE,GAAA,EAAQ,eAAc,UAAS,KAAI,QAAO,YAAW,cACpD,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO9B;AAAA,MACP,SAASG;AAAA,MACT,MAAMJ;AAAA,MACN,OAAOW;AAAA,MACP,eAAeM;AAAA,MACf,UAAUH;AAAA,MACV,UAAUW;AAAA,MACV,eAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,QACEzB,MAAY,YAAYS,sBACrBoB,GAAA,EAAQ,eAAc,OAAM,gBAAe,iBAC1C,UAAA;AAAA,QAAA,gBAAAC,EAACE,GAAA,EAAO,MAAA/B,GAAY,SApBiC,CAACgC,MAAU;AAC1E,UAAAR,EAAe,oBAAI,QAAQ,oBAAI,QAAQ,CAAA,GAAIQ,CAAK,GAChDhB,EAAoB,oBAAI,MAAM;AAAA,QAChC,GAiB6D,UAAA,SAEjD;AAAA,QACCV;AAAA,MAAA,EAAA,CACH,IAEAA;AAAA,MAGH,GAAIP,MAAY,UAAU,EAAE,gBAAgB,EAAA,IAAM,CAAA;AAAA,MAClD,GAAGU;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/build/esm/components/DatePicker/components/Calendar/Calendar.styles.d.ts

@@ -1,6 +1,8 @@
 import { type DatePickerTypes } from '../../../../react-base/src/components/DatePicker';
 import { DayPicker } from 'react-day-picker';
-export declare const CalendarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-day-picker").DayPickerProps & import("styled-components/dist/types").BaseObject, {
+export interface CalendarStyledProps {
     $size: DatePickerTypes.CalendarSize;
-}>> & string & Omit<typeof DayPicker, keyof import("react").Component<any, {}, any>>;
+    $zIndex?: number;
+}
+export declare const CalendarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-day-picker").DayPickerProps & import("styled-components/dist/types").BaseObject, CalendarStyledProps>> & string & Omit<typeof DayPicker, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=Calendar.styles.d.ts.map

package/build/esm/components/DatePicker/components/Calendar/Calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAQvG,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,eAAO,MAAM,cAAc;WAA8B,eAAe,CAAC,YAAY;oFA0TnF,CAAC"}
+{"version":3,"file":"Calendar.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,+CAA+C,CAAC;AASvG,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,4TAiUzB,CAAC"}