@orfium/ictinus 5.45.2 → 5.46.0

package/dist/components/Box/Box.utilities.js

@@ -1,6 +1,6 @@
 import { vars as g } from "@orfium/tokens";
-import { curry as m, pick as d, omit as u, get as e } from "lodash-es";
-const f = ["p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my"], p = ["color", "backgroundAttachment", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundRepeat", "backgroundSize", "alignContent", "alignItems", "alignSelf", "flexDirection", "display", "flex", "grid", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "justifyContent", "justifyItems", "justifySelf", "position", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "overflow", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "placeContent", "placeItems", "placeSelf", "flexWrap", "left", "top", "right", "bottom", "textOverflow", "whiteSpace"], x = (t) => d(t, p), C = (t) => u(t, p), S = m((t, r, l, o, i) => {
+import { pick as m, omit as d, curry as u, get as e } from "lodash-es";
+const f = ["p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my"], p = ["color", "backgroundAttachment", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundRepeat", "backgroundSize", "alignContent", "alignItems", "alignSelf", "flexDirection", "display", "flex", "grid", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "justifyContent", "justifyItems", "justifySelf", "position", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "overflow", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "placeContent", "placeItems", "placeSelf", "flexWrap", "left", "top", "right", "bottom", "textOverflow", "whiteSpace"], x = (t) => m(t, p), C = (t) => d(t, p), S = u((t, r, l, o, i) => {
   if (r[o]) {
     if (i === "spacing") {
       if (o === "px" || o === "py") {

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -17,14 +17,10 @@ const u = (r, e) => e === r.length - 1, $ = n.forwardRef(({
       href: c
     } = a;
     return u(r, s) ? /* @__PURE__ */ m("span", { "data-testid": `${t}_breadcrumb_${o}`, children: o }) : /* @__PURE__ */ m(L, { size: 2, dataTestPrefixId: `${t}_breadcrumb_link_${o}`, ...d(a, "label"), children: o }, c);
-  }, [t, r]), l = n.useMemo(
-    // eslint-disable-next-line react/display-name
-    () => (a, s) => {
-      const o = h("data_item_"), c = u(r, s);
-      return /* @__PURE__ */ m(B, { childComponent: a, isLastItem: c }, o);
-    },
-    [r]
-  ), p = n.useMemo(() => {
+  }, [t, r]), l = n.useMemo(() => (a, s) => {
+    const o = h("data_item_"), c = u(r, s);
+    return /* @__PURE__ */ m(B, { childComponent: a, isLastItem: c }, o);
+  }, [r]), p = n.useMemo(() => {
     if (!f(r))
       return r.map(i).map(l);
     if (e)

package/dist/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.js

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
 import { vars as e } from "@orfium/tokens";
-import { breadcrumbListStyles as c, breadcrumbItemStyles as i } from "./BreadcrumbItem.style.js";
+import { breadcrumbItemStyles as c, breadcrumbListStyles as i } from "./BreadcrumbItem.style.js";
 import m from "../../Icon/Icon.js";
 const f = ({
   childComponent: t,
   isLastItem: r = !1
-}) => /* @__PURE__ */ o("li", { css: c(), children: /* @__PURE__ */ s("div", { css: i({
+}) => /* @__PURE__ */ o("li", { css: i(), children: /* @__PURE__ */ s("div", { css: c({
   isLastItem: r
 }), ...r ? {
   typography: "body02"

package/dist/components/Button/Button.js

@@ -7,7 +7,6 @@ import c from "../Icon/Icon.js";
 const x = u.forwardRef((a, s) => {
   const {
     type: t = "primary",
-    size: B = "normal",
     iconLeftName: e,
     iconRightName: i,
     avatar: o,

package/dist/components/Button/ButtonLoader/ButtonLoader.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { loaderWrapperStyle as e, barWrapperStyle as a, barStyle as d } from "./ButtonLoader.style.js";
+import { barStyle as e, barWrapperStyle as a, loaderWrapperStyle as d } from "./ButtonLoader.style.js";
 const o = ({
   dataTestId: t
-}) => /* @__PURE__ */ r("div", { css: e(), "data-testid": t, children: /* @__PURE__ */ r("div", { css: a(), children: /* @__PURE__ */ r("div", { css: d() }) }) });
+}) => /* @__PURE__ */ r("div", { css: d(), "data-testid": t, children: /* @__PURE__ */ r("div", { css: a(), children: /* @__PURE__ */ r("div", { css: e() }) }) });
 o.displayName = "ButtonLoader";
 export {
   o as default

package/dist/components/Button/ButtonLoader/ButtonLoader.style.js

@@ -1,4 +1,4 @@
-import { css as e, keyframes as i } from "@emotion/react";
+import { keyframes as i, css as e } from "@emotion/react";
 import { rem as r, vars as t } from "@orfium/tokens";
 var a = {
   name: "1duu0ib",

package/dist/components/ButtonBase/ButtonBase.js

@@ -4,7 +4,7 @@ import T from "react";
 import { generateTestDataId as g } from "../../utils/helpers.js";
 import k from "../Button/ButtonLoader/ButtonLoader.js";
 import { useSlotProps as L } from "../utils/Slots.js";
-import { buttonWrapperStyle as R, buttonBaseStyle as S } from "./ButtonBase.style.js";
+import { buttonBaseStyle as R, buttonWrapperStyle as S } from "./ButtonBase.style.js";
 const j = T.forwardRef((t, n) => {
   t = L(t, "button");
   const {
@@ -24,35 +24,22 @@ const j = T.forwardRef((t, n) => {
     sx: y,
     ...I
   } = t, r = `${p}button`;
-  return /* @__PURE__ */ x("div", { css: R({
+  return /* @__PURE__ */ x("div", { css: S({
     isBlock: o
   }), children: [
     a && !e && /* @__PURE__ */ i(k, { dataTestId: r }),
-    /* @__PURE__ */ i(
-      "button",
-      {
-        ...N(I, ["avatar", "iconRightName", "iconLeftName", "iconName"]),
-        ref: n,
-        type: B,
-        "data-testid": g(r, u),
-        css: S({
-          type: m,
-          size: d,
-          isLoading: a,
-          isBlock: o,
-          isDisabled: e,
-          isIconButton: l,
-          shape: f,
-          sx: y
-        }),
-        onClick: (h) => {
-          s && s(h);
-        },
-        onBlur: b,
-        disabled: e,
-        children: c
-      }
-    )
+    /* @__PURE__ */ i("button", { ...N(I, ["avatar", "iconRightName", "iconLeftName", "iconName"]), ref: n, type: B, "data-testid": g(r, u), css: R({
+      type: m,
+      size: d,
+      isLoading: a,
+      isBlock: o,
+      isDisabled: e,
+      isIconButton: l,
+      shape: f,
+      sx: y
+    }), onClick: (h) => {
+      s && s(h);
+    }, onBlur: b, disabled: e, children: c })
   ] });
 });
 j.displayName = "ButtonBase";

package/dist/components/Chart/BarChart/components/CustomTooltip/CustomTooltip.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as l } from "@emotion/react/jsx-runtime";
 import { useRef as p, useState as o, useEffect as v, useCallback as i } from "react";
-import { tickStyle as m, tooltipStyle as h, tooltipArrowStyle as A } from "./CustomTooltip.style.js";
+import { tooltipStyle as m, tooltipArrowStyle as h, tickStyle as A } from "./CustomTooltip.style.js";
 const b = ({
   content: s,
   fill: n
@@ -14,11 +14,11 @@ const b = ({
   }, [t]), d = i(() => {
     t(!1);
   }, [t]);
-  return /* @__PURE__ */ c("div", { ref: e, onMouseEnter: u, onMouseLeave: d, css: m(n), children: [
+  return /* @__PURE__ */ c("div", { ref: e, onMouseEnter: u, onMouseLeave: d, css: A(n), children: [
     s,
     a && f && /* @__PURE__ */ c("div", { children: [
-      /* @__PURE__ */ l("div", { css: h(), children: s }),
-      /* @__PURE__ */ l("div", { css: A() })
+      /* @__PURE__ */ l("div", { css: m(), children: s }),
+      /* @__PURE__ */ l("div", { css: h() })
     ] })
   ] });
 };

package/dist/components/Chart/BarChart/components/CustomTooltipContent/CustomTooltipContent.js

@@ -1,14 +1,14 @@
 import { jsx as o, jsxs as t } from "@emotion/react/jsx-runtime";
-import { tooltipStyle as c, tooltipUlStyle as d, tooltipLiStyle as e } from "./CustomTooltipContent.style.js";
+import { tooltipLiStyle as c, tooltipUlStyle as d, tooltipStyle as e } from "./CustomTooltipContent.style.js";
 const m = ({
   payload: i
 }) => {
   const l = i && i[0]?.payload?.options?.hoverInfo;
-  return l ? /* @__PURE__ */ o("div", { className: "custom-tooltip", css: c(), children: /* @__PURE__ */ o("ul", { css: d(), children: l.map(({
+  return l ? /* @__PURE__ */ o("div", { className: "custom-tooltip", css: e(), children: /* @__PURE__ */ o("ul", { css: d(), children: l.map(({
     name: s,
     value: n,
     percentage: r
-  }) => /* @__PURE__ */ t("li", { css: e(), children: [
+  }) => /* @__PURE__ */ t("li", { css: c(), children: [
     /* @__PURE__ */ o("div", { children: s }),
     /* @__PURE__ */ t("div", { children: [
       /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o("b", { children: n }) }),

package/dist/components/Chart/BarChart/components/CustomTooltipContent/CustomTooltipContent.style.js

@@ -1,4 +1,4 @@
-import { rem as t, vars as n } from "@orfium/tokens";
+import { vars as n, rem as t } from "@orfium/tokens";
 const o = () => ({
   fontSize: n["font-size"][3],
   padding: `${n.spacing[4]} ${n.spacing[6]}`,

package/dist/components/Chart/DonutChart/components/CustomLabel/CustomLabel.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "@emotion/react/jsx-runtime";
 import c from "../../../../../hooks/useTheme.js";
 import { vars as a } from "@orfium/tokens";
-import { flexContainer as d, labelUnitStyle as m } from "./CustomLabel.style.js";
+import { labelUnitStyle as d, flexContainer as m } from "./CustomLabel.style.js";
 const p = ({
   viewBox: l,
   value: r,
@@ -13,7 +13,7 @@ const p = ({
   } = l, s = c();
   return /* @__PURE__ */ o("g", { children: [
     /* @__PURE__ */ e("text", { x: n, y: t, className: "recharts-text recharts-label", textAnchor: "middle", dominantBaseline: "central", children: /* @__PURE__ */ e("tspan", { x: "50%", dy: "-7", alignmentBaseline: "middle", fontSize: a["font-size"][4], fill: s.globals.oldColors.black, children: r }) }),
-    /* @__PURE__ */ e("foreignObject", { y: "52%", width: "100%", height: t && t / 2.5, children: /* @__PURE__ */ e("div", { css: d(), children: /* @__PURE__ */ e("div", { css: m(), children: i }) }) })
+    /* @__PURE__ */ e("foreignObject", { y: "52%", width: "100%", height: t && t / 2.5, children: /* @__PURE__ */ e("div", { css: m(), children: /* @__PURE__ */ e("div", { css: d(), children: i }) }) })
   ] });
 };
 export {

package/dist/components/Chart/LineChart/components/CustomTooltip/CustomTooltip.js

@@ -1,20 +1,20 @@
 import { jsxs as i, jsx as l } from "@emotion/react/jsx-runtime";
-import { tooltipStyle as r, tooltipHrStyle as c, tooltipUlStyle as m, tooltipLiStyle as n } from "./CustomTooltip.style.js";
+import { tooltipHrStyle as r, tooltipLiStyle as c, tooltipUlStyle as m, tooltipStyle as n } from "./CustomTooltip.style.js";
 const d = ({
   label: e,
   payload: t
-}) => /* @__PURE__ */ i("div", { className: "custom-tooltip", css: r(), children: [
+}) => /* @__PURE__ */ i("div", { className: "custom-tooltip", css: n(), children: [
   /* @__PURE__ */ i("p", { className: "label", style: {
     margin: "0px"
   }, children: [
     `${e}`,
     " "
   ] }),
-  t && t.length > 1 && /* @__PURE__ */ l("hr", { css: c() }),
+  t && t.length > 1 && /* @__PURE__ */ l("hr", { css: r() }),
   t && /* @__PURE__ */ l("ul", { css: m(), children: t.map(({
     name: s,
     value: o
-  }) => /* @__PURE__ */ i("li", { css: n(), children: [
+  }) => /* @__PURE__ */ i("li", { css: c(), children: [
     /* @__PURE__ */ l("div", { children: s }),
     " ",
     /* @__PURE__ */ l("div", { children: o })

package/dist/components/Chart/LineChart/components/CustomTooltip/CustomTooltip.style.js

@@ -1,4 +1,4 @@
-import { rem as t, vars as o } from "@orfium/tokens";
+import { vars as o, rem as t } from "@orfium/tokens";
 const n = () => ({
   fontSize: o["font-size"][3],
   padding: o.spacing[4],

package/dist/components/Controls/CheckBox/CheckBox.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as t } from "@emotion/react/jsx-runtime";
 import $ from "react";
 import { Checkbox as u } from "react-aria-components";
 import { vars as m } from "@orfium/tokens";
-import { checkboxWrapperStyles as C, checkboxStyles as I } from "./CheckBox.style.js";
+import { checkboxStyles as C, checkboxWrapperStyles as I } from "./CheckBox.style.js";
 import s from "../../Box/Box.js";
 import T from "../../Icon/Icon.js";
 import g from "../ControlLabel/ControlLabelText.js";
@@ -24,10 +24,10 @@ const j = $.forwardRef((p, f) => {
     helpText: c,
     sx: _
   } = b;
-  return /* @__PURE__ */ d("div", { css: C({
+  return /* @__PURE__ */ d("div", { css: I({
     sx: _
   }), children: [
-    /* @__PURE__ */ t(u, { id: x, css: I(), isSelected: a, onChange: h, isIndeterminate: o, isDisabled: l, value: e, ref: f, "data-testid": `${r}${e ? `_${e}` : ""}_checkbox`, children: /* @__PURE__ */ d(s, { display: "flex", alignItems: "center", gap: "5", flexDirection: i === "left" ? "row-reverse" : "row", justifyContent: i === "left" ? "space-between" : "unset", children: [
+    /* @__PURE__ */ t(u, { id: x, css: C(), isSelected: a, onChange: h, isIndeterminate: o, isDisabled: l, value: e, ref: f, "data-testid": `${r}${e ? `_${e}` : ""}_checkbox`, children: /* @__PURE__ */ d(s, { display: "flex", alignItems: "center", gap: "5", flexDirection: i === "left" ? "row-reverse" : "row", justifyContent: i === "left" ? "space-between" : "unset", children: [
       /* @__PURE__ */ t(s, { "data-role": "checkbox-icon", children: /* @__PURE__ */ t(T, { name: o ? "minus" : "check", size: m.sizing[5], color: m.color.text.inverted.primary, dataTestId: `${r}${e ? `_${e}` : ""}_${o ? "minus" : a ? "checkmark" : "unselected"}` }) }),
       n && /* @__PURE__ */ t(g, { size: k, dataTestPrefixId: `${r}_checkbox_${e?.split(" ").join("_")}`, children: n })
     ] }) }),

package/dist/components/Controls/Switch/Switch.js

@@ -1,13 +1,12 @@
-import { jsxs as o, jsx as e } from "@emotion/react/jsx-runtime";
-import { css as b } from "@emotion/react";
-import * as g from "react";
-import { Switch as y } from "react-aria-components";
+import { jsxs as a, jsx as e } from "@emotion/react/jsx-runtime";
+import * as b from "react";
+import { Switch as g } from "react-aria-components";
 import { rem as c } from "polished";
-import { switchWrapperStyles as S, switchStyles as T } from "./Switch.style.js";
-import a from "../../Box/Box.js";
-import $ from "../ControlLabel/ControlLabelText.js";
-import C from "../ControlLabel/ControlHelpText.js";
-const _ = g.forwardRef((m, p) => {
+import { switchStyles as y, switchWrapperStyles as S } from "./Switch.style.js";
+import o from "../../Box/Box.js";
+import T from "../ControlLabel/ControlLabelText.js";
+import $ from "../ControlLabel/ControlHelpText.js";
+const C = b.forwardRef((m, p) => {
   const {
     id: f,
     value: i,
@@ -24,37 +23,35 @@ const _ = g.forwardRef((m, p) => {
     helpText: s,
     sx: v
   } = w;
-  return /* @__PURE__ */ o("div", { css: S({
+  return /* @__PURE__ */ a("div", { css: S({
     sx: v
   }), children: [
-    /* @__PURE__ */ e(y, { id: f, value: i, isSelected: h, isDisabled: d, onChange: x, css: T({
+    /* @__PURE__ */ e(g, { id: f, value: i, isSelected: h, isDisabled: d, onChange: x, css: y({
       placement: t
     }), "data-testid": `${l}${i ? `_${i}` : ""}_switch`, ref: p, excludeFromTabOrder: r, "aria-hidden": r || void 0, style: r ? {
       pointerEvents: "none"
-    } : void 0, children: /* @__PURE__ */ o(a, { display: "flex", gap: "5", flexDirection: t === "left" ? "row-reverse" : "row", justifyContent: t === "left" ? "space-between" : "unset", children: [
-      /* @__PURE__ */ o(a, { children: [
+    } : void 0, children: /* @__PURE__ */ a(o, { display: "flex", gap: "5", flexDirection: t === "left" ? "row-reverse" : "row", justifyContent: t === "left" ? "space-between" : "unset", children: [
+      /* @__PURE__ */ a(o, { children: [
         /* @__PURE__ */ e("div", { className: "bar" }),
         /* @__PURE__ */ e("div", { className: "indicator" })
       ] }),
-      n && /* @__PURE__ */ e($, { size: u, dataTestPrefixId: `${l}_switch_${i?.split(" ").join("_")}`, children: n })
+      n && /* @__PURE__ */ e(T, { size: u, dataTestPrefixId: `${l}_switch_${i?.split(" ").join("_")}`, children: n })
     ] }) }),
     s && /* @__PURE__ */ e(
-      a,
+      o,
       {
-        css: /* @__PURE__ */ b({
-          ...t === "left" ? {
-            paddingRight: c(48)
-          } : {
-            paddingLeft: c(48)
-          }
-        }, "", ""),
+        css: t === "left" ? {
+          paddingRight: c(48)
+        } : {
+          paddingLeft: c(48)
+        },
         "data-disabled": d,
-        children: /* @__PURE__ */ e(C, { helpText: s, children: s })
+        children: /* @__PURE__ */ e($, { helpText: s, children: s })
       }
     )
   ] });
 });
-_.displayName = "Switch";
+C.displayName = "Switch";
 export {
-  _ as default
+  C as default
 };

package/dist/components/DatePicker/DatePickInput/DatePickInput.js

@@ -1,45 +1,45 @@
 import { jsx as m } from "@emotion/react/jsx-runtime";
-import { vars as p } from "@orfium/tokens";
-import B, { useCallback as C, useMemo as L } from "react";
-import F from "../../../utils/date.js";
+import { vars as _ } from "@orfium/tokens";
+import w, { useMemo as p } from "react";
+import B from "../../../utils/date.js";
 import { getLocaleFormat as I } from "../../../utils/helpers.js";
-import x from "../../TextField/TextField.js";
+import L from "../../TextField/TextField.js";
 import { DATE_RANGE_PICKER_LABEL as N, DATE_PICKER_LABEL as h } from "../constants.js";
-import { FIELD_TOKENS as D } from "./DatePickInput.style.js";
-import M from "../../Icon/Icon.js";
-import { FilterButton as Y } from "../../Filter/components/FilterButton/FilterButton.js";
-const A = () => {
-}, g = (o) => (r) => r ? F(r).format(I(o)) : "", W = (o, r) => ({
-  selectDate: `Select Date${o ? "s" : ""}`,
-  to: o ? `- ${r}` : ""
-}), j = B.forwardRef(({
-  handleIconClick: o,
+import { FIELD_TOKENS as x } from "./DatePickInput.style.js";
+import C from "../../Icon/Icon.js";
+import { FilterButton as M } from "../../Filter/components/FilterButton/FilterButton.js";
+const D = () => {
+}, Y = (t) => (r) => r ? B(r).format(I(t)) : "", g = (t, r) => ({
+  selectDate: `Select Date${t ? "s" : ""}`,
+  to: t ? `- ${r}` : ""
+}), O = w.forwardRef(({
+  handleIconClick: t,
   filterConfig: r = {},
-  handleClear: f,
+  handleClear: l,
   dataTestId: u,
   isRangePicker: e,
   inputProps: n,
-  selectedDay: t,
-  dateFormatOverride: c = "MM/DD/YYYY",
+  selectedDay: o,
+  dateFormatOverride: A = "MM/DD/YYYY",
   isOpen: K
-}, s) => {
-  const b = C(g(c), [c]), a = b(t.from), l = b(t.to), T = W(e, l), {
-    filterType: $,
-    label: v
-  } = r, d = {
+}, c) => {
+  const s = Y(A), a = s(o.from), f = s(o.to), v = g(e, f), {
+    filterType: d,
+    label: F
+  } = r, $ = {
     wrapper: {
-      minWidth: e ? D.minWidth.extraLarge.normal : D.minWidth.medium.normal
+      minWidth: e ? x.minWidth.extraLarge.normal : x.minWidth.medium.normal
     }
-  }, E = L(() => /* @__PURE__ */ m(M, { tabIndex: 0, name: "calendar", size: p.sizing[5], color: p.color.text.default.secondary, onClick: o, dataTestId: "calendar_button", onKeyDown: (i) => {
-    i.code === "Enter" && o();
-  } }), [o]), _ = L(() => n?.label?.length ? n.label : e ? N : h, [n?.label, e]);
-  if ($) {
-    const i = `${v ?? T.selectDate}`, w = `${t.from ? `: ${a}` : ""} ${e && t.to ? `- ${l}` : ""}`;
-    return /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(Y, { isPopulated: !!(t.from && `${a} - ${l}`), isActive: K, onClear: f, filterType: $, onClick: o, children: `${i}${w}` }) });
+  }, b = p(() => /* @__PURE__ */ m(C, { tabIndex: 0, name: "calendar", size: _.sizing[5], color: _.color.text.default.secondary, onClick: t, dataTestId: "calendar_button", onKeyDown: (i) => {
+    i.code === "Enter" && t();
+  } }), [t]), E = p(() => n?.label?.length ? n.label : e ? N : h, [n?.label, e]);
+  if (d) {
+    const i = `${F ?? v.selectDate}`, T = `${o.from ? `: ${a}` : ""} ${e && o.to ? `- ${f}` : ""}`;
+    return /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(M, { isPopulated: !!(o.from && `${a} - ${f}`), isActive: K, onClear: l, filterType: d, onClick: t, children: `${i}${T}` }) });
   }
-  return e ? /* @__PURE__ */ m(x, { ref: s, ...n, label: _, onKeyDown: f, dataTestId: u, onChange: A, value: t.from ? `${a} - ${l}` : "", suffix: E, sx: d }) : /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(x, { ref: s, ...n, label: _, onKeyDown: f, dataTestId: u, onChange: A, value: t.to ? a : "", suffix: E, sx: d }) });
+  return e ? /* @__PURE__ */ m(L, { ref: c, ...n, label: E, onKeyDown: l, dataTestId: u, onChange: D, value: o.from ? `${a} - ${f}` : "", suffix: b, sx: $ }) : /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(L, { ref: c, ...n, label: E, onKeyDown: l, dataTestId: u, onChange: D, value: o.to ? a : "", suffix: b, sx: $ }) });
 });
-j.displayName = "DatePickInput";
+O.displayName = "DatePickInput";
 export {
-  j as default
+  O as default
 };

package/dist/components/DatePicker/DatePicker.js

@@ -1,14 +1,14 @@
 import { jsx as u } from "@emotion/react/jsx-runtime";
-import { PositionInScreen as _ } from "../utils/PositionInScreen/PositionInScreen.js";
-import $ from "../../hooks/useKeyboardEvents.js";
-import { memo as z, useMemo as F, useState as v, useCallback as f } from "react";
-import G from "react-fast-compare";
+import { PositionInScreen as V } from "../utils/PositionInScreen/PositionInScreen.js";
+import z from "../../hooks/useKeyboardEvents.js";
+import { memo as F, useMemo as G, useState as v, useCallback as f } from "react";
+import H from "react-fast-compare";
 import { EMPTY_STATE as i } from "./constants.js";
-import { datePickerStyles as H } from "./DatePicker.style.js";
-import J from "./OverlayComponent/OverlayComponent.js";
-import { initDates as L } from "./utils.js";
-import N from "./DatePickInput/DatePickInput.js";
-const Q = ({
+import { datePickerStyles as J } from "./DatePicker.style.js";
+import L from "./OverlayComponent/OverlayComponent.js";
+import { initDates as N } from "./utils.js";
+import Q from "./DatePickInput/DatePickInput.js";
+const U = ({
   isRangePicker: c = !1,
   onChange: o = () => {
   },
@@ -24,9 +24,9 @@ const Q = ({
   dataTestId: x,
   placement: B
 }) => {
-  const s = F(() => L(T || {}), [T]), [l, n] = v(!1), [D, b] = v(""), [O, m] = v(s), {
+  const s = G(() => N(T || {}), [T]), [l, n] = v(!1), [D, b] = v(""), [O, m] = v(s), {
     keyboardProps: M
-  } = $({
+  } = z({
     events: {
       keydown: {
         onEscape: () => {
@@ -55,7 +55,7 @@ const Q = ({
     });
   }, [o]), d = f(() => {
     D.length && b("");
-  }, [D]), h = f((e) => {
+  }, [D]), _ = f((e) => {
     const t = e.startOf("day"), a = e.endOf("day");
     return m(c ? (r) => r.from && r.to ? {
       from: t,
@@ -73,11 +73,11 @@ const Q = ({
       from: t,
       to: a
     });
-  }, [c]), j = f(() => {
+  }, [c]), h = f(() => {
     m(i), o(i), d(), n(!1);
-  }, [o, d]), q = f(() => {
+  }, [o, d]), j = f(() => {
     n(!l);
-  }, [l]), K = f((e) => {
+  }, [l]), q = f((e) => {
     if (!k && !p.filterType)
       return !1;
     if (p?.filterType)
@@ -95,11 +95,11 @@ const Q = ({
         });
       m(i), o(i);
     }
-  }, [k, p?.filterType, d, o, A, c, s.from, s.to]), V = f(() => {
+  }, [k, p?.filterType, d, o, A, c, s.from, s.to]), K = f(() => {
     E(O);
   }, [E, O]);
-  return /* @__PURE__ */ u("div", { ...M, children: /* @__PURE__ */ u(_, { isVisible: l, setIsVisible: n, placement: B, offsetY: 8, parent: /* @__PURE__ */ u(N, { filterConfig: p, isRangePicker: c, selectedDay: s, inputProps: P, dateFormatOverride: w, handleIconClick: q, handleClear: K, isOpen: l, dataTestId: x }), children: /* @__PURE__ */ u("div", { css: H(), children: /* @__PURE__ */ u(J, { selectedOption: D, setSelectedOption: Y, extraOptions: y, isRangePicker: c, onDaySelect: h, selectedDays: O, disabledDates: I, onClearAll: j, onApply: V }) }) }) });
-}, te = z(Q, G);
+  return /* @__PURE__ */ u("div", { ...M, children: /* @__PURE__ */ u(V, { isVisible: l, setIsVisible: n, placement: B, offsetY: 8, parent: /* @__PURE__ */ u(Q, { filterConfig: p, isRangePicker: c, selectedDay: s, inputProps: P, dateFormatOverride: w, handleIconClick: j, handleClear: q, isOpen: l, dataTestId: x }), children: /* @__PURE__ */ u("div", { css: J(), children: /* @__PURE__ */ u(L, { selectedOption: D, setSelectedOption: Y, extraOptions: y, isRangePicker: c, onDaySelect: _, selectedDays: O, disabledDates: I, onClearAll: h, onApply: K }) }) }) });
+}, te = F(U, H);
 export {
   te as default
 };

package/dist/components/DatePicker/Day/Day.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "@emotion/react/jsx-runtime";
 import _ from "../../../hooks/useKeyboardEvents.js";
 import n from "react";
-import { emptyDayStyle as $, dayWrapperStyle as C, dayStyle as D } from "./Day.style.js";
+import { emptyDayStyle as $, dayStyle as C, dayWrapperStyle as D } from "./Day.style.js";
 import { currentDay as a } from "../utils.js";
 const g = ({
   day: t,
@@ -31,14 +31,14 @@ const g = ({
   });
   return t ? /* @__PURE__ */ s("td", { style: {
     padding: 0
-  }, onClick: e ? void 0 : u, children: /* @__PURE__ */ s("div", { css: C({
+  }, onClick: e ? void 0 : u, children: /* @__PURE__ */ s("div", { css: D({
     isSelected: c,
     isBetween: l,
     isLast: i,
     isFirst: y,
     isToday: d,
     isDisabled: e
-  }), tabIndex: v, "data-testid": `${t}_${r + 1}_${o}${c ? "_selected" : ""}`, ...k, children: /* @__PURE__ */ s("div", { css: D({
+  }), tabIndex: v, "data-testid": `${t}_${r + 1}_${o}${c ? "_selected" : ""}`, ...k, children: /* @__PURE__ */ s("div", { css: C({
     isSelected: c,
     isBetween: l,
     isToday: d,

package/dist/components/DatePicker/Month/Month.js

@@ -4,11 +4,11 @@ import { inRange as v, chunk as C } from "lodash-es";
 import * as l from "react";
 import { useCallback as i } from "react";
 import T from "../../../utils/date.js";
-import j from "./hooks/useMonthKeyboardNavigation.js";
-import { weekDaysWrapperStyle as P, weekDayStyle as R, datesWrapperStyle as _ } from "./Month.style.js";
-import { getNumWeeksForMonth as A, calculateSelectedDay as L, calculateDisabledDays as N, calculatedDayIsBetween as O, calculateSelectedDayPosition as K } from "./Month.utils.js";
-import Y from "../Day/Day.js";
-import { currentDay as q } from "../utils.js";
+import j from "../Day/Day.js";
+import { currentDay as P } from "../utils.js";
+import R from "./hooks/useMonthKeyboardNavigation.js";
+import { weekDayStyle as _, weekDaysWrapperStyle as A, datesWrapperStyle as L } from "./Month.style.js";
+import { getNumWeeksForMonth as N, calculateSelectedDay as O, calculateDisabledDays as K, calculatedDayIsBetween as Y, calculateSelectedDayPosition as q } from "./Month.utils.js";
 T.extend(g);
 const z = ["Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday", "Sunday"], E = ({
   year: t,
@@ -19,48 +19,27 @@ const z = ["Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday",
   isFirstCalendar: y
 }) => {
   const b = l.useMemo(() => {
-    const s = q.month(e).year(t).date(1), n = s.daysInMonth(), o = s.day() || 7, c = 7, F = A(t, e), w = Array(F * c).fill(null).reduce((W, H, $) => {
+    const s = P.month(e).year(t).date(1), n = s.daysInMonth(), o = s.day() || 7, c = 7, F = N(t, e), w = Array(F * c).fill(null).reduce((W, H, $) => {
       const m = $ + 1, x = v(m, o, n + o) ? m - o + 1 : void 0;
       return [...W, x];
     }, []);
     return C(w, c);
-  }, [t, e]), S = i(L, []), k = i(N, []), D = i(O, []), d = i(K, []), {
+  }, [t, e]), S = i(O, []), k = i(K, []), D = i(Y, []), d = i(q, []), {
     focusedDay: u,
     setFocusedDay: h,
     calendarRef: M,
     keyboardProps: B
-  } = j({
+  } = R({
     selectedDays: a,
     isFirstCalendar: y,
     month: e,
     year: t
   });
   return /* @__PURE__ */ I(l.Fragment, { children: [
-    /* @__PURE__ */ r("div", { css: P(), children: z.map((s) => /* @__PURE__ */ r("div", { css: R(), children: s.substr(0, 2) }, s)) }),
-    /* @__PURE__ */ r("table", { css: _(), ref: M, tabIndex: 0, "data-testid": "calendar_table", ...B, onFocus: () => {
+    /* @__PURE__ */ r("div", { css: A(), children: z.map((s) => /* @__PURE__ */ r("div", { css: _(), children: s.substr(0, 2) }, s)) }),
+    /* @__PURE__ */ r("table", { css: L(), ref: M, tabIndex: 0, "data-testid": "calendar_table", ...B, onFocus: () => {
       u === 0 && h(1);
-    }, children: /* @__PURE__ */ r("tbody", { children: b.map((s, n) => /* @__PURE__ */ r(
-      "tr",
-      {
-        children: s.map((o, c) => /* @__PURE__ */ r(
-          Y,
-          {
-            tabIndex: u === o ? 0 : -1,
-            year: t,
-            month: e,
-            day: o,
-            onSelect: f,
-            isDisabled: !!k(o, e, t, p),
-            isSelected: !!S(o, e, t, a.from, a.to),
-            isBetween: !!D(o, e, t, a.from, a.to),
-            isLast: !!d(o, "last", e, t, a.from, a.to),
-            isFirst: !!d(o, "first", e, t, a.from, a.to)
-          },
-          `${t}-${e}-${n}-${c}-day`
-        ))
-      },
-      `${t}-${e}-${n}-week`
-    )) }) })
+    }, children: /* @__PURE__ */ r("tbody", { children: b.map((s, n) => /* @__PURE__ */ r("tr", { children: s.map((o, c) => /* @__PURE__ */ r(j, { tabIndex: u === o ? 0 : -1, year: t, month: e, day: o, onSelect: f, isDisabled: !!k(o, e, t, p), isSelected: !!S(o, e, t, a.from, a.to), isBetween: !!D(o, e, t, a.from, a.to), isLast: !!d(o, "last", e, t, a.from, a.to), isFirst: !!d(o, "first", e, t, a.from, a.to) }, `${t}-${e}-${n}-${c}-day`)) }, `${t}-${e}-${n}-week`)) }) })
   ] });
 }, st = l.memo(E);
 export {