@dmsi/wedgekit-react 0.0.2

package/dist/components/FilterGroup.js

@@ -0,0 +1,231 @@
+"use client";
+import {
+  OptionPill
+} from "../chunk-TWZZB4WO.js";
+import {
+  Search
+} from "../chunk-GTCSRHPF.js";
+import "../chunk-BWRHL2AG.js";
+import {
+  Label
+} from "../chunk-4C66DLIJ.js";
+import {
+  Link
+} from "../chunk-SY3HT54E.js";
+import "../chunk-KENSVWOY.js";
+import {
+  Checkbox
+} from "../chunk-DKKYR6DS.js";
+import "../chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingBottom,
+  componentPaddingY,
+  layoutGroupGap,
+  layoutPaddingBottom
+} from "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/FilterGroup.tsx
+import { useState, Children, isValidElement } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FilterGroup = (_a) => {
+  var _b = _a, {
+    label,
+    type = "link",
+    open = false,
+    showMore = false,
+    onShowMore,
+    onClearAll,
+    children,
+    showSearchField = false,
+    searchValue,
+    onSearchChange
+  } = _b, props = __objRest(_b, [
+    "label",
+    "type",
+    "open",
+    "showMore",
+    "onShowMore",
+    "onClearAll",
+    "children",
+    "showSearchField",
+    "searchValue",
+    "onSearchChange"
+  ]);
+  const isSummary = type === "summary";
+  const [internalExpanded, setInternalExpanded] = useState(open);
+  const [showAllItems, setShowAllItems] = useState(false);
+  const isExpanded = open || internalExpanded;
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const shouldShowAll = isSummary || showAllItems;
+  const visibleChildren = childArray.slice(
+    0,
+    shouldShowAll ? childArray.length : 5
+  );
+  const showShowMoreLink = showMore && !isSummary && childArray.length > 5 && !showAllItems && isExpanded;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, props), {
+      className: clsx(
+        "border-b border-border-primary-normal",
+        isSummary ? layoutPaddingBottom : componentPaddingBottom
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "flex items-center justify-between cursor-pointer",
+              layoutGroupGap
+            ),
+            onClick: handleToggleExpanded,
+            children: [
+              /* @__PURE__ */ jsx(Label, { children: label }),
+              type !== "summary" ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "keyboard_arrow_down",
+                  className: clsx(
+                    baseTransition.replace(
+                      "transition-colors",
+                      "transition-transform"
+                    ),
+                    isExpanded && "rotate-180",
+                    "text-icon-action-primary-normal"
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                Link,
+                {
+                  className: clsx("block", componentPaddingY),
+                  onClick: handleClearAll,
+                  children: "Clear All"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "grid",
+              baseTransition.replace(
+                "transition-colors",
+                "transition-[grid-template-rows]"
+              ),
+              isExpanded || isSummary ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  "overflow-hidden",
+                  componentGap,
+                  (isExpanded || isSummary || internalExpanded) && "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap"
+                ),
+                children: [
+                  !isSummary && showSearchField && /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      style: { marginBottom: "2px" },
+                      onChange: onSearchChange,
+                      value: searchValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: clsx(isSummary && `flex flex-col ${componentGap}`), children: visibleChildren }),
+                  showShowMoreLink && /* @__PURE__ */ jsx(
+                    Link,
+                    {
+                      className: clsx("block", "!items-start", componentPaddingY),
+                      onClick: handleOnShowMore,
+                      children: "Show More"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    })
+  );
+  function handleOnShowMore(e) {
+    e.stopPropagation();
+    setShowAllItems(true);
+    onShowMore == null ? void 0 : onShowMore();
+  }
+  function handleToggleExpanded(e) {
+    if (type === "summary") return;
+    e.stopPropagation();
+    setInternalExpanded(!internalExpanded);
+  }
+  function handleClearAll(e) {
+    e.stopPropagation();
+    onClearAll == null ? void 0 : onClearAll();
+  }
+};
+var FilterGroupItem = (_a) => {
+  var _b = _a, {
+    type = "link",
+    children,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "type",
+    "children",
+    "onClick"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      onClick: handleClick
+    }, props), {
+      className: clsx(
+        "flex items-center justify-between *:first:flex-1 cursor-pointer",
+        type !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
+      ),
+      children: /* @__PURE__ */ jsx(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
+        children,
+        type !== "summary" && props.count && /* @__PURE__ */ jsxs("span", { children: [
+          "(",
+          props.count,
+          ")"
+        ] })
+      ] }) }))
+    })
+  );
+  function handleClick(e) {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick();
+  }
+};
+var FilterGroupItemChildComponent = (_a) => {
+  var _b = _a, {
+    type = "link",
+    children
+  } = _b, props = __objRest(_b, [
+    "type",
+    "children"
+  ]);
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
+  }
+  if (type === "summary") {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });
+  }
+  return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({ variant: "secondary" }, props), { children }));
+};
+export {
+  FilterGroup,
+  FilterGroupItem
+};

