@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/calendar/calendar-month.js

@@ -0,0 +1,148 @@
+import { jsx as g, Fragment as Z, jsxs as _ } from "react/jsx-runtime";
+import { useState as B, useRef as N, useMemo as A, useCallback as H, useEffect as z } from "react";
+import { m as i } from "../../../../index-CYyrKZeH.js";
+import { CalendarDateCell as tt } from "./calendar-date-cell.js";
+import { isDateSelectable as et, isDateInCurrentMonth as nt, isDateDisabled as ot } from "./calendar-utils.js";
+import { MonthHeader as rt } from "./month-header.js";
+function st(r, s) {
+  return r.x < s.x + s.width && r.x + r.width > s.x && r.y < s.y + s.height && r.y + r.height > s.y;
+}
+const ft = ({
+  readOnly: r = !1,
+  selectedDates: s,
+  onDateChange: D,
+  month: u,
+  disabled: v,
+  minDate: R,
+  maxDate: Y,
+  timezone: t,
+  overrideTooltip: T
+}) => {
+  const [y, b] = B(!1), [l, I] = B(null), [d, E] = B(null), f = N(null), S = N(/* @__PURE__ */ new Map()), U = A(() => {
+    const n = i.tz(u, t).startOf("month"), o = i.tz(u, t).endOf("month"), c = i.tz(n, t).startOf("week"), e = i.tz(o, t).endOf("week"), x = [];
+    let a = i.tz(c, t);
+    for (; a.isSameOrBefore(e); )
+      x.push(a.tz(t).toDate()), a = a.clone().add(1, "day");
+    return x;
+  }, [u]), G = H((n, o) => {
+    o ? S.current.set(n, o) : S.current.delete(n);
+  }, []), J = H(
+    (n) => {
+      if (v || r || !f.current) return;
+      const o = f.current.getBoundingClientRect(), c = n.clientX - o.left, e = n.clientY - o.top;
+      I({ x: c, y: e }), E({ x: c, y: e });
+    },
+    [v, r]
+  );
+  z(() => {
+    const n = (c) => {
+      if (!f.current || !l || r) return;
+      const e = f.current.getBoundingClientRect(), x = c.clientX - e.left, a = c.clientY - e.top;
+      Math.sqrt(
+        Math.pow(x - l.x, 2) + Math.pow(a - l.y, 2)
+      ) > 3 && (y || b(!0), E({ x, y: a }));
+    }, o = (c) => {
+      const e = l, x = d;
+      if (b(!1), I(null), E(null), !e || !f.current || r)
+        return;
+      b(!1);
+      const a = f.current.getBoundingClientRect(), h = x || {
+        x: c.clientX - a.left,
+        y: c.clientY - a.top
+      }, O = Math.sqrt(
+        Math.pow(h.x - e.x, 2) + Math.pow(h.y - e.y, 2)
+      ), P = 5, M = new Set(s.map((p) => i.tz(p.date, t).format("YYYY-MM-DD")));
+      let $ = !1;
+      if (O < P)
+        return;
+      {
+        const p = Math.min(e.x, h.x), m = Math.min(e.y, h.y), C = Math.max(e.x, h.x), X = Math.max(e.y, h.y), Q = {
+          x: p,
+          y: m,
+          width: C - p,
+          height: X - m
+        };
+        S.current.forEach((q, F) => {
+          if (q) {
+            const w = q.getBoundingClientRect(), V = {
+              x: w.left - a.left,
+              y: w.top - a.top,
+              width: w.width,
+              height: w.height
+            };
+            if (st(Q, V)) {
+              const k = i.tz(F, t).toDate(), L = i.tz(F, t).format("YYYY-MM-DD"), W = et(k, s, t);
+              nt(k, u, t) && !ot(k, t, R, Y) && W && (M.has(L) ? M.delete(L) : M.add(L), $ = !0);
+            }
+          }
+        });
+      }
+      const j = Array.from(M).map((p) => {
+        const m = i.tz(p, t).toDate(), C = s.find((X) => i.tz(X.date, t).isSame(m, "day"));
+        return C ? {
+          ...C
+        } : {
+          date: m
+        };
+      });
+      ($ || j.length !== s.length) && D(j);
+    };
+    return l ? (document.addEventListener("mousemove", n), document.addEventListener("mouseup", o)) : (document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", o)), () => {
+      document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", o);
+    };
+  }, [
+    y,
+    s,
+    l,
+    d,
+    D,
+    R,
+    Y,
+    u,
+    r,
+    t
+  ]);
+  const K = () => {
+    if (!y || !l || !d)
+      return { display: "none" };
+    const n = Math.min(l.x, d.x), o = Math.min(l.y, d.y), c = Math.max(l.x, d.x), e = Math.max(l.y, d.y);
+    return {
+      position: "absolute",
+      left: `${n}px`,
+      top: `${o}px`,
+      width: `${c - n}px`,
+      height: `${e - o}px`,
+      backgroundColor: "rgba(25, 84, 220, 0.3)",
+      // Blue color matching the image
+      border: "1px dashed #1954DC",
+      // Darker blue border
+      pointerEvents: "none",
+      zIndex: 30,
+      borderRadius: "4px"
+    };
+  };
+  return /* @__PURE__ */ g(Z, { children: /* @__PURE__ */ _("div", { ref: f, className: "p-xl relative grow", onMouseDown: J, children: [
+    /* @__PURE__ */ g(rt, { month: u, timezone: t }),
+    /* @__PURE__ */ g("div", { className: "grid grid-cols-7 gap-xl select-none", children: U.map((n, o) => /* @__PURE__ */ g(
+      tt,
+      {
+        date: n,
+        selectedDates: s,
+        disabled: v,
+        onDateChange: D,
+        onCellRef: G,
+        minDate: R,
+        maxDate: Y,
+        month: u,
+        timezone: t,
+        readOnly: r,
+        overrideTooltip: T
+      },
+      o
+    )) }),
+    y && /* @__PURE__ */ g("div", { style: K() })
+  ] }) });
+};
+export {
+  ft as CalendarDates
+};

