@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/atoms/Tag/Tag.mjs

@@ -0,0 +1,115 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  size = semantic.size;
+var label = tokens.component.badge.label;
+var space = semantic.space;
+var radius = semantic.radius;
+var StyledTag = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tag__StyledTag",
+  componentId: "sc-lzfmti-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */])), radius.sm, function (_a) {
+  var $size = _a.$size;
+  return size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? "0 ".concat(space[200]) : "".concat(space[100], " ").concat(space[200]);
+}, label.typography.small, label.fontWeight, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return color.fill['accent-muted'];
+    case 'success':
+      return color.fill['success-muted'];
+    case 'warning':
+      return color.fill['warning-muted'];
+    case 'error':
+      return color.fill['danger-muted'];
+    case 'emphasis':
+      return color.fill.emphasis;
+    default:
+      return color.fill.muted;
+  }
+}, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return color.text.accent;
+    case 'success':
+      return color.text.success;
+    case 'warning':
+      return color.text.warning;
+    case 'error':
+      return color.text.danger;
+    case 'emphasis':
+      return color.text.inverse;
+    default:
+      return color.text["default"];
+  }
+}, function (_a) {
+  var $variant = _a.$variant,
+    $border = _a.$border;
+  if (!$border) return 'none';
+  switch ($variant) {
+    case 'interactive':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.accent);
+    case 'success':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.success);
+    case 'warning':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.warning);
+    case 'error':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.danger);
+    case 'emphasis':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.fill.emphasis);
+    default:
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border["default"]);
+  }
+});
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+var Tag = function Tag(_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.border,
+    border = _c === void 0 ? true : _c,
+    _d = _a.size,
+    tagSize = _d === void 0 ? 'medium' : _d,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["children", "variant", "border", "size", 'data-testid']);
+  return jsx(StyledTag, __assign({
+    "$variant": variant,
+    "$border": border,
+    "$size": tagSize,
+    "data-testid": dataTestId,
+    "data-variant": variant,
+    "data-border": border,
+    role: "status",
+    "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
+  }, props, {
+    children: children
+  }));
+};
+var templateObject_1;
+
+export { Tag };
+//# sourceMappingURL=Tag.mjs.map

package/dist/components/atoms/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Tag/index.d.mts

@@ -0,0 +1,2 @@
+export { Tag } from './Tag.mjs';
+export type { TagProps } from './Tag.mjs';

