skillgrid 0.0.80 → 0.0.82

package/dist/components/Snackbar/assets/close.js

@@ -0,0 +1,39 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+const t = () => /* @__PURE__ */ i(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ e(
+        "mask",
+        {
+          id: "mask0_4314_6181",
+          style: { maskType: "alpha" },
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "20",
+          height: "20",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M15 5L5 15M5 5L15 15",
+              stroke: "black",
+              "stroke-width": "1.7",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e("g", { mask: "url(#mask0_4314_6181)", children: /* @__PURE__ */ e("rect", { width: "20", height: "20", fill: "white", "fill-opacity": "0.48" }) })
+    ]
+  }
+);
+export {
+  t as CloseIcon
+};

package/dist/components/Snackbar/assets/error.js

@@ -0,0 +1,40 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+const t = ({ className: i }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: i,
+    "data-testid": "snackbar-icon-error",
+    children: [
+      /* @__PURE__ */ e(
+        "mask",
+        {
+          id: "mask0_3156_27258",
+          style: { maskType: "alpha" },
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "25",
+          height: "25",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M12.5 1.5C6.42487 1.5 1.5 6.42487 1.5 12.5C1.5 18.5751 6.42487 23.5 12.5 23.5C18.5751 23.5 23.5 18.5751 23.5 12.5C23.5 6.42487 18.5751 1.5 12.5 1.5ZM8.5 11.5C7.94772 11.5 7.5 11.9477 7.5 12.5C7.5 13.0523 7.94772 13.5 8.5 13.5H16.5C17.0523 13.5 17.5 13.0523 17.5 12.5C17.5 11.9477 17.0523 11.5 16.5 11.5H8.5Z",
+              fill: "black"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e("g", { mask: "url(#mask0_3156_27258)", children: /* @__PURE__ */ e("rect", { x: "0.5", y: "0.5", width: "24", height: "24", fill: "#FE725F" }) })
+    ]
+  }
+);
+export {
+  t as ErrorIcon
+};

package/dist/components/Snackbar/assets/info.js

@@ -0,0 +1,43 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+const t = ({ className: l }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: l,
+    "data-testid": "snackbar-icon-info",
+    children: [
+      /* @__PURE__ */ e("g", { "clip-path": "url(#clip0_3031_21000)", children: [
+        /* @__PURE__ */ i(
+          "mask",
+          {
+            id: "mask0_3031_21000",
+            style: { maskType: "alpha" },
+            maskUnits: "userSpaceOnUse",
+            x: "0",
+            y: "0",
+            width: "24",
+            height: "24",
+            children: /* @__PURE__ */ i(
+              "path",
+              {
+                "fill-rule": "evenodd",
+                "clip-rule": "evenodd",
+                d: "M4.80877 14.5947L5.43693 15.1334L5.23343 15.9889C4.28722 19.9668 3.81411 21.9558 4.8928 22.7395C5.97149 23.5232 7.7169 22.4586 11.2077 20.3295L11.9743 19.8619L12.7408 20.3295C16.2316 22.4586 17.977 23.5232 19.0557 22.7395C20.1344 21.9558 19.6613 19.9668 18.7151 15.9889L18.5203 15.1699L19.1908 14.5947C22.2944 11.9327 23.8463 10.6017 23.4342 9.33364C23.0222 8.06557 20.9844 7.9009 16.9088 7.57156L16.0423 7.50154L15.6923 6.66154C14.1197 2.88718 13.3333 1 12 1C10.6667 1 9.88034 2.88717 8.3077 6.66152L7.95775 7.50141L7.09075 7.57147C3.01514 7.90081 0.977339 8.06547 0.565317 9.33355C0.153294 10.6016 1.70512 11.9326 4.80877 14.5947Z",
+                fill: "black"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i("g", { mask: "url(#mask0_3031_21000)", children: /* @__PURE__ */ i("rect", { width: "24", height: "24", fill: "white" }) })
+      ] }),
+      /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "clip0_3031_21000", children: /* @__PURE__ */ i("rect", { width: "24", height: "24", fill: "white" }) }) })
+    ]
+  }
+);
+export {
+  t as InfoIcon
+};

package/dist/components/Snackbar/assets/success.js

