@hanzo/ui 5.3.28 → 5.3.29

package/dist/textarea.js

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
+var DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
+var Textarea = React__namespace.forwardRef(
+  ({
+    className,
+    minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
+    maxHeight = DEFAULT_MAX_TEXTAREA_HEIGHT,
+    resize = "none",
+    ...props
+  }, ref) => {
+    const textareaRef = React__namespace.useRef(null);
+    const mergedRef = ref || textareaRef;
+    React__namespace.useLayoutEffect(() => {
+      if (!mergedRef.current) return;
+      mergedRef.current.style.height = "inherit";
+      mergedRef.current.style.height = `${Math.max(
+        mergedRef.current.scrollHeight + 2,
+        minHeight
+      )}px`;
+      if (props.autoFocus !== void 0 && props.autoFocus) {
+        mergedRef.current.focus();
+      }
+    }, [props.value, minHeight, maxHeight]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: cn(
+          "bg-bg-secondary placeholder:!text-text-placeholder border-input focus-visible:ring-border-input-focus flex w-full rounded-md border px-4 py-2 pt-7 text-sm break-words focus-visible:ring-1 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: mergedRef,
+        style: {
+          minHeight: `${minHeight}px`,
+          maxHeight: resize === "vertical" ? void 0 : `${maxHeight}px`,
+          resize
+        },
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;

package/dist/textarea.mjs

@@ -0,0 +1,56 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
+var DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
+var Textarea = React.forwardRef(
+  ({
+    className,
+    minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
+    maxHeight = DEFAULT_MAX_TEXTAREA_HEIGHT,
+    resize = "none",
+    ...props
+  }, ref) => {
+    const textareaRef = React.useRef(null);
+    const mergedRef = ref || textareaRef;
+    React.useLayoutEffect(() => {
+      if (!mergedRef.current) return;
+      mergedRef.current.style.height = "inherit";
+      mergedRef.current.style.height = `${Math.max(
+        mergedRef.current.scrollHeight + 2,
+        minHeight
+      )}px`;
+      if (props.autoFocus !== void 0 && props.autoFocus) {
+        mergedRef.current.focus();
+      }
+    }, [props.value, minHeight, maxHeight]);
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "bg-bg-secondary placeholder:!text-text-placeholder border-input focus-visible:ring-border-input-focus flex w-full rounded-md border px-4 py-2 pt-7 text-sm break-words focus-visible:ring-1 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: mergedRef,
+        style: {
+          minHeight: `${minHeight}px`,
+          maxHeight: resize === "vertical" ? void 0 : `${maxHeight}px`,
+          resize
+        },
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/toggle-group.js

@@ -0,0 +1,118 @@
+"use client";
+'use strict';
+
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var toggleVariants = classVarianceAuthority.cva(
+  "ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white",
+  {
+    variants: {
+      variant: {
+        default: "bg-bg-tertiary",
+        outline: "border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white"
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  TogglePrimitive__namespace.Root,
+  {
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+), "Toggle");
+Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
+var ToggleGroupContext = React__namespace.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToggleGroupPrimitive__namespace.Root,
+  {
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+), "ToggleGroup");
+ToggleGroup.displayName = ToggleGroupPrimitive__namespace.Root.displayName;
+var ToggleGroupItem = /* @__PURE__ */ __name(({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) => {
+  const context = React__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}, "ToggleGroupItem");
+ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/toggle-group.mjs

@@ -0,0 +1,93 @@
+"use client";
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var toggleVariants = cva(
+  "ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white",
+  {
+    variants: {
+      variant: {
+        default: "bg-bg-tertiary",
+        outline: "border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white"
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+), "Toggle");
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+), "ToggleGroup");
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = /* @__PURE__ */ __name(({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) => {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}, "ToggleGroupItem");
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/toggle.js

@@ -0,0 +1,71 @@
+"use client";
+'use strict';
+
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var toggleVariants = classVarianceAuthority.cva(
+  "ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white",
+  {
+    variants: {
+      variant: {
+        default: "bg-bg-tertiary",
+        outline: "border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white"
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  TogglePrimitive__namespace.Root,
+  {
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+), "Toggle");
+Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
+
+exports.Toggle = Toggle;
+exports.toggleVariants = toggleVariants;

package/dist/toggle.mjs

@@ -0,0 +1,48 @@
+"use client";
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var toggleVariants = cva(
+  "ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white",
+  {
+    variants: {
+      variant: {
+        default: "bg-bg-tertiary",
+        outline: "border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white"
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = /* @__PURE__ */ __name(({
+  className,
+  variant,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+), "Toggle");
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/dist/tooltip.js

@@ -0,0 +1,67 @@
+"use client";
+'use strict';
+
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var TooltipProvider = TooltipPrimitive__namespace.Provider;
+var Tooltip = TooltipPrimitive__namespace.Root;
+var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+var TooltipPortal = TooltipPrimitive__namespace.Portal;
+var TooltipArrow2 = TooltipPrimitive__namespace.TooltipArrow;
+var TooltipContent = /* @__PURE__ */ __name(({
+  className,
+  sideOffset = 4,
+  showArrow = true,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  TooltipPrimitive__namespace.Content,
+  {
+    className: cn(
+      "border-divider bg-bg-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-w-[280px] rounded-lg border px-3 py-1.5 text-xs text-white",
+      className
+    ),
+    sideOffset,
+    ...props,
+    children: [
+      props.children,
+      showArrow && /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-bg-dark -my-px drop-shadow-[0_1px_0_#313336]" })
+    ]
+  }
+), "TooltipContent");
+TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow2;
+exports.TooltipContent = TooltipContent;
+exports.TooltipPortal = TooltipPortal;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;

package/dist/tooltip.mjs

@@ -0,0 +1,40 @@
+"use client";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipPortal = TooltipPrimitive.Portal;
+var TooltipArrow2 = TooltipPrimitive.TooltipArrow;
+var TooltipContent = /* @__PURE__ */ __name(({
+  className,
+  sideOffset = 4,
+  showArrow = true,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  TooltipPrimitive.Content,
+  {
+    className: cn(
+      "border-divider bg-bg-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-w-[280px] rounded-lg border px-3 py-1.5 text-xs text-white",
+      className
+    ),
+    sideOffset,
+    ...props,
+    children: [
+      props.children,
+      showArrow && /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "fill-bg-dark -my-px drop-shadow-[0_1px_0_#313336]" })
+    ]
+  }
+), "TooltipContent");
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipArrow2 as TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

package/dist/types/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+
+exports.Breakpoints = Breakpoints;
+exports.COMMON_GRID_1_COL = COMMON_GRID_1_COL;
+exports.COMMON_GRID_2_COL = COMMON_GRID_2_COL;
+exports.COMMON_GRID_3_COL = COMMON_GRID_3_COL;
+exports.COMMON_GRID_4_COL = COMMON_GRID_4_COL;

package/dist/types/index.mjs

@@ -0,0 +1,51 @@
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+
+export { Breakpoints, COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL };