jvetrau-ds 0.1.4 → 0.1.6

package/base.css

@@ -0,0 +1,188 @@
+/* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
+
+
+
+/* src/base/reset.css */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+/* src/base/color.css */
+html,
+body {
+  /* color */
+  --body-bg: var(--color-bg);
+  --body-color: var(--color-text);
+
+  background: var(--body-bg);
+  color: var(--body-color);
+}
+
+/* src/base/typography.css */
+body {
+  /* typography */
+  --body-font-family: var(--font-body-family);
+  --body-font-size: var(--font-body);
+  --body-font-weight: var(--font-body-weight);
+  --body-line-height: var(--font-body-line);
+  --body-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size);
+  font-weight: var(--body-font-weight);
+  line-height: var(--body-line-height);
+  letter-spacing: var(--body-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+  /* typography */
+  --h1-font-family: var(--font-h1-family);
+  --h1-font-size: var(--font-h1);
+  --h1-font-weight: var(--font-h1-weight);
+  --h1-line-height: var(--font-h1-line);
+  --h1-letter-spacing: var(--font-h1-letter-spacing);
+
+  font-family: var(--h1-font-family);
+  font-size: var(--h1-font-size);
+  font-weight: var(--h1-font-weight);
+  line-height: var(--h1-line-height);
+  letter-spacing: var(--h1-letter-spacing);
+
+  /* size */
+  --h1-margin: var(--font-h1-margin);
+
+  margin: 0 0 var(--h1-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+h2 {
+  /* typography */
+  --h2-font-family: var(--font-h2-family);
+  --h2-font-size: var(--font-h2);
+  --h2-font-weight: var(--font-h2-weight);
+  --h2-line-height: var(--font-h2-line);
+  --h2-letter-spacing: var(--font-h2-letter-spacing);
+
+  font-family: var(--h2-font-family);
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
+  line-height: var(--h2-line-height);
+  letter-spacing: var(--h2-letter-spacing);
+
+  /* size */
+  --h2-margin: var(--font-h2-margin);
+
+  margin: 0 0 var(--h2-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+h3 {
+  /* typography */
+  --h3-font-family: var(--font-h3-family);
+  --h3-font-size: var(--font-h3);
+  --h3-font-weight: var(--font-h3-weight);
+  --h3-line-height: var(--font-h3-line);
+  --h3-letter-spacing: var(--font-h3-letter-spacing);
+
+  font-family: var(--h3-font-family);
+  font-size: var(--h3-font-size);
+  font-weight: var(--h3-font-weight);
+  line-height: var(--h3-line-height);
+  letter-spacing: var(--h3-letter-spacing);
+
+  /* size */
+  --h3-margin: var(--font-h3-margin);
+
+  margin: 0 0 var(--h3-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+h4 {
+  /* typography */
+  --h4-font-family: var(--font-h4-family);
+  --h4-font-size: var(--font-h4);
+  --h4-font-weight: var(--font-h4-weight);
+  --h4-line-height: var(--font-h4-line);
+  --h4-letter-spacing: var(--font-h4-letter-spacing);
+
+  font-family: var(--h4-font-family);
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  line-height: var(--h4-line-height);
+  letter-spacing: var(--h4-letter-spacing);
+
+  /* size */
+  --h4-margin: var(--font-h4-margin);
+
+  margin: 0 0 var(--h4-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+p {
+  /* typography */
+  --p-font-family: var(--font-body-family);
+  --p-font-size: var(--font-body);
+  --p-font-weight: var(--font-body-weight);
+  --p-line-height: var(--font-body-line);
+  --p-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--p-font-family);
+  font-size: var(--p-font-size);
+  font-weight: var(--p-font-weight);
+  line-height: var(--p-line-height);
+  letter-spacing: var(--p-letter-spacing);
+
+  /* size */
+  --p-margin: var(--font-body-margin);
+
+  margin: 0 0 var(--p-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+

package/index.d.cts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { I as IconName } from './public-BFgsu4P2.cjs';
 export { Footer, FooterProps, Header, HeaderProps, ScreenHeader, ScreenHeaderProps } from './patterns.cjs';
+export { LayoutBase, LayoutBaseProps, LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth, LayoutSidebar, LayoutSidebarProps } from './layouts.cjs';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     state?: 'default' | 'primary';
@@ -177,28 +178,6 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Avatar: React.FC<AvatarProps>;
 
-type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
-interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-}
-declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
-
-interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-}
-declare const LayoutBase: React.FC<LayoutBaseProps>;
-
-interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-    header?: React.ReactNode;
-    screenHeader?: React.ReactNode;
-    sidebar?: React.ReactNode;
-    footer?: React.ReactNode;
-}
-declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
-
 interface AttachmentItem {
     id: string;
     name: string;
@@ -214,4 +193,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attachment: React.FC<AttachmentProps>;
 
-export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
+export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };

package/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { I as IconName } from './public-BFgsu4P2.js';
 export { Footer, FooterProps, Header, HeaderProps, ScreenHeader, ScreenHeaderProps } from './patterns.js';
+export { LayoutBase, LayoutBaseProps, LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth, LayoutSidebar, LayoutSidebarProps } from './layouts.js';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     state?: 'default' | 'primary';
@@ -177,28 +178,6 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Avatar: React.FC<AvatarProps>;
 
-type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
-interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-}
-declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
-
-interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-}
-declare const LayoutBase: React.FC<LayoutBaseProps>;
-
-interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: LayoutFoundationWidth;
-    header?: React.ReactNode;
-    screenHeader?: React.ReactNode;
-    sidebar?: React.ReactNode;
-    footer?: React.ReactNode;
-}
-declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
-
 interface AttachmentItem {
     id: string;
     name: string;
@@ -214,4 +193,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attachment: React.FC<AttachmentProps>;
 
-export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
+export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };

package/layouts.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/helpers/classnames.ts
+function classnames(...args) {
+  const classes = [];
+  args.forEach((arg) => {
+    if (!arg) return;
+    if (typeof arg === "string") {
+      classes.push(arg);
+      return;
+    }
+    for (const key in arg) {
+      if (arg[key]) {
+        classes.push(key);
+      }
+    }
+  });
+  return classes.join(" ");
+}
+var LayoutFoundation = ({
+  width = "default",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("layout-foundation", className, {
+    "layout-foundation--narrow": width === "narrow",
+    "layout-foundation--wide": width === "wide",
+    "layout-foundation--full": width === "full"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-foundation__grid", children })
+    }
+  );
+};
+var foundation_default = LayoutFoundation;
+var LayoutBase = ({
+  width = "default",
+  header,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__header", children: header }),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-base__main", children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
+      ]
+    }
+  );
+};
+var base_default = LayoutBase;
+var LayoutSidebar = ({
+  width = "wide",
+  header,
+  screenHeader,
+  sidebar,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__header", children: header }),
+        screenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-sidebar__body", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-sidebar__main", children }),
+          sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "layout-sidebar__side", children: sidebar })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__footer", children: footer })
+      ]
+    }
+  );
+};
+var sidebar_default = LayoutSidebar;
+
+exports.LayoutBase = base_default;
+exports.LayoutFoundation = foundation_default;
+exports.LayoutSidebar = sidebar_default;
+//# sourceMappingURL=layouts.cjs.map
+//# sourceMappingURL=layouts.cjs.map

