@janbox/storefront-ui 1.0.14 → 1.0.16

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

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

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

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

@@ -0,0 +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,qDAuC3D,CAAC"}

package/dist/lib/link/link.js

@@ -0,0 +1,59 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isNil } from "lodash-es";
+import { Link as Link$1 } from "react-router";
+import { getLinkProps } from "./helpers.js";
+import { useHoverLineEffect } from "../../hooks/use-hover-line-effect/index.js";
+import { Booleanish } from "../../constants/index.js";
+import "react";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { cn } from "../../utils/stylesheet.js";
+const Link = ({ children, ref, ..._props }) => {
+  const { xs, sm, md, lg, dangerouslySetInnerHTML, to, underline = false, className, ...rest } = getLinkProps(_props);
+  const hoverLineEffectProps = useHoverLineEffect({ enabled: underline });
+  const onClick = (e) => {
+    var _a;
+    if (e.currentTarget.getAttribute("aria-disabled") === Booleanish.True) {
+      e.preventDefault();
+    }
+    if (isNil(to)) {
+      e.preventDefault();
+    }
+    (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
+  };
+  return /* @__PURE__ */ jsx(
+    Link$1,
+    {
+      to: to ?? "#",
+      css: [
+        createStyle(xs),
+        {
+          [mediaQuery("sm")]: createStyle(sm),
+          [mediaQuery("md")]: createStyle(md),
+          [mediaQuery("lg")]: createStyle(lg)
+        },
+        rest["aria-disabled"] && { pointerEvents: "none" }
+      ],
+      dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
+      ...hoverLineEffectProps,
+      className: cn(className, hoverLineEffectProps.className),
+      ...rest,
+      onClick,
+      ref,
+      children: isNil(dangerouslySetInnerHTML) ? children : null
+    }
+  );
+};
+const createStyle = ({ css, textVariant } = {}) => {
+  return [
+    textVariant && {
+      fontSize: getTypographyVar(textVariant).fontSize,
+      lineHeight: getTypographyVar(textVariant).lineHeight
+    },
+    css
+  ];
+};
+export {
+  Link
+};

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

@@ -12,3 +12,4 @@ type LinkExtendedProps = ResponsiveDesign<LinkResponsiveProps> & {
 };
 export type LinkProps = ShallowMerge<ReactRouterLinkProps, LinkExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,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,3 +1,4 @@
 import { JSX } from 'react';
 export type BlockSkeletonProps = JSX.IntrinsicElements['div'];
 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

@@ -0,0 +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,UAAW,kBAAkB,qDAEtD,CAAC"}

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

@@ -0,0 +1,10 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { animatePulseStyle } from "../../../constants/emotion.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
+const BlockSkeleton = (props) => {
+  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
+};
+export {
+  BlockSkeleton
+};

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

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

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

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

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

@@ -1,2 +1,3 @@
 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

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

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

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { animatePulseStyle } from "../../../constants/emotion.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
+const ImageSkeleton = (props) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: [
+        animatePulseStyle,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          borderRadius: "0.25rem",
+          backgroundColor: getColorVar("neutral.200")
+        }
+      ],
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          css: { width: "25%", height: "25%", color: getColorVar("neutral.400") },
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "currentColor",
+          viewBox: "0 0 20 18",
+          children: /* @__PURE__ */ jsx("path", { d: "M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" })
+        }
+      )
+    }
+  );
+};
+export {
+  ImageSkeleton
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}

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

@@ -1,2 +1,3 @@
 import { JSX } from 'react';
 export type ImageSkeletonProps = JSX.IntrinsicElements['div'];
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC"}

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

@@ -2,3 +2,4 @@ export * from './image-skeleton';
 export * from './text-skeleton';
 export * from './loading-overlay';
 export * from './block-skeleton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}

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

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

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

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

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

@@ -1,2 +1,3 @@
 import { LoadingOverlayProps } from './types';
 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

@@ -0,0 +1 @@
+{"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"}

package/dist/lib/loading/loading-overlay/loading-overlay.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { SvgLoader } from "../../../components/svg-loader.js";
+import { animateSpinStyle } from "../../../constants/emotion.js";
+import LoadingIcon from "../../../assets/svg/loading-waiting.svg.js";
+import { getColorShadesByVariant } from "../../../utils/index.js";
+const LoadingOverlay = ({
+  isLoading = false,
+  iconProps,
+  color = "primary",
+  style,
+  size = 32,
+  children,
+  ...props
+}) => {
+  const { main } = getColorShadesByVariant(color);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        minWidth: size,
+        minHeight: size,
+        ...style
+      },
+      css: { position: "relative" },
+      ...props,
+      children: [
+        children,
+        isLoading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...iconProps,
+            css: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 10,
+              display: "grid",
+              placeItems: "center",
+              cursor: "progress"
+            },
+            children: /* @__PURE__ */ jsx(SvgLoader, { source: LoadingIcon, width: size, height: size, css: animateSpinStyle, style: { color: main } })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  LoadingOverlay
+};

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

