acinguiux-ds-react-framework 0.1.18 → 0.1.19

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

@@ -1,30 +1,31 @@
-import { consts as t, selectedDateUnderline as a } from "../../../../react-base/src/components/DatePicker/DatePicker.consts.js";
+import { consts as o, selectedDateUnderline as n } from "../../../../react-base/src/components/DatePicker/DatePicker.consts.js";
+import { ZIndexes as u } from "../../../../react-base/src/consts/index.js";
 import { Variables as r } from "../../../../react-base/src/theme/types/layer.js";
-import { getLabelTypographySize as s, getHeadingTypographySize as g, getSmallerSize as u } from "../../../../react-base/src/utils/sizesUtils.js";
-import { getFocusStyles as n } from "../../../../react-base/src/utils/stylesUtils.js";
-import { DayPicker as b } from "react-day-picker";
-import { styled as h, css as y } from "styled-components";
-const S = h(b)(({ theme: d, $size: e }) => {
-  const o = d.layer(), i = d.layer({ foundation: "section" }), c = d.layer({ foundation: "section", disabled: !0 }), p = d.layer({ selectedProminence: "subtle" }), l = d.layer({ state: "hover" });
-  return y`
+import { getLabelTypographySize as s, getHeadingTypographySize as b, getSmallerSize as h } from "../../../../react-base/src/utils/sizesUtils.js";
+import { getFocusStyles as a } from "../../../../react-base/src/utils/stylesUtils.js";
+import { DayPicker as y } from "react-day-picker";
+import { styled as v, css as _ } from "styled-components";
+const B = v(y)(({ theme: d, $size: e, $zIndex: c }) => {
+  const t = d.layer(), i = d.layer({ foundation: "section" }), g = d.layer({ foundation: "section", disabled: !0 }), p = d.layer({ selectedProminence: "subtle" }), l = d.layer({ state: "hover" });
+  return _`
     /* stylelint-disable custom-property-pattern */
-    --rdp-day-height: ${t[e].boxSize}px;
-    --rdp-day-width: ${t[e].boxSize}px;
+    --rdp-day-height: ${o[e].boxSize}px;
+    --rdp-day-width: ${o[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.BackgroundSelected]};
-    --rdp-months-gap: ${t[e].panelGap}px;
+    --rdp-selected-border: ${t[r.BackgroundSelected]};
+    --rdp-months-gap: ${o[e].panelGap}px;
     --rdp-nav_button-disabled-opacity: 0.5;
-    --rdp-nav_button-height: ${t[e].height}px;
-    --rdp-nav_button-width: ${t[e].boxSize}px;
-    --rdp-nav-height: ${t[e].height}px;
+    --rdp-nav_button-height: ${o[e].height}px;
+    --rdp-nav_button-width: ${o[e].boxSize}px;
+    --rdp-nav-height: ${o[e].height}px;
     --rdp-range_middle-background-color: ${p[r.BackgroundSelected]};
     --rdp-range_middle-color: ${p[r.TextOnSelectedBackgroundStrong]};
-    --rdp-range_start-color: ${o[r.TextOnSelectedBackgroundStrong]};
-    --rdp-range_start-date-background-color: ${o[r.BackgroundSelected]};
-    --rdp-range_end-color: ${o[r.TextOnSelectedBackgroundStrong]};
-    --rdp-range_end-date-background-color: ${o[r.BackgroundSelected]};
+    --rdp-range_start-color: ${t[r.TextOnSelectedBackgroundStrong]};
+    --rdp-range_start-date-background-color: ${t[r.BackgroundSelected]};
+    --rdp-range_end-color: ${t[r.TextOnSelectedBackgroundStrong]};
+    --rdp-range_end-date-background-color: ${t[r.BackgroundSelected]};
     --rdp-weekday-padding: 0;
     --rdp-weekday-text-align: center;
 
@@ -103,15 +104,15 @@ const S = h(b)(({ theme: d, $size: e }) => {
       }
 
       &:focus-visible {
-        ${n(d)};
+        ${a(d)};
       }
     }
 
     .rdp-chevron {
       display: inline-block;
-      fill: ${o[r.TextOnFoundationStrong]};
-      width: ${t[e].chevronSize}px;
-      height: ${t[e].chevronSize}px;
+      fill: ${t[r.TextOnFoundationStrong]};
+      width: ${o[e].chevronSize}px;
+      height: ${o[e].chevronSize}px;
     }
 
     .rdp-dropdowns {
@@ -121,7 +122,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
     }
 
     .rdp-dropdown {
-      z-index: 2;
+      z-index: ${c ?? u.DATE_PICKER};
       opacity: 0;
       appearance: none;
       position: absolute;
@@ -135,7 +136,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
       line-height: inherit;
 
       &:focus-visible {
-        ${n(d)};
+        ${a(d)};
       }
     }
 
@@ -143,7 +144,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
       position: relative;
       display: inline-flex;
       align-items: center;
-      color: ${o[r.TextOnFoundationStrong]};
+      color: ${t[r.TextOnFoundationStrong]};
       padding: 6px;
       border-radius: var(--rdp-border-radius);
 
@@ -152,7 +153,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
       }
 
       &:has(:focus-visible) {
-        ${n(d)};
+        ${a(d)};
       }
 
       .rdp-chevron {
@@ -161,7 +162,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
     }
 
     .rdp-month_caption {
-      ${d.typography("heading", g(u(e)))};
+      ${d.typography("heading", b(h(e)))};
       display: flex;
       place-content: center center;
       height: var(--rdp-nav-height);
@@ -207,9 +208,9 @@ const S = h(b)(({ theme: d, $size: e }) => {
       &::before {
         content: '';
         position: absolute;
-        bottom: ${a[e].bottom}px;
-        height: ${a[e].height}px;
-        width: ${a[e].width}px;
+        bottom: ${n[e].bottom}px;
+        height: ${n[e].height}px;
+        width: ${n[e].width}px;
         left: 50%;
         transform: translateX(-50%);
         border-radius: var(--rdp-border-radius);
@@ -217,7 +218,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
       }
 
       &.rdp-selected::before {
-        background-color: ${o[r.TextOnSelectedBackgroundStrong]};
+        background-color: ${t[r.TextOnSelectedBackgroundStrong]};
       }
     }
 
@@ -225,7 +226,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: ${t[e].panelPadding}px;
+      gap: ${o[e].panelPadding}px;
     }
 
     .rdp-outside {
@@ -272,7 +273,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
     }
 
     .rdp-disabled {
-      color: ${c[r.TextOnFoundationSubtle]};
+      color: ${g[r.TextOnFoundationSubtle]};
       text-decoration: line-through;
     }
 
@@ -290,7 +291,7 @@ const S = h(b)(({ theme: d, $size: e }) => {
     }
 
     .rdp-weekdays {
-      color: ${o[r.TextOnFoundationSubtle]};
+      color: ${t[r.TextOnFoundationSubtle]};
     }
 
     .rdp-range_start:not(.rdp-range_end) > button {
@@ -304,17 +305,24 @@ const S = h(b)(({ theme: d, $size: e }) => {
     }
 
     .rdp-day_button:focus-visible {
-      ${n(d)};
+      ${a(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.BackgroundSelected]};
-      color: ${o[r.TextOnSelectedBackgroundStrong]};
+      background-color: ${t[r.BackgroundSelected]};
+      color: ${t[r.TextOnSelectedBackgroundStrong]};
     }
   `;
 });
 export {
-  S as CalendarStyled
+  B as CalendarStyled
 };
 //# sourceMappingURL=Calendar.styles.js.map

package/build/esm/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/esm/components/DatePicker/components/Calendar/Calendar.types.d.ts

@@ -0,0 +1,14 @@
+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;
+};
+export type ICalendarProps<T extends 'single' | 'range'> = DatePickerTypes.ICalendarProps & DayPickerProps<T>;
+export {};
+//# sourceMappingURL=Calendar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/Calendar/Calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC/G,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAErF,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,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,IAAI,eAAe,CAAC,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC"}

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

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

package/build/esm/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":";;;;;;;;AAUA,MAAMA,IAAmBC;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWC,EAAyB,IAAI;AAC9C,IAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAAQ;AAEhD,UAAMG,IAAgBC,EAAY,MAAM;;AACtC,OAAAC,KAAAC,IAAAN,EAAS,YAAT,gBAAAM,EAAkB,eAAlB,QAAAD,EAAA,KAAAC;AAAA,IACF,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAWnB,GAAWoB,CAAiB;AAAA,QAClD,cAAYC;AAAAA,QACZ,MAAApB;AAAA,QACA,QAAQE,IAAS,EAAE,aAAa,CAACE,GAAY,MAAM,gBAAAY,EAACK,GAAA,CAAA,CAAc,GAAI,SAAST,EAAA,IAAkB;AAAA,QACjG,QAAQT,IAAS,EAAE,aAAa,CAACC,GAAY,MAAM,gBAAAY,EAACK,GAAA,CAAA,CAAc,GAAI,SAAST,EAAA,IAAkB;AAAA,QACjG,KAAKH;AAAA,QACL,MAAAH;AAAA,QACA,YAAAD;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"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":";;;;;;;;AAUA,MAAMA,IAAmBC;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWC,EAAyB,IAAI;AAC9C,IAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAAQ;AAEhD,UAAMG,IAAgBC,EAAY,MAAM;AACtC,MAAAJ,EAAS,SAAS,aAAA;AAAA,IACpB,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAWjB,GAAWkB,CAAiB;AAAA,QAClD,cAAYC;AAAAA,QACZ,MAAAlB;AAAA,QACA,QAAQE,IAAS,EAAE,aAAa,CAACE,GAAY,MAAM,gBAAAU,EAACK,GAAA,CAAA,CAAc,GAAI,SAASP,EAAA,IAAkB;AAAA,QACjG,QAAQT,IAAS,EAAE,aAAa,CAACC,GAAY,MAAM,gBAAAU,EAACK,GAAA,CAAA,CAAc,GAAI,SAASP,EAAA,IAAkB;AAAA,QACjG,UAAAH;AAAA,QACA,MAAAH;AAAA,QACA,YAAAD;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -0,0 +1,7 @@
+import { TextInputTypes } from '../../../../react-base/src/components/TextInput';
+export declare const TextInputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../../../..").ITextInputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    size: TextInputTypes.Size;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../../..").ITextInputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+//# sourceMappingURL=NativeDatePicker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAI9E,eAAO,MAAM,eAAe;;;UAA6B,cAAc,CAAC,IAAI;iNAM1E,CAAC"}

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

@@ -0,0 +1,12 @@
+import { styled as p, css as r } from "styled-components";
+import { getLabelTypographySize as o } from "../../../../react-base/src/utils/sizesUtils.js";
+import i from "../../../TextInput/TextInput.js";
+const y = p(i)(({ theme: t, size: e }) => r`
+    input {
+      line-height: calc(${t.typography("label", o(e)).lineHeight} - 2px);
+    }
+  `);
+export {
+  y as TextInputStyled
+};
+//# sourceMappingURL=NativeDatePicker.styles.js.map

package/build/esm/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":";;;AAMO,MAAMA,IAAkBC,EAAOC,CAAS,EAAiC,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACjFC;AAAA;AAAA,0BAEiBF,EAAM,WAAW,SAASG,EAAuBF,CAAI,CAAC,EAAE,UAAU;AAAA;AAAA,GAG3F;"}

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

@@ -1,4 +1,4 @@
 import type { IRangeDatePickerProps } from './RangeDatePicker.types';
-declare const RangeDatePicker: ({ size, picker, format, disabled, invalid, defaultValue, value, onChange, open, calendarProps, placeholder, allowClear, className, ...ariaProps }: IRangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const RangeDatePicker: ({ size, picker, format, disabled, invalid, defaultValue, value, onChange, open, calendarProps, placeholder, allowClear, closeOnComplete, className, ...ariaProps }: IRangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default RangeDatePicker;
 //# sourceMappingURL=RangeDatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,QAAA,MAAM,eAAe,sJAelB,qBAAqB,4CA0MvB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE,QAAA,MAAM,eAAe,uKAgBlB,qBAAqB,4CA8MvB,CAAC;AAEF,eAAe,eAAe,CAAC"}