package/layouts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/helpers/classnames.ts","../src/layouts/foundation/foundation.tsx","../src/layouts/base/base.tsx","../src/layouts/sidebar/sidebar.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"layouts.cjs","sourcesContent":["type ClassValue = string | undefined | null | false;\n\nexport function classnames(\n  ...args: (ClassValue | Record<string, boolean | undefined | null>)[]\n) {\n  const classes: string[] = [];\n\n  args.forEach(arg => {\n    if (!arg) return;\n\n    if (typeof arg === 'string') {\n      classes.push(arg);\n      return;\n    }\n\n    for (const key in arg) {\n      if (arg[key]) {\n        classes.push(key);\n      }\n    }\n  });\n\n  return classes.join(' ');\n}","import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'default',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;","import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-base__header\">\n          {header}\n        </div>\n      )}\n\n      <main className=\"layout-base__main\">\n        {children}\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;","import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\n\nexport interface LayoutSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  screenHeader?: React.ReactNode;\n  sidebar?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutSidebar: React.FC<LayoutSidebarProps> = ({\n  width = 'wide',\n  header,\n  screenHeader,\n  sidebar,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-sidebar__header\">\n          {header}\n        </div>\n      )}\n\n      {screenHeader && (\n        <div className=\"layout-sidebar__screen-header\">\n          {screenHeader}\n        </div>\n      )}\n\n      <div className=\"layout-sidebar__body\">\n        <main className=\"layout-sidebar__main\">\n          {children}\n        </main>\n\n        {sidebar && (\n          <aside className=\"layout-sidebar__side\">\n            {sidebar}\n          </aside>\n        )}\n      </div>\n\n      {footer && (\n        <div className=\"layout-sidebar__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutSidebar;"]}