@@ -0,0 +1,38 @@
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+const c = ({ className: e }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: e,
+    "data-testid": "snackbar-icon-success",
+    children: /* @__PURE__ */ l("g", { transform: "translate(-2.8, -2.8) scale(1.24)", children: /* @__PURE__ */ s("g", { clipPath: "url(#clip0_343_52329)", children: [
+      /* @__PURE__ */ l(
+        "mask",
+        {
+          id: "mask0_343_52329",
+          style: { maskType: "alpha" },
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "24",
+          height: "24",
+          children: /* @__PURE__ */ l("g", { clipPath: "url(#clip1_343_52329)", children: /* @__PURE__ */ l(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M2.83334 12C2.83334 6.93737 6.9374 2.83331 12 2.83331C17.0626 2.83331 21.1667 6.93737 21.1667 12C21.1667 17.0626 17.0626 21.1666 12 21.1666C6.9374 21.1666 2.83334 17.0626 2.83334 12ZM16.3393 8.91072C16.6647 9.23616 16.6647 9.7638 16.3393 10.0892L11.3393 15.0892C11.0138 15.4147 10.4862 15.4147 10.1608 15.0892L7.66075 12.5892C7.33532 12.2638 7.33532 11.7362 7.66075 11.4107C7.98619 11.0853 8.51383 11.0853 8.83927 11.4107L10.75 13.3215L15.1608 8.91072C15.4862 8.58529 16.0138 8.58529 16.3393 8.91072Z",
+              fill: "black"
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ l("g", { mask: "url(#mask0_343_52329)", children: /* @__PURE__ */ l("rect", { x: "0", y: "0", width: "24", height: "24", fill: "#5BCF83" }) })
+    ] }) })
+  }
+);
+export {
+  c as SuccessIcon
+};

package/dist/components/Snackbar/lib/constants.js

@@ -0,0 +1,22 @@
+const e = {
+  timeout: "exitingTimeout",
+  close: "exitingClose",
+  escape: "exitingEscape",
+  swipe: "swipeTransition"
+}, i = {
+  timeout: 500,
+  close: 100,
+  escape: 100,
+  swipe: 300
+}, t = {
+  timeout: 400,
+  close: 400,
+  escape: 400,
+  swipe: 300
+}, s = 3;
+export {
+  s as MAX_VISIBLE,
+  e as animationMap,
+  i as durationMap,
+  t as stackDurationMap
+};

package/dist/components/Snackbar/lib/snackbarReducer/snackbarReducer.js

@@ -0,0 +1,27 @@
+import { MAX_VISIBLE as r } from "../constants.js";
+const b = (e, u) => {
+  switch (u.type) {
+    case "ENQUEUE":
+      return { ...e, queue: [...e.queue, u.snack] };
+    case "SHOW_NEXT": {
+      if (e.visible.length >= r || e.queue.length === 0) return e;
+      const i = r - e.visible.length, l = e.queue.slice(0, i), n = e.queue.slice(i);
+      return { visible: [...e.visible, ...l], queue: n };
+    }
+    case "START_EXIT":
+      return {
+        ...e,
+        visible: e.visible.map((i) => i.id === u.id ? { ...i, exiting: !0 } : i)
+      };
+    case "REMOVE":
+      return {
+        ...e,
+        visible: e.visible.filter((i) => i.id !== u.id)
+      };
+    default:
+      return e;
+  }
+};
+export {
+  b as snackbarReducer
+};

package/dist/components/Snackbar/lib/useSnackbar.js

@@ -0,0 +1,10 @@
+import { useContext as t, createContext as e } from "react";
+const n = e(void 0), a = () => {
+  const r = t(n);
+  if (!r) throw new Error("useSnackbar must be used inside SnackbarProvider");
+  return r;
+};
+export {
+  n as SnackbarContext,
+  a as useSnackbar
+};

package/dist/components/Snackbar/lib/useSwipe.js

@@ -0,0 +1,44 @@
+import { useEffect as $ } from "react";
+import { durationMap as T } from "./constants.js";
+const q = ({
+  ref: v,
+  open: b,
+  onClose: M,
+  setExiting: d,
+  setExitReason: m,
+  swiping: u,
+  startX: i,
+  startY: l,
+  currentX: h,
+  currentY: f
+}) => {
+  $(() => {
+    const t = v.current;
+    if (!t || !b) return;
+    const x = (e) => {
+      e.target instanceof Element && e.target.closest("button") || (u.current = !0, i.current = e.touches[0].clientX, l.current = e.touches[0].clientY, h.current = i.current, f.current = l.current, t.style.animation = "none", t.style.transition = "none");
+    }, L = (e) => {
+      if (!u.current) return;
+      h.current = e.touches[0].clientX, f.current = e.touches[0].clientY;
+      const n = h.current - i.current, c = f.current - l.current, a = Math.abs(n), s = Math.abs(c), o = a > s ? n : 0, r = s >= a ? c : 0, y = Math.sqrt(n ** 2 + c ** 2), p = Math.max(1 - y / 300, 0);
+      t.style.transform = `translate(${o}px, ${r}px)`, t.style.opacity = `${p}`;
+    }, E = () => {
+      if (!u.current) return;
+      u.current = !1;
+      const e = h.current - i.current, n = f.current - l.current, c = Math.abs(e), a = Math.abs(n), s = t.offsetWidth, o = t.offsetHeight;
+      let r = !1;
+      if (c > 2 / 3 * s && (r = !0), r || (n < 0 && a > o / 2 && (r = !0), n > 0 && a > o && (r = !0)), r) {
+        m("swipe"), d(!0), t.style.transition = "";
+        const y = e > 0 ? s : -s, p = n > 0 ? o : -o;
+        t.style.transform = `translate(${y}px, ${p}px)`, t.style.opacity = "0", setTimeout(() => M("swipe"), T.swipe);
+      } else
+        d(!1), m(void 0), t.style.transition = "", t.style.transform = "translate(0px, 0px)", t.style.opacity = "1";
+    };
+    return t.addEventListener("touchstart", x), t.addEventListener("touchmove", L), t.addEventListener("touchend", E), () => {
+      t.removeEventListener("touchstart", x), t.removeEventListener("touchmove", L), t.removeEventListener("touchend", E);
+    };
+  }, [v, b, M, d, m]);
+};
+export {
+  q as useSwipe
+};

package/dist/components/Switch/Switch.js

@@ -0,0 +1,85 @@
+import { jsxs as O, jsx as s } from "react/jsx-runtime";
+import { Switch as P } from "react-aria-components";
+import { forwardRef as z } from "react";
+import m from "clsx";
+import { COLOR_SCHEME_CLASS_MAP as A } from "./Switch.type.js";
+import e from "./Switch.module.css.js";
+import { Icon as M } from "../Icon/IconWithCategories.js";
+import { LOCK_ICON_SIZE_MAP as j } from "./lib/constants.js";
+const T = z((h, p) => {
+  const {
+    name: b,
+    value: f,
+    size: t = "L",
+    loading: C = !1,
+    error: k,
+    disabled: u = !1,
+    containerClassName: S,
+    className: w,
+    containerStyle: y,
+    style: N,
+    checkedColor: a,
+    uncheckedColor: c,
+    colorScheme: g = "primary",
+    children: o,
+    clickableLabel: r = !0,
+    onChange: L,
+    "data-testid": i = "switch",
+    ...I
+  } = h, l = u || C, n = !!k, _ = m(e.container, S), v = m(
+    e.switch,
+    e[t],
+    {
+      [e.error]: n,
+      [A[g]]: !a
+    },
+    w
+  ), x = {
+    ...N,
+    ...a && {
+      "--switch-background-checked": a,
+      "--switch-background-checked-hover": a
+    },
+    ...c && {
+      "--switch-background-unchecked": c
+    }
+  }, E = (d) => {
+    r || (d.preventDefault(), d.stopPropagation());
+  };
+  return /* @__PURE__ */ O(
+    P,
+    {
+      ...I,
+      ref: p,
+      name: b,
+      isSelected: f,
+      isDisabled: l,
+      onChange: L,
+      "data-testid": i,
+      className: _,
+      style: y,
+      children: [
+        /* @__PURE__ */ s("div", { className: v, style: x, "data-size": t, "aria-invalid": n, children: /* @__PURE__ */ s("span", { "data-testid": `${i}-thumb`, className: e.thumb, children: l && /* @__PURE__ */ s(
+          M.General.LockFilled,
+          {
+            className: e.thumbIcon,
+            style: "custom",
+            iconSize: j[t]
+          }
+        ) }) }),
+        o && /* @__PURE__ */ s(
+          "span",
+          {
+            className: e.label,
+            "data-clickable-label": r,
+            onClick: E,
+            children: o
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  T as Switch
+};

package/dist/components/Switch/Switch.module.css.js

@@ -0,0 +1,30 @@
+import '../../assets/components/Switch/Switch.module-DZlmVeW7.css';const e = "_container_ehuw7_1", _ = "_schemePrimary_ehuw7_53", c = "_schemeGreen_ehuw7_58", h = "_schemeRed_ehuw7_63", s = "_schemeBlue_ehuw7_68", t = "_error_ehuw7_139", n = "_thumb_ehuw7_146", o = "_L_ehuw7_177", u = "_M_ehuw7_186", r = "_S_ehuw7_195", m = "_thumbIcon_ehuw7_206", w = "_label_ehuw7_225", a = {
+  container: e,
+  schemePrimary: _,
+  schemeGreen: c,
+  schemeRed: h,
+  schemeBlue: s,
+  switch: "_switch_ehuw7_84",
+  error: t,
+  thumb: n,
+  L: o,
+  M: u,
+  S: r,
+  thumbIcon: m,
+  label: w
+};
+export {
+  o as L,
+  u as M,
+  r as S,
+  e as container,
+  a as default,
+  t as error,
+  w as label,
+  s as schemeBlue,
+  c as schemeGreen,
+  _ as schemePrimary,
+  h as schemeRed,
+  n as thumb,
+  m as thumbIcon
+};

package/dist/components/Switch/Switch.type.js

@@ -0,0 +1,10 @@
+import e from "./Switch.module.css.js";
+const m = {
+  primary: e.schemePrimary,
+  green: e.schemeGreen,
+  red: e.schemeRed,
+  blue: e.schemeBlue
+};
+export {
+  m as COLOR_SCHEME_CLASS_MAP
+};

package/dist/components/Switch/lib/constants.js

@@ -0,0 +1,8 @@
+const _ = {
+  S: 8,
+  M: 12,
+  L: 16
+};
+export {
+  _ as LOCK_ICON_SIZE_MAP
+};

package/dist/components/Tabs/ScrollWrapper.js

@@ -0,0 +1,98 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { useRef as W, useState as g, useEffect as w } from "react";
+import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
+import { clsx as i } from "clsx";
+import e from "./ScrollWrapper.module.css.js";
+const B = "white", G = ({
+  children: b,
+  withControls: a = !0,
+  className: L,
+  size: c
+}) => {
+  const s = W(null), [d, C] = g(!1), [h, k] = g(!1), { ref: x, bgColor: R } = M(), E = x ?? { current: null }, f = R ?? B, u = a && d, m = a && h, v = ({ direction: t }) => /* @__PURE__ */ r(
+    "svg",
+    {
+      height: "12px",
+      width: "12px",
+      viewBox: "0 0 185.343 185.343",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ r("g", { transform: t === "left" ? "scale(-1,1) translate(-185.343,0)" : void 0, children: /* @__PURE__ */ r(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"
+        }
+      ) })
+    }
+  ), l = () => {
+    const t = s.current;
+    if (!t) return;
+    const o = Math.round(t.scrollLeft), n = Math.round(t.scrollLeft + t.clientWidth), y = Math.round(t.scrollWidth);
+    C(o > 0), k(n < y);
+  }, p = (t) => {
+    const o = s.current;
+    if (!o) return;
+    const n = o.clientWidth;
+    o.scrollBy({ left: t === "left" ? -n : n, behavior: "smooth" });
+  };
+  return w(() => {
+    const t = s.current;
+    if (!t) return;
+    const o = (n) => {
+      Math.abs(n.deltaX) > Math.abs(n.deltaY) || t.scrollWidth > t.clientWidth && (n.preventDefault(), t.scrollBy({ left: n.deltaY, behavior: "auto" }));
+    };
+    return t.addEventListener("wheel", o, { passive: !1 }), () => t.removeEventListener("wheel", o);
+  }, []), w(() => {
+    l();
+    const t = s.current;
+    if (t)
+      return t.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l), () => {
+        t.removeEventListener("scroll", l), window.removeEventListener("resize", l);
+      };
+  }, []), /* @__PURE__ */ N("div", { ref: E, className: i(e.wrapper, L), children: [
+    u && /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(e.mask, e.maskLeft, d && e.visible),
+        style: {
+          background: `linear-gradient(to right, ${f} 17%, transparent 80%)`
+        }
+      }
+    ),
+    m && /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(e.mask, e.maskRight, h && e.visible),
+        style: {
+          background: `linear-gradient(to left, ${f} 17%, transparent 80%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ r("div", { ref: s, className: e.viewport, children: b }),
+    u && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        className: i(e.control, e.left, e[c]),
+        onClick: () => p("left"),
+        children: /* @__PURE__ */ r(v, { direction: "left" })
+      }
+    ),
+    m && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        className: i(e.control, e.right, e[c]),
+        onClick: () => p("right"),
+        children: /* @__PURE__ */ r(v, { direction: "right" })
+      }
+    )
+  ] });
+};
+export {
+  G as ScrollWrapper
+};

package/dist/components/Tabs/ScrollWrapper.module.css.js

@@ -0,0 +1,29 @@
+import '../../assets/components/Tabs/ScrollWrapper.module-D0js5iNm.css';const _ = "_wrapper_1v8xn_5", s = "_viewport_1v8xn_12", t = "_mask_1v8xn_26", n = "_maskLeft_1v8xn_37", o = "_maskRight_1v8xn_42", v = "_visible_1v8xn_46", e = "_control_1v8xn_51", c = "_xs_1v8xn_70", r = "_sm_1v8xn_73", x = "_md_1v8xn_76", i = "_left_1v8xn_80", m = "_right_1v8xn_83", a = {
+  wrapper: _,
+  viewport: s,
+  mask: t,
+  maskLeft: n,
+  maskRight: o,
+  visible: v,
+  control: e,
+  xs: c,
+  sm: r,
+  md: x,
+  left: i,
+  right: m
+};
+export {
+  e as control,
+  a as default,
+  i as left,
+  t as mask,
+  n as maskLeft,
+  o as maskRight,
+  x as md,
+  m as right,
+  r as sm,
+  s as viewport,
+  v as visible,
+  _ as wrapper,
+  c as xs
+};