@@ -6,3 +6,4 @@ export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     color?: ColorVariant;
     iconProps?: JSX.IntrinsicElements['div'];
 }>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;CAC1C,CACF,CAAC"}

package/dist/lib/loading/text-skeleton/index.d.ts

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

package/dist/lib/loading/text-skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAcpD,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { animatePulseStyle } from "../../../constants/emotion.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
+const TextSkeleton = (props) => {
+  return /* @__PURE__ */ jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        css: [
+          animatePulseStyle,
+          { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
+        ],
+        children: " "
+      }
+    ),
+    " "
+  ] });
+};
+export {
+  TextSkeleton
+};

package/dist/lib/loading/text-skeleton/types.d.ts

@@ -1,2 +1,3 @@
 import { JSX } from 'react';
 export type TextSkeletonProps = JSX.IntrinsicElements['p'];
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/text-skeleton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/marquee/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}

package/dist/lib/marquee/marquee/helpers.d.ts

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

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

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

package/dist/lib/marquee/marquee/helpers.js

@@ -1,12 +1,15 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-    autoScrollOptions: {
-        playOnInit: true,
-        stopOnFocusIn: false,
-        stopOnInteraction: false,
-        stopOnMouseEnter: false,
-    },
+  autoScrollOptions: {
+    playOnInit: true,
+    stopOnFocusIn: false,
+    stopOnInteraction: false,
+    stopOnMouseEnter: false
+  }
 };
-export const getMarqueeProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getMarqueeProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getMarqueeProps
 };

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

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

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

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

package/dist/lib/marquee/marquee/marquee.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/marquee.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAiD,MAAM,SAAS,CAAC;AAUtF,eAAO,MAAM,OAAO,uBAAwB,YAAY,qDAwFvD,CAAC"}

package/dist/lib/marquee/marquee/marquee.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect, Fragment } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import AutoScroll from "embla-carousel-auto-scroll";
+import useEmblaCarousel from "embla-carousel-react";
+import { getMarqueeProps } from "./helpers.js";
+import { MarqueeDataAttributes } from "./types.js";
+import { HTMLClasses } from "../../../constants/index.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+import { flattenChildren } from "../../../utils/index.js";
+import { Icon } from "../../icon/icon.js";
+const Marquee = ({ ref, ..._props }) => {
+  const { children, xs, sm, md, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
+  const rootEl = useRef(null);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    {
+      loop: true,
+      align: "start",
+      slides: `.${HTMLClasses.MARQUEE_SLIDE}`
+    },
+    [AutoScroll(autoScrollOptions)]
+  );
+  const mergedRefs = useMergeRefs([emblaRef, ref, rootEl]);
+  useEffect(() => {
+    const mutationObserver = new MutationObserver((records) => {
+      var _a;
+      const target = (_a = records.at(0)) == null ? void 0 : _a.target;
+      if (!target) return;
+      const playState = target.getAttribute(MarqueeDataAttributes.PlayState);
+      const autoScrollPlugin = emblaApi == null ? void 0 : emblaApi.plugins().autoScroll;
+      if (playState === "on") {
+        autoScrollPlugin == null ? void 0 : autoScrollPlugin.play(0);
+      } else {
+        autoScrollPlugin == null ? void 0 : autoScrollPlugin.stop();
+      }
+    });
+    if (rootEl.current) {
+      mutationObserver.observe(rootEl.current, {
+        attributes: true,
+        attributeFilter: [MarqueeDataAttributes.PlayState]
+      });
+    }
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [emblaApi]);
+  useEffect(() => {
+    const onAutoScrollPlay = () => {
+      var _a;
+      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(MarqueeDataAttributes.PlayState, "on");
+    };
+    const onAutoScrollStop = () => {
+      var _a;
+      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(MarqueeDataAttributes.PlayState, "off");
+    };
+    emblaApi == null ? void 0 : emblaApi.on("autoScroll:play", onAutoScrollPlay);
+    emblaApi == null ? void 0 : emblaApi.on("autoScroll:stop", onAutoScrollStop);
+    return () => {
+      emblaApi == null ? void 0 : emblaApi.off("autoScroll:play", onAutoScrollPlay);
+      emblaApi == null ? void 0 : emblaApi.off("autoScroll:stop", onAutoScrollStop);
+    };
+  }, [emblaApi]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: [
+        {
+          overflow: "hidden",
+          maxWidth: "100%"
+        },
+        createStyle(xs),
+        {
+          [mediaQuery("sm")]: createStyle(sm),
+          [mediaQuery("md")]: createStyle(md)
+        }
+      ],
+      ...rest,
+      ref: mergedRefs,
+      children: /* @__PURE__ */ jsx("div", { css: { display: "flex", alignItems: "center", "& > *": { flexShrink: 0, flexGrow: 0, overflow: "hidden" } }, children: flattenChildren(children).map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: HTMLClasses.MARQUEE_SLIDE, children: child }),
+        !!separatorIcon && /* @__PURE__ */ jsx("div", { className: HTMLClasses.MARQUEE_SLIDE, children: /* @__PURE__ */ jsx(Icon, { ...separatorIcon }) })
+      ] }, `marquee-item-${index}`)) })
+    }
+  );
+};
+const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+  return [
+    {
+      width,
+      height,
+      "& > *": css
+    },
+    css
+  ];
+};
+export {
+  Marquee
+};

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

