@temp-spotwork/ui 1.4.7 → 1.5.0

package/dist/components/molecules/dialog/dialog.js

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { R as w, P as C, O as H, C as $, T as I, D as _ } from "../../../index-C0ZrzaoZ.js";
+import { R as $, P as I, O as _, C as j, T as R, D as z } from "../../../index-C0ZrzaoZ.js";
 import "../../styles/tailwind-config/index.js";
-import { Typography as j } from "../../styles/typography/typography.js";
+import { Typography as D } from "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
 import "../../styles/colors/colormap.js";
 import { t as c } from "../../../bundle-mjs-CAy1p0fn.js";
-import { Icons as R } from "../../atoms/icons/icons.js";
+import { Icons as O } from "../../atoms/icons/icons.js";
 import "../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../atoms/icons/iconsSVGs/Small/Profile.js";
 import "../../../index-fN7hCOo3.js";
@@ -19,6 +19,7 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import { Button as d } from "../button/button.js";
 import "../datatables/cell/cell.js";
@@ -27,7 +28,7 @@ import "../../../react-spring_web.modern-BLL8Qmtg.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
 import { useUIElementSize as n } from "./use-ui-element-size.js";
-function mr({
+function sr({
   children: f,
   width: h,
   open: x,
@@ -38,32 +39,35 @@ function mr({
   actionButtons: l,
   hasPadding: g = !0,
   hasActionButtons: o = !0,
-  hasBottomBorder: b = !1
+  hasBottomBorder: b = !1,
+  maxHeight: v,
+  contentMaxHeight: y,
+  heightSpacingRem: N = 15
 }) {
-  const { ref: v, height: s } = n(), { ref: y, height: N } = n(), i = 15;
-  return /* @__PURE__ */ r(w, { open: x, onOpenChange: t, children: /* @__PURE__ */ e(C, { children: [
-    /* @__PURE__ */ r(H, { className: "fixed inset-0 bg-surface-subduedInverted bg-opacity-50 " }),
+  const { ref: w, height: p } = n(), { ref: C, height: H } = n(), i = N;
+  return /* @__PURE__ */ r($, { open: x, onOpenChange: t, children: /* @__PURE__ */ e(I, { children: [
+    /* @__PURE__ */ r(_, { className: "fixed inset-0 bg-surface-subduedInverted bg-opacity-50 " }),
     /* @__PURE__ */ e(
-      $,
+      j,
       {
         className: "fixed top-1/2 left-1/2 max-w-full  transform -translate-x-1/2 -translate-y-1/2 rounded-xl bg-surface-default shadow-[0rem_0rem_1rem_0rem_#B0B0B0] focus:outline-none",
-        style: { width: h, maxHeight: `calc(100vh - ${i}rem)` },
+        style: { width: h, maxHeight: v ?? `calc(100vh - ${i}rem)` },
         children: [
-          /* @__PURE__ */ e(I, { className: "p-xl border-b border-bcolor-subdued", ref: v, children: [
+          /* @__PURE__ */ e(R, { className: "p-xl border-b border-bcolor-subdued", ref: w, children: [
             /* @__PURE__ */ e("div", { className: "flex items-start justify-between gap-xxl ", children: [
-              /* @__PURE__ */ r(j, { swStyle: 8, children: m }),
-              /* @__PURE__ */ r(R, { button: !0, icon: "Cross", handleClick: t })
+              /* @__PURE__ */ r(D, { swStyle: 8, children: m }),
+              /* @__PURE__ */ r(O, { button: !0, icon: "Cross", handleClick: t })
             ] }),
             a && /* @__PURE__ */ r("div", { children: a })
           ] }),
-          /* @__PURE__ */ r(_, { className: "sr-only", children: m }),
+          /* @__PURE__ */ r(z, { className: "sr-only", children: m }),
           /* @__PURE__ */ e("div", { children: [
             /* @__PURE__ */ r(
               "div",
               {
                 style: {
                   // Calculate max height based on viewport height minus spacing and measured header/footer heights
-                  maxHeight: o ? `calc(100vh - ${i}rem - ${s}px - ${N}px)` : `calc(100vh - ${i}rem - ${s}px)`
+                  maxHeight: y ?? (o ? `calc(100vh - ${i}rem - ${p}px - ${H}px)` : `calc(100vh - ${i}rem - ${p}px)`)
                 },
                 className: c("overflow-auto", g && "p-xl", !o && "rounded-b-xl"),
                 children: f
@@ -72,7 +76,7 @@ function mr({
             o && /* @__PURE__ */ e(
               "div",
               {
-                ref: y,
+                ref: C,
                 className: c("flex justify-between p-xl", b && "border-t border-bcolor-subdued"),
                 children: [
                   /* @__PURE__ */ r(
@@ -85,7 +89,7 @@ function mr({
                       onClick: t
                     }
                   ),
-                  l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((p) => /* @__PURE__ */ r(d, { size: "large", ...p }, p.text)) })
+                  l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((s) => /* @__PURE__ */ r(d, { size: "large", ...s }, s.text)) })
                 ]
               }
             )
@@ -96,5 +100,5 @@ function mr({
   ] }) });
 }
 export {
-  mr as Dialog
+  sr as Dialog
 };

package/dist/components/molecules/dialog/dialog.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Dialog } from './dialog';
+
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithCustomMaxHeight: Story;
+export declare const WithCustomContentMaxHeight: Story;

package/dist/components/molecules/dialog/dialog.stories.js

@@ -0,0 +1,57 @@
+import { jsx as e } from "react/jsx-runtime";
+import { w as n, e as i } from "../../../index-CktvVE7I.js";
+import { useState as l } from "react";
+import { Dialog as s } from "./dialog.js";
+const a = (t) => {
+  const [o, r] = l(!0);
+  return /* @__PURE__ */ e(
+    s,
+    {
+      ...t,
+      open: o,
+      setClose: () => r(!1),
+      title: t.title ?? "Dialog Title",
+      hasActionButtons: !1,
+      children: /* @__PURE__ */ e("div", { className: "h-[60rem]", children: /* @__PURE__ */ e("p", { children: "Dialog content for sizing checks." }) })
+    }
+  );
+}, p = {
+  title: "@spotwork-ui/molecules/Dialog",
+  component: s,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    title: "Dialog Title",
+    open: !0,
+    setClose: () => {
+    }
+  }
+}, d = {
+  render: (t) => /* @__PURE__ */ e(a, { ...t })
+}, u = {
+  render: (t) => /* @__PURE__ */ e(a, { ...t }),
+  args: {
+    maxHeight: "70vh"
+  },
+  play: async ({ canvasElement: t }) => {
+    const o = n(t.ownerDocument.body).getByRole("dialog");
+    await i(o).toHaveStyle({ maxHeight: "70vh" });
+  }
+}, y = {
+  render: (t) => /* @__PURE__ */ e(a, { ...t }),
+  args: {
+    contentMaxHeight: "18rem"
+  },
+  play: async ({ canvasElement: t }) => {
+    const o = n(t.ownerDocument.body).getByText("Dialog content for sizing checks.").parentElement;
+    await i(o).toHaveStyle({ maxHeight: "18rem" });
+  }
+};
+export {
+  d as Default,
+  y as WithCustomContentMaxHeight,
+  u as WithCustomMaxHeight,
+  p as default
+};

package/dist/components/molecules/drawer/drawer.js

@@ -19,17 +19,18 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import { Button as L } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
-function vr({
+function gr({
   children: N,
   actionBox: b,
   title: l,
-  open: e,
+  open: o,
   setOpen: i,
   width: a,
   transitionDuration: c = 500,
@@ -42,7 +43,7 @@ function vr({
   scrollBehavior: D = "auto",
   enableScroll: s = !0
 }) {
-  const [n, T] = I(c), o = y(null), h = y(0), R = X(
+  const [n, T] = I(c), e = y(null), h = y(0), R = X(
     () => ({
       from: { opacity: 0, transform: `translateX(${a})` },
       enter: { opacity: 1, transform: "translateX(0%)" },
@@ -52,21 +53,21 @@ function vr({
       }
     }),
     [a, n]
-  ), B = E(e, R);
+  ), B = E(o, R);
   v(() => {
     T(c);
   }, [c]);
   const _ = F({
-    width: e ? a : 0,
+    width: o ? a : 0,
     config: { duration: n }
   });
   v(() => {
-    e && m && s && o.current && (o.current.scrollTop = h.current);
-  }, [e, m, s]);
+    o && m && s && e.current && (e.current.scrollTop = h.current);
+  }, [o, m, s]);
   const $ = () => {
-    m && s && o.current && (h.current = o.current.scrollTop), i == null || i(!1);
+    m && s && e.current && (h.current = e.current.scrollTop), i == null || i(!1);
   };
-  return /* @__PURE__ */ r(M, { open: e, onOpenChange: i, children: /* @__PURE__ */ r(q, { children: B(
+  return /* @__PURE__ */ r(M, { open: o, onOpenChange: i, children: /* @__PURE__ */ r(q, { children: B(
     (x, j) => j ? /* @__PURE__ */ t(k, { children: [
       /* @__PURE__ */ r(g.div, { style: { opacity: x.opacity }, children: /* @__PURE__ */ r(
         z,
@@ -105,10 +106,10 @@ function vr({
                   u && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(L, { ...u }) })
                 ] })
               ] }),
-              e && /* @__PURE__ */ r(
+              o && /* @__PURE__ */ r(
                 "div",
                 {
-                  ref: o,
+                  ref: e,
                   className: `flex-1 ${s ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden"}`,
                   style: { scrollBehavior: D },
                   children: N
@@ -122,5 +123,5 @@ function vr({
   ) }) });
 }
 export {
-  vr as Drawer
+  gr as Drawer
 };

package/dist/components/molecules/filter/date-selector/DateSelector.stories.d.ts

@@ -5,3 +5,7 @@ declare const meta: Meta<typeof DateSelector>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const CalendarOpensBottom: Story;
+export declare const CalendarOpensTop: Story;
+export declare const CalendarOpensLeft: Story;
+export declare const CalendarOpensRight: Story;

package/dist/components/molecules/filter/date-selector/DateSelector.stories.js

@@ -1,20 +1,73 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
-import { DateSelector as t } from "./date-selector.js";
-const a = {
+import { jsx as c } from "react/jsx-runtime";
+import { w as o, u as r, e as s } from "../../../../index-CktvVE7I.js";
+import { useState as i } from "react";
+import { DateSelector as d } from "./date-selector.js";
+const n = (e) => {
+  const [t, a] = i(/* @__PURE__ */ new Date());
+  return /* @__PURE__ */ c(d, { ...e, value: t, onChange: (l) => a(l) });
+}, w = {
   title: "@spotwork-ui/DateSelector",
-  component: t,
+  component: d,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"],
-  argTypes: {
-    backgroundColor: { control: "color" }
+  args: {
+    mode: "day",
+    weekStartsAt: 0
+  }
+}, u = {
+  render: (e) => /* @__PURE__ */ c(n, { ...e })
+}, C = {
+  render: (e) => /* @__PURE__ */ c(n, { ...e }),
+  args: {
+    calendarPlacement: "bottom"
   },
-  args: { onClick: o() }
-}, c = {
-  args: {}
+  play: async ({ canvasElement: e }) => {
+    const t = o(e);
+    await r.click(t.getByTestId("date-selected"));
+    const a = o(e.ownerDocument.body).getByTestId("date-selector-calendar");
+    await s(a.className).toContain("top-[3rem]");
+  }
+}, B = {
+  render: (e) => /* @__PURE__ */ c(n, { ...e }),
+  args: {
+    calendarPlacement: "top"
+  },
+  play: async ({ canvasElement: e }) => {
+    const t = o(e);
+    await r.click(t.getByTestId("date-selected"));
+    const a = o(e.ownerDocument.body).getByTestId("date-selector-calendar");
+    await s(a.className).toContain("bottom-[3rem]");
+  }
+}, T = {
+  render: (e) => /* @__PURE__ */ c(n, { ...e }),
+  args: {
+    calendarPlacement: "left"
+  },
+  play: async ({ canvasElement: e }) => {
+    const t = o(e);
+    await r.click(t.getByTestId("date-selected"));
+    const a = o(e.ownerDocument.body).getByTestId("date-selector-calendar");
+    await s(a.className).toContain("right-[calc(100%+0.5rem)]");
+  }
+}, f = {
+  render: (e) => /* @__PURE__ */ c(n, { ...e }),
+  args: {
+    calendarPlacement: "right"
+  },
+  play: async ({ canvasElement: e }) => {
+    const t = o(e);
+    await r.click(t.getByTestId("date-selected"));
+    const a = o(e.ownerDocument.body).getByTestId("date-selector-calendar");
+    await s(a.className).toContain("left-[calc(100%+0.5rem)]");
+  }
 };
 export {
-  c as Primary,
-  a as default
+  C as CalendarOpensBottom,
+  T as CalendarOpensLeft,
+  f as CalendarOpensRight,
+  B as CalendarOpensTop,
+  u as Primary,
+  w as default
 };

package/dist/components/molecules/filter/date-selector/date-selector.d.ts

@@ -26,6 +26,11 @@ export type DateSelectorProps = {
      * optional autoFocus
      */
     autoFocus?: boolean;
+    /**
+     * Controls where the calendar dropdown opens relative to the trigger button.
+     * @default 'bottom'
+     */
+    calendarPlacement?: 'top' | 'bottom' | 'left' | 'right';
 };
-export declare function DateSelector({ mode, weekStartsAt, value, onChange, autoFocus, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateSelector({ mode, weekStartsAt, value, onChange, autoFocus, calendarPlacement, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/molecules/filter/date-selector/date-selector.js

@@ -3,25 +3,26 @@ import m from "react";
 import { Icons as g } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { Button as ct } from "../../button/button.js";
+import { Button as lt } from "../../button/button.js";
 import "../../../styles/colors/colors.js";
-import { surface as a } from "../../../styles/colors/colormap.js";
-import { outlinedBorder as it } from "../../../styles/defaults/defaults.js";
+import { surface as o } from "../../../styles/colors/colormap.js";
+import { outlinedBorder as dt } from "../../../styles/defaults/defaults.js";
 import { Typography as p } from "../../../styles/typography/typography.js";
 import { c as x } from "../../../../index-fN7hCOo3.js";
-import { formatDateToMonthYear as N, endOfMonth as v, parseShortMonthYear as u, formatShortMonthYear as lt, isSameMonth as Y, isSameWeek as D } from "../../../atoms/form/dateselect/helpers.js";
-import { p as dt, e as k, s as mt, a as ft, b as ht, i as O, c as w } from "../../../../isToday-DmBTkQMq.js";
-import { f as o, g as ut, a as E } from "../../../../format-BwmhcciO.js";
-import { s as yt } from "../../../../startOfToday-BPMZZniU.js";
-import { s as Mt, a as f } from "../../../../startOfWeek-DBvLd9He.js";
-function Gt({
+import { formatDateToMonthYear as N, endOfMonth as v, parseShortMonthYear as u, formatShortMonthYear as mt, isSameMonth as P, isSameWeek as D } from "../../../atoms/form/dateselect/helpers.js";
+import { p as ft, e as Y, s as ht, a as ut, b as yt, i as O, c as k } from "../../../../isToday-DmBTkQMq.js";
+import { f as s, g as Mt, a as w } from "../../../../format-BwmhcciO.js";
+import { s as gt } from "../../../../startOfToday-BPMZZniU.js";
+import { s as pt, a as f } from "../../../../startOfWeek-DBvLd9He.js";
+function Pt({
   mode: y = "day",
-  weekStartsAt: s = 0,
+  weekStartsAt: a = 0,
   value: r,
   onChange: l,
-  autoFocus: P = !1
+  autoFocus: E = !1,
+  calendarPlacement: F = "bottom"
 }) {
-  const $ = m.useRef(null), F = m.useRef(null), S = yt(), [H, W] = m.useState(!1), _ = () => {
+  const $ = m.useRef(null), H = m.useRef(null), S = gt(), [_, W] = m.useState(!1), z = () => {
     W((t) => !t);
   };
   m.useEffect(() => {
@@ -33,18 +34,18 @@ function Gt({
       document.removeEventListener("click", t);
     };
   }, []);
-  const [c, d] = m.useState(() => r && Array.isArray(r) ? N(new Date(r[0])) : r ? N(new Date(r)) : N(S)), z = () => y === "day" ? O(S, r) ? "Today" : o(r, "dd MMM") : o(r[0], "dd MMM") + "–" + o(r[1], "dd MMM"), q = () => {
-    const t = E(h, { months: -1 });
-    d(o(t, "MMM-yyyy"));
-  }, J = () => {
-    const t = E(h, { months: 1 });
-    d(o(t, "MMM-yyyy"));
-  }, C = ["S", "M", "T", "W", "T", "F", "S"], K = C.slice(s).concat(C.slice(0, s)), Q = () => /* @__PURE__ */ M("div", { className: "flex items-center w-full justify-between h-[3rem]", children: [
+  const [c, d] = m.useState(() => r && Array.isArray(r) ? N(new Date(r[0])) : r ? N(new Date(r)) : N(S)), q = () => y === "day" ? O(S, r) ? "Today" : s(r, "dd MMM") : s(r[0], "dd MMM") + "–" + s(r[1], "dd MMM"), J = () => {
+    const t = w(h, { months: -1 });
+    d(s(t, "MMM-yyyy"));
+  }, K = () => {
+    const t = w(h, { months: 1 });
+    d(s(t, "MMM-yyyy"));
+  }, C = ["S", "M", "T", "W", "T", "F", "S"], Q = C.slice(a).concat(C.slice(0, a)), U = () => /* @__PURE__ */ M("div", { className: "flex items-center w-full justify-between h-[3rem]", children: [
     /* @__PURE__ */ n(
       g,
       {
         disabled: !1,
-        handleClick: q,
+        handleClick: J,
         icon: "ChevronLeftSmall",
         color: "active",
         button: !0,
@@ -56,7 +57,7 @@ function Gt({
       {
         swStyle: 1,
         color: "active",
-        children: `${lt(c)}`,
+        children: `${mt(c)}`,
         className: "min-w-[2rem] text-center"
       }
     ),
@@ -64,14 +65,14 @@ function Gt({
       g,
       {
         disabled: !1,
-        handleClick: J,
+        handleClick: K,
         icon: "ChevronRightSmall",
         color: "active",
         button: !0,
         id: "next-month"
       }
     )
-  ] }), U = () => /* @__PURE__ */ n("div", { className: "flex justify-center items-center gap-[1rem] bg-[#e7e7e7] rounded-[0.5rem] w-full h-[2rem]", children: K.map((t, e) => /* @__PURE__ */ n(
+  ] }), V = () => /* @__PURE__ */ n("div", { className: "flex justify-center items-center gap-[1rem] bg-[#e7e7e7] rounded-[0.5rem] w-full h-[2rem]", children: Q.map((t, e) => /* @__PURE__ */ n(
     p,
     {
       swStyle: 1,
@@ -80,23 +81,23 @@ function Gt({
       className: "min-w-[2rem] text-center"
     },
     t + e
-  )) }), h = dt(c, "MMM-yyyy", /* @__PURE__ */ new Date()), j = k({
+  )) }), h = ft(c, "MMM-yyyy", /* @__PURE__ */ new Date()), j = Y({
     start: h,
     end: v(h)
-  }), V = (h.getDay() - s + 7) % 7;
-  j.unshift(...new Array(V).fill(null));
-  const X = () => {
+  }), X = (h.getDay() - a + 7) % 7;
+  j.unshift(...new Array(X).fill(null));
+  const Z = () => {
     const t = f(r, -1);
-    d(o(t, "MMM-yyyy")), l(t);
-  }, Z = () => {
+    d(s(t, "MMM-yyyy")), l(t);
+  }, A = () => {
     const t = f(r, 1);
-    d(o(t, "MMM-yyyy")), l(t);
-  }, A = () => /* @__PURE__ */ n("div", { className: "flex flex-row flex-wrap gap-md justify-start items-start", children: j.map((t, e) => t === null ? /* @__PURE__ */ n("div", { className: "w-[2rem] h-[2rem]" }, `null-${e}`) : /* @__PURE__ */ n(
+    d(s(t, "MMM-yyyy")), l(t);
+  }, tt = () => /* @__PURE__ */ n("div", { className: "flex flex-row flex-wrap gap-md justify-start items-start", children: j.map((t, e) => t === null ? /* @__PURE__ */ n("div", { className: "w-[2rem] h-[2rem]" }, `null-${e}`) : /* @__PURE__ */ n(
     "div",
     {
       className: x(
         "cursor-pointer rounded w-[2rem] h-[2rem] hover:bg-surface-active",
-        w(t) && "border border-bcolor-subdued rounded",
+        k(t) && "border border-bcolor-subdued rounded",
         O(new Date(t), r) && "bg-surface-active border-bcolor-active"
       ),
       onClick: () => l(t),
@@ -111,37 +112,37 @@ function Gt({
       )
     },
     t.getDate()
-  )) }), [T, B] = m.useState(), tt = () => {
+  )) }), [T, B] = m.useState(), et = () => {
     const t = f(r[0], 7), e = f(r[1], 7);
-    d(o(t, "MMM-yyyy")), l([t, e]);
-  }, et = () => {
+    d(s(t, "MMM-yyyy")), l([t, e]);
+  }, rt = () => {
     const t = f(r[0], -7), e = f(r[1], -7);
-    d(o(t, "MMM-yyyy")), l([t, e]);
+    d(s(t, "MMM-yyyy")), l([t, e]);
   };
-  function rt(t) {
-    const e = mt(u(t)), i = v(u(t));
-    return ft(
+  function nt(t) {
+    const e = ht(u(t)), i = v(u(t));
+    return ut(
       {
         start: e,
         end: i
       },
-      { weekStartsOn: s }
-    ).map((b) => k({
-      start: Mt(b, { weekStartsOn: s }),
-      end: ht(b, { weekStartsOn: s })
+      { weekStartsOn: a }
+    ).map((b) => Y({
+      start: pt(b, { weekStartsOn: a }),
+      end: yt(b, { weekStartsOn: a })
     }));
   }
-  const nt = rt(c), R = (t) => {
+  const at = nt(c), R = (t) => {
     const e = 0.07142857142857142;
     if (t[t.length - 1].getMonth() > u(c).getMonth() || t[t.length - 1].getFullYear() > u(c).getFullYear()) {
-      const L = v(t[0]).getDay() - s, at = (L / t.length + e) * 100, ot = ((L + 1) / t.length + e) * 100;
-      return `linear-gradient(to right, ${a.active} 0%, ${a.active} ${at}%, ${a.default} ${ot}%, ${a.default} 100%)`;
+      const L = v(t[0]).getDay() - a, ct = (L / t.length + e) * 100, it = ((L + 1) / t.length + e) * 100;
+      return `linear-gradient(to right, ${o.active} 0%, ${o.active} ${ct}%, ${o.default} ${it}%, ${o.default} 100%)`;
     }
     if (t[0].getMonth() === u(c).getMonth())
-      return a.active;
-    const i = v(t[0]).getDay() - s, I = (i / t.length + e) * 100, G = ((i + 1) / t.length + e) * 100;
-    return `linear-gradient(to right, ${a.default} 0%, ${a.default} ${I}%, ${a.active} ${G}%, ${a.active} 100%)`;
-  }, st = () => /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: nt.map((t) => /* @__PURE__ */ n(
+      return o.active;
+    const i = v(t[0]).getDay() - a, I = (i / t.length + e) * 100, G = ((i + 1) / t.length + e) * 100;
+    return `linear-gradient(to right, ${o.default} 0%, ${o.default} ${I}%, ${o.active} ${G}%, ${o.active} 100%)`;
+  }, ot = () => /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: at.map((t) => /* @__PURE__ */ n(
     "div",
     {
       className: x(
@@ -158,20 +159,20 @@ function Gt({
       onMouseEnter: () => B(t),
       onMouseLeave: () => B(void 0),
       onClick: () => l([t[0], t[t.length - 1]]),
-      children: t.map((e) => Y(c, e) ? /* @__PURE__ */ n(
+      children: t.map((e) => P(c, e) ? /* @__PURE__ */ n(
         "div",
         {
           className: x(
             "cursor-pointer rounded w-[2rem] h-[2rem]",
-            w(e) && "border border-bcolor-subdued rounded",
+            k(e) && "border border-bcolor-subdued rounded",
             D(e, r[0]) && "border-bcolor-active"
           ),
           children: /* @__PURE__ */ n(
             p,
             {
               swStyle: 1,
-              color: D(e, r[0], s) ? "active" : "default",
-              children: Y(c, e) ? e.getDate() : "",
+              color: D(e, r[0], a) ? "active" : "default",
+              children: P(c, e) ? e.getDate() : "",
               className: "min-w-[2rem] text-center"
             }
           )
@@ -179,8 +180,13 @@ function Gt({
         e.getDate()
       ) : /* @__PURE__ */ n("div", { className: "w-[2rem] h-[2rem]" }, e.getDate()))
     },
-    `week-${ut(t[0])}`
-  )) });
+    `week-${Mt(t[0])}`
+  )) }), st = {
+    top: "bottom-[3rem] right-0",
+    bottom: "top-[3rem] right-0",
+    left: "top-0 right-[calc(100%+0.5rem)]",
+    right: "top-0 left-[calc(100%+0.5rem)]"
+  };
   return /* @__PURE__ */ M(
     "div",
     {
@@ -191,34 +197,35 @@ function Gt({
           g,
           {
             disabled: !1,
-            handleClick: () => y === "day" ? X() : et(),
+            handleClick: () => y === "day" ? Z() : rt(),
             icon: "ChevronLeftSmall",
             color: "active",
             button: !0,
             id: "prev-period"
           }
         ),
-        /* @__PURE__ */ M("div", { className: "relative", id: "custom", ref: F, children: [
+        /* @__PURE__ */ M("div", { className: "relative", id: "custom", ref: H, children: [
           /* @__PURE__ */ n(
-            ct,
+            lt,
             {
-              autoFocus: P,
+              autoFocus: E,
               "data-testid": "date-selected",
               size: "small",
               variant: "tertiary",
               color: "affirmative",
-              text: z(),
-              onClick: _
+              text: q(),
+              onClick: z
             }
           ),
-          H && /* @__PURE__ */ n(
+          _ && /* @__PURE__ */ n(
             "div",
             {
-              className: `absolute top-[3rem] z-[25] right-0 bg-surface-default ${it.active} p-md`,
+              "data-testid": "date-selector-calendar",
+              className: `absolute z-[25] bg-surface-default ${dt.active} p-md ${st[F]}`,
               children: /* @__PURE__ */ M("div", { className: "flex flex-col justify-center items-center gap-md", children: [
-                Q(),
                 U(),
-                /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: y === "day" ? A() : st() })
+                V(),
+                /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: y === "day" ? tt() : ot() })
               ] })
             }
           )
@@ -227,7 +234,7 @@ function Gt({
           g,
           {
             disabled: !1,
-            handleClick: () => y === "day" ? Z() : tt(),
+            handleClick: () => y === "day" ? A() : et(),
             icon: "ChevronRightSmall",
             color: "active",
             button: !0,
@@ -239,5 +246,5 @@ function Gt({
   );
 }
 export {
-  Gt as DateSelector
+  Pt as DateSelector
 };

package/dist/components/molecules/filter/range-selector/RangeSelector.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { RangeSelector as r } from "./range-selector.js";
 const a = {
   title: "@spotwork-ui/RangeSelector",

package/dist/components/molecules/form/radiogroup/radiogroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { f as t } from "../../../../index-DfdAzObv.js";
+import { f as t } from "../../../../index-CktvVE7I.js";
 import { Radiogroup as s } from "./radiogroup.js";
 import { useState as d } from "react";
 import { Icons as r } from "../../../atoms/icons/icons.js";