acinguiux-ds-react-framework 0.1.16 → 0.1.19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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"}