@@ -14,3 +14,4 @@ export type MarqueeProps = ShallowMerge<MarqueeHTMLProps, {
     separatorIcon?: IconProps;
 }> & ResponsiveDesign<MarqueeResponsiveProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,oBAAY,qBAAqB;IAC/B,SAAS,4BAA4B;CACtC;AAED,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,YAAY,CACrC,gBAAgB,EAChB;IACE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CACF,GACC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC"}

package/dist/lib/marquee/marquee/types.js

@@ -1,4 +1,7 @@
-export var MarqueeDataAttributes;
-(function (MarqueeDataAttributes) {
-    MarqueeDataAttributes["PlayState"] = "data-marquee-play-state";
-})(MarqueeDataAttributes || (MarqueeDataAttributes = {}));
+var MarqueeDataAttributes = /* @__PURE__ */ ((MarqueeDataAttributes2) => {
+  MarqueeDataAttributes2["PlayState"] = "data-marquee-play-state";
+  return MarqueeDataAttributes2;
+})(MarqueeDataAttributes || {});
+export {
+  MarqueeDataAttributes
+};

package/dist/lib/marquee/marquee-item/index.d.ts

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

package/dist/lib/marquee/marquee-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/lib/marquee/marquee-item/marquee-item.d.ts

@@ -1,2 +1,3 @@
 import { MarqueeItemProps } from './types';
 export declare const MarqueeItem: ({ ref, ...props }: MarqueeItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=marquee-item.d.ts.map

package/dist/lib/marquee/marquee-item/marquee-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee-item/marquee-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,sBAAuB,gBAAgB,qDAU9D,CAAC"}

package/dist/lib/marquee/marquee-item/marquee-item.js

@@ -0,0 +1,16 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+const MarqueeItem = ({ ref, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      css: {
+        display: "contents"
+      },
+      ref
+    }
+  );
+};
+export {
+  MarqueeItem
+};

package/dist/lib/marquee/marquee-item/types.d.ts

@@ -1,2 +1,3 @@
 import { JSX } from 'react';
 export type MarqueeItemProps = JSX.IntrinsicElements['div'];
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/marquee/marquee-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC"}

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

@@ -2,3 +2,4 @@ export * from './menu';
 export * from './menu-trigger';
 export * from './menu-list';
 export * from './menu-item';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

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

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

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

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

package/dist/lib/menu/menu/menu.d.ts

@@ -1,2 +1,3 @@
 import { MenuProps } from './types';
 export declare const Menu: ({ hoverProps, dismissProps, clickProps, ...props }: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKpC,eAAO,MAAM,IAAI,uDAAwD,SAAS,qDA8BjF,CAAC"}

package/dist/lib/menu/menu/menu.js

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { safePolygon } from "@floating-ui/react";
+import { useControllableState } from "../../../hooks/use-controllable-state.js";
+import { Floating } from "../../floating/floating/floating.js";
+const Menu = ({ hoverProps, dismissProps, clickProps, ...props }) => {
+  const [open, setOpen] = useControllableState({
+    defaultValue: false,
+    value: props.open
+  });
+  const onOpenChange = (open2, event, reason) => {
+    var _a;
+    setOpen(open2);
+    (_a = props.onOpenChange) == null ? void 0 : _a.call(props, open2, event, reason);
+  };
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true,
+        ...dismissProps
+      },
+      clickProps: {
+        enabled: true,
+        ...clickProps
+      },
+      hoverProps: {
+        handleClose: safePolygon(),
+        ...hoverProps
+      },
+      ...props,
+      open,
+      onOpenChange
+    }
+  );
+};
+export {
+  Menu
+};

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

@@ -1,2 +1,3 @@
 import { FloatingProps } from '../../..';
 export type MenuProps = FloatingProps;
+//# sourceMappingURL=types.d.ts.map