acinguiux-ds-react-framework 0.1.18 → 0.1.20

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

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

package/build/cjs/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":"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"}

package/build/cjs/components/DateInput/DateInput.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),E=require("react"),S=require("classnames"),$=require("../../react-base/src/consts/index.js"),q=require("./DateInput.styles.js"),_=require("./components/DateInputField/DateInputField.js"),t=require("../../react-base/src/consts/classes.js"),x=E.forwardRef(({className:c,id:a=t.DATE_PICKER_CLASS,size:n=`${$.Sizes.Medium}`,invalid:e,disabled:o,day:I,month:D,year:p,...T},A)=>{const u=s=>({...(s==null?void 0:s.value)&&{value:s.value},...(s==null?void 0:s.onChange)&&{onChange:s.onChange},...(o||(s==null?void 0:s.disabled))&&{disabled:o||(s==null?void 0:s.disabled)},...(e||(s==null?void 0:s.invalid))&&{invalid:e||(s==null?void 0:s.invalid)}});return r.jsxs(q.DateInputWrapper,{ref:A,id:a,className:S(c,t.DATE_PICKER_CLASS),$size:n,...T,children:[r.jsx(_,{size:n,id:`${a}-${t.DATE_INPUT_DAY_ID_SUFFIX}`,dateType:"Day",...u(I)}),r.jsx(_,{size:n,id:`${a}-${t.DATE_INPUT_MONTH_ID_SUFFIX}`,dateType:"Month",...u(D)}),r.jsx(_,{size:n,id:`${a}-${t.DATE_INPUT_YEAR_ID_SUFFIX}`,dateType:"Year",...u(p)})]})});module.exports=x;
+"use strict";const n=require("react/jsx-runtime"),A=require("react"),E=require("classnames"),S=require("../../react-base/src/consts/index.js"),$=require("./DateInput.styles.js"),u=require("./components/DateInputField/DateInputField.js"),s=require("../../react-base/src/consts/classes.js"),d=A.forwardRef(({className:c,id:t=s.DATE_PICKER_CLASS,size:a=`${S.Sizes.Medium}`,invalid:_,disabled:o,day:I,month:D,year:p,...T},i)=>{const r=e=>({...e?.value&&{value:e.value},...e?.onChange&&{onChange:e.onChange},...(o||e?.disabled)&&{disabled:o||e?.disabled},...(_||e?.invalid)&&{invalid:_||e?.invalid}});return n.jsxs($.DateInputWrapper,{ref:i,id:t,className:E(c,s.DATE_PICKER_CLASS),$size:a,...T,children:[n.jsx(u,{size:a,id:`${t}-${s.DATE_INPUT_DAY_ID_SUFFIX}`,dateType:"Day",...r(I)}),n.jsx(u,{size:a,id:`${t}-${s.DATE_INPUT_MONTH_ID_SUFFIX}`,dateType:"Month",...r(D)}),n.jsx(u,{size:a,id:`${t}-${s.DATE_INPUT_YEAR_ID_SUFFIX}`,dateType:"Year",...r(p)})]})});module.exports=d;
 //# sourceMappingURL=DateInput.js.map

package/build/cjs/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":"iSAeMA,EAAYC,EAAAA,WAChB,CACE,CACE,UAAAC,EACA,GAAAC,EAAKC,EAAAA,kBACL,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,QAAAC,EACA,SAAAC,EACA,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAASC,IAAgC,CAC7C,IAAIA,GAAA,YAAAA,EAAO,QAAS,CAAE,MAAOA,EAAM,KAAA,EACnC,IAAIA,GAAA,YAAAA,EAAO,WAAY,CAAE,SAAUA,EAAM,QAAA,EACzC,IAAKP,IAAYO,GAAA,YAAAA,EAAO,YAAa,CAAE,SAAUP,IAAYO,GAAA,YAAAA,EAAO,SAAA,EACpE,IAAKR,IAAWQ,GAAA,YAAAA,EAAO,WAAY,CAAE,QAASR,IAAWQ,GAAA,YAAAA,EAAO,QAAA,CAAQ,GAG1E,OACEC,EAAAA,KAACC,EAAAA,iBAAA,CACC,IAAAJ,EACA,GAAAV,EACA,UAAWe,EAAWhB,EAAWE,mBAAiB,EAClD,MAAOC,EACN,GAAGO,EAEJ,SAAA,CAAAO,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAIkB,EAAAA,wBAAwB,GAAI,SAAS,MAAO,GAAGP,EAAML,CAAG,EAAG,EACpGU,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAImB,EAAAA,0BAA0B,GAAI,SAAS,QAAS,GAAGR,EAAMJ,CAAK,EAAG,EAC1GS,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAIoB,EAAAA,yBAAyB,GAAI,SAAS,OAAQ,GAAGT,EAAMH,CAAI,CAAA,CAAG,CAAA,CAAA,CAAA,CAG7G,CACF"}
+{"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":"iSAeMA,EAAYC,EAAAA,WAChB,CACE,CACE,UAAAC,EACA,GAAAC,EAAKC,EAAAA,kBACL,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,QAAAC,EACA,SAAAC,EACA,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAASC,IAAgC,CAC7C,GAAIA,GAAO,OAAS,CAAE,MAAOA,EAAM,KAAA,EACnC,GAAIA,GAAO,UAAY,CAAE,SAAUA,EAAM,QAAA,EACzC,IAAKP,GAAYO,GAAO,WAAa,CAAE,SAAUP,GAAYO,GAAO,QAAA,EACpE,IAAKR,GAAWQ,GAAO,UAAY,CAAE,QAASR,GAAWQ,GAAO,OAAA,CAAQ,GAG1E,OACEC,EAAAA,KAACC,EAAAA,iBAAA,CACC,IAAAJ,EACA,GAAAV,EACA,UAAWe,EAAWhB,EAAWE,mBAAiB,EAClD,MAAOC,EACN,GAAGO,EAEJ,SAAA,CAAAO,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAIkB,EAAAA,wBAAwB,GAAI,SAAS,MAAO,GAAGP,EAAML,CAAG,EAAG,EACpGU,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAImB,EAAAA,0BAA0B,GAAI,SAAS,QAAS,GAAGR,EAAMJ,CAAK,EAAG,EAC1GS,EAAAA,IAACC,EAAA,CAAe,KAAAf,EAAY,GAAI,GAAGF,CAAE,IAAIoB,EAAAA,yBAAyB,GAAI,SAAS,OAAQ,GAAGT,EAAMH,CAAI,CAAA,CAAG,CAAA,CAAA,CAAA,CAG7G,CACF"}

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

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

