@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/input-range/input-range.js

@@ -0,0 +1,176 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, Fragment } from "react";
+import { getInputRangeProps } from "./helpers.js";
+import classes from "./input-range.module.scss.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import LongArrowRightIcon from "../../assets/svg/long-arrow-right.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { InputNumber } from "../input-number/input-number.js";
+import { Icon } from "../icon/icon.js";
+import { cn } from "../../utils/stylesheet.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const InputRange = (_props) => {
+  const {
+    error,
+    helperText,
+    inputs,
+    xs,
+    md,
+    sm,
+    lg,
+    className,
+    onChange,
+    prefix,
+    suffix,
+    startIcon,
+    endIcon,
+    ...props
+  } = getInputRangeProps(_props);
+  const containerRef = useRef(null);
+  const inputRefs = useRef([]);
+  const iconProps = {
+    xs: {
+      size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
+    },
+    sm: {
+      size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+    },
+    md: {
+      size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+    },
+    lg: {
+      size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+    }
+  };
+  const onInputFocus = (e) => {
+    var _a, _b;
+    e.target.select();
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, e);
+  };
+  const onInputChange = (e) => {
+    var _a, _b;
+    const edge = e.currentTarget.dataset.edge;
+    onChange == null ? void 0 : onChange(e, edge);
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, e);
+  };
+  const css = [
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs("div", { css, className: cn(classes.input_range, className), ...props, ref: containerRef, children: [
+      prefix,
+      !!startIcon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...startIcon,
+          css: { flexShrink: 0 },
+          xs: {
+            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...startIcon.xs
+          },
+          sm: {
+            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...startIcon.sm
+          },
+          md: {
+            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...startIcon.md
+          },
+          lg: {
+            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...startIcon.lg
+          }
+        }
+      ),
+      ["from", "to"].map((edge, index, array) => {
+        const inputProps = (inputs == null ? void 0 : inputs.at(index)) ?? {};
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              "data-edge": edge,
+              "data-index": index,
+              css: { textAlign: "center" },
+              mainProps: {
+                style: {
+                  borderWidth: 0,
+                  boxShadow: "none",
+                  paddingLeft: 0,
+                  paddingRight: 0
+                }
+              },
+              mode: "onBlur",
+              ...inputProps,
+              onChange: onInputChange,
+              onFocus: onInputFocus,
+              xs: {
+                size: xs == null ? void 0 : xs.size,
+                ...inputProps.xs
+              },
+              sm: {
+                size: sm == null ? void 0 : sm.size,
+                ...inputProps.sm
+              },
+              md: {
+                size: md == null ? void 0 : md.size,
+                ...inputProps.md
+              },
+              lg: {
+                size: lg == null ? void 0 : lg.size,
+                ...inputProps.lg
+              }
+            },
+            index
+          ),
+          index < array.length - 1 && /* @__PURE__ */ jsx(Icon, { ...iconProps, css: { flexShrink: 0 }, source: LongArrowRightIcon })
+        ] }, index);
+      }),
+      !!endIcon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...endIcon,
+          css: { flexShrink: 0 },
+          xs: {
+            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...endIcon.xs
+          },
+          sm: {
+            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...endIcon.sm
+          },
+          md: {
+            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...endIcon.md
+          },
+          lg: {
+            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...endIcon.lg
+          }
+        }
+      ),
+      suffix
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ size } = {}) => {
+  const { inputPaddingX } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX
+    }
+  ];
+};
+export {
+  InputRange
+};

package/dist/lib/input-range/input-range.module.scss.js

@@ -0,0 +1,8 @@
+const input_range = "_input_range_1yrkm_1";
+const classes = {
+  input_range
+};
+export {
+  classes as default,
+  input_range
+};

package/dist/lib/input-range/types.d.ts

@@ -1,7 +1,7 @@
-import { JSX } from "react";
-import { IconProps } from "../icon";
-import { InputNumberProps } from "../input-number/types";
-import { SizeVariant, ResponsiveDesign, ShallowMerge } from "../../types";
+import { JSX } from 'react';
+import { IconProps } from '../icon';
+import { InputNumberProps } from '../input-number/types';
+import { SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
 export interface InputRangeResponsiveProps {
     size?: SizeVariant;
 }
@@ -18,3 +18,4 @@ interface InputRangeExtendedProps extends ResponsiveDesign<InputRangeResponsiveP
 }
 export type InputRangeProps = ShallowMerge<JSX.IntrinsicElements["div"], InputRangeExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-range/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,CAAC;AAE3C,UAAU,uBAAwB,SAAQ,gBAAgB,CAAC,yBAAyB,CAAC;IACnF,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EACtC,IAAI,EAAE,cAAc,KACjB,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,uBAAuB,CACxB,CAAC"}

package/dist/lib/lightbox/index.d.ts

@@ -1,2 +1,3 @@
 export * from './lightbox';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

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

