@smwb/ui-react 2.0.1 → 2.1.0

package/dist/components/layout/screenDivider/screenDivider.js

@@ -1,89 +1,80 @@
-import { jsxs as I, jsx as h } from "react/jsx-runtime";
+import { jsxs as B, jsx as w } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';/* empty css                                                                     */
-import { forwardRef as j, useRef as P, useState as y, useEffect as b, Children as X, useMemo as Y, useCallback as O } from "react";
+import { forwardRef as C, useRef as O, useState as y, useEffect as b, Children as P, useMemo as U, useCallback as W } from "react";
 import D from "clsx";
-import { throttle as T } from "../../../utils/throttle.js";
-import { useForkRef as U } from "../../../hooks/useForkRef.js";
-const _ = (o, d) => d * (o / 100), x = (o, d) => !o && d ? 100 - d : o || 50, V = j(function({
+import { throttle as X } from "../../../utils/throttle.js";
+import { useForkRef as Y } from "../../../hooks/useForkRef.js";
+const x = (c, d) => !c && d ? 100 - d : c || 50, Z = C(function({
   className: d,
   orientation: e = "horizontal",
-  sizeFirst: m,
+  sizeFirst: f,
   sizeSecond: v,
-  children: $,
-  onSizeChange: a,
+  children: L,
+  onSizeChange: i,
   keyboardStep: g = 5,
-  resizerAriaLabel: k = "Resize panels"
-}, A) {
-  const p = P(null), M = U(A, p), [i, l] = y(x(m, v)), [E, L] = y(null), [f, R] = y(!1);
+  resizerAriaLabel: $ = "Resize panels"
+}, k) {
+  const p = O(null), A = Y(k, p), [t, n] = y(x(f, v)), [E, R] = y(null), [m, _] = y(!1);
   b(() => {
-    l(x(m, v));
-  }, [m, v]);
-  const w = X.toArray($);
-  if (w.length > 2)
+    n(x(f, v));
+  }, [f, v]);
+  const h = P.toArray(L);
+  if (h.length > 2)
     throw new Error("Allowed not more than 2 children");
-  const K = () => {
-    L(p.current), R(!0);
-  }, c = Y(
-    () => T((r) => {
-      if (!f) return;
-      const n = p.current;
-      if (!(!n || n !== E))
-        if (e === "vertical") {
-          let s = r.clientY - n.offsetTop;
-          s < 0 && (s = 0);
-          const t = s / n.clientHeight * 100;
-          _(t, n.clientWidth) > 5 && t < 101 && l(t - 7);
-        } else {
-          let s = r.clientX - n.offsetLeft;
-          s < 0 && (s = 0);
-          const t = s / n.clientWidth * 100;
-          _(t, n.clientWidth) > 5 && t < 101 && l(t);
-        }
+  const M = () => {
+    R(p.current), _(!0);
+  }, o = U(
+    () => X((r) => {
+      if (!m) return;
+      const a = p.current;
+      if (!a || a !== E) return;
+      const s = a.getBoundingClientRect(), l = e === "vertical" ? s.height : s.width, j = e === "vertical" ? r.clientY - s.top : r.clientX - s.left, H = Math.max(5, Math.min(l - 5, j));
+      n(H / l * 100);
     }, 1e3 / 60),
-    [f, E, e]
-  ), u = O(() => {
-    L(null), R(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
-  }, [c]);
+    [m, E, e]
+  ), u = W(() => {
+    R(null), _(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
+  }, [o]);
   b(() => {
-    a == null || a(i);
-  }, [i, a]);
-  const N = (r) => {
-    const n = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
-    r.key === n ? (r.preventDefault(), l((t) => Math.max(0, t - g))) : r.key === s ? (r.preventDefault(), l((t) => Math.min(100, t + g))) : r.key === "Home" ? (r.preventDefault(), l(0)) : r.key === "End" && (r.preventDefault(), l(100));
-  }, W = e === "vertical" ? { height: `${100 - i}%` } : { width: `${100 - i}%` }, H = e === "vertical" ? { height: `${i}%` } : { width: `${i}%` };
-  return b(() => (f ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", c), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
-    document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
-  }), [c, u, f, e]), /* @__PURE__ */ I(
+    i == null || i(t);
+  }, [t, i]);
+  const K = (r) => {
+    const a = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
+    r.key === a ? (r.preventDefault(), n((l) => Math.max(0, l - g))) : r.key === s ? (r.preventDefault(), n((l) => Math.min(100, l + g))) : r.key === "Home" ? (r.preventDefault(), n(0)) : r.key === "End" && (r.preventDefault(), n(100));
+  }, N = e === "vertical" ? { height: `${100 - t}%` } : { width: `${100 - t}%` }, I = e === "vertical" ? { height: `${t}%` } : { width: `${t}%` };
+  return b(() => (m ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", o), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
+    document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", o);
+  }), [o, u, m, e]), /* @__PURE__ */ B(
     "div",
     {
       className: D("smwb-screen-divider__wrapper", `smwb-${e}`, d),
-      ref: M,
+      ref: A,
       "data-testid": "screen-divider",
       children: [
-        /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: H, children: w[0] || "" }),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: I, children: h[0] || "" }),
+        /* @__PURE__ */ w(
           "span",
           {
             className: "smwb-screen-divider__resizer",
-            onPointerDown: K,
+            onPointerDown: M,
             draggable: !1,
             role: "separator",
             "aria-orientation": e === "vertical" ? "horizontal" : "vertical",
-            "aria-valuenow": Math.round(i),
+            "aria-valuenow": Math.round(t),
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-label": k,
+            "aria-label": $,
             tabIndex: 0,
-            onKeyDown: N
+            onKeyDown: K
           }
         ),
-        /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: W, children: w[1] || "" })
+        /* @__PURE__ */ w("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: N, children: h[1] || "" })
       ]
     }
   );
 });
 export {
-  V as ScreenDivider,
-  V as default
+  Z as ScreenDivider,
+  Z as default
 };
 //# sourceMappingURL=screenDivider.js.map