package/dist/components/FullViewportBox.cjs

@@ -0,0 +1,35 @@
+"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/FullViewportBox.tsx
+var FullViewportBox_exports = {};
+__export(FullViewportBox_exports, {
+  FullViewportLayout: () => FullViewportLayout
+});
+module.exports = __toCommonJS(FullViewportBox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function FullViewportLayout({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal", children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FullViewportLayout
+});

package/dist/components/FullViewportBox.js

@@ -0,0 +1,12 @@
+import "../chunk-ORMEWXMH.js";
+
+// src/components/FullViewportBox.tsx
+import { jsx } from "react/jsx-runtime";
+function FullViewportLayout({
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal", children });
+}
+export {
+  FullViewportLayout
+};

package/dist/components/Grid.cjs

@@ -0,0 +1,69 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Grid.tsx
+var Grid_exports = {};
+__export(Grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(Grid_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Grid({
+  children,
+  columns = 1,
+  sizing,
+  padding,
+  fullWidth = false
+}) {
+  const gridClass = columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : columns === 4 ? "grid-cols-4" : columns === 5 ? "grid-cols-5" : columns === 6 ? "grid-cols-6" : columns === 7 ? "grid-cols-7" : columns === 8 ? "grid-cols-8" : columns === 9 ? "grid-cols-9" : columns === 10 ? "grid-cols-10" : columns === 11 ? "grid-cols-11" : columns === 12 ? "grid-cols-12" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "grid",
+        gridClass,
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
+        fullWidth && "w-full"
+      ),
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid
+});

package/dist/components/Grid.js

@@ -0,0 +1,36 @@
+import "../chunk-ORMEWXMH.js";
+
+// src/components/Grid.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function Grid({
+  children,
+  columns = 1,
+  sizing,
+  padding,
+  fullWidth = false
+}) {
+  const gridClass = columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : columns === 4 ? "grid-cols-4" : columns === 5 ? "grid-cols-5" : columns === 6 ? "grid-cols-6" : columns === 7 ? "grid-cols-7" : columns === 8 ? "grid-cols-8" : columns === 9 ? "grid-cols-9" : columns === 10 ? "grid-cols-10" : columns === 11 ? "grid-cols-11" : columns === 12 ? "grid-cols-12" : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "grid",
+        gridClass,
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
+        fullWidth && "w-full"
+      ),
+      children
+    }
+  );
+}
+export {
+  Grid
+};

package/dist/components/GridContainer.cjs

@@ -0,0 +1,125 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/GridContainer.tsx
+var GridContainer_exports = {};
+__export(GridContainer_exports, {
+  GridContainer: () => GridContainer
+});
+module.exports = __toCommonJS(GridContainer_exports);
+var import_react = require("react");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var COLUMNS_WITH_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
+};
+var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
+};
+var getChildCountBasedClasses = (childCount, hasSideMenu) => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+var getGridClasses = (childCount, hasSideMenu, columns) => {
+  var _a;
+  if (columns) {
+    const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return (_a = map[columns]) != null ? _a : map[12];
+  }
+  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+};
+var GridContainer = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns
+}) => {
+  const childCount = import_react.Children.count(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns)
+      ),
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridContainer
+});

package/dist/components/GridContainer.js

@@ -0,0 +1,92 @@
+import "../chunk-ORMEWXMH.js";
+
+// src/components/GridContainer.tsx
+import { Children } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var COLUMNS_WITH_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
+};
+var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
+};
+var getChildCountBasedClasses = (childCount, hasSideMenu) => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+var getGridClasses = (childCount, hasSideMenu, columns) => {
+  var _a;
+  if (columns) {
+    const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return (_a = map[columns]) != null ? _a : map[12];
+  }
+  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+};
+var GridContainer = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns
+}) => {
+  const childCount = Children.count(children);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns)
+      ),
+      children
+    }
+  );
+};
+export {
+  GridContainer
+};