@@ -1,2 +1,3 @@
 import { LightboxProps } from './types';
 export declare const Lightbox: ({ slides, defaultActiveIndex, ...props }: LightboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lightbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/lightbox.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgQxC,eAAO,MAAM,QAAQ,6CAA8C,aAAa,qDA6B/E,CAAC"}

package/dist/lib/lightbox/lightbox.js

@@ -0,0 +1,284 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { times } from "lodash-es";
+import { motion } from "motion/react";
+import ReactPlayer from "react-player";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import ArrowLeftIcon from "../../assets/svg/arrow-left.svg.js";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
+import ZoomPlusIcon from "../../assets/svg/search-add-plus-middle.svg.js";
+import ZoomMinusIcon from "../../assets/svg/search-minus.svg.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { Swiper } from "../swiper/swiper/swiper.js";
+import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Image } from "../image/image.js";
+import { mediaQuery } from "../../theme/screens.js";
+import { FloatingClose } from "../floating/floating-close/floating-close.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const LightboxIconButton = (props) => {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      color: "neutral",
+      css: {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "white",
+        borderRadius: "50%",
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      ...props
+    }
+  );
+};
+const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
+  const [mainApi, setMainApi] = useState();
+  const zoomPanPinchRef = useRef(null);
+  const contentElementRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
+  const activeSlide = slides.at(activeIndex);
+  const handlePrevious = () => {
+    mainApi == null ? void 0 : mainApi.scrollPrev();
+  };
+  const handleNext = () => {
+    mainApi == null ? void 0 : mainApi.scrollNext();
+  };
+  useEffect(() => {
+    const onSelect = () => {
+      if (!mainApi) return;
+      setActiveIndex(mainApi.selectedScrollSnap());
+    };
+    mainApi == null ? void 0 : mainApi.on("select", onSelect);
+    return () => {
+      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"
+                                }
+                              }
+                            }
+                          ) })
+                        }
+                      ),
+                      (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
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        FloatingContent,
+        {
+          floatingOverlayProps: {
+            disabled: false,
+            lockScroll: true,
+            style: {
+              zIndex: FLOATING_Z_INDEX,
+              backdropFilter: "blur(4px)"
+            },
+            css: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.9)",
+              color: "white"
+            }
+          },
+          css: { width: "100%", height: "100%" },
+          children: /* @__PURE__ */ jsx(LightboxContent, { slides, defaultActiveIndex })
+        }
+      )
+    }
+  );
+};
+export {
+  Lightbox
+};

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

@@ -18,3 +18,4 @@ export type LightboxProps = ShallowMerge<FloatingProps, {
     defaultActiveIndex?: number;
 }>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,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/helpers.d.ts

@@ -1,2 +1,3 @@
 import { LinearProgressProps } from './types';
 export declare const getLinearProgressProps: (extended: LinearProgressProps) => LinearProgressProps;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAW9C,eAAO,MAAM,sBAAsB,aAAc,mBAAmB,wBAEnE,CAAC"}

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

@@ -1,10 +1,13 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 4,
-        color: 'primary',
-    },
+  xs: {
+    size: 4,
+    color: "primary"
+  }
 };
-export const getLinearProgressProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getLinearProgressProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getLinearProgressProps
 };

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

@@ -1 +1,2 @@
 export * from './linear-progress';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/linear-progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

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

@@ -1,2 +1,3 @@
 import { LinearProgressProps } from './types';
 export declare const LinearProgress: (_props: LinearProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=linear-progress.d.ts.map

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

@@ -0,0 +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;AAK7E,eAAO,MAAM,cAAc,WAAY,mBAAmB,qDA8CzD,CAAC"}

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

@@ -0,0 +1,68 @@
+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 { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
+const LinearProgress = (_props) => {
+  const { xs, sm, md, value, variant: _variant, ...props } = getLinearProgressProps(_props);
+  const fallbackVariant = isNil(value) ? "indeterminate" : "determinate";
+  const variant = _variant ?? fallbackVariant;
+  const rootInterpolation = [
+    {
+      position: "relative",
+      width: "100%",
+      overflow: "hidden",
+      [`& > *`]: {
+        position: "absolute",
+        height: "100%"
+      }
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md)
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { css: rootInterpolation, ...props, children: [
+    variant === "indeterminate" && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { left: "-25%", width: "25%" },
+        animate: { left: "100%", width: "50%" },
+        transition: {
+          repeat: Infinity,
+          ease: "linear",
+          duration: 1.5
+        }
+      }
+    ),
+    variant === "determinate" && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: {
+          width: `${value ?? 0}%`
+        },
+        animate: { width: `${value ?? 0}%` }
+      }
+    )
+  ] });
+};
+const createStyle = ({ color, size } = {}) => {
+  const palette = getColorShadesByVariant(color);
+  return [
+    {
+      height: size,
+      borderRadius: isNumber(size) ? size / 2 : void 0,
+      backgroundColor: palette.light,
+      [`& > *`]: {
+        backgroundColor: palette.main,
+        borderRadius: isNumber(size) ? size / 2 : void 0
+      }
+    }
+  ];
+};
+export {
+  LinearProgress
+};

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

@@ -11,3 +11,4 @@ type LinearProgressExtendedProps = ResponsiveDesign<LinearProgressResponsiveProp
 };
 export type LinearProgressProps = ShallowMerge<JSX.IntrinsicElements['div'], LinearProgressExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,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/helpers.d.ts

@@ -1,2 +1,3 @@
 import { LinkProps } from './types';
 export declare const getLinkProps: (extended: LinkProps) => LinkProps;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/link/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/link/helpers.js

@@ -1,5 +1,8 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {};
-export const getLinkProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getLinkProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getLinkProps
 };