package/dist/components/layout/screenDivider/screenDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  KeyboardEvent,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n}\n\nconst toPixels = (percent: number, parentSize: number) => {\n  return parentSize * (percent / 100);\n};\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null) => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport const ScreenDivider = forwardRef<HTMLDivElement, PropsWithChildren<ScreenDividerProps>>(function ScreenDivider(\n  {\n    className,\n    orientation = \"horizontal\",\n    sizeFirst,\n    sizeSecond,\n    children,\n    onSizeChange,\n    keyboardStep = 5,\n    resizerAriaLabel = \"Resize panels\",\n  },\n  ref\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const forkedWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n  const [divider, setDivider] = useState<number>(getInitialDivider(sizeFirst, sizeSecond));\n  const [currentElement, setCurrentElement] = useState<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    setDivider(getInitialDivider(sizeFirst, sizeSecond));\n  }, [sizeFirst, sizeSecond]);\n\n  const child = Children.toArray(children);\n  if (child.length > 2) {\n    throw new Error(\"Allowed not more than 2 children\");\n  }\n\n  const handleDragStart = () => {\n    setCurrentElement(wrapperRef.current);\n    setIsDragging(true);\n  };\n\n  const dragOverHandler = useMemo(\n    () =>\n      throttle((e: PointerEvent) => {\n        if (!isDragging) return;\n\n        const wrapper = wrapperRef.current;\n        if (!wrapper || wrapper !== currentElement) return;\n        if (orientation === \"vertical\") {\n          let relativeMouseY = e.clientY - wrapper.offsetTop;\n          if (relativeMouseY < 0) {\n            relativeMouseY = 0;\n          }\n          const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n          if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n            setDivider(newDivider - 7);\n          }\n        } else {\n          let relativeMouseX = e.clientX - wrapper.offsetLeft;\n          if (relativeMouseX < 0) {\n            relativeMouseX = 0;\n          }\n          const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n          if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n            setDivider(newDivider);\n          }\n        }\n      }, 1000 / 60),\n    [isDragging, currentElement, orientation]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setCurrentElement(null);\n    setIsDragging(false);\n    document.body.removeEventListener(\"pointerup\", handleDragEnd);\n    document.body.removeEventListener(\"pointermove\", dragOverHandler);\n  }, [dragOverHandler]);\n\n  useEffect(() => {\n    onSizeChange?.(divider);\n  }, [divider, onSizeChange]);\n\n  const onResizerKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    const decreaseKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const secondChildStyle =\n    orientation === \"vertical\" ? { height: `${100 - divider}%` } : { width: `${100 - divider}%` };\n\n  const firstChildStyle = orientation === \"vertical\" ? { height: `${divider}%` } : { width: `${divider}%` };\n\n  useEffect(() => {\n    if (isDragging) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOverHandler);\n      document.body.style.cursor = orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n\n    return () => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOverHandler);\n    };\n  }, [dragOverHandler, handleDragEnd, isDragging, orientation]);\n\n  return (\n    <div\n      className={cn(\"smwb-screen-divider__wrapper\", `smwb-${orientation}`, className)}\n      ref={forkedWrapperRef}\n      data-testid=\"screen-divider\"\n    >\n      <div className={cn(\"smwb-screen-divider__first\", `smwb-${orientation}`)} style={firstChildStyle}>\n        {child[0] || \"\"}\n      </div>\n      <span\n        className=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={resizerAriaLabel}\n        tabIndex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div className={cn(\"smwb-screen-divider__second\", `smwb-${orientation}`)} style={secondChildStyle}>\n        {child[1] || \"\"}\n      </div>\n    </div>\n  );\n});\n\nexport default ScreenDivider;\n"],"names":["toPixels","percent","parentSize","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","forwardRef","className","orientation","children","onSizeChange","keyboardStep","resizerAriaLabel","ref","wrapperRef","useRef","forkedWrapperRef","useForkRef","divider","setDivider","useState","currentElement","setCurrentElement","isDragging","setIsDragging","useEffect","child","Children","handleDragStart","dragOverHandler","useMemo","throttle","e","wrapper","relativeMouseY","newDivider","relativeMouseX","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  KeyboardEvent,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n}\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null) => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport const ScreenDivider = forwardRef<HTMLDivElement, PropsWithChildren<ScreenDividerProps>>(function ScreenDivider(\n  {\n    className,\n    orientation = \"horizontal\",\n    sizeFirst,\n    sizeSecond,\n    children,\n    onSizeChange,\n    keyboardStep = 5,\n    resizerAriaLabel = \"Resize panels\",\n  },\n  ref\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const forkedWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n  const [divider, setDivider] = useState<number>(getInitialDivider(sizeFirst, sizeSecond));\n  const [currentElement, setCurrentElement] = useState<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    setDivider(getInitialDivider(sizeFirst, sizeSecond));\n  }, [sizeFirst, sizeSecond]);\n\n  const child = Children.toArray(children);\n  if (child.length > 2) {\n    throw new Error(\"Allowed not more than 2 children\");\n  }\n\n  const handleDragStart = () => {\n    setCurrentElement(wrapperRef.current);\n    setIsDragging(true);\n  };\n\n  const dragOverHandler = useMemo(\n    () =>\n      throttle((e: PointerEvent) => {\n        if (!isDragging) return;\n        const wrapper = wrapperRef.current;\n        if (!wrapper || wrapper !== currentElement) return;\n        // Viewport-relative rect — using offsetLeft/offsetTop here is wrong\n        // because they are relative to the nearest positioned ancestor, not\n        // the viewport that clientX/clientY live in (this is what made the\n        // divider drift away from the cursor when the wrapper was nested).\n        const rect = wrapper.getBoundingClientRect();\n        const total = orientation === \"vertical\" ? rect.height : rect.width;\n        const cursor = orientation === \"vertical\" ? e.clientY - rect.top : e.clientX - rect.left;\n        // 5px margin on each side so neither pane fully collapses.\n        const clamped = Math.max(5, Math.min(total - 5, cursor));\n        setDivider((clamped / total) * 100);\n      }, 1000 / 60),\n    [isDragging, currentElement, orientation]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setCurrentElement(null);\n    setIsDragging(false);\n    document.body.removeEventListener(\"pointerup\", handleDragEnd);\n    document.body.removeEventListener(\"pointermove\", dragOverHandler);\n  }, [dragOverHandler]);\n\n  useEffect(() => {\n    onSizeChange?.(divider);\n  }, [divider, onSizeChange]);\n\n  const onResizerKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    const decreaseKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const secondChildStyle =\n    orientation === \"vertical\" ? { height: `${100 - divider}%` } : { width: `${100 - divider}%` };\n\n  const firstChildStyle = orientation === \"vertical\" ? { height: `${divider}%` } : { width: `${divider}%` };\n\n  useEffect(() => {\n    if (isDragging) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOverHandler);\n      document.body.style.cursor = orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n\n    return () => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOverHandler);\n    };\n  }, [dragOverHandler, handleDragEnd, isDragging, orientation]);\n\n  return (\n    <div\n      className={cn(\"smwb-screen-divider__wrapper\", `smwb-${orientation}`, className)}\n      ref={forkedWrapperRef}\n      data-testid=\"screen-divider\"\n    >\n      <div className={cn(\"smwb-screen-divider__first\", `smwb-${orientation}`)} style={firstChildStyle}>\n        {child[0] || \"\"}\n      </div>\n      <span\n        className=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={resizerAriaLabel}\n        tabIndex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div className={cn(\"smwb-screen-divider__second\", `smwb-${orientation}`)} style={secondChildStyle}>\n        {child[1] || \"\"}\n      </div>\n    </div>\n  );\n});\n\nexport default ScreenDivider;\n"],"names":["getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","forwardRef","className","orientation","children","onSizeChange","keyboardStep","resizerAriaLabel","ref","wrapperRef","useRef","forkedWrapperRef","useForkRef","divider","setDivider","useState","currentElement","setCurrentElement","isDragging","setIsDragging","useEffect","child","Children","handleDragStart","dragOverHandler","useMemo","throttle","e","wrapper","rect","total","cursor","clamped","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}

package/dist/headless/components/dataDisplay/carousel/carousel.js

@@ -1,178 +1,296 @@
-import { jsx as n, Fragment as J, jsxs as K } from "react/jsx-runtime";
-import X, { forwardRef as pt, useState as k, useRef as y, useId as xt, useEffect as It } from "react";
-import v from "clsx";
-import { useForkRef as Mt } from "../../../hooks/useForkRef.js";
-import { dragPrevent as Q, getStartSlide as Nt, getSlidesToShow as St, isMouseEvent as U, coordX as V, coordY as Z, getSlideStyle as Et, isTouchEvent as yt, getSlideWidth as At, getSlideIndexForMultipleParts as H } from "./utils.js";
-import { useSafeLayoutEffect as z } from "../../../hooks/useSafeLayoutEffect.js";
-import { useEventCallback as Y } from "../../../hooks/useEventCallback.js";
-import { Icon as C } from "../../base/icon/icon.js";
-const gt = {
+import { jsx as a, Fragment as ie, jsxs as j } from "react/jsx-runtime";
+import O, { forwardRef as Oe, useState as x, useRef as T, useId as ze, useEffect as ue } from "react";
+import m from "clsx";
+import { useForkRef as Be } from "../../../hooks/useForkRef.js";
+import { dragPrevent as de, getStartSlide as He, getSlidesToShow as Ke, isMouseEvent as fe, coordX as z, coordY as me, getSlideStyle as Ge, isTouchEvent as qe, getSlideWidth as Je, clamp as Qe, toCssLength as B, toCssNumber as Ue, getSlideIndexForMultipleParts as he } from "./utils.js";
+import { useSafeLayoutEffect as _e } from "../../../hooks/useSafeLayoutEffect.js";
+import { useEventCallback as H } from "../../../hooks/useEventCallback.js";
+import { Icon as E } from "../../base/icon/icon.js";
+import { Modal as Ze } from "../../feedBack/modal/modal.js";
+const et = {
   isPressed: !1,
   startX: 0,
-  startY: 0
-}, jt = pt(function({
-  slidesToShow: tt = 3,
-  startSlide: et = 0,
-  children: h,
-  className: st,
-  showNavigation: rt = !0,
-  showArrows: ot,
-  arrowsSize: f = 30,
-  navigationClassName: nt,
-  onSlideChange: i,
-  navigationDotRenderer: R,
-  "aria-label": it = "Carousel",
-  autoplay: D = !1,
-  autoplayInterval: W = 4e3,
-  pauseOnHover: b = !0
-}, ct) {
-  const r = X.Children.count(h), s = St(tt, r), p = Nt(et, r), $ = ot && r > 1, [c, A] = k(p), [j, x] = k({
+  startY: 0,
+  lastX: 0,
+  lastT: 0,
+  axis: null,
+  dragged: !1
+}, we = 8, tt = 0.4, mt = Oe(function({
+  slidesToShow: ve = 3,
+  startSlide: ge = 0,
+  children: w,
+  className: be,
+  showNavigation: xe = !0,
+  showArrows: pe,
+  arrowsSize: v = 30,
+  navigationClassName: Se,
+  onSlideChange: g,
+  navigationDotRenderer: K,
+  "aria-label": Ie = "Carousel",
+  autoplay: G = !1,
+  autoplayInterval: q = 4e3,
+  pauseOnHover: M = !0,
+  cellHeight: ye,
+  aspectRatio: Ne,
+  gap: Te,
+  maxWidth: Ee,
+  enableFullscreen: k = !1
+}, Me) {
+  const s = O.Children.count(w), n = Ke(ve, s), L = He(ge, s), J = pe && s > 1, X = Math.max(0, s - n), [l, Q] = x(L), [Y, $] = x({
     animation: void 0
-  }), g = y(null), at = y(null), lt = Mt(ct, at), a = y(null), [F, B] = k(!1), P = y(gt);
-  z(() => {
-    x((t) => ({
-      ...t,
+  }), [ke, U] = x(0), [Le, Z] = x(!1), [h, A] = x(null), P = T(null), Xe = T(null), Ae = Be(Me, Xe), f = T(null), [ee, te] = x(!1), i = T({ ...et });
+  _e(() => {
+    $((e) => ({
+      ...e,
       animation: !1
     }));
-  }, [s]), z(() => {
-    A(p), i == null || i(p), j.animation !== void 0 && x((t) => ({
-      ...t,
+  }, [n]), _e(() => {
+    Q(L), g == null || g(L), Y.animation !== void 0 && $((e) => ({
+      ...e,
       animation: !0
     }));
-  }, [p]);
-  const L = (t) => {
-    Object.assign(P.current, t);
-  }, G = Y((t) => {
-    if (r <= 1 || !a.current)
+  }, [L]);
+  const F = (e) => {
+    Object.assign(i.current, e);
+  }, V = () => typeof performance != "undefined" ? performance.now() : Date.now(), se = (e) => {
+    const t = Qe(e, 0, X);
+    Q(t), $((r) => ({ ...r, animation: !0 })), g == null || g(t);
+  }, p = (e) => {
+    A((t) => t === null ? t : (t + e + s) % s);
+  }, S = T(null), Pe = (e) => {
+    f.current && (f.current.removeEventListener(e ? "mousemove" : "touchmove", ne), f.current.removeEventListener(e ? "mouseup" : "touchend", b), e && f.current.removeEventListener("mouseleave", b));
+  }, re = H((e) => {
+    if (!f.current)
       return;
-    const e = U(t);
-    if (e && t.button !== 0)
+    const t = fe(e);
+    if (t && e.button !== 0)
       return;
-    t.stopPropagation();
-    const l = V(t), u = Z(t);
-    L({
+    e.stopPropagation();
+    const r = z(e), o = me(e);
+    F({
       isPressed: !0,
-      startX: l,
-      startY: u
-    }), a.current.addEventListener(e ? "mousemove" : "touchmove", O), a.current.addEventListener(e ? "mouseup" : "touchend", _), e && a.current.addEventListener("mouseleave", _);
-  }), O = Y((t) => {
-    if (!g.current)
+      startX: r,
+      startY: o,
+      lastX: r,
+      lastT: V(),
+      axis: null,
+      dragged: !1
+    }), f.current.addEventListener(t ? "mousemove" : "touchmove", ne, { passive: !1 }), f.current.addEventListener(t ? "mouseup" : "touchend", b), t && f.current.addEventListener("mouseleave", b);
+  }), ne = H((e) => {
+    if (!P.current || !i.current.isPressed)
       return;
-    const { isPressed: e, startX: l, startY: u } = P.current;
-    if (!e)
-      return;
-    if (t.preventDefault(), t.stopPropagation(), yt(t) && t.touches.length > 1)
-      return _(t);
-    const o = V(t), m = Z(t), d = o - l, M = m - u, w = Math.abs(d), N = Math.abs(M);
-    if (w < N)
-      return;
-    const S = g.current.offsetWidth / s, ht = s === 1 ? 1.95 : 1.4;
-    if (w % S > S / ht) {
-      const _t = d < 0 ? 1 : -1, wt = r - s, E = c + _t;
-      if (E < 0 || E > wt)
+    if (qe(e) && e.touches.length > 1)
+      return b(e);
+    const t = z(e), r = me(e), o = t - i.current.startX, c = r - i.current.startY;
+    if (i.current.axis === null) {
+      if (Math.abs(o) < we && Math.abs(c) < we)
         return;
-      A(E), x((bt) => ({ ...bt, animation: !0 })), L({ startX: o, startY: m }), i == null || i(E);
+      const u = Math.abs(o) >= Math.abs(c) ? "x" : "y";
+      if (F({ axis: u, dragged: !0 }), u === "y")
+        return b(e);
+      s > 1 && Z(!0);
     }
-  }), _ = Y((t) => {
-    if (!a.current || !P.current.isPressed)
+    if (i.current.axis === "x") {
+      if (e.preventDefault(), e.stopPropagation(), s > 1) {
+        const u = l <= 0, d = l >= X, _ = u && o > 0 || d && o < 0 ? o * 0.35 : o;
+        U(_);
+      }
+      i.current.lastX = t, i.current.lastT = V();
+    }
+  }), b = H((e) => {
+    if (!i.current.isPressed)
       return;
-    L({ isPressed: !1 });
-    const e = U(t);
-    a.current.removeEventListener(e ? "mousemove" : "touchmove", O), a.current.removeEventListener(e ? "mouseup" : "touchend", _), e && a.current.removeEventListener("mouseleave", _);
-  }), I = (t) => () => {
-    A(t), x((e) => ({ ...e, animation: !0 })), i == null || i(t);
-  }, T = (t) => {
-    const e = s === 1, l = e ? r : Math.ceil(r / s), u = c + s, o = r - s <= c, d = (H(u, s, r, o) + t + l) % l;
-    return e ? d : d * s;
-  }, ut = () => {
-    if (!rt)
-      return /* @__PURE__ */ n(J, {});
-    const t = r - s <= c, e = s === 1, l = e ? r : Math.ceil(r / s), u = [];
-    for (let o = 0; o < l; o++) {
-      let m = o, d = c;
-      if (!e) {
-        const q = o === l - 1, S = c + s;
-        m = q ? r - s : o * s, d = H(S, s, r, t);
+    const t = fe(e);
+    Pe(t);
+    const { axis: r, dragged: o, startX: c, lastX: u, lastT: d } = i.current;
+    if (F({ isPressed: !1 }), Z(!1), r === "x" && o && s > 1 && P.current) {
+      const _ = z(e), D = _ - c, y = P.current.offsetWidth / n, R = d ? (_ - u) / Math.max(1, V() - d) : 0;
+      let N = y > 0 ? Math.round(-D / y) : 0;
+      N === 0 && Math.abs(R) > tt && (N = R < 0 ? 1 : -1), se(l + N);
+    }
+    U(0);
+  }), Ce = (e) => () => {
+    i.current.dragged || k && A(e);
+  }, C = (e) => () => se(e), W = (e) => {
+    const t = n === 1, r = t ? s : Math.ceil(s / n), o = l + n, c = s - n <= l, d = (he(o, n, s, c) + e + r) % r;
+    return t ? d : d * n;
+  }, De = () => {
+    if (!xe)
+      return /* @__PURE__ */ a(ie, {});
+    const e = s - n <= l, t = n === 1, r = t ? s : Math.ceil(s / n), o = [];
+    for (let c = 0; c < r; c++) {
+      let u = c, d = l;
+      if (!t) {
+        const R = c === r - 1, N = l + n;
+        u = R ? s - n : c * n, d = he(N, n, s, e);
       }
-      const M = d === o, w = I(m);
-      let N = /* @__PURE__ */ n("div", { className: v("smwb-carousel__navigation__dot", M && "current"), onClick: w }, o);
-      R && (N = R(o, M, w)), u.push(N);
+      const _ = d === c, D = C(u);
+      let y = /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation__dot", _ && "current"), onClick: D }, c);
+      K && (y = K(c, _, D)), o.push(y);
     }
-    return /* @__PURE__ */ n("div", { className: v("smwb-carousel__navigation", nt), children: u });
-  }, dt = () => {
-    const t = r - s, e = c > t ? t : c;
-    return At(s) * e;
-  }, ft = xt(), mt = Et(s), vt = {
-    transform: `translateX(-${dt()}%)`,
-    transition: j.animation ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none"
-  };
-  return X.useEffect(() => {
-    Array.isArray(h) || console.error("SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.");
-  }, [h]), It(() => {
-    if (!D || r <= 1 || b && F)
+    return /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation", Se), children: o });
+  }, Re = () => {
+    const e = l > X ? X : l;
+    return Je(n) * e;
+  }, Ye = ze(), $e = Ge(n), Fe = {
+    transform: `translateX(calc(-${Re()}% + ${ke}px))`,
+    transition: Le || Y.animation === void 0 ? "none" : Y.animation ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none"
+  }, I = {}, oe = B(ye), ce = Ue(Ne), ae = B(Te), le = B(Ee);
+  if (oe && (I["--smwb-carousel-cell-height"] = oe), ce && (I["--smwb-carousel-aspect-ratio"] = ce), ae && (I["--smwb-carousel-gap"] = ae), le && (I["--smwb-carousel-max-width"] = le), O.useEffect(() => {
+    Array.isArray(w) || console.error("SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.");
+  }, [w]), ue(() => {
+    if (!G || s <= 1 || M && ee || h !== null)
+      return;
+    const e = window.setInterval(() => {
+      C(W(1))();
+    }, q);
+    return () => window.clearInterval(e);
+  }, [
+    G,
+    q,
+    M,
+    ee,
+    s,
+    l,
+    n,
+    h
+  ]), ue(() => {
+    if (h === null || s <= 1)
       return;
-    const t = window.setInterval(() => {
-      I(T(1))();
-    }, W);
-    return () => window.clearInterval(t);
-  }, [D, W, b, F, r, c, s]), Array.isArray(h) ? /* @__PURE__ */ K(
+    const e = (t) => {
+      t.key === "ArrowLeft" ? p(-1) : t.key === "ArrowRight" && p(1);
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [h, s]), !Array.isArray(w))
+    return /* @__PURE__ */ a(ie, {});
+  const Ve = w, We = (e) => {
+    var t, r;
+    S.current = (r = (t = e.touches[0]) == null ? void 0 : t.clientX) != null ? r : null;
+  }, je = (e) => {
+    var r, o;
+    if (S.current === null || s <= 1)
+      return;
+    const t = ((o = (r = e.changedTouches[0]) == null ? void 0 : r.clientX) != null ? o : S.current) - S.current;
+    S.current = null, Math.abs(t) > 40 && p(t < 0 ? 1 : -1);
+  };
+  return /* @__PURE__ */ j(
     "div",
     {
-      className: v("smwb-carousel", st),
+      className: m("smwb-carousel", be),
       "data-testid": "carousel",
-      ref: lt,
+      ref: Ae,
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": it,
-      onMouseEnter: b ? () => B(!0) : void 0,
-      onMouseLeave: b ? () => B(!1) : void 0,
+      "aria-label": Ie,
+      style: I,
+      onMouseEnter: M ? () => te(!0) : void 0,
+      onMouseLeave: M ? () => te(!1) : void 0,
       children: [
-        /* @__PURE__ */ K("div", { className: v("smwb-carousel__inner"), ref: g, children: [
-          $ && /* @__PURE__ */ n(
-            C,
+        /* @__PURE__ */ j("div", { className: m("smwb-carousel__inner"), ref: P, children: [
+          J && /* @__PURE__ */ a(
+            E,
             {
               name: "chevron_left",
-              size: f,
-              className: v("smwb-carousel__arrow", "smwb-carousel__arrow_prev"),
+              size: v,
+              className: m("smwb-carousel__arrow", "smwb-carousel__arrow_prev"),
               style: {
-                top: `calc(50% - ${f / 2}px)`,
-                left: -f / 2
+                top: `calc(50% - ${v / 2}px)`,
+                left: -v / 2
               },
-              onClick: () => I(T(-1))()
+              onClick: () => C(W(-1))()
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             "div",
             {
-              ref: a,
+              ref: f,
               className: "smwb-carousel__track",
-              onMouseDown: G,
-              onTouchStart: G,
-              onDragStart: Q,
-              onDragEnd: Q,
-              children: /* @__PURE__ */ n("div", { className: "smwb-carousel__layer", style: vt, children: X.Children.map(h, (t, e) => /* @__PURE__ */ n("div", { id: `${ft}${e}`, className: "smwb-carousel__slide", style: mt, children: /* @__PURE__ */ n("div", { className: "smwb-carousel__slide-inner", children: t }) }, e)) })
+              onMouseDown: re,
+              onTouchStart: re,
+              onDragStart: de,
+              onDragEnd: de,
+              children: /* @__PURE__ */ a("div", { className: "smwb-carousel__layer", style: Fe, children: O.Children.map(w, (e, t) => /* @__PURE__ */ a("div", { id: `${Ye}${t}`, className: "smwb-carousel__slide", style: $e, children: /* @__PURE__ */ a(
+                "div",
+                {
+                  className: m(
+                    "smwb-carousel__slide-inner",
+                    k && "smwb-carousel__slide-inner_clickable"
+                  ),
+                  onClick: k ? Ce(t) : void 0,
+                  children: e
+                }
+              ) }, t)) })
             }
           ),
-          $ && /* @__PURE__ */ n(
-            C,
+          J && /* @__PURE__ */ a(
+            E,
             {
               name: "chevron_right",
-              size: f,
-              className: v("smwb-carousel__arrow", "smwb-carousel__arrow_next"),
+              size: v,
+              className: m("smwb-carousel__arrow", "smwb-carousel__arrow_next"),
               style: {
-                top: `calc(50% - ${f / 2}px)`,
-                right: -f / 2
+                top: `calc(50% - ${v / 2}px)`,
+                right: -v / 2
               },
-              onClick: () => I(T(1))()
+              onClick: () => C(W(1))()
             }
           )
         ] }),
-        ut()
+        De(),
+        k && /* @__PURE__ */ a(
+          Ze,
+          {
+            open: h !== null,
+            size: "fullscreen",
+            backdrop: "darkBlured",
+            className: "smwb-carousel__fullscreen",
+            onClose: () => A(null),
+            "aria-label": "Image viewer",
+            children: h !== null && /* @__PURE__ */ j("div", { className: "smwb-carousel__fullscreen-content", children: [
+              s > 1 && /* @__PURE__ */ a(
+                E,
+                {
+                  name: "chevron_left",
+                  size: 40,
+                  className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev"),
+                  onClick: () => p(-1)
+                }
+              ),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: "smwb-carousel__fullscreen-stage",
+                  onTouchStart: We,
+                  onTouchEnd: je,
+                  children: Ve[h]
+                }
+              ),
+              s > 1 && /* @__PURE__ */ a(
+                E,
+                {
+                  name: "chevron_right",
+                  size: 40,
+                  className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next"),
+                  onClick: () => p(1)
+                }
+              ),
+              /* @__PURE__ */ a(
+                E,
+                {
+                  name: "close",
+                  size: 32,
+                  className: "smwb-carousel__fullscreen-close",
+                  onClick: () => A(null)
+                }
+              )
+            ] })
+          }
+        )
       ]
     }
-  ) : /* @__PURE__ */ n(J, {});
+  );
 });
 export {
-  jt as Carousel
+  mt as Carousel
 };
 //# sourceMappingURL=carousel.js.map