@dmsi/wedgekit-react 0.0.916 → 0.0.917

package/dist/components/DateInput.css

@@ -563,6 +563,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -756,10 +759,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10\! {
+    width: calc(var(--spacing) * 10) !important;
+    height: calc(var(--spacing) * 10) !important;
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -1004,6 +1015,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-2\/4 {
     --tw-translate-y: calc(2/4 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1463,6 +1478,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-transparent\! {
+    border-color: transparent !important;
+  }
   .border-warning-400 {
     border-color: var(--color-warning-400);
   }
@@ -2782,6 +2800,25 @@
       }
     }
   }
+  .group-hover\:text-text-link-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-hover);
+      }
+    }
+  }
+  .group-hover\:text-text-link-normal {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-normal);
+      }
+    }
+  }
+  .group-active\:text-text-link-active {
+    &:is(:where(.group):active *) {
+      color: var(--color-text-link-active);
+    }
+  }
   .group-data-\[checked\]\:translate-x-3 {
     &:is(:where(.group)[data-checked] *) {
       --tw-translate-x: calc(var(--spacing) * 3);
@@ -4265,6 +4302,18 @@
       display: none;
     }
   }
+  .desktop\:size-8\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 8) !important;
+      height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .desktop\:size-12\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 12) !important;
+      height: calc(var(--spacing) * 12) !important;
+    }
+  }
   .desktop\:h-\[190px\] {
     @container root (width >= 48rem) {
       height: 190px;

package/dist/components/DateInput.js

@@ -11,13 +11,13 @@ import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
 import "../chunk-Y5GD2FJA.js";
-import "../chunk-3N34VVYD.js";
+import "../chunk-ZACRFGND.js";
 import "../chunk-EJVCDJ7U.js";
 import "../chunk-27DJTEAB.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-XWYDWH4W.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-YV5FS7NV.js";
+import "../chunk-7IPESTQS.js";
 import "../chunk-Z2HPSFEQ.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";

package/dist/components/DateRangeInput.cjs

@@ -833,7 +833,7 @@ Currency.displayName = "Currency";
 Percentage.displayName = "Percentage";
 
 // src/components/CalendarRange.tsx
-var import_clsx44 = __toESM(require("clsx"), 1);
+var import_clsx45 = __toESM(require("clsx"), 1);
 var import_react43 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
 
@@ -5744,6 +5744,7 @@ var import_jsx_runtime65 = require("react/jsx-runtime");
 // src/components/EmblaCarousel/index.tsx
 var import_react42 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
 
 // src/components/EmblaCarousel/SelectedSnapDisplay.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
@@ -5755,13 +5756,14 @@ var import_react40 = require("react");
 var import_clsx43 = __toESM(require("clsx"), 1);
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var arrowButtonStyles = (0, import_clsx43.default)(
-  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out"
+  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out group"
 );
 
 // src/components/EmblaCarousel/usePrevNextButtons.ts
 var import_react41 = require("react");
 
 // src/components/EmblaCarousel/index.tsx
+var import_clsx44 = __toESM(require("clsx"), 1);
 var import_jsx_runtime68 = require("react/jsx-runtime");
 
 // src/components/CalendarRange.tsx
@@ -5805,7 +5807,7 @@ function DateCell(_a) {
     __spreadProps(__spreadValues({}, props), {
       id,
       "data-testid": testid,
-      className: (0, import_clsx44.default)(
+      className: (0, import_clsx45.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
         cellPadding,
@@ -5961,7 +5963,7 @@ function CalendarRange({
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx44.default)(
+      className: (0, import_clsx45.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
         layoutGap,
@@ -5972,7 +5974,7 @@ function CalendarRange({
       children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "div",
         {
-          className: (0, import_clsx44.default)(
+          className: (0, import_clsx45.default)(
             "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
             layoutGap
           ),
@@ -6046,12 +6048,12 @@ function CalendarPane({
     /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "div",
       {
-        className: (0, import_clsx44.default)("flex flex-col"),
+        className: (0, import_clsx45.default)("flex flex-col"),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
             "div",
             {
-              className: (0, import_clsx44.default)(
+              className: (0, import_clsx45.default)(
                 "flex flex-row items-center justify-between",
                 typography.label,
                 "text-text-action-primary-normal"
@@ -6063,7 +6065,7 @@ function CalendarPane({
                     id: id ? `${id}-prev-month-button` : void 0,
                     "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                     type: "button",
-                    className: (0, import_clsx44.default)(
+                    className: (0, import_clsx45.default)(
                       "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                       componentPadding
                     ),
@@ -6071,7 +6073,7 @@ function CalendarPane({
                     onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
                     children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "chevron_left", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: (0, import_clsx44.default)(componentPadding, "mr-1") }),
+                ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: (0, import_clsx45.default)(componentPadding, "mr-1") }),
                 /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "button",
@@ -6150,7 +6152,7 @@ function CalendarPane({
                     id: id ? `${id}-next-month-button` : void 0,
                     "data-testid": testid ? `${testid}-next-month-button` : void 0,
                     type: "button",
-                    className: (0, import_clsx44.default)(
+                    className: (0, import_clsx45.default)(
                       "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                       componentPadding
                     ),
@@ -6158,14 +6160,14 @@ function CalendarPane({
                     onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
                     children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "chevron_right", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: (0, import_clsx44.default)(componentPadding, "ml-1") })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: (0, import_clsx45.default)(componentPadding, "ml-1") })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: (0, import_clsx44.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: (0, import_clsx45.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             "span",
             {
-              className: (0, import_clsx44.default)(
+              className: (0, import_clsx45.default)(
                 typography.caption,
                 "text-text-secondary-normal text-center",
                 "w-10"
@@ -6174,7 +6176,7 @@ function CalendarPane({
             },
             d
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: (0, import_clsx44.default)("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: (0, import_clsx45.default)("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
             const day = i - emptyCells + 1;
             const date = month.date.with({ day: 1 }).add({
               days: i - emptyCells
@@ -6216,7 +6218,7 @@ function CalendarPane({
     mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
-        className: (0, import_clsx44.default)(
+        className: (0, import_clsx45.default)(
           "self-stretch bg-border-primary-normal rounded-base",
           // 1px width, full height, matches Figma divider
           "w-px"

package/dist/components/DateRangeInput.css

@@ -563,6 +563,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -756,10 +759,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10\! {
+    width: calc(var(--spacing) * 10) !important;
+    height: calc(var(--spacing) * 10) !important;
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -1004,6 +1015,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-2\/4 {
     --tw-translate-y: calc(2/4 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1463,6 +1478,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-transparent\! {
+    border-color: transparent !important;
+  }
   .border-warning-400 {
     border-color: var(--color-warning-400);
   }
@@ -2782,6 +2800,25 @@
       }
     }
   }
+  .group-hover\:text-text-link-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-hover);
+      }
+    }
+  }
+  .group-hover\:text-text-link-normal {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-normal);
+      }
+    }
+  }
+  .group-active\:text-text-link-active {
+    &:is(:where(.group):active *) {
+      color: var(--color-text-link-active);
+    }
+  }
   .group-data-\[checked\]\:translate-x-3 {
     &:is(:where(.group)[data-checked] *) {
       --tw-translate-x: calc(var(--spacing) * 3);
@@ -4265,6 +4302,18 @@
       display: none;
     }
   }
+  .desktop\:size-8\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 8) !important;
+      height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .desktop\:size-12\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 12) !important;
+      height: calc(var(--spacing) * 12) !important;
+    }
+  }
   .desktop\:h-\[190px\] {
     @container root (width >= 48rem) {
       height: 190px;

package/dist/components/DateRangeInput.js

@@ -11,13 +11,13 @@ import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
 import "../chunk-Y5GD2FJA.js";
-import "../chunk-3N34VVYD.js";
+import "../chunk-ZACRFGND.js";
 import "../chunk-EJVCDJ7U.js";
 import "../chunk-27DJTEAB.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-XWYDWH4W.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-YV5FS7NV.js";
+import "../chunk-7IPESTQS.js";
 import "../chunk-Z2HPSFEQ.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";

package/dist/components/EmblaCarousel/ArrowButtons.cjs

@@ -66,17 +66,18 @@ module.exports = __toCommonJS(ArrowButtons_exports);
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var arrowButtonStyles = (0, import_clsx.default)(
-  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out"
+  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out group"
 );
 var PrevButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -86,8 +87,9 @@ var PrevButton = (props) => {
           {
             className: (0, import_clsx.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -105,14 +107,15 @@ var PrevButton = (props) => {
   );
 };
 var NextButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -122,8 +125,9 @@ var NextButton = (props) => {
           {
             className: (0, import_clsx.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/EmblaCarousel/ArrowButtons.js

@@ -1,7 +1,7 @@
 import {
   NextButton,
   PrevButton
-} from "../../chunk-YV5FS7NV.js";
+} from "../../chunk-7IPESTQS.js";
 import "../../chunk-ORMEWXMH.js";
 export {
   NextButton,

package/dist/components/EmblaCarousel/index.cjs

@@ -65,6 +65,7 @@ __export(EmblaCarousel_exports, {
 module.exports = __toCommonJS(EmblaCarousel_exports);
 var import_react4 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
 
 // src/components/EmblaCarousel/SelectedSnapDisplay.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -102,17 +103,18 @@ var useSelectedSnapDisplay = (emblaApi) => {
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var arrowButtonStyles = (0, import_clsx.default)(
-  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out"
+  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out group"
 );
 var PrevButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -122,8 +124,9 @@ var PrevButton = (props) => {
           {
             className: (0, import_clsx.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -141,14 +144,15 @@ var PrevButton = (props) => {
   );
 };
 var NextButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -158,8 +162,9 @@ var NextButton = (props) => {
           {
             className: (0, import_clsx.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -223,13 +228,27 @@ var useMatchesMedia = (query) => {
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/EmblaCarousel/index.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TWEEN_FACTOR_BASE = 0.2;
-var EmblaCarousel = ({ options, children }) => {
-  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(options);
-  const tweenFactor = (0, import_react4.useRef)(0);
-  const tweenNodes = (0, import_react4.useRef)([]);
-  const isMobile = useMatchesMobile();
+var EmblaCarousel = ({
+  options,
+  children,
+  testid,
+  leftRightChevrons = false,
+  autoplay = false,
+  chevronThemeColor = false
+}) => {
+  const autoplayPlugin = (0, import_embla_carousel_autoplay.default)({ delay: 4e3 });
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
+    options,
+    autoplay ? [autoplayPlugin] : []
+  );
+  (0, import_react4.useEffect)(() => {
+    var _a, _b;
+    if (!emblaApi || !autoplay) return;
+    (_b = (_a = emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.play();
+  }, [emblaApi, autoplay]);
   const {
     prevBtnDisabled,
     nextBtnDisabled,
@@ -237,21 +256,24 @@ var EmblaCarousel = ({ options, children }) => {
     onNextButtonClick
   } = usePrevNextButtons(emblaApi);
   const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
-  const setTweenNodes = (0, import_react4.useCallback)((emblaApi2) => {
-    tweenNodes.current = emblaApi2.slideNodes().map((slideNode) => {
+  const tweenFactor = (0, import_react4.useRef)(0);
+  const tweenNodes = (0, import_react4.useRef)([]);
+  const isMobile = useMatchesMobile();
+  const setTweenNodes = (0, import_react4.useCallback)((api) => {
+    tweenNodes.current = api.slideNodes().map((slideNode) => {
       return slideNode.querySelector(".embla__parallax__layer");
     });
   }, []);
-  const setTweenFactor = (0, import_react4.useCallback)((emblaApi2) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi2.snapList().length;
+  const setTweenFactor = (0, import_react4.useCallback)((api) => {
+    tweenFactor.current = TWEEN_FACTOR_BASE * api.snapList().length;
   }, []);
   const tweenParallax = (0, import_react4.useCallback)(
-    (emblaApi2, event) => {
-      const engine = emblaApi2.internalEngine();
-      const scrollProgress = emblaApi2.scrollProgress();
-      const slidesInView = emblaApi2.slidesInView();
+    (api, event) => {
+      const engine = api.internalEngine();
+      const scrollProgress = api.scrollProgress();
+      const slidesInView = api.slidesInView();
       const isScrollEvent = (event == null ? void 0 : event.type) === "scroll";
-      emblaApi2.snapList().forEach((scrollSnap, snapIndex) => {
+      api.snapList().forEach((scrollSnap, snapIndex) => {
         let diffToTarget = scrollSnap - scrollProgress;
         const slidesInSnap = engine.scrollSnapList.slidesBySnap[snapIndex];
         slidesInSnap.forEach((slideIndex) => {
@@ -261,12 +283,10 @@ var EmblaCarousel = ({ options, children }) => {
               const target = loopItem.target();
               if (slideIndex === loopItem.index && target !== 0) {
                 const sign = Math.sign(target);
-                if (sign === -1) {
+                if (sign === -1)
                   diffToTarget = scrollSnap - (1 + scrollProgress);
-                }
-                if (sign === 1) {
+                if (sign === 1)
                   diffToTarget = scrollSnap + (1 - scrollProgress);
-                }
               }
             });
           }
@@ -286,13 +306,46 @@ var EmblaCarousel = ({ options, children }) => {
     setTweenFactor(emblaApi);
     tweenParallax(emblaApi);
     emblaApi.on("reinit", setTweenNodes).on("reinit", setTweenFactor).on("reinit", tweenParallax).on("scroll", tweenParallax).on("slidefocus", tweenParallax);
-  }, [emblaApi, tweenParallax, isMobile, setTweenNodes, setTweenFactor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "w-full m-auto grid gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "embla__container flex touch-pan-y touch-pinch-zoom gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap pb-3", children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "justify-between hidden desktop:flex", children: [
+  }, [emblaApi, isMobile, setTweenNodes, setTweenFactor, tweenParallax]);
+  const handlePrev = () => {
+    var _a, _b;
+    onPrevButtonClick();
+    (_b = (_a = emblaApi == null ? void 0 : emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.reset();
+  };
+  const handleNext = () => {
+    var _a, _b;
+    onNextButtonClick();
+    (_b = (_a = emblaApi == null ? void 0 : emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.reset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "w-full m-auto grid gap-4 relative", "data-testid": testid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: (0, import_clsx2.default)(
+          "embla__container flex touch-pan-y touch-pinch-zoom",
+          !leftRightChevrons && "pb-3"
+        ),
+        children
+      }
+    ) }),
+    !leftRightChevrons ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "justify-between hidden desktop:flex", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PrevButton, { onClick: onPrevButtonClick, disabled: prevBtnDisabled }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NextButton, { onClick: onNextButtonClick, disabled: nextBtnDisabled })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          PrevButton,
+          {
+            circleChevron: true,
+            onClick: handlePrev,
+            disabled: prevBtnDisabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          NextButton,
+          {
+            circleChevron: true,
+            onClick: handleNext,
+            disabled: nextBtnDisabled
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SelectedSnapDisplay,
@@ -301,6 +354,33 @@ var EmblaCarousel = ({ options, children }) => {
           snapCount
         }
       )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        PrevButton,
+        {
+          className: "absolute top-1/2 -translate-y-1/2 left-0 border-transparent! size-10! desktop:size-12!",
+          iconClassName: (0, import_clsx2.default)(
+            "size-6! desktop:size-8!",
+            chevronThemeColor && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
+            !chevronThemeColor && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
+          ),
+          onClick: handlePrev,
+          disabled: prevBtnDisabled
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        NextButton,
+        {
+          className: "absolute top-1/2 -translate-y-1/2 right-0 border-transparent! size-10! desktop:size-12!",
+          iconClassName: (0, import_clsx2.default)(
+            "size-6! desktop:size-8!",
+            chevronThemeColor && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
+            !chevronThemeColor && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
+          ),
+          onClick: handleNext,
+          disabled: nextBtnDisabled
+        }
+      )
     ] })
   ] });
 };