jvetrau-ds 0.2.20 → 0.2.23

package/layouts/base/base.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseContentAlign =\n  | 'start'\n  | 'center';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  contentAlign?: LayoutBaseContentAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  contentAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n    'layout-base__content--align-center': contentAlign === 'center',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;\n"]}

package/layouts/base/base.css

@@ -96,6 +96,21 @@
   /* motion */
 }
 
+.layout-base__content > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__content--narrow {
   --layout-base-content-width: 720px;
 }
@@ -108,6 +123,23 @@
   max-width: none;
 }
 
+.layout-base__content--align-center {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__footer {
   /* color */
 
@@ -121,4 +153,4 @@
   /* depth */
 
   /* motion */
-}
+}

package/layouts/base/base.d.ts

@@ -3,10 +3,12 @@ import { type LayoutFoundationWidth } from '../foundation';
 import './base.css';
 export type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
 export type LayoutBaseMainAlign = 'start' | 'center' | 'end';
+export type LayoutBaseContentAlign = 'start' | 'center';
 export interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: LayoutFoundationWidth;
     headerAlign?: LayoutBaseHeaderAlign;
     mainAlign?: LayoutBaseMainAlign;
+    contentAlign?: LayoutBaseContentAlign;
     header?: React.ReactNode;
     footer?: React.ReactNode;
 }

package/layouts/base/base.js

@@ -7,6 +7,7 @@ const LayoutBase = ({
   width = "default",
   headerAlign = "start",
   mainAlign = "start",
+  contentAlign = "start",
   header,
   footer,
   children,
@@ -17,7 +18,8 @@ const LayoutBase = ({
   const contentClasses = classnames("layout-base__content", "", {
     "layout-base__content--narrow": width === "narrow",
     "layout-base__content--wide": width === "wide",
-    "layout-base__content--full": width === "full"
+    "layout-base__content--full": width === "full",
+    "layout-base__content--align-center": contentAlign === "center"
   });
   const headerClasses = classnames("layout-base__header", "", {
     "layout-base__header--align-center": headerAlign === "center",

package/layouts/base/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AA+BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseContentAlign =\n  | 'start'\n  | 'center';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  contentAlign?: LayoutBaseContentAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  contentAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n    'layout-base__content--align-center': contentAlign === 'center',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;\n"]}

package/layouts/sidebar/sidebar.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LayoutFoundation = require('../foundation');
 require('./sidebar.css');
+var classnames = require('../../components/helpers/classnames');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -10,6 +11,7 @@ var LayoutFoundation__default = /*#__PURE__*/_interopDefault(LayoutFoundation);
 
 const LayoutSidebar = ({
   width = "wide",
+  contentAlign = "start",
   header,
   screenHeader,
   sidebar,
@@ -18,6 +20,9 @@ const LayoutSidebar = ({
   className = "",
   ...props
 }) => {
+  const mainClasses = classnames.classnames("layout-sidebar__main", "", {
+    "layout-sidebar__main--align-center": contentAlign === "center"
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     LayoutFoundation__default.default,
     {
@@ -28,7 +33,7 @@ const LayoutSidebar = ({
         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 }),
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children }),
           sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "layout-sidebar__side", children: sidebar })
         ] }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__footer", children: footer })

package/layouts/sidebar/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":["jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;AAeA,MAAM,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,uBACEA,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGFF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EACb,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACCA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.cjs","sourcesContent":["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;"]}
+{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AAqBA,MAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA,GAAe,OAAA;AAAA,EACf,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,MAAM,WAAA,GAAcA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IACzD,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGFF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,EACd,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACCA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutSidebarContentAlign =\n  | 'start'\n  | 'center';\n\nexport interface LayoutSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  contentAlign?: LayoutSidebarContentAlign;\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  contentAlign = 'start',\n  header,\n  screenHeader,\n  sidebar,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const mainClasses = classnames('layout-sidebar__main', '', {\n    'layout-sidebar__main--align-center': contentAlign === 'center',\n  });\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={mainClasses}>\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;\n"]}

package/layouts/sidebar/sidebar.css

@@ -47,6 +47,38 @@
   /* motion */
 }
 
+.layout-sidebar__main--align-center {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__main > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-sidebar__side {
   /* color */
 
@@ -83,4 +115,4 @@
   .layout-sidebar__side {
     grid-column: 1 / -1;
   }
-}
+}

package/layouts/sidebar/sidebar.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { type LayoutFoundationWidth } from '../foundation';
 import './sidebar.css';
+export type LayoutSidebarContentAlign = 'start' | 'center';
 export interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: LayoutFoundationWidth;
+    contentAlign?: LayoutSidebarContentAlign;
     header?: React.ReactNode;
     screenHeader?: React.ReactNode;
     sidebar?: React.ReactNode;

package/layouts/sidebar/sidebar.js

@@ -1,9 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import LayoutFoundation from '../foundation';
 import './sidebar.css';
+import { classnames } from '../../components/helpers/classnames';
 
 const LayoutSidebar = ({
   width = "wide",
+  contentAlign = "start",
   header,
   screenHeader,
   sidebar,
@@ -12,6 +14,9 @@ const LayoutSidebar = ({
   className = "",
   ...props
 }) => {
+  const mainClasses = classnames("layout-sidebar__main", "", {
+    "layout-sidebar__main--align-center": contentAlign === "center"
+  });
   return /* @__PURE__ */ jsxs(
     LayoutFoundation,
     {
@@ -22,7 +27,7 @@ const LayoutSidebar = ({
         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 }),
+          /* @__PURE__ */ jsx("main", { className: mainClasses, children }),
           sidebar && /* @__PURE__ */ jsx("aside", { className: "layout-sidebar__side", children: sidebar })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__footer", children: footer })

package/layouts/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":[],"mappings":";;;;AAeA,MAAM,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,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EACb,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.js","sourcesContent":["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;"]}
+{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":[],"mappings":";;;;;AAqBA,MAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA,GAAe,OAAA;AAAA,EACf,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,MAAM,WAAA,GAAc,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IACzD,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,EACd,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutSidebarContentAlign =\n  | 'start'\n  | 'center';\n\nexport interface LayoutSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  contentAlign?: LayoutSidebarContentAlign;\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  contentAlign = 'start',\n  header,\n  screenHeader,\n  sidebar,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const mainClasses = classnames('layout-sidebar__main', '', {\n    'layout-sidebar__main--align-center': contentAlign === 'center',\n  });\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={mainClasses}>\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;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.20",
+  "version": "0.2.23",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",