package/layouts.d.cts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
+interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+}
+declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
+
+interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutBase: React.FC<LayoutBaseProps>;
+
+interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+    header?: React.ReactNode;
+    screenHeader?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
+
+export { LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps };

package/layouts.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
+interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+}
+declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
+
+interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutBase: React.FC<LayoutBaseProps>;
+
+interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: LayoutFoundationWidth;
+    header?: React.ReactNode;
+    screenHeader?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
+
+export { LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps };

package/layouts.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/helpers/classnames.ts
+function classnames(...args) {
+  const classes = [];
+  args.forEach((arg) => {
+    if (!arg) return;
+    if (typeof arg === "string") {
+      classes.push(arg);
+      return;
+    }
+    for (const key in arg) {
+      if (arg[key]) {
+        classes.push(key);
+      }
+    }
+  });
+  return classes.join(" ");
+}
+var LayoutFoundation = ({
+  width = "default",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("layout-foundation", className, {
+    "layout-foundation--narrow": width === "narrow",
+    "layout-foundation--wide": width === "wide",
+    "layout-foundation--full": width === "full"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "layout-foundation__grid", children })
+    }
+  );
+};
+var foundation_default = LayoutFoundation;
+var LayoutBase = ({
+  width = "default",
+  header,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsx("div", { className: "layout-base__header", children: header }),
+        /* @__PURE__ */ jsx("main", { className: "layout-base__main", children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
+      ]
+    }
+  );
+};
+var base_default = LayoutBase;
+var LayoutSidebar = ({
+  width = "wide",
+  header,
+  screenHeader,
+  sidebar,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__header", children: header }),
+        screenHeader && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
+        /* @__PURE__ */ jsxs("div", { className: "layout-sidebar__body", children: [
+          /* @__PURE__ */ jsx("main", { className: "layout-sidebar__main", children }),
+          sidebar && /* @__PURE__ */ jsx("aside", { className: "layout-sidebar__side", children: sidebar })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__footer", children: footer })
+      ]
+    }
+  );
+};
+var sidebar_default = LayoutSidebar;
+
+export { base_default as LayoutBase, foundation_default as LayoutFoundation, sidebar_default as LayoutSidebar };
+//# sourceMappingURL=layouts.js.map
+//# sourceMappingURL=layouts.js.map

package/layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/helpers/classnames.ts","../src/layouts/foundation/foundation.tsx","../src/layouts/base/base.tsx","../src/layouts/sidebar/sidebar.tsx"],"names":["jsx","jsxs"],"mappings":";;;AAEO,SAAS,cACX,IAAA,EACH;AACA,EAAA,MAAM,UAAoB,EAAC;AAE3B,EAAA,IAAA,CAAK,QAAQ,CAAA,GAAA,KAAO;AAClB,IAAA,IAAI,CAAC,GAAA,EAAK;AAEV,IAAA,IAAI,OAAO,QAAQ,QAAA,EAAU;AAC3B,MAAA,OAAA,CAAQ,KAAK,GAAG,CAAA;AAChB,MAAA;AAAA,IACF;AAEA,IAAA,KAAA,MAAW,OAAO,GAAA,EAAK;AACrB,MAAA,IAAI,GAAA,CAAI,GAAG,CAAA,EAAG;AACZ,QAAA,OAAA,CAAQ,KAAK,GAAG,CAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;ACRA,IAAM,mBAAoD,CAAC;AAAA,EACzD,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,mBAAA,EAAqB,SAAA,EAAW;AAAA,IACzD,6BAA6B,KAAA,KAAU,QAAA;AAAA,IACvC,2BAA2B,KAAA,KAAU,MAAA;AAAA,IACrC,2BAA2B,KAAA,KAAU;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ;AC1Bf,IAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,IAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qBACb,QAAA,EACH,CAAA;AAAA,QAEC,0BACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ;AC/Bf,IAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA,GAAQ,MAAA;AAAA,EACR,MAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACEC,IAAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCD,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,gCACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGFC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EACb,QAAA,EACH,CAAA;AAAA,UAEC,2BACCA,GAAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,0BACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"layouts.js","sourcesContent":["type ClassValue = string | undefined | null | false;\n\nexport function classnames(\n  ...args: (ClassValue | Record<string, boolean | undefined | null>)[]\n) {\n  const classes: string[] = [];\n\n  args.forEach(arg => {\n    if (!arg) return;\n\n    if (typeof arg === 'string') {\n      classes.push(arg);\n      return;\n    }\n\n    for (const key in arg) {\n      if (arg[key]) {\n        classes.push(key);\n      }\n    }\n  });\n\n  return classes.join(' ');\n}","import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n  | 'narrow'\n  | 'default'\n  | 'wide'\n  | 'full';\n\nexport interface LayoutFoundationProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n  width = 'default',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('layout-foundation', className, {\n    'layout-foundation--narrow': width === 'narrow',\n    'layout-foundation--wide': width === 'wide',\n    'layout-foundation--full': width === 'full',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"layout-foundation__grid\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default LayoutFoundation;","import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-base__header\">\n          {header}\n        </div>\n      )}\n\n      <main className=\"layout-base__main\">\n        {children}\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;","import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\n\nexport interface LayoutSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  header?: React.ReactNode;\n  screenHeader?: React.ReactNode;\n  sidebar?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutSidebar: React.FC<LayoutSidebarProps> = ({\n  width = 'wide',\n  header,\n  screenHeader,\n  sidebar,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    <LayoutFoundation\n      width={width}\n      className={className}\n      {...props}\n    >\n      {header && (\n        <div className=\"layout-sidebar__header\">\n          {header}\n        </div>\n      )}\n\n      {screenHeader && (\n        <div className=\"layout-sidebar__screen-header\">\n          {screenHeader}\n        </div>\n      )}\n\n      <div className=\"layout-sidebar__body\">\n        <main className=\"layout-sidebar__main\">\n          {children}\n        </main>\n\n        {sidebar && (\n          <aside className=\"layout-sidebar__side\">\n            {sidebar}\n          </aside>\n        )}\n      </div>\n\n      {footer && (\n        <div className=\"layout-sidebar__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutSidebar;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,6 +23,11 @@
       "import": "./patterns.js",
       "require": "./patterns.cjs"
     },
+    "./layouts": {
+      "types": "./layouts.d.ts",
+      "import": "./layouts.js",
+      "require": "./layouts.cjs"
+    },
     "./icons": {
       "types": "./icons.d.ts",
       "import": "./icons.js",
@@ -33,6 +38,7 @@
       "import": "./tokens.js",
       "require": "./tokens.cjs"
     },
+    "./base.css": "./base.css",
     "./styles.css": "./styles.css",
     "./themes/*.css": "./themes/*.css",
     "./themes/*.scoped.css": "./themes/*.scoped.css",

package/styles.css

@@ -198,75 +198,6 @@
   text-transform: uppercase;
 }
 
