qaema-ui 0.0.1

package/dist/components/ConfigList.js

@@ -0,0 +1,215 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import { useMemo as h, useState as R } from "react";
+import { LuChevronDown as w, LuChevronRight as L, LuEye as S, LuPencil as B } from "../node_modules/react-icons/lu/index.js";
+import a, { css as u } from "styled-components";
+const E = a.div`
+  border: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  border-radius: ${({ theme: r }) => r.borderRadius.lg};
+  overflow: hidden;
+  background: ${({ theme: r }) => r.colors.grey.n50};
+`, I = a.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $grid: r }) => r};
+  gap: ${({ theme: r }) => r.spacing.xs};
+  background: ${({ theme: r }) => r.colors.primary.purple.n100};
+  color: ${({ theme: r }) => r.colors.grey.n800};
+  font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
+  font-size: ${({ theme: r }) => {
+  var t;
+  return (t = r.typography.sizes) == null ? void 0 : t.s2;
+}};
+  padding: ${({ theme: r }) => `${r.spacing.s} ${r.spacing.sm}`};
+`, g = a.span`
+  &:last-child {
+    justify-self: end;
+  }
+`, T = a.button`
+  width: 100%;
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $grid: r }) => r};
+  gap: ${({ theme: r }) => r.spacing.xs};
+  padding: ${({ theme: r }) => r.spacing.s};
+  border: 0;
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  cursor: pointer;
+  text-align: ${({ theme: r }) => r.dir === "rtl" ? "right" : "left"};
+
+  background: ${({ theme: r }) => r.colors.grey.n50};
+
+  &:hover {
+    background: ${({ theme: r }) => r.colors.grey.n100};
+  }
+
+  ${({ $expanded: r }) => r && u`
+      background-color: ${({ theme: t }) => t.colors.primary.purple.n75};
+    `}
+`, V = a.span`
+  font-weight: ${({ theme: r }) => r.typography.weights.bold};
+  color: ${({ theme: r }) => r.colors.grey.n800};
+`, P = a.div`
+  display: ${({ $visible: r }) => r ? "block" : "none"};
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+`, b = a.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${({ $grid: r }) => r};
+  gap: ${({ theme: r }) => r.spacing.xs};
+  padding: ${({ theme: r }) => `${r.spacing.s} ${r.spacing.sm}`};
+`, f = a.span`
+  color: ${({ theme: r }) => r.colors.grey.n250};
+`, A = a.span`
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  height: 1.375rem;
+  padding: 0 ${({ theme: r }) => r.spacing.s};
+  border-radius: ${({ theme: r }) => r.borderRadius.sm};
+  font-size: ${({ theme: r }) => {
+  var t;
+  return (t = r.typography.sizes) == null ? void 0 : t.s1;
+}};
+  font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
+  ${({ $variant: r }) => r === "active" && u`
+      background: ${({ theme: t }) => t.colors.state.success.n100};
+      color: ${({ theme: t }) => t.colors.primary.green.n500};
+      border: 1px solid ${({ theme: t }) => t.colors.state.success.n200};
+    `}
+
+  ${({ $variant: r }) => r === "inactive" && u`
+      width: 3.5rem;
+      height: 1.4375rem;
+      border-radius: ${({ theme: t }) => t.borderRadius.sm};
+      padding: 0 ${({ theme: t }) => t.spacing.s};
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: ${({ theme: t }) => t.colors.grey.n100};
+      color: ${({ theme: t }) => t.colors.grey.n650};
+      border: 1px solid ${({ theme: t }) => t.colors.grey.n100};
+      font-size: ${({ theme: t }) => {
+  var n;
+  return (n = t.typography.sizes) == null ? void 0 : n.s1;
+}};
+      font-weight: ${({ theme: t }) => t.typography.weights.semiBold};
+    `}
+`, v = a.button`
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: ${({ theme: r }) => r.borderRadius.md};
+  background: ${({ theme: r }) => r.colors.grey.n50};
+  color: ${({ theme: r }) => r.colors.primary.purple.n500};
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme: r }) => r.colors.primary.purple.n75};
+  }
+`, D = (r) => {
+  if (r == null) return "neutral";
+  const t = String(r).trim().toLowerCase();
+  return t.includes("inactive") ? "inactive" : t.includes("active") ? "active" : "neutral";
+}, k = (r, t) => {
+  const n = {
+    status: (t == null ? void 0 : t.status) ?? "80px",
+    view: (t == null ? void 0 : t.view) ?? "40px",
+    edit: (t == null ? void 0 : t.edit) ?? "40px",
+    chevron: "32px"
+  };
+  return ["1fr", r.status ? n.status : "0px", r.view ? n.view : "0px", r.edit ? n.edit : "0px", n.chevron].join(" ");
+}, q = ({
+  columns: r,
+  sections: t,
+  emptyMessage: n = "No items",
+  showColumns: s,
+  columnSizes: p,
+  className: c,
+  style: $,
+  isLoading: y
+}) => {
+  const o = {
+    status: (s == null ? void 0 : s.status) ?? !0,
+    view: (s == null ? void 0 : s.view) ?? !0,
+    edit: (s == null ? void 0 : s.edit) ?? !0
+  }, l = {
+    config: (r == null ? void 0 : r.config) ?? "Configurations",
+    status: (r == null ? void 0 : r.status) ?? "Status",
+    view: (r == null ? void 0 : r.view) ?? "View",
+    edit: (r == null ? void 0 : r.edit) ?? "Edit"
+  }, x = h(() => k(o, p), [o, p]);
+  return /* @__PURE__ */ i.jsxs(E, { className: c, style: $, children: [
+    /* @__PURE__ */ i.jsxs(I, { $grid: x, children: [
+      /* @__PURE__ */ i.jsx(g, { children: l.config }),
+      o.status && /* @__PURE__ */ i.jsx(g, { children: l.status }),
+      o.view && /* @__PURE__ */ i.jsx(g, { children: l.view }),
+      o.edit && /* @__PURE__ */ i.jsx(g, { children: l.edit }),
+      /* @__PURE__ */ i.jsx(g, {})
+    ] }),
+    t.map((e) => /* @__PURE__ */ i.jsx(
+      G,
+      {
+        section: e,
+        isLoading: y,
+        emptyMessage: n,
+        show: o,
+        columnSizes: p
+      },
+      e.id
+    ))
+  ] });
+}, G = ({ section: r, emptyMessage: t, show: n, columnSizes: s, isLoading: p }) => {
+  var x;
+  const [c, $] = R(!!r.defaultExpanded), y = () => {
+    $((e) => {
+      var j;
+      const d = !e;
+      return (j = r.onToggle) == null || j.call(r, d, r), d;
+    });
+  }, o = (((x = r.items) == null ? void 0 : x.length) ?? 0) > 0, l = h(() => k(n, s), [n, s]);
+  return /* @__PURE__ */ i.jsxs("div", { children: [
+    /* @__PURE__ */ i.jsxs(T, { $expanded: c, onClick: y, "aria-expanded": c, $grid: l, children: [
+      /* @__PURE__ */ i.jsx(
+        V,
+        {
+          onClick: (e) => {
+            var d;
+            e.stopPropagation(), (d = r.onTitleClick) == null || d.call(r, r.id);
+          },
+          children: r.title
+        }
+      ),
+      n.status && /* @__PURE__ */ i.jsx("span", {}),
+      n.view && /* @__PURE__ */ i.jsx("span", {}),
+      n.edit && /* @__PURE__ */ i.jsx("span", {}),
+      /* @__PURE__ */ i.jsx("span", { style: { justifySelf: "end" }, children: c ? /* @__PURE__ */ i.jsx(w, { size: 18 }) : /* @__PURE__ */ i.jsx(L, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ i.jsx(P, { $visible: c, children: o ? r.items.map((e) => /* @__PURE__ */ i.jsxs(b, { $grid: l, children: [
+      /* @__PURE__ */ i.jsx(f, { children: e.label }),
+      n.status && /* @__PURE__ */ i.jsx(A, { $variant: D(e.status), children: e.status ? String(e.status) : "—" }),
+      n.view && /* @__PURE__ */ i.jsx("div", { children: e.rightAdornment ? /* @__PURE__ */ i.jsx("div", { style: { gridColumn: "3 / span 2", justifySelf: "start" }, children: e.rightAdornment }) : /* @__PURE__ */ i.jsx(v, { "aria-label": "View", onClick: () => {
+        var d;
+        return (d = e.onView) == null ? void 0 : d.call(e, e.id, e);
+      }, children: /* @__PURE__ */ i.jsx(S, { size: 16 }) }) }),
+      n.edit && /* @__PURE__ */ i.jsx("div", { children: /* @__PURE__ */ i.jsx(v, { "aria-label": "Edit", onClick: () => {
+        var d;
+        return (d = e.onEdit) == null ? void 0 : d.call(e, e.id, e);
+      }, children: /* @__PURE__ */ i.jsx(B, { size: 16 }) }) }),
+      /* @__PURE__ */ i.jsx("span", {})
+    ] }, e.id)) : /* @__PURE__ */ i.jsxs(b, { $grid: l, children: [
+      /* @__PURE__ */ i.jsxs(f, { children: [
+        " ",
+        p ? "Loading..." : t
+      ] }),
+      n.status && /* @__PURE__ */ i.jsx("span", {}),
+      n.view && /* @__PURE__ */ i.jsx("span", {}),
+      n.edit && /* @__PURE__ */ i.jsx("span", {}),
+      /* @__PURE__ */ i.jsx("span", {})
+    ] }) })
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/ConfirmationPopup.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type ConfirmationPopupProps = {
+    variant?: string;
+    item: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    title?: string;
+    show: boolean;
+    showAction?: boolean;
+    showCancel?: boolean;
+    actionLabel?: string;
+    cancelLabel?: string;
+    warningText?: string;
+    confirmText?: string;
+    closeOnOverlayClick?: boolean;
+};
+declare const ConfirmationPopup: React.FC<ConfirmationPopupProps>;
+export default ConfirmationPopup;
+//# sourceMappingURL=ConfirmationPopup.d.ts.map

package/dist/components/ConfirmationPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationPopup.d.ts","sourceRoot":"","sources":["../../src/lib/components/ConfirmationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AA4DvC,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsFvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/ConfirmationPopup.js

@@ -0,0 +1,116 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import { useMemo as c } from "react";
+import { CiWarning as w } from "../node_modules/react-icons/ci/index.js";
+import t, { useTheme as b } from "styled-components";
+import { useQaemaCoreTranslation as E } from "../i18n/i18n.js";
+import u from "./Button.js";
+import N from "./Modal.js";
+const V = t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: ${({ theme: r }) => r.spacing.m};
+`, k = t.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${({ theme: r }) => r.spacing.s};
+`, I = t.p`
+  color: ${({ theme: r }) => r.colors.grey.n600};
+  font-size: ${({ theme: r }) => r.typography.sizes.s4};
+  font-weight: ${({ theme: r }) => r.typography.weights.regular};
+  margin: 0;
+  line-height: ${({ theme: r }) => r.typography.lineHeights.m};
+`, W = t.h3`
+  color: ${({ theme: r }) => r.colors.grey.n700};
+  font-size: ${({ theme: r }) => r.typography.sizes.s6};
+  font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
+  margin: 0;
+  line-height: ${({ theme: r }) => r.typography.lineHeights.l};
+  word-break: break-word;
+`, v = t.p`
+  color: ${({ theme: r }) => r.colors.grey.n500};
+  font-size: ${({ theme: r }) => r.typography.sizes.s3};
+  font-weight: ${({ theme: r }) => r.typography.weights.regular};
+  margin: 0;
+  line-height: ${({ theme: r }) => r.typography.lineHeights.s};
+`, B = t.div`
+  display: flex;
+  gap: ${({ theme: r }) => r.spacing.sm};
+  width: 100%;
+  justify-content: center;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`, P = ({
+  variant: r = "error",
+  item: m,
+  onConfirm: g,
+  onCancel: a,
+  title: x,
+  warningText: l,
+  confirmText: p,
+  showAction: h = !0,
+  showCancel: y = !0,
+  actionLabel: d,
+  cancelLabel: f,
+  closeOnOverlayClick: C = !0,
+  show: j
+}) => {
+  const { t: e } = E(), n = b(), s = c(
+    () => ({
+      neutral: {
+        iconColor: n.colors.grey.n400,
+        btnVariant: "primary"
+      },
+      info: {
+        iconColor: n.colors.primary.purple.n500,
+        btnVariant: "primary"
+      },
+      error: {
+        iconColor: n.colors.state.error.n450,
+        btnVariant: "secondary"
+      },
+      warning: {
+        iconColor: n.colors.secondary.orange.n450,
+        btnVariant: "primary"
+      }
+    }),
+    [n]
+  ), $ = c(
+    () => {
+      var i;
+      return /* @__PURE__ */ o.jsxs(V, { children: [
+        /* @__PURE__ */ o.jsx(k, { children: /* @__PURE__ */ o.jsx(w, { fill: (i = s[r]) == null ? void 0 : i.iconColor, fontSize: "4rem" }) }),
+        l && /* @__PURE__ */ o.jsx(I, { children: l }),
+        /* @__PURE__ */ o.jsx(W, { children: m }),
+        p && /* @__PURE__ */ o.jsx(v, { children: p })
+      ] });
+    },
+    [m, p, l, r, s]
+  ), z = c(
+    () => {
+      var i;
+      return /* @__PURE__ */ o.jsxs(B, { children: [
+        y && /* @__PURE__ */ o.jsx(u, { variant: "outline-primary", size: "sm", onClick: a, children: f ?? e("CANCEL") }),
+        h && /* @__PURE__ */ o.jsx(u, { variant: (i = s[r]) == null ? void 0 : i.btnVariant, size: "sm", onClick: g, children: d ?? e("CONFIRM") })
+      ] });
+    },
+    [e, d, f, h, y, a, g, r, s]
+  );
+  return /* @__PURE__ */ o.jsx(o.Fragment, { children: j && /* @__PURE__ */ o.jsx(
+    N,
+    {
+      title: x ?? e("ACTION_NEEDED"),
+      content: $,
+      actions: z,
+      onClose: a,
+      size: "lg",
+      closeOnOverlayClick: C
+    }
+  ) });
+};
+export {
+  P as default
+};

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    label?: string;
+    optional?: string;
+    disabled?: boolean;
+    error?: string;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/lib/components/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+KD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8NzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker.js

@@ -0,0 +1,271 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as p, useRef as _, useEffect as S } from "react";
+import { dayLabels as q, shortMonthNames as J } from "../constants/calendar.constant.js";
+import { useTranslation as K } from "react-i18next";
+import { FaRegCalendarAlt as Q, FaAngleDown as U, FaAngleLeft as X } from "../node_modules/react-icons/fa/index.js";
+import s, { useTheme as Z } from "styled-components";
+import ee from "./Hint.js";
+import { formatDate as b } from "../node_modules/date-fns/format.js";
+import { parse as re } from "../node_modules/date-fns/parse.js";
+import { isBefore as C } from "../node_modules/date-fns/isBefore.js";
+import { isAfter as O } from "../node_modules/date-fns/isAfter.js";
+import { isValid as te } from "../node_modules/date-fns/isValid.js";
+import { subMonths as oe } from "../node_modules/date-fns/subMonths.js";
+import { addMonths as ne } from "../node_modules/date-fns/addMonths.js";
+import { startOfWeek as se } from "../node_modules/date-fns/startOfWeek.js";
+import { startOfMonth as ie } from "../node_modules/date-fns/startOfMonth.js";
+import { endOfWeek as ae } from "../node_modules/date-fns/endOfWeek.js";
+import { endOfMonth as le } from "../node_modules/date-fns/endOfMonth.js";
+import { addDays as de } from "../node_modules/date-fns/addDays.js";
+import { isSameMonth as ce } from "../node_modules/date-fns/isSameMonth.js";
+import { isSameDay as pe } from "../node_modules/date-fns/isSameDay.js";
+import { getYear as me } from "../node_modules/date-fns/getYear.js";
+import { setYear as fe } from "../node_modules/date-fns/setYear.js";
+import { setMonth as ge } from "../node_modules/date-fns/setMonth.js";
+const ue = s.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.5rem;
+`, he = s.div`
+  position: relative;
+  width: 100%;
+  height: 3.5rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  border: 0.063rem solid ${({ theme: e, $error: i }) => i ? e.colors.state.error.n450 : e.colors.grey.n150};
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+  display: flex;
+  align-items: center;
+  padding: ${({ theme: e }) => `${e.spacing.s} ${e.spacing.sm}`};
+  box-shadow: ${({ theme: e }) => e.boxShadow.s3};
+`, ye = s.input`
+  all: unset;
+  flex: 1;
+  height: 100%;
+  font-size: ${({ theme: e }) => e.typography.sizes.s5};
+  font-family: ${({ theme: e }) => e.dir === "rtl" ? e.fonts.arabic : e.fonts.english};
+  color: ${({ disabled: e, theme: i }) => e ? i.colors.grey.n400 : i.colors.state.success.n750};
+  text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
+
+  &::placeholder {
+    color: ${({ theme: e }) => e.colors.grey.n300};
+  }
+
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+`, xe = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: ${({ theme: e }) => e.spacing.xs};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  font-size: 1rem;
+  flex-shrink: 0;
+`, be = s.div`
+  position: absolute;
+  top: 110%;
+  left: 0;
+  background: white;
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+  padding: ${({ theme: e }) => e.spacing.sm};
+  z-index: 10;
+`, $e = s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+`, R = s(X)`
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  transform: ${({ position: e }) => e == "left" ? "0" : "rotate(180deg)"};
+  &:focus {
+    outline: none;
+  }
+`, we = s.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-weight: bold;
+  color: #666;
+`, je = s.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-top: 0.5rem;
+`, Me = s.div`
+  text-align: center;
+  padding: ${({ theme: e }) => e.spacing.xs};
+  cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
+  opacity: ${(e) => e.disabled ? 0.2 : 1};
+  background-color: ${(e) => e.selected ? e.theme.colors.primary.purple.n450 : "transparent"};
+  color: ${(e) => e.selected ? "white" : "inherit"};
+  border-radius: ${({ theme: e, isToday: i }) => (l) => i && !l.selected ? e.borderRadius.circle : e.borderRadius.md};
+
+  background-color: ${({ theme: e, isToday: i }) => (l) => i && !l.selected && e.colors.primary.purple.n100};
+  &:hover {
+    background-color: ${(e) => !e.disabled && !e.selected ? e.theme.colors.grey.n50 : ""};
+  }
+`, ke = s.div`
+  margin-top: 1rem;
+  text-align: center;
+`, De = s.button`
+  background: ${({ theme: e }) => e.colors.primary.purple.n450};
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  cursor: pointer;
+`, z = s.div`
+  width: 100%;
+  background-color: white;
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+`, ve = s.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.313rem;
+  max-height: 12.5rem;
+  overflow-y: auto;
+  padding: ${({ theme: e }) => e.spacing.sm};
+`, Se = s.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.313rem;
+  padding: ${({ theme: e }) => e.spacing.sm};
+`, Y = s.div`
+  text-align: center;
+  padding: ${({ theme: e }) => e.spacing.sm};
+  cursor: pointer;
+  border-radius: ${({ theme: e }) => e.borderRadius.sm};
+  font-size: 0.875rem;
+  &:hover {
+    background-color: #eee;
+  }
+`, Ce = s.label`
+  display: flex;
+  align-items: flex-end;
+  column-gap: ${({ theme: e }) => e.spacing.xs};
+  color: ${({ theme: e }) => e.colors.grey.n700};
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
+  font-weight: 400;
+  text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
+`, Oe = s.span`
+  color: ${({ theme: e }) => e.colors.grey.n300};
+  font-size: ${({ theme: e }) => e.typography.sizes.s2};
+
+  display: flex;
+  justify-content: ${({ theme: e }) => e.dir === "rtl" ? "flex-end" : "flex-start"};
+  text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
+`, er = ({ value: e, onChange: i, minDate: l, maxDate: m, label: M, optional: k, disabled: F, error: $ }) => {
+  const [I, f] = p(!1), [d, c] = p(e || /* @__PURE__ */ new Date()), [g, u] = p(e || null), [L, h] = p(e ? b(e, "dd/MM/yyyy") : ""), [y, x] = p("calendar"), [A, D] = p(0), w = _(null), j = /* @__PURE__ */ new Date(), E = Z(), { t: W } = K();
+  S(() => {
+    const t = (o) => {
+      w.current && !w.current.contains(o.target) && (f(!1), x("calendar"));
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, []), S(() => {
+    e ? (u(e), c(e), h(b(e, "dd/MM/yyyy"))) : (u(null), h(""));
+  }, [e]);
+  const T = (t) => {
+    let o = t.target.value.replace(/\D/g, "");
+    if (o.length >= 3 && (o = o.slice(0, 2) + "/" + o.slice(2)), o.length >= 6 && (o = o.slice(0, 5) + "/" + o.slice(5, 9)), h(o), o.length === 10) {
+      const a = re(o, "dd/MM/yyyy", /* @__PURE__ */ new Date()), n = l && C(a, l) || m && O(a, m);
+      te(a) && !n && (u(a), c(a), i(a));
+    }
+  }, V = () => {
+    const t = se(ie(d), { weekStartsOn: 1 }), o = ae(le(d), { weekStartsOn: 1 }), a = [];
+    for (let n = t; n <= o; n = de(n, 1)) {
+      const v = l && C(n, l) || m && O(n, m) || !ce(n, d);
+      a.push(
+        /* @__PURE__ */ r.jsx(
+          Me,
+          {
+            isToday: j.getDate() === n.getDate() && j.getMonth() === n.getMonth() && j.getFullYear() === n.getFullYear(),
+            disabled: v,
+            selected: g ? pe(n, g) : !1,
+            onClick: () => {
+              v || (u(n), h(b(n, "dd/MM/yyyy")), i(n), f(!1));
+            },
+            children: n.getDate()
+          },
+          n.toISOString()
+        )
+      );
+    }
+    return /* @__PURE__ */ r.jsx(je, { children: a });
+  }, H = () => {
+    const o = me(/* @__PURE__ */ new Date()) + A * 12, a = [];
+    for (let n = 0; n < 12; n++)
+      a.push(o + n);
+    return a;
+  }, P = (t) => {
+    c(fe(d, t)), x("month");
+  }, B = (t) => {
+    const o = ge(d, t);
+    c(o), x("calendar");
+  }, G = () => /* @__PURE__ */ r.jsxs($e, { children: [
+    /* @__PURE__ */ r.jsx(
+      R,
+      {
+        onClick: (t) => {
+          t.stopPropagation(), y === "calendar" ? c(oe(d)) : D((o) => o - 1);
+        },
+        position: "left"
+      }
+    ),
+    /* @__PURE__ */ r.jsxs("div", { onClick: () => x("year"), children: [
+      b(d, "MMM yyyy"),
+      /* @__PURE__ */ r.jsx(U, { color: E.colors.grey.n300, size: 12 })
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      R,
+      {
+        onClick: (t) => {
+          t.stopPropagation(), y === "calendar" ? c(ne(d, 1)) : D((o) => o + 1);
+        }
+      }
+    )
+  ] }), N = () => y === "calendar" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(we, { children: q.map((t) => /* @__PURE__ */ r.jsx("div", { children: t }, t)) }),
+    V(),
+    /* @__PURE__ */ r.jsx(ke, { children: /* @__PURE__ */ r.jsx(
+      De,
+      {
+        onClick: () => {
+          g && i(g), f(!1);
+        },
+        children: W("SET_DATE")
+      }
+    ) })
+  ] }) : y === "year" ? /* @__PURE__ */ r.jsx(z, { children: /* @__PURE__ */ r.jsx(ve, { children: H().map((t) => /* @__PURE__ */ r.jsx(Y, { onClick: () => P(t), children: t }, t)) }) }) : /* @__PURE__ */ r.jsx(z, { children: /* @__PURE__ */ r.jsx(Se, { children: J.map((t, o) => /* @__PURE__ */ r.jsx(Y, { onClick: () => B(o), children: t }, t)) }) });
+  return /* @__PURE__ */ r.jsxs(ue, { ref: w, children: [
+    M && /* @__PURE__ */ r.jsxs(Ce, { children: [
+      M,
+      " ",
+      k && /* @__PURE__ */ r.jsx(Oe, { children: k })
+    ] }),
+    /* @__PURE__ */ r.jsxs(he, { $error: $, children: [
+      /* @__PURE__ */ r.jsx(xe, { children: /* @__PURE__ */ r.jsx(Q, {}) }),
+      /* @__PURE__ */ r.jsx(
+        ye,
+        {
+          disabled: F,
+          value: L,
+          onChange: T,
+          placeholder: "dd/mm/yyyy",
+          onFocus: () => f(!0)
+        }
+      )
+    ] }),
+    I && /* @__PURE__ */ r.jsxs(be, { children: [
+      G(),
+      N()
+    ] }),
+    $ && /* @__PURE__ */ r.jsx(ee, { variant: "error", showLeadIcon: !1, title: $, showLink: !1 })
+  ] });
+};
+export {
+  er as default
+};

package/dist/components/Divider.d.ts

@@ -0,0 +1,8 @@
+export type DividerProps = {
+    marginVertical?: string;
+};
+declare const Divider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}>, DividerProps>, DividerProps>> & string;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/lib/components/Divider.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,OAAO;;0CAOZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Divider.js

@@ -0,0 +1,12 @@
+import t from "styled-components";
+const e = t.div.attrs((r) => ({
+  marginVertical: r.marginVertical
+}))`
+  width: 100%;
+  height: 0;
+  border: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  margin: ${({ marginVertical: r, theme: i }) => `${r ?? i.spacing.xxs} 0`};
+`;
+export {
+  e as default
+};