@dmsi/wedgekit-react 0.0.863 → 0.0.865

package/dist/components/EmblaCarousel/SelectedSnapDisplay.cjs

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/EmblaCarousel/SelectedSnapDisplay.tsx
+var SelectedSnapDisplay_exports = {};
+__export(SelectedSnapDisplay_exports, {
+  SelectedSnapDisplay: () => SelectedSnapDisplay
+});
+module.exports = __toCommonJS(SelectedSnapDisplay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var SelectedSnapDisplay = (props) => {
+  const { selectedSnap, snapCount } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "embla__selected-snap-display", children: [
+    selectedSnap + 1,
+    " / ",
+    snapCount
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectedSnapDisplay
+});

package/dist/components/EmblaCarousel/SelectedSnapDisplay.js

@@ -0,0 +1,7 @@
+import {
+  SelectedSnapDisplay
+} from "../../chunk-Z2HPSFEQ.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  SelectedSnapDisplay
+};

package/dist/components/EmblaCarousel/index.cjs

@@ -1,10 +1,39 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,11 +63,246 @@ __export(EmblaCarousel_exports, {
   default: () => EmblaCarousel_default
 });
 module.exports = __toCommonJS(EmblaCarousel_exports);
+var import_react4 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
+
+// src/components/EmblaCarousel/SelectedSnapDisplay.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var SelectedSnapDisplay = (props) => {
+  const { selectedSnap, snapCount } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "embla__selected-snap-display", children: [
+    selectedSnap + 1,
+    " / ",
+    snapCount
+  ] });
+};
+
+// src/components/EmblaCarousel/useSelectedSnapDisplay.ts
+var import_react = require("react");
+var useSelectedSnapDisplay = (emblaApi) => {
+  const [selectedSnap, setSelectedSnap] = (0, import_react.useState)(0);
+  const [snapCount, setSnapCount] = (0, import_react.useState)(0);
+  const updateScrollSnapState = (0, import_react.useCallback)((emblaApi2) => {
+    setSnapCount(emblaApi2.slideNodes().length);
+    setSelectedSnap(emblaApi2.selectedSnap());
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!emblaApi) return;
+    updateScrollSnapState(emblaApi);
+    emblaApi.on("select", updateScrollSnapState);
+    emblaApi.on("reinit", updateScrollSnapState);
+  }, [emblaApi, updateScrollSnapState]);
+  return {
+    selectedSnap,
+    snapCount
+  };
+};
+
+// src/components/EmblaCarousel/ArrowButtons.tsx
+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"
+);
+var PrevButton = (props) => {
+  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  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"
+      ),
+      type: "button"
+    }, restProps), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            className: (0, import_clsx.default)(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !disabled && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled"
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    })
+  );
+};
+var NextButton = (props) => {
+  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  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"
+      ),
+      type: "button"
+    }, restProps), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            className: (0, import_clsx.default)(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !disabled && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled"
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    })
+  );
+};
+
+// src/components/EmblaCarousel/usePrevNextButtons.ts
+var import_react2 = require("react");
+var usePrevNextButtons = (emblaApi) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = (0, import_react2.useState)(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = (0, import_react2.useState)(true);
+  const onPrevButtonClick = (0, import_react2.useCallback)(() => {
+    if (!emblaApi) return;
+    emblaApi.goToPrev();
+  }, [emblaApi]);
+  const onNextButtonClick = (0, import_react2.useCallback)(() => {
+    if (!emblaApi) return;
+    emblaApi.goToNext();
+  }, [emblaApi]);
+  const onSelect = (0, import_react2.useCallback)((emblaApi2) => {
+    setPrevBtnDisabled(!emblaApi2.canGoToPrev());
+    setNextBtnDisabled(!emblaApi2.canGoToNext());
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!emblaApi) return;
+    onSelect(emblaApi);
+    emblaApi.on("reinit", onSelect).on("select", onSelect);
+  }, [emblaApi, onSelect]);
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  };
+};
+
+// src/hooks/useMatchesMedia.ts
+var import_react3 = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react3.useState)();
+  (0, import_react3.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+// src/components/EmblaCarousel/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TWEEN_FACTOR_BASE = 0.2;
 var EmblaCarousel = ({ options, children }) => {
-  const [emblaRef] = (0, import_embla_carousel_react.default)(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "w-full m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ (0, import_jsx_runtime.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", 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();
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi);
+  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
+  const setTweenNodes = (0, import_react4.useCallback)((emblaApi2) => {
+    tweenNodes.current = emblaApi2.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 tweenParallax = (0, import_react4.useCallback)(
+    (emblaApi2, event) => {
+      const engine = emblaApi2.internalEngine();
+      const scrollProgress = emblaApi2.scrollProgress();
+      const slidesInView = emblaApi2.slidesInView();
+      const isScrollEvent = (event == null ? void 0 : event.type) === "scroll";
+      emblaApi2.snapList().forEach((scrollSnap, snapIndex) => {
+        let diffToTarget = scrollSnap - scrollProgress;
+        const slidesInSnap = engine.scrollSnapList.slidesBySnap[snapIndex];
+        slidesInSnap.forEach((slideIndex) => {
+          if (isScrollEvent && !slidesInView.includes(slideIndex)) return;
+          if (engine.options.loop) {
+            engine.slideLooper.loopPoints.forEach((loopItem) => {
+              const target = loopItem.target();
+              if (slideIndex === loopItem.index && target !== 0) {
+                const sign = Math.sign(target);
+                if (sign === -1) {
+                  diffToTarget = scrollSnap - (1 + scrollProgress);
+                }
+                if (sign === 1) {
+                  diffToTarget = scrollSnap + (1 - scrollProgress);
+                }
+              }
+            });
+          }
+          const translate = diffToTarget * (-1 * tweenFactor.current) * 100;
+          const tweenNode = tweenNodes.current[slideIndex];
+          if (tweenNode) {
+            tweenNode.style.transform = `translateX(${translate}%)`;
+          }
+        });
+      });
+    },
+    []
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!emblaApi || !isMobile) return;
+    setTweenNodes(emblaApi);
+    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: [
+      /* @__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)(
+        SelectedSnapDisplay,
+        {
+          selectedSnap,
+          snapCount
+        }
+      )
+    ] })
+  ] });
 };
 var EmblaCarousel_default = EmblaCarousel;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/EmblaCarousel/index.js

@@ -1,7 +1,10 @@
 import {
   EmblaCarousel,
   EmblaCarousel_default
-} from "../../chunk-SZ47M32R.js";
+} from "../../chunk-3N34VVYD.js";
+import "../../chunk-YV5FS7NV.js";
+import "../../chunk-Z2HPSFEQ.js";
+import "../../chunk-WVGXD7HT.js";
 import "../../chunk-ORMEWXMH.js";
 export {
   EmblaCarousel,

package/dist/components/Menu.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   Menu
-} from "../chunk-RFF2EFBX.js";
-import "../chunk-FXJ7C6RF.js";
-import "../chunk-BXEE6VGQ.js";
+} from "../chunk-OM7QLLI2.js";
+import "../chunk-PE3EZP56.js";
+import "../chunk-KLH67DTH.js";
+import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-MMZTPVYB.js";
 import "../chunk-5UH6QUFB.js";

package/dist/components/MenuOption.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-7OLDYFKY.js";
+} from "../chunk-X3NDEFVA.js";
 import "../chunk-HXGJVYGQ.js";
-import "../chunk-BXEE6VGQ.js";
+import "../chunk-KLH67DTH.js";
+import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-MMZTPVYB.js";
 import "../chunk-5UH6QUFB.js";

package/dist/components/MobileDataGrid/ColumnList.css

@@ -759,6 +759,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -1063,6 +1067,9 @@
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2122,6 +2129,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
@@ -2345,6 +2355,9 @@
   .text-icon-on-action-secondary-normal {
     color: var(--color-icon-on-action-secondary-normal);
   }
+  .text-icon-primary-disabled {
+    color: var(--color-icon-primary-disabled);
+  }
   .text-icon-primary-normal {
     color: var(--color-icon-primary-normal);
   }

package/dist/components/MobileDataGrid/ColumnList.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunk-B4AE3DCA.js";
 import "../../chunk-FP3Y5JJN.js";
 import "../../chunk-5IFPG6TS.js";
-import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-6EYMKEJ6.js";
+import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-M7WHWZ2J.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-MMZTPVYB.js";

package/dist/components/MobileDataGrid/ColumnSelector/index.cjs

@@ -62,7 +62,7 @@ __export(ColumnSelector_exports, {
   ColumnSelector: () => ColumnSelector
 });
 module.exports = __toCommonJS(ColumnSelector_exports);
-var import_react40 = require("react");
+var import_react43 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -6120,15 +6120,34 @@ var import_react39 = require("react");
 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);
+
+// src/components/EmblaCarousel/SelectedSnapDisplay.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 
-// src/components/MobileDataGrid/ColumnSelector/index.tsx
+// src/components/EmblaCarousel/useSelectedSnapDisplay.ts
+var import_react40 = require("react");
+
+// src/components/EmblaCarousel/ArrowButtons.tsx
+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"
+);
+
+// src/components/EmblaCarousel/usePrevNextButtons.ts
+var import_react41 = require("react");
+
+// src/components/EmblaCarousel/index.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
-  const ref = (0, import_react40.useRef)(null);
-  const [show, setShow] = (0, import_react40.useState)(false);
+  const ref = (0, import_react43.useRef)(null);
+  const [show, setShow] = (0, import_react43.useState)(false);
   const {
     columns,
     id,
@@ -6139,13 +6158,13 @@ function ColumnSelector() {
     resetColumnVisibility,
     dispatch
   } = context;
-  const toggleColumnVisibility = (0, import_react40.useCallback)(
+  const toggleColumnVisibility = (0, import_react43.useCallback)(
     (index, visible) => {
       dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -6153,7 +6172,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -6162,10 +6181,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -6176,7 +6195,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -6194,11 +6213,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,

package/dist/components/MobileDataGrid/ColumnSelector/index.css

@@ -759,6 +759,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -1063,6 +1067,9 @@
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2122,6 +2129,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
@@ -2345,6 +2355,9 @@
   .text-icon-on-action-secondary-normal {
     color: var(--color-icon-on-action-secondary-normal);
   }
+  .text-icon-primary-disabled {
+    color: var(--color-icon-primary-disabled);
+  }
   .text-icon-primary-normal {
     color: var(--color-icon-primary-normal);
   }

package/dist/components/MobileDataGrid/ColumnSelector/index.js

@@ -1,22 +1,24 @@
 import {
   ColumnSelector
-} from "../../../chunk-A57PKP6Z.js";
-import "../../../chunk-57HL5K5I.js";
+} from "../../../chunk-E7XBOMT4.js";
+import "../../../chunk-4DPSNQCM.js";
 import "../../../chunk-Q4YDNW7N.js";
 import "../../../chunk-M7INAUAJ.js";
-import "../../../chunk-C5DKGJ4E.js";
+import "../../../chunk-KOKA2IJC.js";
+import "../../../chunk-MBZ55T2D.js";
 import "../../../chunk-2IKT6IHB.js";
 import "../../../chunk-YCDDBSVU.js";
 import "../../../chunk-3X3Y4TMS.js";
 import "../../../chunk-BQNPOGD5.js";
 import "../../../chunk-Y5GD2FJA.js";
-import "../../../chunk-MBZ55T2D.js";
-import "../../../chunk-SZ47M32R.js";
+import "../../../chunk-3N34VVYD.js";
 import "../../../chunk-B4AE3DCA.js";
 import "../../../chunk-FP3Y5JJN.js";
 import "../../../chunk-5IFPG6TS.js";
-import "../../../chunk-AJ5M6MVX.js";
 import "../../../chunk-6EYMKEJ6.js";
+import "../../../chunk-AJ5M6MVX.js";
+import "../../../chunk-YV5FS7NV.js";
+import "../../../chunk-Z2HPSFEQ.js";
 import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-FZ2TEKOE.js";
@@ -24,8 +26,8 @@ import "../../../chunk-FESS4LWU.js";
 import "../../../chunk-KBIEWFQS.js";
 import "../../../chunk-NSZTJ5R4.js";
 import "../../../chunk-LB7UT6F3.js";
-import "../../../chunk-ZL6NXIGS.js";
-import "../../../chunk-IPQIZG7U.js";
+import "../../../chunk-HT57FLRW.js";
+import "../../../chunk-N36EJLRW.js";
 import "../../../chunk-4RJKB7LC.js";
 import "../../../chunk-UUKHQUSF.js";
 import "../../../chunk-WVVEOCEH.js";
@@ -36,17 +38,18 @@ import "../../../chunk-UAMI54FE.js";
 import "../../../chunk-SJZNVG4N.js";
 import "../../../chunk-75USUR3I.js";
 import "../../../chunk-BWPNXY7T.js";
-import "../../../chunk-BH4UKMXV.js";
-import "../../../chunk-RFF2EFBX.js";
-import "../../../chunk-FXJ7C6RF.js";
-import "../../../chunk-7OLDYFKY.js";
+import "../../../chunk-5NRKL5CJ.js";
+import "../../../chunk-OM7QLLI2.js";
+import "../../../chunk-PE3EZP56.js";
+import "../../../chunk-X3NDEFVA.js";
 import "../../../chunk-FHXCCVOG.js";
 import "../../../chunk-7T5RGDCN.js";
 import "../../../chunk-HXGJVYGQ.js";
 import "../../../chunk-WVUIIBRR.js";
 import "../../../chunk-M7WHWZ2J.js";
-import "../../../chunk-CJPGHBV5.js";
-import "../../../chunk-BXEE6VGQ.js";
+import "../../../chunk-EGECC3PQ.js";
+import "../../../chunk-KLH67DTH.js";
+import "../../../chunk-WVGXD7HT.js";
 import "../../../chunk-VXWSAIB5.js";
 import "../../../chunk-MMZTPVYB.js";
 import "../../../chunk-5UH6QUFB.js";

package/dist/components/MobileDataGrid/MobileDataGridCard/index.js

@@ -2,8 +2,8 @@ import {
   MobileDataGridCard
 } from "../../../chunk-FP3Y5JJN.js";
 import "../../../chunk-5IFPG6TS.js";
-import "../../../chunk-AJ5M6MVX.js";
 import "../../../chunk-6EYMKEJ6.js";
+import "../../../chunk-AJ5M6MVX.js";
 import "../../../chunk-M7WHWZ2J.js";
 import "../../../chunk-VXWSAIB5.js";
 import "../../../chunk-MMZTPVYB.js";