-/* src/components/button-icon/button-icon.css */
-.button-icon {
-  /* color */
-  --button-icon-bg: transparent;
-  --button-icon-color: var(--color-text);
-  --button-icon-bg-disabled: transparent;
-  --button-icon-color-disabled: var(--color-text-disabled);
-
-  background: var(--button-icon-bg);
-  color: var(--button-icon-color);
-
-  /* typography */
-
-  /* size */
-  --button-icon-size: 32px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-icon-size);
-  height: var(--button-icon-size);
-  padding: 0;
-
-  /* border */
-  --button-icon-radius: var(--radius-control);
-  --button-icon-focus-width: var(--size-border-width-min);
-  --button-icon-focus-offset: 2px;
-
-  border: 0;
-  border-radius: var(--button-icon-radius);
-
-  /* depth */
-
-  /* motion */
-  --button-icon-transition-duration: var(--motion-duration1);
-  --button-icon-opacity-hover: 0.8;
-  --button-icon-opacity-active: 0.7;
-
-  cursor: pointer;
-  user-select: none;
-  transition: opacity var(--button-icon-transition-duration);
-}
-
-.button-icon__icon {
-  /* size */
-  flex-shrink: 0;
-}
-
-.button-icon:hover {
-  opacity: var(--button-icon-opacity-hover);
-}
-
-.button-icon:focus-visible {
-  outline: var(--button-icon-focus-width) solid currentColor;
-  outline-offset: var(--button-icon-focus-offset);
-}
-
-.button-icon:active {
-  opacity: var(--button-icon-opacity-active);
-}
-
-.button-icon:disabled,
-.button-icon--disabled {
-  background: var(--button-icon-bg-disabled);
-  color: var(--button-icon-color-disabled);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
 /* src/components/button/button.css */
 .button {
   /* color */
@@ -373,6 +304,75 @@
   padding-inline: var(--button-padding-icon-only);
 }
 
+/* src/components/button-icon/button-icon.css */
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* src/components/card/card.css */
 .card {
   /* color */
@@ -2265,3 +2265,543 @@
   vertical-align: middle;
 }
 
+/* src/patterns/footer/footer.css */
+.footer {
+  /* color */
+/*  color: var(--color-text);
+  background: var(--color-bg);*/
+  border-top:
+    var(--border-size-width-min)
+    solid
+    var(--color-line);
+
+  /* typography */
+  font-family: var(--font-note-family);
+  font-size: var(--font-note);
+  font-weight: var(--font-note-weight);
+  line-height: var(--font-note-line);
+  letter-spacing: var(--font-note-letter-spacing);
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 100px;
+  padding: var(--size-padding-container);
+
+  overflow: hidden;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__copyright {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-menu);
+
+  flex-shrink: 0;
+
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links > * {
+  display: flex;
+  align-items: center;
+}
+
+.footer a {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  text-decoration: underline;
+  text-underline-position: from-font;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .footer {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .footer__copyright,
+  .footer__links {
+    white-space: normal;
+  }
+
+  .footer__links {
+    flex-wrap: wrap;
+  }
+}
+
+/* src/patterns/header/header.css */
+.header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 80px;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__logo {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 0;
+
+  flex: 1;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__avatar {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/patterns/screen-header/screen-header.css */
+.screen-header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+  /* gap: var(--padding-container); */
+
+  width: 100%;
+
+  padding-bottom:
+    var(--padding-container);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__heading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+/*  gap: var(--padding-tag);*/
+
+  margin-bottom: var(--font-h1-margin);
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__section {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--margin-descriptor) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1);
+  font-weight: var(--font-h1-weight);
+  line-height: var(--font-h1-line);
+  letter-spacing: var(--font-h1-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--font-h1-margin) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__description {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0;
+/*  max-width: 960px; */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__tabs {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/base/base.css */
+.layout-base__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/foundation/foundation.css */
+.layout-foundation {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  --layout-foundation-width: 960px;
+  --layout-foundation-padding-horz: var(--size-grid-padding-horz);
+  --layout-foundation-padding-vert: var(--size-grid-padding-vert);
+  --layout-foundation-columns: 12;
+  --layout-foundation-gap: var(--size-grid-margin);
+
+  width: 100%;
+  min-height: 100dvh;
+  max-width: var(--layout-foundation-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation--narrow {
+  --layout-foundation-width: 720px;
+}
+
+.layout-foundation--wide {
+  --layout-foundation-width: 1200px;
+}
+
+.layout-foundation--full {
+  max-width: none;
+}
+
+.layout-foundation__grid {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+  min-height: 100dvh;
+  padding:
+    var(--layout-foundation-padding-vert)
+    var(--layout-foundation-padding-horz);
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation__grid > * {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 1024px) {
+  .layout-foundation {
+    --layout-foundation-columns: 8;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-foundation {
+    --layout-foundation-columns: 4;
+  }
+}
+
+/* src/layouts/sidebar/sidebar.css */
+.layout-sidebar__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 8;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 4;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .layout-sidebar__main,
+  .layout-sidebar__side {
+    grid-column: 1 / -1;
+  }
+}
+