package/dist/components/atoms/form/calendar/calendar-utils.d.ts

@@ -0,0 +1,43 @@
+import { CalendarDate } from './types';
+
+/**
+ * Check if a date is currently selected in the calendar
+ * Compares the given date with all selected dates using timezone-aware comparison
+ *
+ * @param date - The date to check
+ * @param selectedDates - Array of currently selected dates
+ * @param timezone - The timezone for date comparison
+ * @returns true if the date is selected, false otherwise
+ */
+export declare const isDateSelected: (date: Date, selectedDates: Date[], timezone: string) => boolean;
+/**
+ * Check if a date is disabled (outside the allowed range)
+ * Validates if the date falls within the min/max date constraints
+ *
+ * @param date - The date to check
+ * @param timezone - The timezone for date comparison
+ * @param minDate - Minimum allowed date (optional)
+ * @param maxDate - Maximum allowed date (optional)
+ * @returns true if the date is disabled, false otherwise
+ */
+export declare const isDateDisabled: (date: Date, timezone: string, minDate?: Date, maxDate?: Date) => boolean;
+/**
+ * Check if a date belongs to the current month being displayed
+ * Used to determine which dates should be fully styled vs. dimmed
+ *
+ * @param date - The date to check
+ * @param month - The current month being displayed
+ * @param timezone - The timezone for date comparison
+ * @returns true if the date is in the current month, false otherwise
+ */
+export declare const isDateInCurrentMonth: (date: Date, month: Date, timezone: string) => boolean;
+/**
+ * Check if a date is selectable based on its current state
+ * A date is selectable if it's not explicitly disabled in the selectedDates array
+ *
+ * @param date - The date to check
+ * @param selectedDates - Array of currently selected dates with their states
+ * @param timezone - The timezone for date comparison
+ * @returns true if the date is selectable, false otherwise
+ */
+export declare const isDateSelectable: (date: Date, selectedDates: CalendarDate[], timezone: string) => boolean;

package/dist/components/atoms/form/calendar/calendar-utils.js