package/build/cjs/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","handleOnTodayClick","event","Flexbox","jsx","CalendarStyled","Button"],"mappings":"uLA8BMA,EAAW,CAA+B,CAC9C,QAAAC,EAAU,SACV,KAAAC,EAAO,SACP,OAAAC,EAAS,MACT,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,IAA0D,CACxD,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAASP,GAAS,IAAI,IAAM,EAC9D,CAACQ,EAAcC,CAAe,EAAIF,EAAAA,SAA0BT,CAAQ,EAC1E,GAAID,IAAW,MACb,OAAO,KAGT,MAAMa,EAAuBC,GAAmB,CAC9CL,EAAgBK,CAAQ,EACxBT,GAAA,MAAAA,EAAgBS,EAClB,EAEMC,EAAmD,CAACC,EAAcC,EAAaC,EAAiBC,IAAM,CAC1GjB,GAAA,MAAAA,EAAWc,EAAkCC,EAAaC,EAAiBC,GAC3EP,EAAgBI,CAAY,CAC9B,EAEMI,EAA4DC,GAAU,CAC1EN,EAAe,IAAI,KAAQ,IAAI,KAAQ,CAAA,EAAIM,CAAK,EAChDR,EAAoB,IAAI,IAAM,CAChC,EAEA,aACGS,EAAA,CAAQ,cAAc,SAAS,IAAI,OAAO,WAAW,aACpD,SAAAC,EAAAA,IAACC,EAAAA,eAAA,CACC,MAAOzB,EACP,KAAMD,EACN,MAAOU,EACP,cAAeK,EACf,SAAUF,EACV,SAAUI,EACV,cAAc,WACd,gBAAiB,GACjB,OACEjB,IAAY,UAAYQ,SACrBgB,EAAA,CAAQ,cAAc,MAAM,eAAe,gBAC1C,SAAA,CAAAC,EAAAA,IAACE,EAAA,CAAO,KAAA1B,EAAY,QAASqB,EAAoB,SAAA,QAEjD,EACChB,CAAA,CAAA,CACH,EAEAA,EAGH,GAAIN,IAAY,QAAU,CAAE,eAAgB,CAAA,EAAM,CAAA,EAClD,GAAGS,CAAA,CAAA,EAER,CAEJ"}
+{"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","handleOnTodayClick","event","Flexbox","jsx","CalendarStyled","Button"],"mappings":"6MAgBMA,EAAW,CAA+B,CAC9C,QAAAC,EAAU,SACV,KAAAC,EAAO,SACP,OAAAC,EAAS,MACT,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAASP,GAAS,IAAI,IAAM,EAC9D,CAACQ,EAAcC,CAAe,EAAIF,EAAAA,SAA0BV,CAAQ,EAC1E,GAAID,IAAW,MACb,OAAO,KAGT,KAAM,CAAE,MAAAc,GAAUN,EAEZO,EAAuBC,GAAmB,CAC9CN,EAAgBM,CAAQ,EACxBV,IAAgBU,CAAQ,CAC1B,EAEMC,EAAc,CAClBC,EACAC,EACAC,IACG,CACH,GAAI,EAAAtB,IAAY,SAAWoB,aAAwB,MAAQC,aAAwB,MAInF,OAAIL,IAAU,MACRI,GAAc,MAAQG,EAAAA,SAASD,EAAaF,EAAa,IAAI,EACxD,CAAE,KAAME,EAAa,GAAIF,EAAa,IAAA,EAExC,CAAE,KAAMA,GAAc,KAAM,GAAIE,CAAA,EAGrCN,IAAU,QACRI,GAAc,IAAMI,EAAAA,QAAQF,EAAaF,EAAa,EAAE,EACnD,CAAE,KAAMA,GAAc,GAAI,GAAIE,CAAA,EAEhC,CAAE,KAAMA,EAAa,GAAIF,GAAc,EAAA,EAG3C,CAACA,GAAc,MAAQ,CAACA,GAAc,IAAQA,GAAc,MAAQA,GAAc,GAC9E,CAAE,KAAME,CAAA,EAGVD,CACT,EAEMI,EAAmD,CAACJ,EAAcC,EAAaI,EAAiBC,IAAM,CAC1G,GAAIN,aAAwB,KAC1BN,EAAgBM,CAAY,EAC5BhB,IAAWgB,EAAkCC,EAAaI,EAAiBC,CAAC,MACvE,CACL,MAAMC,EAAWT,EAAYL,EAAcO,EAAcC,CAAW,EACpEP,EAAgBa,CAAQ,EACxBvB,IAAWuB,EAA8BN,EAAaI,EAAiBC,CAAC,CAC1E,CACF,EAEME,EAA4DC,GAAU,CAC1EL,EAAe,IAAI,KAAQ,IAAI,KAAQ,CAAA,EAAIK,CAAK,EAChDb,EAAoB,IAAI,IAAM,CAChC,EAEA,aACGc,EAAA,CAAQ,cAAc,SAAS,IAAI,OAAO,WAAW,aACpD,SAAAC,EAAAA,IAACC,EAAAA,eAAA,CACC,MAAOhC,EACP,QAASG,EACT,KAAMJ,EACN,MAAOW,EACP,cAAeM,EACf,SAAUH,EACV,SAAUW,EACV,cAAc,WACd,gBAAiB,GACjB,OACEzB,IAAY,UAAYS,SACrBsB,EAAA,CAAQ,cAAc,MAAM,eAAe,gBAC1C,SAAA,CAAAC,EAAAA,IAACE,EAAA,CAAO,KAAAjC,EAAY,QAAS4B,EAAoB,SAAA,QAEjD,EACCtB,CAAA,CAAA,CACH,EAEAA,EAGH,GAAIP,IAAY,QAAU,CAAE,eAAgB,CAAA,EAAM,CAAA,EAClD,GAAGU,CAAA,CAAA,EAER,CAEJ"}

