@janbox/storefront-ui 1.0.7 → 1.0.8

package/dist/lib/lightbox/lightbox.js

@@ -57,110 +57,195 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
       mainApi == null ? void 0 : mainApi.off("select", onSelect);
     };
   }, [mainApi]);
-  return /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx("div", { css: { position: "relative", width: "100%", flex: 1, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", paddingTop: 24, paddingBottom: 24, paddingLeft: 16, paddingRight: 16, [mediaQuery("md")]: { paddingLeft: 32, paddingRight: 32 } }, children: /* @__PURE__ */ jsxs("div", { css: { position: "relative", width: "100%", height: "100%", paddingTop: 20, paddingBottom: 20, paddingLeft: 0, paddingRight: 0, [mediaQuery("md")]: { paddingLeft: 20, paddingRight: 20 } }, children: [
-    /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-      Swiper,
-      {
-        options: {
-          loop: true,
-          startIndex: defaultActiveIndex,
-          watchDrag: (_, event) => {
-            var _a;
-            return !((_a = contentElementRef.current) == null ? void 0 : _a.contains(event.target));
-          }
-        },
-        onApi: setMainApi,
-        xs: { slidesPerView: 1 },
-        css: { width: "100%", height: "100%" },
-        children: times(slides.length).map((index) => /* @__PURE__ */ jsx(SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            css: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center" },
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            children: /* @__PURE__ */ jsxs("div", { ref: contentElementRef, children: [
-              (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsx(
-                TransformWrapper,
-                {
-                  ref: zoomPanPinchRef,
-                  wheel: {
-                    smoothStep: 0.02
-                  },
-                  children: /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      src: activeSlide == null ? void 0 : activeSlide.source.src,
-                      alt: activeSlide == null ? void 0 : activeSlide.title,
-                      xs: {
-                        css: {
-                          maxWidth: "100%",
-                          maxHeight: "100%",
-                          objectFit: "contain",
-                          userSelect: "none"
+  return /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: {
+        position: "relative",
+        width: "100%",
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: 24,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 16,
+        [mediaQuery("md")]: { paddingLeft: 32, paddingRight: 32 }
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          css: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            paddingTop: 20,
+            paddingBottom: 20,
+            paddingLeft: 0,
+            paddingRight: 0,
+            [mediaQuery("md")]: { paddingLeft: 20, paddingRight: 20 }
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+              Swiper,
+              {
+                options: {
+                  loop: true,
+                  startIndex: defaultActiveIndex,
+                  watchDrag: (_, event) => {
+                    var _a;
+                    return !((_a = contentElementRef.current) == null ? void 0 : _a.contains(event.target));
+                  }
+                },
+                onApi: setMainApi,
+                xs: { slidesPerView: 1 },
+                css: { width: "100%", height: "100%" },
+                children: times(slides.length).map((index) => /* @__PURE__ */ jsx(SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    css: {
+                      display: "flex",
+                      width: "100%",
+                      height: "100%",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    children: /* @__PURE__ */ jsxs("div", { ref: contentElementRef, children: [
+                      (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsx(
+                        TransformWrapper,
+                        {
+                          ref: zoomPanPinchRef,
+                          wheel: {
+                            smoothStep: 0.02
+                          },
+                          children: /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx(
+                            Image,
+                            {
+                              src: activeSlide == null ? void 0 : activeSlide.source.src,
+                              alt: activeSlide == null ? void 0 : activeSlide.title,
+                              xs: {
+                                css: {
+                                  maxWidth: "100%",
+                                  maxHeight: "100%",
+                                  objectFit: "contain",
+                                  userSelect: "none"
+                                }
+                              }
+                            }
+                          ) })
+                        }
+                      ),
+                      (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsx("div", { css: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsx(
+                        ReactPlayer,
+                        {
+                          light: activeSlide.source.thumbnail,
+                          src: activeSlide.source.src,
+                          width: "100%",
+                          height: "100%",
+                          controls: true
                         }
+                      ) })
+                    ] })
+                  }
+                ) }, index))
+              }
+            ) }),
+            slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "none", [mediaQuery("md")]: { display: "contents" } }, children: [
+              /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }) }),
+              /* @__PURE__ */ jsx("div", { css: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } }) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  position: "absolute",
+                  left: -4,
+                  top: 0,
+                  transform: "translateY(-50%)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  [mediaQuery("md")]: { left: -10 }
+                },
+                children: slides.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                  activeIndex + 1,
+                  " / ",
+                  slides.length
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                css: {
+                  position: "absolute",
+                  right: -4,
+                  top: 0,
+                  transform: "translateY(-50%)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  [mediaQuery("md")]: { right: -10 }
+                },
+                children: [
+                  slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "contents", [mediaQuery("md")]: { display: "none" } }, children: [
+                    /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }),
+                    /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } })
+                  ] }),
+                  (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      LightboxIconButton,
+                      {
+                        xs: { size: "sm" },
+                        onClick: () => {
+                          var _a;
+                          return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomOut(0.5);
+                        },
+                        icon: { source: ZoomMinusIcon }
                       }
-                    }
-                  ) })
-                }
-              ),
-              (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsx("div", { css: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsx(
-                ReactPlayer,
-                {
-                  light: activeSlide.source.thumbnail,
-                  src: activeSlide.source.src,
-                  width: "100%",
-                  height: "100%",
-                  controls: true
-                }
-              ) })
-            ] })
-          }
-        ) }, index))
-      }
-    ) }),
-    slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "none", [mediaQuery("md")]: { display: "contents" } }, children: [
-      /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }) }),
-      /* @__PURE__ */ jsx("div", { css: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [mediaQuery("md")]: { left: -10 } }, children: slides.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      activeIndex + 1,
-      " / ",
-      slides.length
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { css: { position: "absolute", right: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [mediaQuery("md")]: { right: -10 } }, children: [
-      slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "contents", [mediaQuery("md")]: { display: "none" } }, children: [
-        /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }),
-        /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } })
-      ] }),
-      (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          LightboxIconButton,
-          {
-            xs: { size: "sm" },
-            onClick: () => {
-              var _a;
-              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomOut(0.5);
-            },
-            icon: { source: ZoomMinusIcon }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LightboxIconButton,
-          {
-            xs: { size: "sm" },
-            onClick: () => {
-              var _a;
-              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomIn(0.5);
-            },
-            icon: { source: ZoomPlusIcon }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(FloatingClose, { children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, icon: { source: CloseIcon } }) })
-    ] }),
-    (activeSlide == null ? void 0 : activeSlide.title) && /* @__PURE__ */ jsx("div", { css: { position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", borderRadius: 8, fontSize: "0.75rem", lineHeight: "1rem", textAlign: "center" }, children: activeSlide.title })
-  ] }) }) });
+                    ),
+                    /* @__PURE__ */ jsx(
+                      LightboxIconButton,
+                      {
+                        xs: { size: "sm" },
+                        onClick: () => {
+                          var _a;
+                          return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomIn(0.5);
+                        },
+                        icon: { source: ZoomPlusIcon }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(FloatingClose, { children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, icon: { source: CloseIcon } }) })
+                ]
+              }
+            ),
+            (activeSlide == null ? void 0 : activeSlide.title) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  position: "absolute",
+                  bottom: 0,
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  borderRadius: 8,
+                  fontSize: "0.75rem",
+                  lineHeight: "1rem",
+                  textAlign: "center"
+                },
+                children: activeSlide.title
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
 };
 const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
   return /* @__PURE__ */ jsx(

package/dist/lib/lightbox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,WAAW,GAAG,WAAW,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,aAAa,EACb;IACE,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,WAAW,GAAG,WAAW,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,aAAa,EACb;IACE,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CACF,CAAC"}

package/dist/lib/linear-progress/linear-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAiC,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,WAAY,mBAAmB,qDAgDzD,CAAC"}
+{"version":3,"file":"linear-progress.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAiC,MAAM,SAAS,CAAC;AAK7E,eAAO,MAAM,cAAc,WAAY,mBAAmB,qDA8CzD,CAAC"}

package/dist/lib/linear-progress/linear-progress.js

@@ -2,12 +2,11 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { isNil, isNumber } from "lodash-es";
 import { motion } from "motion/react";
 import { getLinearProgressProps } from "./helpers.js";
-import { makeClassList, getColorShadesByVariant } from "../../utils/index.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
-import { cn } from "../../utils/stylesheet.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
 const LinearProgress = (_props) => {
-  const { xs, sm, md, value, variant: _variant, className, ...props } = getLinearProgressProps(_props);
+  const { xs, sm, md, value, variant: _variant, ...props } = getLinearProgressProps(_props);
   const fallbackVariant = isNil(value) ? "indeterminate" : "determinate";
   const variant = _variant ?? fallbackVariant;
   const rootInterpolation = [
@@ -15,7 +14,7 @@ const LinearProgress = (_props) => {
       position: "relative",
       width: "100%",
       overflow: "hidden",
-      [`& > .${linearProgressClasses.mask}`]: {
+      [`& > *`]: {
         position: "absolute",
         height: "100%"
       }
@@ -26,11 +25,10 @@ const LinearProgress = (_props) => {
       [mediaQuery("md")]: createStyle(md)
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { css: rootInterpolation, className: cn(linearProgressClasses.root, className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { css: rootInterpolation, ...props, children: [
     variant === "indeterminate" && /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn(linearProgressClasses.mask),
         initial: { left: "-25%", width: "25%" },
         animate: { left: "100%", width: "50%" },
         transition: {
@@ -43,7 +41,6 @@ const LinearProgress = (_props) => {
     variant === "determinate" && /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn(linearProgressClasses.mask),
         initial: {
           width: `${value ?? 0}%`
         },
@@ -52,10 +49,6 @@ const LinearProgress = (_props) => {
     )
   ] });
 };
-const linearProgressClasses = {
-  root: makeClassList("linear-progress"),
-  mask: makeClassList("linear-progress-mask")
-};
 const createStyle = ({ color, size } = {}) => {
   const palette = getColorShadesByVariant(color);
   return [
@@ -63,7 +56,7 @@ const createStyle = ({ color, size } = {}) => {
       height: size,
       borderRadius: isNumber(size) ? size / 2 : void 0,
       backgroundColor: palette.light,
-      [`& > .${linearProgressClasses.mask}`]: {
+      [`& > *`]: {
         backgroundColor: palette.main,
         borderRadius: isNumber(size) ? size / 2 : void 0
       }

package/dist/lib/linear-progress/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,2BAA2B,GAAG,gBAAgB,CAAC,6BAA6B,CAAC,GAAG;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,2BAA2B,GAAG,gBAAgB,CAAC,6BAA6B,CAAC,GAAG;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC"}

package/dist/lib/link/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAQzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDA0C3D,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAQzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAuC3D,CAAC"}

package/dist/lib/link/link.js

@@ -5,7 +5,6 @@ import { getLinkProps } from "./helpers.js";
 import { useHoverLineEffect } from "../../hooks/use-hover-line-effect/index.js";
 import { Booleanish } from "../../constants/index.js";
 import "react";
-import "clsx";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
@@ -38,10 +37,7 @@ const Link = ({ children, ref, ..._props }) => {
       ],
       dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
       ...hoverLineEffectProps,
-      className: cn(
-        className,
-        hoverLineEffectProps.className
-      ),
+      className: cn(className, hoverLineEffectProps.className),
       ...rest,
       onClick,
       ref,

package/dist/lib/link/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,EAAE,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,EAAE,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts

@@ -1,4 +1,4 @@
 import { JSX } from 'react';
 export type BlockSkeletonProps = JSX.IntrinsicElements['div'];
-export declare const BlockSkeleton: ({ className, ref, ...props }: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BlockSkeleton: (props: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=block-skeleton.d.ts.map

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,iCAAkC,kBAAkB,qDAS7E,CAAC"}
+{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAItD,CAAC"}

package/dist/lib/loading/block-skeleton/block-skeleton.js

@@ -1,20 +1,9 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import "react";
-import "clsx";
-import "lodash-es";
-import "../../../theme/palette.js";
-import { cn } from "../../../utils/stylesheet.js";
-import { animatePulse } from "../../../utils/emotion-helpers.js";
-const BlockSkeleton = ({ className, ref, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: [animatePulse, { borderRadius: "0.25rem", backgroundColor: "var(--color-neutral-200)" }],
-      className: cn(className),
-      ...props,
-      ref
-    }
-  );
+import { animatePulseStyle } from "../../../constants/emotion.js";
+import { useTheme } from "@emotion/react";
+const BlockSkeleton = (props) => {
+  const { palette } = useTheme();
+  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: palette.neutral[200] }], ...props });
 };
 export {
   BlockSkeleton

package/dist/lib/loading/image-skeleton/image-skeleton.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
-export declare const ImageSkeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { ImageSkeletonProps } from './types';
+export declare const ImageSkeleton: (props: ImageSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=image-skeleton.d.ts.map

package/dist/lib/loading/image-skeleton/image-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,eAAO,MAAM,aAAa,mKA8BxB,CAAC"}
+{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAI7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA8BtD,CAAC"}

package/dist/lib/loading/image-skeleton/image-skeleton.js

@@ -1,16 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from "react";
-import "clsx";
-import "lodash-es";
-import "../../../theme/palette.js";
-import { cn } from "../../../utils/stylesheet.js";
-import { animatePulse } from "../../../utils/emotion-helpers.js";
-const ImageSkeleton = forwardRef(({ className, ...props }, ref) => {
+import { useTheme } from "@emotion/react";
+import { animatePulseStyle } from "../../../constants/emotion.js";
+const ImageSkeleton = (props) => {
+  const { palette } = useTheme();
   return /* @__PURE__ */ jsx(
     "div",
     {
       css: [
-        animatePulse,
+        animatePulseStyle,
         {
           display: "flex",
           alignItems: "center",
@@ -18,16 +15,14 @@ const ImageSkeleton = forwardRef(({ className, ...props }, ref) => {
           width: "100%",
           height: "100%",
           borderRadius: "0.25rem",
-          backgroundColor: "var(--color-neutral-200)"
+          backgroundColor: palette.neutral[200]
         }
       ],
-      className: cn(className),
       ...props,
-      ref,
       children: /* @__PURE__ */ jsx(
         "svg",
         {
-          css: { width: "25%", height: "25%", color: "var(--color-neutral-400)" },
+          css: { width: "25%", height: "25%", color: palette.neutral[400] },
           "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           fill: "currentColor",
@@ -37,7 +32,7 @@ const ImageSkeleton = forwardRef(({ className, ...props }, ref) => {
       )
     }
   );
-});
+};
 export {
   ImageSkeleton
 };

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts

@@ -1,3 +1,3 @@
 import { LoadingOverlayProps } from './types';
-export declare const LoadingOverlay: import('react').ForwardRefExoticComponent<Omit<LoadingOverlayProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loading-overlay.d.ts.map

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/loading-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,cAAc,6HA6C1B,CAAC"}
+{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAO9C,eAAO,MAAM,cAAc,qEAQxB,mBAAmB,qDAkCrB,CAAC"}