@@ -0,0 +1,11 @@
+import { m as n } from "../../../../index-CYyrKZeH.js";
+const o = (t, e, r) => e.some((s) => n.tz(s, r).isSame(t, "day")), d = (t, e, r, s) => !!(r && n.tz(t, e).endOf("day").isBefore(r) || s && n.tz(t, e).endOf("day").isAfter(s)), f = (t, e, r) => n.tz(t, r).isSame(e, "month"), u = (t, e, r) => {
+  const s = e.find((i) => n.tz(i.date, r).isSame(t, "day"));
+  return !(s != null && s.isDisabled);
+};
+export {
+  d as isDateDisabled,
+  f as isDateInCurrentMonth,
+  u as isDateSelectable,
+  o as isDateSelected
+};

package/dist/components/atoms/form/calendar/calendar.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { CalendarProps } from './types';
+
+/**
+ * Calendar component that displays a three-month view with navigation capabilities.
+ *
+ * Features:
+ * - Three-month view: shows previous, current, and next month simultaneously
+ * - Sticky navigation buttons for month navigation
+ * - Timezone-aware date handling
+ * - Support for date range selection with min/max constraints
+ * - Optional header and read-only modes
+ *
+ * The component uses a three-month layout where:
+ * - Previous month is partially visible on the left (negative margin)
+ * - Current month is fully visible in the center
+ * - Next month is partially visible on the right
+ * This creates a seamless navigation experience with visual context.
+ */
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/atoms/form/calendar/calendar.js

