@dbcdk/react-components 0.0.107 → 0.0.108

package/dist/components/grid/Grid.cjs

@@ -15,12 +15,25 @@ const GAP_TOKEN = {
   lg: "var(--spacing-lg)",
   xl: "var(--spacing-xl)"
 };
-function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: [styles__default.default.grid, equalHeight && styles__default.default.equalHeight, className].filter(Boolean).join(" "),
-      style: { gap: GAP_TOKEN[gap], ...style },
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
       children
     }
   );

package/dist/components/grid/Grid.d.ts

@@ -1,14 +1,20 @@
 import type { CSSProperties, ReactNode } from 'react';
 export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridMaxWidth {
+    base?: string;
+    md?: string;
+    lg?: string;
+}
 export interface GridProps {
     children?: ReactNode;
     gap?: GridGap;
     /** Stretch direct children so cards/items in the same row get equal height */
     equalHeight?: boolean;
+    maxWidth?: GridMaxWidth;
     className?: string;
     style?: CSSProperties;
 }
-export declare function Grid({ children, gap, equalHeight, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
     /** Default span: <768px */

package/dist/components/grid/Grid.js

@@ -9,12 +9,25 @@ const GAP_TOKEN = {
   lg: "var(--spacing-lg)",
   xl: "var(--spacing-xl)"
 };
-function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: [styles.grid, equalHeight && styles.equalHeight, className].filter(Boolean).join(" "),
-      style: { gap: GAP_TOKEN[gap], ...style },
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
       children
     }
   );

package/dist/components/grid/Grid.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   align-items: start;
+  max-width: var(--max-width-base);
 }
 
 .equalHeight {
@@ -23,12 +24,20 @@
 }
 
 @media (min-width: 768px) {
+  .grid {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+
   .item {
     grid-column: span var(--span-md, var(--span-base, 12));
   }
 }
 
 @media (min-width: 1200px) {
+  .grid {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+
   .item {
     grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
   }

package/dist/components/headline/Headline.cjs

@@ -45,7 +45,7 @@ function Headline({
           },
           className: headlineClassName,
           children: [
-            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) }) : null,
+            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: icon ? void 0 : severity$1 }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children })
           ]
         }

package/dist/components/headline/Headline.js

@@ -39,7 +39,7 @@ function Headline({
           },
           className: headlineClassName,
           children: [
-            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) }) : null,
+            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity: icon ? void 0 : severity }) }) : null,
             /* @__PURE__ */ jsx("span", { className: textClassName, children })
           ]
         }

package/dist/components/stack/Stack.cjs

@@ -22,10 +22,18 @@ const Stack = react.forwardRef(function Stack2({
   mobileAlign,
   mobileJustify,
   mobileWrap = false,
+  maxWidth,
   className,
+  style,
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
   const classes = [
     "dbc-flex",
     direction === "column" ? "dbc-flex-column" : void 0,
@@ -39,9 +47,10 @@ const Stack = react.forwardRef(function Stack2({
     mobileAlign ? styles__default.default[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
     mobileJustify ? styles__default.default[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
     mobileWrap ? styles__default.default.mobileWrap : void 0,
+    maxWidth != null ? styles__default.default.maxWidth : void 0,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
 });
 
 exports.Stack = Stack;

package/dist/components/stack/Stack.d.ts

@@ -1,4 +1,5 @@
 import React, { ElementType } from 'react';
+import type { GridMaxWidth } from '../../components/grid/Grid';
 type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 type StackDirection = 'row' | 'column';
 type StackAlign = 'start' | 'center' | 'end';
@@ -15,6 +16,7 @@ type StackOwnProps = {
     mobileAlign?: StackAlign;
     mobileJustify?: StackJustify;
     mobileWrap?: boolean;
+    maxWidth?: GridMaxWidth;
 };
 export type StackProps<C extends ElementType = 'div'> = StackOwnProps & {
     as?: C;

package/dist/components/stack/Stack.js

@@ -16,10 +16,18 @@ const Stack = forwardRef(function Stack2({
   mobileAlign,
   mobileJustify,
   mobileWrap = false,
+  maxWidth,
   className,
+  style,
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
   const classes = [
     "dbc-flex",
     direction === "column" ? "dbc-flex-column" : void 0,
@@ -33,9 +41,10 @@ const Stack = forwardRef(function Stack2({
     mobileAlign ? styles[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
     mobileJustify ? styles[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
     mobileWrap ? styles.mobileWrap : void 0,
+    maxWidth != null ? styles.maxWidth : void 0,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, ...rest });
+  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
 });
 
 export { Stack };

package/dist/components/stack/Stack.module.css

@@ -1,3 +1,19 @@
+.maxWidth {
+  max-width: var(--max-width-base);
+}
+
+@media (min-width: 768px) {
+  .maxWidth {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+}
+
+@media (min-width: 1200px) {
+  .maxWidth {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+}
+
 @media (max-width: 767px) {
   .mobileDirectionRow {
     flex-direction: row;

package/dist/components/table/Table.module.css

@@ -83,11 +83,7 @@
     transparent
   );
   --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
-  --table-component-row-bg-selected: color-mix(
-    in srgb,
-    var(--color-bg-selected) 55%,
-    transparent
-  );
+  --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
   --table-component-row-bg-selected-hover: color-mix(
     in srgb,
     var(--color-bg-selected-hover) 60%,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",