package/dist/components/atoms/Typography/Typography.d.mts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type TypographyVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | 'body' | 'small' | 'overline' | 'caption' | 'button1' | 'button2' | 'button3' | 'label';
+export type TypographyColor = "default" | "emphasis" | "subdued" | "inverse" | "disabled" | "interactive" | "error" | "success" | "warning";
+export interface TypographyProps {
+    /** Typography variant defining the semantic meaning and style */
+    variant?: TypographyVariant;
+    /** Color variant for the text */
+    color?: TypographyColor;
+    /** Content to render */
+    children: React.ReactNode;
+    /** HTML element to render as (overrides default semantic element) */
+    as?: React.ElementType;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+export declare const Typography: React.FC<TypographyProps>;

package/dist/components/atoms/Typography/Typography.mjs

@@ -0,0 +1,139 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var _a = tokens.semantic,
+  typography = _a.typography,
+  color = _a.color,
+  letterSpacing = _a.letterSpacing;
+var getTypographyStyles = function getTypographyStyles(variant) {
+  var styles = {
+    display: "font: ".concat(typography.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography.subtitle, ";"),
+    body: "font: ".concat(typography.body, ";"),
+    small: "font: ".concat(typography.small, ";"),
+    overline: "font: ".concat(typography.overline, ";"),
+    caption: "font: ".concat(typography.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
+    button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
+    label: "font: ".concat(typography.label, ";")
+  };
+  return styles[variant] || styles.body;
+};
+var getTextColor = function getTextColor(colorVariant) {
+  var colorMap = {
+    "default": color.text["default"],
+    emphasis: color.text.emphasis,
+    subdued: color.text.muted,
+    inverse: color.text.inverse,
+    disabled: color.text.disabled,
+    interactive: color.text.accent,
+    error: color.text.danger,
+    success: color.text.success,
+    warning: color.text.warning
+  };
+  return colorMap[colorVariant] || colorMap["default"];
+};
+var getDefaultElement = function getDefaultElement(variant) {
+  var elementMap = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'p',
+    body: 'p',
+    small: 'span',
+    overline: 'span',
+    caption: 'span',
+    button1: 'span',
+    button2: 'span',
+    button3: 'span',
+    label: 'span'
+  };
+  return elementMap[variant] || 'span';
+};
+var StyledTypography = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-17mqo4k-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */])), function (_a) {
+  var $variant = _a.$variant;
+  return getTypographyStyles($variant);
+}, function (_a) {
+  var $color = _a.$color;
+  return getTextColor($color);
+});
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+var Typography = function Typography(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    children = _a.children,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    as = _a.as,
+    dataTestId = _a["data-testid"];
+  // $variant and $color are only used for styled-components prop filtering
+  var defaultElement = getDefaultElement(variant);
+  var elementType = as || defaultElement;
+  return jsx(StyledTypography, {
+    as: elementType,
+    "$variant": variant,
+    "$color": color,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1;
+
+export { Typography };
+//# sourceMappingURL=Typography.mjs.map

package/dist/components/atoms/Typography/Typography.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Typography/index.d.mts

@@ -0,0 +1 @@
+export * from './Typography.mjs';

package/dist/components/atoms/index.d.mts

@@ -0,0 +1,21 @@
+export * from './Avatar/index.mjs';
+export * from './Badge/index.mjs';
+export * from './Box/index.mjs';
+export * from './Button/index.mjs';
+export * from './CategoryBadge/index.mjs';
+export * from './CategoryLabel/index.mjs';
+export * from './Chip/index.mjs';
+export * from './Container/index.mjs';
+export * from './Picture/index.mjs';
+export * from './DateFormatter/index.mjs';
+export * from './Icon/index.mjs';
+export * from './IconButton/index.mjs';
+export * from './MoneyDisplay/index.mjs';
+export * from './ProgressBar/index.mjs';
+export * from './Divider/index.mjs';
+export * from './Stack/index.mjs';
+export * from './StatusBadge/index.mjs';
+export * from './StatusLabel/index.mjs';
+export * from './Tag/index.mjs';
+export * from './Typography/index.mjs';
+export * from './AILabel/index.mjs';

package/dist/components/atoms/index.d.ts

@@ -18,3 +18,4 @@ export * from './StatusBadge';
 export * from './StatusLabel';
 export * from './Tag';
 export * from './Typography';
+export * from './AILabel';

package/dist/components/index.d.mts

@@ -0,0 +1,4 @@
+export * from './atoms//index.mjs';
+export * from './molecules//index.mjs';
+export * from './layout//index.mjs';
+export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem/index.mjs';

package/dist/components/layout/GridSystem/GridSystem.d.mts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Tokens } from '../../../types/tokens.mjs';
+interface GridProps {
+    cols?: number;
+    gap?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const Grid: React.FC<GridProps>;
+interface GridColProps {
+    span?: number;
+    spanSm?: number;
+    spanMd?: number;
+    spanLg?: number;
+    spanXl?: number;
+    order?: number;
+    orderSm?: number;
+    orderMd?: number;
+    orderLg?: number;
+    orderXl?: number;
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const GridCol: React.FC<GridColProps>;
+interface ResponsiveGridProps {
+    cols: number;
+    colsSm?: number;
+    colsMd?: number;
+    colsLg?: number;
+    colsXl?: number;
+    gap?: keyof Tokens['base']['spacing'];
+    gapSm?: keyof Tokens['base']['spacing'];
+    gapMd?: keyof Tokens['base']['spacing'];
+    gapLg?: keyof Tokens['base']['spacing'];
+    gapXl?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapXSm?: keyof Tokens['base']['spacing'];
+    gapXMd?: keyof Tokens['base']['spacing'];
+    gapXLg?: keyof Tokens['base']['spacing'];
+    gapXXl?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
+    gapYSm?: keyof Tokens['base']['spacing'];
+    gapYMd?: keyof Tokens['base']['spacing'];
+    gapYLg?: keyof Tokens['base']['spacing'];
+    gapYXl?: keyof Tokens['base']['spacing'];
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+export {};

package/dist/components/layout/GridSystem/GridSystem.mjs

@@ -0,0 +1,221 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
+// so they are looked up in base.spacing until they accept semantic keys.
+// eslint-disable-next-line no-restricted-syntax
+var gapSpacing = tokens.base.spacing;
+// Breakpoints using base tokens
+var breakpoints = {
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
+};
+// Media query helpers
+var media = {
+  xs: "@media (min-width: ".concat(breakpoints.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
+  '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
+};
+var GridContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridContainer",
+  componentId: "sc-1lhwjqo-0"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"])), function (props) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+}, function (props) {
+  return props.$gapX && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
+}, function (props) {
+  return props.$gapY && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+});
+var Grid = function Grid(_a) {
+  var _b = _a.cols,
+    cols = _b === void 0 ? 12 : _b,
+    gap = _a.gap,
+    gapX = _a.gapX,
+    gapY = _a.gapY,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(GridContainer, {
+    "$cols": cols,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var GridColContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridColContainer",
+  componentId: "sc-1lhwjqo-1"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+  return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
+}, function (props) {
+  return props.$order !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+}, function (props) {
+  return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
+}, function (props) {
+  return props.$spanMd && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.md, props.$spanMd, props.$spanMd);
+}, function (props) {
+  return props.$spanLg && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.lg, props.$spanLg, props.$spanLg);
+}, function (props) {
+  return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
+}, function (props) {
+  return props.$orderSm !== undefined && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+}, function (props) {
+  return props.$orderMd !== undefined && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+}, function (props) {
+  return props.$orderLg !== undefined && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+}, function (props) {
+  return props.$orderXl !== undefined && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+});
+var GridCol = function GridCol(_a) {
+  var span = _a.span,
+    spanSm = _a.spanSm,
+    spanMd = _a.spanMd,
+    spanLg = _a.spanLg,
+    spanXl = _a.spanXl,
+    order = _a.order,
+    orderSm = _a.orderSm,
+    orderMd = _a.orderMd,
+    orderLg = _a.orderLg,
+    orderXl = _a.orderXl,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(GridColContainer, {
+    "$span": span,
+    "$spanSm": spanSm,
+    "$spanMd": spanMd,
+    "$spanLg": spanLg,
+    "$spanXl": spanXl,
+    "$order": order,
+    "$orderSm": orderSm,
+    "$orderMd": orderMd,
+    "$orderLg": orderLg,
+    "$orderXl": orderXl,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var ResponsiveGridContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__ResponsiveGridContainer",
+  componentId: "sc-1lhwjqo-2"
+})(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+}, function (props) {
+  return props.$gapX && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
+}, function (props) {
+  return props.$gapY && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+}, function (props) {
+  return props.$colsSm && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.sm, props.$colsSm);
+}, function (props) {
+  return props.$colsMd && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.md, props.$colsMd);
+}, function (props) {
+  return props.$colsLg && css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.lg, props.$colsLg);
+}, function (props) {
+  return props.$colsXl && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.xl, props.$colsXl);
+}, function (props) {
+  return props.$gapSm && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.sm, props.$gapSm);
+}, function (props) {
+  return props.$gapMd && css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.md, props.$gapMd);
+}, function (props) {
+  return props.$gapLg && css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.lg, props.$gapLg);
+}, function (props) {
+  return props.$gapXl && css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.xl, props.$gapXl);
+}, function (props) {
+  return props.$gapXSm && css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.sm, props.$gapXSm);
+}, function (props) {
+  return props.$gapXMd && css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.md, props.$gapXMd);
+}, function (props) {
+  return props.$gapXLg && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.lg, props.$gapXLg);
+}, function (props) {
+  return props.$gapXXl && css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.xl, props.$gapXXl);
+}, function (props) {
+  return props.$gapYSm && css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.sm, props.$gapYSm);
+}, function (props) {
+  return props.$gapYMd && css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.md, props.$gapYMd);
+}, function (props) {
+  return props.$gapYLg && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.lg, props.$gapYLg);
+}, function (props) {
+  return props.$gapYXl && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.xl, props.$gapYXl);
+});
+var ResponsiveGrid = function ResponsiveGrid(_a) {
+  var cols = _a.cols,
+    colsSm = _a.colsSm,
+    colsMd = _a.colsMd,
+    colsLg = _a.colsLg,
+    colsXl = _a.colsXl,
+    gap = _a.gap,
+    gapSm = _a.gapSm,
+    gapMd = _a.gapMd,
+    gapLg = _a.gapLg,
+    gapXl = _a.gapXl,
+    gapX = _a.gapX,
+    gapXSm = _a.gapXSm,
+    gapXMd = _a.gapXMd,
+    gapXLg = _a.gapXLg,
+    gapXXl = _a.gapXXl,
+    gapY = _a.gapY,
+    gapYSm = _a.gapYSm,
+    gapYMd = _a.gapYMd,
+    gapYLg = _a.gapYLg,
+    gapYXl = _a.gapYXl,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(ResponsiveGridContainer, {
+    "$cols": cols,
+    "$colsSm": colsSm,
+    "$colsMd": colsMd,
+    "$colsLg": colsLg,
+    "$colsXl": colsXl,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
+    "$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
+    "$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
+    "$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
+    "$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
+    "$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
+    "$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
+    "$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
+    "$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
+    "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
+    "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
+
+export { Grid, GridCol, ResponsiveGrid };
+//# sourceMappingURL=GridSystem.mjs.map

package/dist/components/layout/GridSystem/GridSystem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridSystem.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout/GridSystem/index.d.mts

@@ -0,0 +1 @@
+export { ResponsiveGrid, GridCol, Grid } from './GridSystem.mjs';

package/dist/components/layout/index.d.mts

@@ -0,0 +1 @@
+export * from './GridSystem/index.mjs';