@@ -0,0 +1,106 @@
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import { useState as y, useEffect as C } from "react";
+import { CalendarDates as b } from "./calendar-month.js";
+import { t as j } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { m as t } from "../../../../index-CYyrKZeH.js";
+import { StickyButton as p } from "./sticky-button.js";
+const q = ({
+  selectedDates: n = [],
+  onDateChange: h = () => {
+  },
+  onCurrentMonthChange: e = () => {
+  },
+  disabled: l = !1,
+  minDate: m = t().subtract(1, "year").toDate(),
+  maxDate: s = t().add(1, "year").toDate(),
+  timezone: u,
+  className: N,
+  readOnly: d = !1,
+  overrideTooltip: v,
+  header: c,
+  currentMonth: f
+}) => {
+  const o = u || t.tz.guess(), w = n != null && n[0] ? t.tz(n == null ? void 0 : n[0].date, o).startOf("month").toDate() : t.tz(m, o).startOf("month").toDate(), [i, x] = y(f || w);
+  C(() => {
+    f && t(f).isValid() && x(f);
+  }, [f]);
+  const g = () => {
+    const a = t.tz(i, o).subtract(1, "month").toDate();
+    x(a), e(a);
+  }, M = t.tz(i, o).subtract(1, "month").toDate(), S = () => {
+    const a = t.tz(i, o).add(1, "month").toDate();
+    x(a), e(a);
+  }, k = t.tz(i, o).add(1, "month").toDate();
+  return /* @__PURE__ */ z("div", { className: j("bg-transparent rounded-xl border border-gray-200 w-[58.5rem] ", N), children: [
+    c ? /* @__PURE__ */ r("div", { className: "p-md border-b border-gray-200", children: c }) : null,
+    /* @__PURE__ */ z("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        p,
+        {
+          onClick: g,
+          icon: "ChevronLeft",
+          position: "left",
+          disabled: t.tz(i, o).isSame(m, "month"),
+          hasHeader: !!c
+        }
+      ),
+      /* @__PURE__ */ r(
+        p,
+        {
+          onClick: S,
+          icon: "ChevronRight",
+          position: "right",
+          disabled: t.tz(i, o).isSame(s, "month"),
+          hasHeader: !!c
+        }
+      ),
+      /* @__PURE__ */ z("div", { className: "overflow-hidden flex", children: [
+        /* @__PURE__ */ r("div", { className: "w-[33rem] ml-[-19rem] flex flex-col", children: /* @__PURE__ */ r(
+          b,
+          {
+            readOnly: d,
+            selectedDates: n,
+            onDateChange: h,
+            month: M,
+            disabled: l,
+            minDate: m,
+            maxDate: s,
+            timezone: o,
+            overrideTooltip: v
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: "w-[33rem] flex flex-col", children: /* @__PURE__ */ r(
+          b,
+          {
+            readOnly: d,
+            selectedDates: n,
+            onDateChange: h,
+            month: i,
+            disabled: l,
+            minDate: m,
+            maxDate: s,
+            timezone: o,
+            overrideTooltip: v
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: "w-[33rem] flex flex-col", children: /* @__PURE__ */ r(
+          b,
+          {
+            readOnly: d,
+            selectedDates: n,
+            onDateChange: h,
+            month: k,
+            disabled: l,
+            minDate: m,
+            maxDate: s,
+            timezone: o,
+            overrideTooltip: v
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  q as Calendar
+};

package/dist/components/atoms/form/calendar/calendar.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from './calendar';
+import { CalendarProps } from './types';
+
+declare const meta: Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Readonly: StoryObj<CalendarProps>;
+export declare const Interactive: Story;
+export declare const VancouverTimezone: Story;
+export declare const WithDisabledDates: Story;
+export declare const WithHeaderButtons: Story;

package/dist/components/atoms/form/calendar/calendar.stories.js

@@ -0,0 +1,215 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { Calendar as l } from "./calendar.js";
+import { m as t } from "../../../../index-CYyrKZeH.js";
+import { P as m } from "../../../../index-DNpMaKvH.js";
+import { Button as s } from "../../../molecules/button/button.js";
+const C = {
+  title: "@spotwork-ui/atoms/form/Calendar",
+  component: l,
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" }
+    },
+    selectedDates: {
+      control: !1
+      // Disable control for selectedDates to prevent JSX serialization issues
+    },
+    onDateChange: {
+      control: !1
+      // Disable control for onDateChange
+    }
+  },
+  decorators: [
+    (n) => /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(n, {}) })
+  ]
+}, v = {
+  args: {}
+}, w = {
+  args: {
+    disabled: !0
+  }
+}, f = {
+  args: {
+    readOnly: !0,
+    selectedDates: [
+      { date: t().add(1, "day").toDate() },
+      { date: t().add(2, "day").toDate(), color: "active", tooltip: "Active" },
+      { date: t().add(3, "day").toDate(), color: "disabled", tooltip: "Disabled" },
+      { date: t().add(4, "day").toDate(), color: "warning", tooltip: "Warning" },
+      { date: t().add(5, "day").toDate(), color: "alert", tooltip: "Alert" }
+    ],
+    minDate: t().subtract(1, "month").toDate(),
+    maxDate: t().add(1, "month").toDate()
+  }
+}, z = {
+  render: (n) => {
+    const [e, d] = c(
+      n.selectedDates || [{ date: t().add(1, "day").toDate() }]
+    );
+    return /* @__PURE__ */ a("div", { className: "w-[61.5rem] m-xl", children: [
+      /* @__PURE__ */ o(
+        l,
+        {
+          ...n,
+          selectedDates: e,
+          onDateChange: d,
+          minDate: /* @__PURE__ */ new Date(),
+          maxDate: t().add(2, "month").toDate()
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "text-sm text-gray-600 mt-4", children: /* @__PURE__ */ a("p", { children: [
+        "Selected: ",
+        JSON.stringify(e, null, 2)
+      ] }) })
+    ] });
+  },
+  args: {},
+  parameters: {
+    controls: {
+      exclude: ["selectedDates", "onDateChange"]
+    }
+  }
+}, S = {
+  render: (n) => {
+    const e = "America/Vancouver", [d, r] = c([
+      { date: t.tz(/* @__PURE__ */ new Date(), e).add(1, "day").toDate() }
+    ]);
+    return /* @__PURE__ */ a("div", { className: "w-[61.5rem] m-xl", children: [
+      /* @__PURE__ */ o(
+        l,
+        {
+          ...n,
+          selectedDates: d,
+          onDateChange: r,
+          timezone: e,
+          minDate: t.tz(/* @__PURE__ */ new Date(), e).toDate(),
+          maxDate: t.tz(/* @__PURE__ */ new Date(), e).add(2, "month").toDate()
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "text-sm text-gray-600 mt-4", children: [
+        /* @__PURE__ */ a("p", { children: [
+          "Timezone: ",
+          e
+        ] }),
+        /* @__PURE__ */ a("p", { children: [
+          "Selected: ",
+          JSON.stringify(d, null, 2)
+        ] })
+      ] })
+    ] });
+  },
+  args: {},
+  parameters: {
+    controls: {
+      exclude: ["selectedDates", "onDateChange"]
+    }
+  }
+}, N = {
+  render: (n) => {
+    const e = "America/Vancouver", [d, r] = c([
+      { date: t.tz(/* @__PURE__ */ new Date(), e).toDate(), tooltip: "Today" },
+      { date: t.tz(/* @__PURE__ */ new Date(), e).add(1, "day").toDate(), tooltip: "Selected" },
+      {
+        date: t.tz(/* @__PURE__ */ new Date(), e).add(2, "day").toDate(),
+        color: "disabled",
+        isDisabled: !0,
+        tooltip: "Disabled"
+      },
+      { date: t.tz(/* @__PURE__ */ new Date(), e).add(3, "day").toDate(), color: "warning", tooltip: "Warning" },
+      {
+        date: t.tz(/* @__PURE__ */ new Date(), e).add(4, "day").toDate(),
+        color: "alert",
+        tooltip: "Some error message"
+      }
+    ]);
+    return /* @__PURE__ */ a("div", { className: "w-[61.5rem] m-xl", children: [
+      /* @__PURE__ */ o(
+        l,
+        {
+          ...n,
+          selectedDates: d,
+          onDateChange: r,
+          timezone: e,
+          minDate: t.tz(/* @__PURE__ */ new Date(), e).toDate(),
+          maxDate: t.tz(/* @__PURE__ */ new Date(), e).add(2, "month").toDate()
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "text-sm text-gray-600 mt-4", children: [
+        /* @__PURE__ */ a("p", { children: [
+          "Timezone: ",
+          e
+        ] }),
+        /* @__PURE__ */ a("p", { children: [
+          "Selected:",
+          " ",
+          JSON.stringify(
+            d.map((i) => i.date),
+            null,
+            2
+          )
+        ] })
+      ] })
+    ] });
+  },
+  args: {},
+  parameters: {
+    controls: {
+      exclude: ["selectedDates", "onDateChange"]
+    }
+  }
+}, b = {
+  render: (n) => {
+    const [e, d] = c([{ date: t().add(1, "day").toDate() }]);
+    return /* @__PURE__ */ a("div", { className: "w-[61.5rem] m-xl", children: [
+      /* @__PURE__ */ o(
+        l,
+        {
+          ...n,
+          header: /* @__PURE__ */ a("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ o(s, { text: "Today", variant: "secondary", size: "small", onClick: () => {
+                d([{ date: /* @__PURE__ */ new Date() }]);
+              } }),
+              /* @__PURE__ */ o(s, { text: "Clear", variant: "tertiary", size: "small", onClick: () => {
+                d([]);
+              } })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ o(s, { text: "Save", variant: "primary", size: "small", onClick: () => console.log("Save clicked") }),
+              /* @__PURE__ */ o(s, { text: "Cancel", variant: "secondary", size: "small", onClick: () => console.log("Cancel clicked") })
+            ] })
+          ] }),
+          selectedDates: e,
+          onDateChange: d,
+          minDate: /* @__PURE__ */ new Date(),
+          maxDate: t().add(2, "month").toDate()
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "text-sm text-gray-600 mt-4", children: /* @__PURE__ */ a("p", { children: [
+        "Selected: ",
+        JSON.stringify(e, null, 2)
+      ] }) })
+    ] });
+  },
+  args: {},
+  parameters: {
+    controls: {
+      exclude: ["selectedDates", "onDateChange", "header"]
+    }
+  }
+};
+export {
+  v as Default,
+  w as Disabled,
+  z as Interactive,
+  f as Readonly,
+  S as VancouverTimezone,
+  N as WithDisabledDates,
+  b as WithHeaderButtons,
+  C as default
+};

package/dist/components/atoms/form/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { Calendar } from './calendar';
+export type { CalendarProps, CalendarDate } from './types';

package/dist/components/atoms/form/calendar/index.js

@@ -0,0 +1,4 @@
+import { Calendar as e } from "./calendar.js";
+export {
+  e as Calendar
+};

package/dist/components/atoms/form/calendar/month-header.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export type MonthHeaderProps = {
+    /**
+     * The month to display
+     */
+    month: Date;
+    /**
+     * The timezone for date formatting
+     */
+    timezone: string;
+};
+export declare const MonthHeader: React.FC<MonthHeaderProps>;

package/dist/components/atoms/form/calendar/month-header.js

@@ -0,0 +1,19 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { m as c } from "../../../../index-CYyrKZeH.js";
+import { Typography as r } from "../../../styles/typography/typography.js";
+const n = ({ month: m, timezone: s }) => /* @__PURE__ */ a("div", { className: "select-none pb-md", children: [
+  /* @__PURE__ */ e("div", { className: "flex items-center justify-center mb-md", children: /* @__PURE__ */ e(r, { swStyle: 5, color: "active", className: "font-medium", children: c(m).tz(s).format("MMMM YYYY") }) }),
+  /* @__PURE__ */ e("div", { className: "flex gap-xl bg-surface-disabled rounded-md w-full", children: ["S", "M", "T", "W", "T", "F", "S"].map((t, l) => /* @__PURE__ */ e(
+    r,
+    {
+      swStyle: 5,
+      color: "default",
+      className: "h-[3rem] w-[3rem] flex items-center justify-center",
+      children: t
+    },
+    l
+  )) })
+] });
+export {
+  n as MonthHeader
+};

package/dist/components/atoms/form/calendar/sticky-button.d.ts

@@ -0,0 +1,24 @@
+type Props = {
+    onClick: () => void;
+    disabled?: boolean;
+    icon: 'ChevronLeft' | 'ChevronRight';
+    position: 'left' | 'right';
+    hasHeader?: boolean;
+};
+/**
+ * Sticky navigation button component for calendar month navigation.
+ *
+ * Features:
+ * - Positioned absolutely on the left or right side of the calendar
+ * - Gradient background that fades to transparent for seamless integration
+ * - Supports both left and right navigation with appropriate icons
+ * - Handles disabled state for boundary conditions
+ * - Adjusts styling when calendar has a header
+ *
+ * The component creates a visual navigation area that:
+ * - Provides clear affordance for month navigation
+ * - Blends seamlessly with the calendar background
+ * - Maintains accessibility with proper disabled states
+ */
+export declare const StickyButton: ({ onClick, icon, position, disabled, hasHeader }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/form/calendar/sticky-button.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { t as l } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Icons as n } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+const m = ({ onClick: o, icon: a, position: r, disabled: e = !1, hasHeader: d = !1 }) => /* @__PURE__ */ t(
+  "div",
+  {
+    onClick: e ? void 0 : o,
+    className: l(
+      "absolute top-0 w-[9rem] h-full rounded-e-xl flex items-center p-md z-10",
+      r === "left" ? "left-0 rounded-s-xl justify -start" : "right-0 rounded-e-xl justify-end",
+      d && "rounded-t-none"
+    ),
+    style: {
+      background: r === "left" ? "linear-gradient(90deg, var(--Surface-Subdued, #F6F6F6) 0%, var(--Surface-None, rgba(255, 255, 255, 0.00)) 100%)" : "linear-gradient(90deg, var(--Surface-None, rgba(255, 255, 255, 0.00)) 0%, var(--Surface-Subdued, #F6F6F6) 100%)",
+      backdropFilter: "blur(0px)"
+    },
+    children: /* @__PURE__ */ t(n, { icon: a, color: e ? "disabled" : "active", disabled: e })
+  }
+);
+export {
+  m as StickyButton
+};