package/build/cjs/components/DatePicker/components/Calendar/Calendar.styles.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../../../react-base/src/components/DatePicker/DatePicker.consts.js"),r=require("../../../../react-base/src/theme/types/layer.js"),a=require("../../../../react-base/src/utils/sizesUtils.js"),n=require("../../../../react-base/src/utils/stylesUtils.js"),u=require("react-day-picker"),p=require("styled-components"),g=p.styled(u.DayPicker)(({theme:t,$size:e})=>{const o=t.layer(),i=t.layer({foundation:"section"}),c=t.layer({foundation:"section",disabled:!0}),s=t.layer({selectedProminence:"subtle"}),l=t.layer({state:"hover"});return p.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../../react-base/src/components/DatePicker/DatePicker.consts.js"),g=require("../../../../react-base/src/consts/index.js"),r=require("../../../../react-base/src/theme/types/layer.js"),a=require("../../../../react-base/src/utils/sizesUtils.js"),n=require("../../../../react-base/src/utils/stylesUtils.js"),b=require("react-day-picker"),l=require("styled-components"),y=l.styled(b.DayPicker)(({theme:d,$size:e,$zIndex:c})=>{const o=d.layer(),i=d.layer({foundation:"section"}),u=d.layer({foundation:"section",disabled:!0}),s=d.layer({selectedProminence:"subtle"}),p=d.layer({state:"hover"});return l.css`
     /* stylelint-disable custom-property-pattern */
-    --rdp-day-height: ${d.consts[e].boxSize}px;
-    --rdp-day-width: ${d.consts[e].boxSize}px;
+    --rdp-day-height: ${t.consts[e].boxSize}px;
+    --rdp-day-width: ${t.consts[e].boxSize}px;
     --rdp-border-radius: 8px;
     --rdp-day_button-height: var(--rdp-day-width);
     --rdp-day_button-width: var(--rdp-day-height);
     --rdp-selected-border: ${o[r.Variables.BackgroundSelected]};
-    --rdp-months-gap: ${d.consts[e].panelGap}px;
+    --rdp-months-gap: ${t.consts[e].panelGap}px;
     --rdp-nav_button-disabled-opacity: 0.5;
-    --rdp-nav_button-height: ${d.consts[e].height}px;
-    --rdp-nav_button-width: ${d.consts[e].boxSize}px;
-    --rdp-nav-height: ${d.consts[e].height}px;
+    --rdp-nav_button-height: ${t.consts[e].height}px;
+    --rdp-nav_button-width: ${t.consts[e].boxSize}px;
+    --rdp-nav-height: ${t.consts[e].height}px;
     --rdp-range_middle-background-color: ${s[r.Variables.BackgroundSelected]};
     --rdp-range_middle-color: ${s[r.Variables.TextOnSelectedBackgroundStrong]};
     --rdp-range_start-color: ${o[r.Variables.TextOnSelectedBackgroundStrong]};
@@ -34,7 +34,7 @@
     }
 
     .rdp-day {
-      ${t.typography("label",a.getLabelTypographySize(e))};
+      ${d.typography("label",a.getLabelTypographySize(e))};
       width: var(--rdp-day-width);
       height: var(--rdp-day-height);
       text-align: center;
@@ -91,19 +91,19 @@
       }
 
       &:hover {
-        background-color: ${l[r.Variables.BackgroundFoundation]};
+        background-color: ${p[r.Variables.BackgroundFoundation]};
       }
 
       &:focus-visible {
-        ${n.getFocusStyles(t)};
+        ${n.getFocusStyles(d)};
       }
     }
 
     .rdp-chevron {
       display: inline-block;
       fill: ${o[r.Variables.TextOnFoundationStrong]};
-      width: ${d.consts[e].chevronSize}px;
-      height: ${d.consts[e].chevronSize}px;
+      width: ${t.consts[e].chevronSize}px;
+      height: ${t.consts[e].chevronSize}px;
     }
 
     .rdp-dropdowns {
@@ -113,7 +113,7 @@
     }
 
     .rdp-dropdown {
-      z-index: 2;
+      z-index: ${c??g.ZIndexes.DATE_PICKER};
       opacity: 0;
       appearance: none;
       position: absolute;
@@ -127,7 +127,7 @@
       line-height: inherit;
 
       &:focus-visible {
-        ${n.getFocusStyles(t)};
+        ${n.getFocusStyles(d)};
       }
     }
 
@@ -140,11 +140,11 @@
       border-radius: var(--rdp-border-radius);
 
       &:hover {
-        background-color: ${l[r.Variables.BackgroundFoundation]};
+        background-color: ${p[r.Variables.BackgroundFoundation]};
       }
 
       &:has(:focus-visible) {
-        ${n.getFocusStyles(t)};
+        ${n.getFocusStyles(d)};
       }
 
       .rdp-chevron {
@@ -153,7 +153,7 @@
     }
 
     .rdp-month_caption {
-      ${t.typography("heading",a.getHeadingTypographySize(a.getSmallerSize(e)))};
+      ${d.typography("heading",a.getHeadingTypographySize(a.getSmallerSize(e)))};
       display: flex;
       place-content: center center;
       height: var(--rdp-nav-height);
@@ -187,7 +187,7 @@
     }
 
     .rdp-weekday {
-      ${t.typography("label",a.getLabelTypographySize(e))};
+      ${d.typography("label",a.getLabelTypographySize(e))};
       padding: var(--rdp-weekday-padding);
       text-align: var(--rdp-weekday-text-align);
       text-transform: var(--rdp-weekday-text-transform);
@@ -199,9 +199,9 @@
       &::before {
         content: '';
         position: absolute;
-        bottom: ${d.selectedDateUnderline[e].bottom}px;
-        height: ${d.selectedDateUnderline[e].height}px;
-        width: ${d.selectedDateUnderline[e].width}px;
+        bottom: ${t.selectedDateUnderline[e].bottom}px;
+        height: ${t.selectedDateUnderline[e].height}px;
+        width: ${t.selectedDateUnderline[e].width}px;
         left: 50%;
         transform: translateX(-50%);
         border-radius: var(--rdp-border-radius);
@@ -217,7 +217,7 @@
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: ${d.consts[e].panelPadding}px;
+      gap: ${t.consts[e].panelPadding}px;
     }
 
     .rdp-outside {
@@ -264,7 +264,7 @@
     }
 
     .rdp-disabled {
-      color: ${c[r.Variables.TextOnFoundationSubtle]};
+      color: ${u[r.Variables.TextOnFoundationSubtle]};
       text-decoration: line-through;
     }
 
@@ -296,13 +296,20 @@
     }
 
     .rdp-day_button:focus-visible {
-      ${n.getFocusStyles(t)};
+      ${n.getFocusStyles(d)};
     }
 
-    &[data-mode='single'] .rdp-selected > button {
+    &[data-mode='single'] .rdp-selected > button,
+    &[data-mode='range']
+      .rdp-selected[aria-selected='true'][data-selected='true']:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end)
+      > button,
+    &[data-mode='range']
+      .rdp-focused[data-focused='true']:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end)
+      > button,
+    &[data-mode='range'] .rdp-selected.rdp-focused:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end) > button {
       border-radius: var(--rdp-border-radius);
       background-color: ${o[r.Variables.BackgroundSelected]};
       color: ${o[r.Variables.TextOnSelectedBackgroundStrong]};
     }
-  `});exports.CalendarStyled=g;
+  `});exports.CalendarStyled=y;
 //# sourceMappingURL=Calendar.styles.js.map

package/build/cjs/components/DatePicker/components/Calendar/Calendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.js","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.styles.ts"],"sourcesContent":["import { DatePickerConsts, type DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport {\n  getFocusStyles,\n  getHeadingTypographySize,\n  getLabelTypographySize,\n  getSmallerSize,\n} from 'acinguiux-ds-react-base/utils';\nimport { DayPicker } from 'react-day-picker';\nimport { styled, css } from 'styled-components';\n\nexport const CalendarStyled = styled(DayPicker)<{ $size: DatePickerTypes.CalendarSize }>(({ theme, $size }) => {\n  const strongLayer = theme.layer();\n  const sectionLayer = theme.layer({ foundation: 'section' });\n  const disabledLayer = theme.layer({ foundation: 'section', disabled: true });\n  const subtleLayer = theme.layer({ selectedProminence: 'subtle' });\n  const hoverLayer = theme.layer({ state: 'hover' });\n\n  return css`\n    /* stylelint-disable custom-property-pattern */\n    --rdp-day-height: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-day-width: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-border-radius: 8px;\n    --rdp-day_button-height: var(--rdp-day-width);\n    --rdp-day_button-width: var(--rdp-day-height);\n    --rdp-selected-border: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-months-gap: ${DatePickerConsts.consts[$size].panelGap}px;\n    --rdp-nav_button-disabled-opacity: 0.5;\n    --rdp-nav_button-height: ${DatePickerConsts.consts[$size].height}px;\n    --rdp-nav_button-width: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-nav-height: ${DatePickerConsts.consts[$size].height}px;\n    --rdp-range_middle-background-color: ${subtleLayer[Variables.BackgroundSelected]};\n    --rdp-range_middle-color: ${subtleLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_start-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_start-date-background-color: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-range_end-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_end-date-background-color: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-weekday-padding: 0;\n    --rdp-weekday-text-align: center;\n\n    position: relative;\n    box-sizing: border-box;\n\n    button {\n      border: none;\n      background: none;\n      padding: 0;\n      margin: 0;\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n    }\n\n    .rdp-day {\n      ${theme.typography('label', getLabelTypographySize($size))};\n      width: var(--rdp-day-width);\n      height: var(--rdp-day-height);\n      text-align: center;\n      padding: 0;\n    }\n\n    .rdp-day_button {\n      justify-content: center;\n      align-items: center;\n      display: flex;\n\n      width: var(--rdp-day_button-width);\n      height: var(--rdp-day_button-height);\n      border-radius: var(--rdp-border-radius);\n\n      &:disabled {\n        cursor: revert;\n      }\n\n      .rdp-caption_label {\n        z-index: 1;\n\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n\n        white-space: nowrap;\n        border: 0;\n      }\n    }\n\n    .rdp-button_next,\n    .rdp-button_previous {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0;\n      padding: 0;\n      position: relative;\n      font: inherit;\n      appearance: none;\n      background: none;\n      border: 0;\n      border-radius: var(--rdp-border-radius);\n      color: inherit;\n      cursor: pointer;\n\n      width: var(--rdp-nav_button-width);\n      height: var(--rdp-nav_button-height);\n\n      &:disabled {\n        cursor: revert;\n        opacity: var(--rdp-nav_button-disabled-opacity);\n      }\n\n      &:hover {\n        background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n      }\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    }\n\n    .rdp-chevron {\n      display: inline-block;\n      fill: ${strongLayer[Variables.TextOnFoundationStrong]};\n      width: ${DatePickerConsts.consts[$size].chevronSize}px;\n      height: ${DatePickerConsts.consts[$size].chevronSize}px;\n    }\n\n    .rdp-dropdowns {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    .rdp-dropdown {\n      z-index: 2;\n      opacity: 0;\n      appearance: none;\n      position: absolute;\n      inset-block: 0 0;\n      inset-inline-start: 0;\n      width: 100%;\n      margin: 0;\n      padding: 0;\n      cursor: inherit;\n      border: none;\n      line-height: inherit;\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    }\n\n    .rdp-dropdown_root {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      color: ${strongLayer[Variables.TextOnFoundationStrong]};\n      padding: 6px;\n      border-radius: var(--rdp-border-radius);\n\n      &:hover {\n        background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n      }\n\n      &:has(:focus-visible) {\n        ${getFocusStyles(theme)};\n      }\n\n      .rdp-chevron {\n        display: none;\n      }\n    }\n\n    .rdp-month_caption {\n      ${theme.typography('heading', getHeadingTypographySize(getSmallerSize($size)))};\n      display: flex;\n      place-content: center center;\n      height: var(--rdp-nav-height);\n    }\n\n    .rdp-months {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--rdp-months-gap);\n      max-width: fit-content;\n    }\n\n    .rdp-month_grid {\n      border-spacing: 0 2px;\n      border-collapse: separate;\n      padding-top: 0.5rem;\n    }\n\n    .rdp-nav {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      display: flex;\n      align-items: center;\n      left: 0;\n      justify-content: space-between;\n\n      height: var(--rdp-nav-height);\n    }\n\n    .rdp-weekday {\n      ${theme.typography('label', getLabelTypographySize($size))};\n      padding: var(--rdp-weekday-padding);\n      text-align: var(--rdp-weekday-text-align);\n      text-transform: var(--rdp-weekday-text-transform);\n    }\n\n    .rdp-today:not(.rdp-outside) {\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        bottom: ${DatePickerConsts.selectedDateUnderline[$size].bottom}px;\n        height: ${DatePickerConsts.selectedDateUnderline[$size].height}px;\n        width: ${DatePickerConsts.selectedDateUnderline[$size].width}px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: var(--rdp-border-radius);\n        background-color: var(--rdp-selected-border);\n      }\n\n      &.rdp-selected::before {\n        background-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n      }\n    }\n\n    &.rdp-root {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: ${DatePickerConsts.consts[$size].panelPadding}px;\n    }\n\n    .rdp-outside {\n      color: ${sectionLayer[Variables.TextOnFoundationStrong]};\n      background-color: ${sectionLayer[Variables.BackgroundFoundation]};\n    }\n\n    .rdp-outside:last-of-type,\n    .rdp-outside:not(.rdp-outside:has(+ .rdp-day.rdp-outside)) {\n      border-top-right-radius: var(--rdp-border-radius);\n      border-bottom-right-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-day:not(.rdp-outside) + .rdp-outside,\n    .rdp-outside:first-of-type {\n      border-top-left-radius: var(--rdp-border-radius);\n      border-bottom-left-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-hidden {\n      visibility: hidden;\n      color: var(--rdp-range_start-color);\n    }\n\n    .rdp-range_start .rdp-day_button {\n      background-color: var(--rdp-range_start-date-background-color);\n      color: var(--rdp-range_start-color);\n      border-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-range_middle:not(.rdp-outside) {\n      background-color: var(--rdp-range_middle-background-color);\n    }\n\n    .rdp-range_middle .rdp-day_button {\n      border: unset;\n      border-radius: unset;\n      color: var(--rdp-range_middle-color);\n      background-color: transparent;\n    }\n\n    .rdp-range_end {\n      color: var(--rdp-range_end-color);\n    }\n\n    .rdp-disabled {\n      color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n      text-decoration: line-through;\n    }\n\n    .rdp-range_end .rdp-day_button {\n      color: var(--rdp-range_start-color);\n      background-color: var(--rdp-range_end-date-background-color);\n    }\n\n    .rdp-range_start.rdp-range_end {\n      background: revert;\n    }\n\n    .rdp-focusable {\n      cursor: pointer;\n    }\n\n    .rdp-weekdays {\n      color: ${strongLayer[Variables.TextOnFoundationSubtle]};\n    }\n\n    .rdp-range_start:not(.rdp-range_end) > button {\n      border-top-right-radius: unset;\n      border-bottom-right-radius: unset;\n    }\n\n    .rdp-range_end:not(.rdp-range_start) > button {\n      border-top-left-radius: unset;\n      border-bottom-left-radius: unset;\n    }\n\n    .rdp-day_button:focus-visible {\n      ${getFocusStyles(theme)};\n    }\n\n    &[data-mode='single'] .rdp-selected > button {\n      border-radius: var(--rdp-border-radius);\n      background-color: ${strongLayer[Variables.BackgroundSelected]};\n      color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    }\n  `;\n});\n"],"names":["CalendarStyled","styled","DayPicker","theme","$size","strongLayer","sectionLayer","disabledLayer","subtleLayer","hoverLayer","css","DatePickerConsts.consts","Variables","getLabelTypographySize","getFocusStyles","getHeadingTypographySize","getSmallerSize","DatePickerConsts.selectedDateUnderline"],"mappings":"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"}
+{"version":3,"file":"Calendar.styles.js","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.styles.ts"],"sourcesContent":["import { DatePickerConsts, type DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\nimport { ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport {\n  getFocusStyles,\n  getHeadingTypographySize,\n  getLabelTypographySize,\n  getSmallerSize,\n} from 'acinguiux-ds-react-base/utils';\nimport { DayPicker } from 'react-day-picker';\nimport { styled, css } from 'styled-components';\n\nexport interface CalendarStyledProps {\n  $size: DatePickerTypes.CalendarSize;\n  $zIndex?: number;\n}\n\nexport const CalendarStyled = styled(DayPicker)<CalendarStyledProps>(({ theme, $size, $zIndex }) => {\n  const strongLayer = theme.layer();\n  const sectionLayer = theme.layer({ foundation: 'section' });\n  const disabledLayer = theme.layer({ foundation: 'section', disabled: true });\n  const subtleLayer = theme.layer({ selectedProminence: 'subtle' });\n  const hoverLayer = theme.layer({ state: 'hover' });\n\n  return css`\n    /* stylelint-disable custom-property-pattern */\n    --rdp-day-height: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-day-width: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-border-radius: 8px;\n    --rdp-day_button-height: var(--rdp-day-width);\n    --rdp-day_button-width: var(--rdp-day-height);\n    --rdp-selected-border: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-months-gap: ${DatePickerConsts.consts[$size].panelGap}px;\n    --rdp-nav_button-disabled-opacity: 0.5;\n    --rdp-nav_button-height: ${DatePickerConsts.consts[$size].height}px;\n    --rdp-nav_button-width: ${DatePickerConsts.consts[$size].boxSize}px;\n    --rdp-nav-height: ${DatePickerConsts.consts[$size].height}px;\n    --rdp-range_middle-background-color: ${subtleLayer[Variables.BackgroundSelected]};\n    --rdp-range_middle-color: ${subtleLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_start-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_start-date-background-color: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-range_end-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    --rdp-range_end-date-background-color: ${strongLayer[Variables.BackgroundSelected]};\n    --rdp-weekday-padding: 0;\n    --rdp-weekday-text-align: center;\n\n    position: relative;\n    box-sizing: border-box;\n\n    button {\n      border: none;\n      background: none;\n      padding: 0;\n      margin: 0;\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n    }\n\n    .rdp-day {\n      ${theme.typography('label', getLabelTypographySize($size))};\n      width: var(--rdp-day-width);\n      height: var(--rdp-day-height);\n      text-align: center;\n      padding: 0;\n    }\n\n    .rdp-day_button {\n      justify-content: center;\n      align-items: center;\n      display: flex;\n\n      width: var(--rdp-day_button-width);\n      height: var(--rdp-day_button-height);\n      border-radius: var(--rdp-border-radius);\n\n      &:disabled {\n        cursor: revert;\n      }\n\n      .rdp-caption_label {\n        z-index: 1;\n\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n\n        white-space: nowrap;\n        border: 0;\n      }\n    }\n\n    .rdp-button_next,\n    .rdp-button_previous {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0;\n      padding: 0;\n      position: relative;\n      font: inherit;\n      appearance: none;\n      background: none;\n      border: 0;\n      border-radius: var(--rdp-border-radius);\n      color: inherit;\n      cursor: pointer;\n\n      width: var(--rdp-nav_button-width);\n      height: var(--rdp-nav_button-height);\n\n      &:disabled {\n        cursor: revert;\n        opacity: var(--rdp-nav_button-disabled-opacity);\n      }\n\n      &:hover {\n        background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n      }\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    }\n\n    .rdp-chevron {\n      display: inline-block;\n      fill: ${strongLayer[Variables.TextOnFoundationStrong]};\n      width: ${DatePickerConsts.consts[$size].chevronSize}px;\n      height: ${DatePickerConsts.consts[$size].chevronSize}px;\n    }\n\n    .rdp-dropdowns {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    .rdp-dropdown {\n      z-index: ${$zIndex ?? ZIndexes.DATE_PICKER};\n      opacity: 0;\n      appearance: none;\n      position: absolute;\n      inset-block: 0 0;\n      inset-inline-start: 0;\n      width: 100%;\n      margin: 0;\n      padding: 0;\n      cursor: inherit;\n      border: none;\n      line-height: inherit;\n\n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    }\n\n    .rdp-dropdown_root {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      color: ${strongLayer[Variables.TextOnFoundationStrong]};\n      padding: 6px;\n      border-radius: var(--rdp-border-radius);\n\n      &:hover {\n        background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n      }\n\n      &:has(:focus-visible) {\n        ${getFocusStyles(theme)};\n      }\n\n      .rdp-chevron {\n        display: none;\n      }\n    }\n\n    .rdp-month_caption {\n      ${theme.typography('heading', getHeadingTypographySize(getSmallerSize($size)))};\n      display: flex;\n      place-content: center center;\n      height: var(--rdp-nav-height);\n    }\n\n    .rdp-months {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--rdp-months-gap);\n      max-width: fit-content;\n    }\n\n    .rdp-month_grid {\n      border-spacing: 0 2px;\n      border-collapse: separate;\n      padding-top: 0.5rem;\n    }\n\n    .rdp-nav {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      display: flex;\n      align-items: center;\n      left: 0;\n      justify-content: space-between;\n\n      height: var(--rdp-nav-height);\n    }\n\n    .rdp-weekday {\n      ${theme.typography('label', getLabelTypographySize($size))};\n      padding: var(--rdp-weekday-padding);\n      text-align: var(--rdp-weekday-text-align);\n      text-transform: var(--rdp-weekday-text-transform);\n    }\n\n    .rdp-today:not(.rdp-outside) {\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        bottom: ${DatePickerConsts.selectedDateUnderline[$size].bottom}px;\n        height: ${DatePickerConsts.selectedDateUnderline[$size].height}px;\n        width: ${DatePickerConsts.selectedDateUnderline[$size].width}px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: var(--rdp-border-radius);\n        background-color: var(--rdp-selected-border);\n      }\n\n      &.rdp-selected::before {\n        background-color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n      }\n    }\n\n    &.rdp-root {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: ${DatePickerConsts.consts[$size].panelPadding}px;\n    }\n\n    .rdp-outside {\n      color: ${sectionLayer[Variables.TextOnFoundationStrong]};\n      background-color: ${sectionLayer[Variables.BackgroundFoundation]};\n    }\n\n    .rdp-outside:last-of-type,\n    .rdp-outside:not(.rdp-outside:has(+ .rdp-day.rdp-outside)) {\n      border-top-right-radius: var(--rdp-border-radius);\n      border-bottom-right-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-day:not(.rdp-outside) + .rdp-outside,\n    .rdp-outside:first-of-type {\n      border-top-left-radius: var(--rdp-border-radius);\n      border-bottom-left-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-hidden {\n      visibility: hidden;\n      color: var(--rdp-range_start-color);\n    }\n\n    .rdp-range_start .rdp-day_button {\n      background-color: var(--rdp-range_start-date-background-color);\n      color: var(--rdp-range_start-color);\n      border-radius: var(--rdp-border-radius);\n    }\n\n    .rdp-range_middle:not(.rdp-outside) {\n      background-color: var(--rdp-range_middle-background-color);\n    }\n\n    .rdp-range_middle .rdp-day_button {\n      border: unset;\n      border-radius: unset;\n      color: var(--rdp-range_middle-color);\n      background-color: transparent;\n    }\n\n    .rdp-range_end {\n      color: var(--rdp-range_end-color);\n    }\n\n    .rdp-disabled {\n      color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n      text-decoration: line-through;\n    }\n\n    .rdp-range_end .rdp-day_button {\n      color: var(--rdp-range_start-color);\n      background-color: var(--rdp-range_end-date-background-color);\n    }\n\n    .rdp-range_start.rdp-range_end {\n      background: revert;\n    }\n\n    .rdp-focusable {\n      cursor: pointer;\n    }\n\n    .rdp-weekdays {\n      color: ${strongLayer[Variables.TextOnFoundationSubtle]};\n    }\n\n    .rdp-range_start:not(.rdp-range_end) > button {\n      border-top-right-radius: unset;\n      border-bottom-right-radius: unset;\n    }\n\n    .rdp-range_end:not(.rdp-range_start) > button {\n      border-top-left-radius: unset;\n      border-bottom-left-radius: unset;\n    }\n\n    .rdp-day_button:focus-visible {\n      ${getFocusStyles(theme)};\n    }\n\n    &[data-mode='single'] .rdp-selected > button,\n    &[data-mode='range']\n      .rdp-selected[aria-selected='true'][data-selected='true']:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end)\n      > button,\n    &[data-mode='range']\n      .rdp-focused[data-focused='true']:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end)\n      > button,\n    &[data-mode='range'] .rdp-selected.rdp-focused:not(.rdp-range_start, .rdp-range_middle, .rdp-range_end) > button {\n      border-radius: var(--rdp-border-radius);\n      background-color: ${strongLayer[Variables.BackgroundSelected]};\n      color: ${strongLayer[Variables.TextOnSelectedBackgroundStrong]};\n    }\n  `;\n});\n"],"names":["CalendarStyled","styled","DayPicker","theme","$size","$zIndex","strongLayer","sectionLayer","disabledLayer","subtleLayer","hoverLayer","css","DatePickerConsts.consts","Variables","getLabelTypographySize","getFocusStyles","ZIndexes","getHeadingTypographySize","getSmallerSize","DatePickerConsts.selectedDateUnderline"],"mappings":"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"}

package/build/cjs/components/DatePicker/components/NativeDatePicker/NativeDatePicker.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),r=require("react"),C=require("classnames"),k=require("../../../../react-base/src/consts/index.js"),m=require("../../../../react-base/src/components/DatePicker/DatePicker.consts.js"),c=require("../../../Icon/components/CalendarEvent.js"),v=require("../../../TextInput/TextInput.js"),R=require("../../../../react-base/src/consts/classes.js"),j=r.forwardRef(({className:u,size:o=`${k.Sizes.Medium}`,prefix:l,suffix:f=!0,background:n=!0,allowClear:x=!0,type:d="date",...q},p)=>{const s=r.useRef(null);r.useImperativeHandle(p,()=>s.current);const i=r.useCallback(()=>{var e,a;(a=(e=s.current)==null?void 0:e.showPicker)==null||a.call(e)},[]);return t.jsx(v,{className:C(u,R.DATE_PICKER_CLASS),"aria-label":m.ariaLabel,size:o,prefix:l?{transparent:!n,node:t.jsx(c,{}),onClick:i}:void 0,suffix:f?{transparent:!n,node:t.jsx(c,{}),onClick:i}:void 0,ref:s,type:d,allowClear:x,...q})});module.exports=j;
+"use strict";const t=require("react/jsx-runtime"),e=require("react"),q=require("classnames"),k=require("../../../../react-base/src/consts/index.js"),p=require("../../../../react-base/src/components/DatePicker/DatePicker.consts.js"),n=require("../../../Icon/components/CalendarEvent.js"),C=require("./NativeDatePicker.styles.js"),v=require("../../../../react-base/src/consts/classes.js"),m=e.forwardRef(({className:a,size:c=`${k.Sizes.Medium}`,prefix:u,suffix:o=!0,background:s=!0,allowClear:l=!0,type:d="date",...x},f)=>{const r=e.useRef(null);e.useImperativeHandle(f,()=>r.current);const i=e.useCallback(()=>{r.current?.showPicker?.()},[]);return t.jsx(C.TextInputStyled,{className:q(a,v.DATE_PICKER_CLASS),"aria-label":p.ariaLabel,size:c,prefix:u?{transparent:!s,node:t.jsx(n,{}),onClick:i}:void 0,suffix:o?{transparent:!s,node:t.jsx(n,{}),onClick:i}:void 0,inputRef:r,type:d,allowClear:l,...x})});module.exports=m;
 //# sourceMappingURL=NativeDatePicker.js.map

package/build/cjs/components/DatePicker/components/NativeDatePicker/NativeDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, DATE_PICKER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DatePickerConsts } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport CalendarEvent from '../../../Icon/components/CalendarEvent';\nimport type { INativeDatePickerProps } from './NativeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\n\nconst NativeDatePicker = forwardRef(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      prefix,\n      suffix = true,\n      background = true,\n      allowClear = true,\n      type = 'date',\n      ...rest\n    }: INativeDatePickerProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const onSuffixClick = useCallback(() => {\n      inputRef.current?.showPicker?.();\n    }, []);\n\n    return (\n      <TextInput\n        className={classNames(className, DATE_PICKER_CLASS)}\n        aria-label={DatePickerConsts.ariaLabel}\n        size={size}\n        prefix={prefix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        suffix={suffix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        ref={inputRef}\n        type={type}\n        allowClear={allowClear}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default NativeDatePicker;\n"],"names":["NativeDatePicker","forwardRef","className","size","Sizes","prefix","suffix","background","allowClear","type","rest","ref","inputRef","useRef","useImperativeHandle","onSuffixClick","useCallback","_b","_a","jsx","TextInput","classNames","DATE_PICKER_CLASS","DatePickerConsts.ariaLabel","CalendarEvent"],"mappings":"sYAUMA,EAAmBC,EAAAA,WACvB,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,OAAAC,EACA,OAAAC,EAAS,GACT,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,KAAAC,EAAO,OACP,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EAC9CC,EAAAA,oBAAoBH,EAAK,IAAMC,EAAS,OAAQ,EAEhD,MAAMG,EAAgBC,EAAAA,YAAY,IAAM,UACtCC,GAAAC,EAAAN,EAAS,UAAT,YAAAM,EAAkB,aAAlB,MAAAD,EAAA,KAAAC,EACF,EAAG,CAAA,CAAE,EAEL,OACEC,EAAAA,IAACC,EAAA,CACC,UAAWC,EAAWnB,EAAWoB,mBAAiB,EAClD,aAAYC,EAAAA,UACZ,KAAApB,EACA,OAAQE,EAAS,CAAE,YAAa,CAACE,EAAY,KAAMY,MAACK,EAAA,CAAA,CAAc,EAAI,QAAST,CAAA,EAAkB,OACjG,OAAQT,EAAS,CAAE,YAAa,CAACC,EAAY,KAAMY,MAACK,EAAA,CAAA,CAAc,EAAI,QAAST,CAAA,EAAkB,OACjG,IAAKH,EACL,KAAAH,EACA,WAAAD,EACC,GAAGE,CAAA,CAAA,CAGV,CACF"}
+{"version":3,"file":"NativeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, DATE_PICKER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DatePickerConsts } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport CalendarEvent from '../../../Icon/components/CalendarEvent';\nimport type { INativeDatePickerProps } from './NativeDatePicker.types';\nimport { TextInputStyled } from './NativeDatePicker.styles';\n\nconst NativeDatePicker = forwardRef(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      prefix,\n      suffix = true,\n      background = true,\n      allowClear = true,\n      type = 'date',\n      ...rest\n    }: INativeDatePickerProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const onSuffixClick = useCallback(() => {\n      inputRef.current?.showPicker?.();\n    }, []);\n\n    return (\n      <TextInputStyled\n        className={classNames(className, DATE_PICKER_CLASS)}\n        aria-label={DatePickerConsts.ariaLabel}\n        size={size}\n        prefix={prefix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        suffix={suffix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        inputRef={inputRef}\n        type={type}\n        allowClear={allowClear}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default NativeDatePicker;\n"],"names":["NativeDatePicker","forwardRef","className","size","Sizes","prefix","suffix","background","allowClear","type","rest","ref","inputRef","useRef","useImperativeHandle","onSuffixClick","useCallback","jsx","TextInputStyled","classNames","DATE_PICKER_CLASS","DatePickerConsts.ariaLabel","CalendarEvent"],"mappings":"mYAUMA,EAAmBC,EAAAA,WACvB,CACE,CACE,UAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,OAAAC,EACA,OAAAC,EAAS,GACT,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,KAAAC,EAAO,OACP,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EAC9CC,EAAAA,oBAAoBH,EAAK,IAAMC,EAAS,OAAQ,EAEhD,MAAMG,EAAgBC,EAAAA,YAAY,IAAM,CACtCJ,EAAS,SAAS,aAAA,CACpB,EAAG,CAAA,CAAE,EAEL,OACEK,EAAAA,IAACC,EAAAA,gBAAA,CACC,UAAWC,EAAWjB,EAAWkB,mBAAiB,EAClD,aAAYC,EAAAA,UACZ,KAAAlB,EACA,OAAQE,EAAS,CAAE,YAAa,CAACE,EAAY,KAAMU,MAACK,EAAA,CAAA,CAAc,EAAI,QAASP,CAAA,EAAkB,OACjG,OAAQT,EAAS,CAAE,YAAa,CAACC,EAAY,KAAMU,MAACK,EAAA,CAAA,CAAc,EAAI,QAASP,CAAA,EAAkB,OACjG,SAAAH,EACA,KAAAH,EACA,WAAAD,EACC,GAAGE,CAAA,CAAA,CAGV,CACF"}

package/build/cjs/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),s=require("../../../../react-base/src/utils/sizesUtils.js"),i=require("../../../TextInput/TextInput.js"),n=e.styled(i)(({theme:t,size:l})=>e.css`
+    input {
+      line-height: calc(${t.typography("label",s.getLabelTypographySize(l)).lineHeight} - 2px);
+    }
+  `);exports.TextInputStyled=n;
+//# sourceMappingURL=NativeDatePicker.styles.js.map

package/build/cjs/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { TextInputTypes } from 'acinguiux-ds-react-base/components/TextInput';\n\nimport TextInput from '../../../TextInput/TextInput';\n\nexport const TextInputStyled = styled(TextInput)<{ size: TextInputTypes.Size }>(({ theme, size }) => {\n  return css`\n    input {\n      line-height: calc(${theme.typography('label', getLabelTypographySize(size)).lineHeight} - 2px);\n    }\n  `;\n});\n"],"names":["TextInputStyled","styled","TextInput","theme","size","css","getLabelTypographySize"],"mappings":"0PAMaA,EAAkBC,EAAAA,OAAOC,CAAS,EAAiC,CAAC,CAAE,MAAAC,EAAO,KAAAC,KACjFC,EAAAA;AAAAA;AAAAA,0BAEiBF,EAAM,WAAW,QAASG,EAAAA,uBAAuBF,CAAI,CAAC,EAAE,UAAU;AAAA;AAAA,GAG3F"}

package/build/cjs/components/DatePicker/components/RangeDatePicker/RangeDatePicker.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),o=require("react"),S=require("date-fns"),k=require("../../../../react-base/src/consts/index.js"),B=require("classnames"),q=require("../../../Popover/Popover.js"),W=require("../Calendar/Calendar.js"),X=require("../../../Icon/components/ArrowRight.js"),z=require("../../../Icon/components/CalendarEvent.js"),G=require("./RangeDatePicker.styles.js"),K=require("../../../TextInput/TextInput.js"),y=require("../../../../react-base/src/consts/classes.js"),H=({size:f=k.Sizes.Medium,picker:$="day",format:p="dd/MM/yyyy",disabled:c,invalid:g,defaultValue:C,value:D,onChange:r,open:w,calendarProps:F,placeholder:u,allowClear:N,className:L,...M})=>{const V=o.useId(),b=o.useRef(null),O=o.useRef(null),E=o.useRef(null),[i,m]=o.useState(C),[a,R]=o.useState();o.useEffect(()=>{m(D)},[D]);const[x,P]=o.useState({from:"",to:""}),[I,j]=o.useState(w);o.useEffect(()=>{j(w)},[w]);const d=o.useCallback(e=>{R(e),j(t=>!t)},[]),v=o.useCallback((e,t=a)=>{j(e),t&&(t==="from"&&setTimeout(()=>{var n;return(n=O.current)==null?void 0:n.focus()},0),t==="to"&&setTimeout(()=>{var n;return(n=E.current)==null?void 0:n.focus()},0),R(void 0))},[a]),T=o.useCallback(e=>{e?(P(t=>({...t,from:S.format(e.from??t.from,p),...e.to?{to:S.format(e.to,p)}:{}})),m(e),r==null||r(e)):(P({from:"",to:""}),m(void 0),r==null||r(void 0)),a==="from"&&(i==null?void 0:i.from)===(e==null?void 0:e.from)?v(!1,"to"):a==="to"&&(e!=null&&e.from)?v(!1):a==="from"&&(e!=null&&e.from)&&R("to")},[p,v,r,a,i]),A=e=>t=>{P(l=>({...l,[e]:t.target.value}));const n=S.parse(t.target.value,p,new Date);S.isValid(n)?(P(l=>({...l,[e]:S.format(n??l[e],p)})),m(l=>({...l,[e]:n})),r==null||r({...i,[e]:n})):(m(void 0),r==null||r(void 0))},_=e=>t=>{t.key===" "&&(t.preventDefault(),d(e))};return s.jsxs(q.Popover,{open:I,modal:!0,onOpenChange:v,children:[s.jsx("p",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:x.to?`Selected date ${x.from} to ${x.to}`:"Please type or pick a date. Press space to open the calendar."}),$==="day"&&s.jsx(q.PopoverTrigger,{asChild:!0,children:s.jsx(G.SingleDatePickerTextInput,{inputRef:b,className:B(`${y.DATE_PICKER_CLASS}-range`,L),size:f,disabled:c,invalid:g,readOnly:!0,allowClear:!1,customPrefix:s.jsx(K,{inputRef:O,className:`${y.DATE_PICKER_CLASS}-range-from`,placeholder:(u==null?void 0:u.from)??"Start date",disabled:c,size:f,value:x.from,onKeyDown:_("from"),onChange:A("from"),wrapperProps:{onClick:()=>!c&&d("from")}}),customSuffix:s.jsxs(s.Fragment,{children:[s.jsx(X,{}),s.jsx(K,{inputRef:E,className:`${y.DATE_PICKER_CLASS}-range-to`,placeholder:(u==null?void 0:u.to)??"End date",size:f,value:x.to,disabled:c,wrapperProps:{onClick:()=>!c&&d("to")},onKeyDown:_("to"),onChange:A("to"),allowClear:N?()=>!!i:void 0,onClear:()=>T(void 0)})]}),suffix:{node:s.jsx(z,{}),onClick:()=>!c&&d("from")},type:"text","aria-controls":"dialog","aria-expanded":I,"aria-label":"Open calendar to choose date",...M})}),s.jsx(q.PopoverContent,{arrow:!0,sideOffset:12,children:s.jsx(W,{id:`calendar-${V}`,...F,autoFocus:!0,variant:"range",selected:i,month:(i==null?void 0:i.from)??new Date,size:f===k.Sizes.XSmall?k.Sizes.Small:f,onSelect:T})})]})};module.exports=H;
+"use strict";const r=require("react/jsx-runtime"),t=require("react"),a=require("date-fns"),v=require("../../../../react-base/src/consts/index.js"),z=require("classnames"),y=require("../../../Popover/Popover.js"),G=require("../../../Icon/components/ArrowRight.js"),H=require("../../../Icon/components/CalendarEvent.js"),_=require("./RangeDatePicker.styles.js"),K=require("../../../TextInput/TextInput.js"),$=require("../../utils/range.js"),O=require("../../../../react-base/src/consts/classes.js"),J=({size:f=v.Sizes.Medium,picker:N="day",format:n="dd/MM/yyyy",disabled:l,invalid:F,defaultValue:d,value:u,onChange:m,open:P,calendarProps:L,placeholder:j,allowClear:M,closeOnComplete:k=!0,className:b,...B})=>{const W=t.useId(),X=t.useRef(null),q=t.useRef(null),E=t.useRef(null),[p,x]=t.useState(d),[g,S]=t.useState({from:d?.from?a.format(d.from,n):"",to:d?.to?a.format(d.to,n):""}),[i,w]=t.useState();t.useEffect(()=>{x(u),S({from:u?.from?a.format(u.from,n):"",to:u?.to?a.format(u.to,n):""})},[u,n]);const[h,D]=t.useState(P);t.useEffect(()=>{D(P)},[P]);const C=t.useCallback(e=>{w(e),D(o=>!o)},[]),R=t.useCallback((e,o=i)=>{D(e),o&&(o==="from"&&setTimeout(()=>q.current?.focus(),0),o==="to"&&setTimeout(()=>E.current?.focus(),0),w(void 0))},[i]),I=t.useCallback(e=>{e?(S(s=>({from:e.from??s.from?a.format(e.from??s.from,n):"",to:e.to?a.format(e.to,n):""})),x(e),m?.(e)):(S({from:"",to:""}),x(void 0),m?.(void 0));const{shouldClose:o,newOrigin:c}=$.getNextOriginState(e,p,i);o&&k&&R(!1,c),w(c)},[n,k,R,m,i,p]),T=e=>o=>{S(s=>({...s,[e]:o.target.value}));const c=a.parse(o.target.value,n,new Date);a.isValid(c)?(S(s=>({...s,[e]:a.format(c??s[e],n)})),x(s=>({...s,[e]:c})),m?.({...p,[e]:c})):(x(void 0),m?.(void 0))},A=e=>o=>{o.key===" "&&(o.preventDefault(),C(e))};return r.jsxs(y.Popover,{open:h,modal:!0,onOpenChange:R,children:[r.jsx("p",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:g.to?`Selected date ${g.from} to ${g.to}`:"Please type or pick a date. Press space to open the calendar."}),N==="day"&&r.jsx(y.PopoverTrigger,{asChild:!0,children:r.jsx(_.SingleDatePickerTextInput,{inputRef:X,className:z(`${O.DATE_PICKER_CLASS}-range`,b),size:f,disabled:l,invalid:F,readOnly:!0,allowClear:!1,customPrefix:r.jsx(K,{inputRef:q,className:`${O.DATE_PICKER_CLASS}-range-from`,placeholder:j?.from??"Start date","data-focused-popover":h&&i==="from",disabled:l,size:f,value:g.from,onKeyDown:A("from"),onChange:T("from"),wrapperProps:{onClick:()=>!l&&C("from")}}),customSuffix:r.jsxs(r.Fragment,{children:[r.jsx(G,{}),r.jsx(K,{inputRef:E,className:`${O.DATE_PICKER_CLASS}-range-to`,placeholder:j?.to??"End date",size:f,value:g.to,"data-focused-popover":h&&i==="to",disabled:l,wrapperProps:{onClick:()=>!l&&C("to")},onKeyDown:A("to"),onChange:T("to"),allowClear:M?()=>!!p:void 0,onClear:()=>I(void 0)})]}),suffix:{node:r.jsx(H,{}),onClick:()=>!l&&C("from")},type:"text","aria-controls":"dialog","aria-expanded":h,"aria-label":"Open calendar to choose date",...B})}),r.jsx(y.PopoverContent,{arrow:!0,sideOffset:12,children:r.jsx(_.StyledCalendar,{id:`calendar-${W}`,...L,autoFocus:!0,variant:"range",bound:$.originToBound(i),selected:p,month:p?.from??new Date,size:f===v.Sizes.XSmall?v.Sizes.Small:f,onSelect:I})})]})};module.exports=J;
 //# sourceMappingURL=RangeDatePicker.js.map