jvetrau-ds 0.1.27 → 0.1.29

package/components/breadcrumbs/breadcrumbs.css

@@ -47,7 +47,6 @@
   color: inherit;
 
   /* typography */
-  text-decoration: underline;
 }
 
 .breadcrumbs__icon {

package/index.cjs

@@ -33,6 +33,7 @@ var modal = require('./patterns/modal');
 var foundation = require('./layouts/foundation');
 var base = require('./layouts/base');
 var sidebar = require('./layouts/sidebar');
+var auth = require('./layouts/auth');
 var breadcrumbs = require('./components/breadcrumbs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -70,6 +71,7 @@ var modal__default = /*#__PURE__*/_interopDefault(modal);
 var foundation__default = /*#__PURE__*/_interopDefault(foundation);
 var base__default = /*#__PURE__*/_interopDefault(base);
 var sidebar__default = /*#__PURE__*/_interopDefault(sidebar);
+var auth__default = /*#__PURE__*/_interopDefault(auth);
 var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 
 
@@ -206,6 +208,10 @@ Object.defineProperty(exports, "LayoutSidebar", {
   enumerable: true,
   get: function () { return sidebar__default.default; }
 });
+Object.defineProperty(exports, "LayoutAuth", {
+  enumerable: true,
+  get: function () { return auth__default.default; }
+});
 Object.defineProperty(exports, "Breadcrumbs", {
   enumerable: true,
   get: function () { return breadcrumbs__default.default; }

package/index.d.cts

@@ -31,6 +31,7 @@ export { default as Modal, ModalProps } from './patterns/modal/modal.cjs';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.cjs';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.cjs';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.cjs';
+export { default as LayoutAuth, LayoutAuthProps } from './layouts/auth/auth.cjs';
 export { default as Breadcrumbs, BreadcrumbsProps } from './components/breadcrumbs/breadcrumbs.cjs';
 import 'react';
 import './types-By9fL_Nu.cjs';

package/index.d.ts

@@ -31,6 +31,7 @@ export { default as Modal, ModalProps } from './patterns/modal/modal.js';
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './layouts/foundation/foundation.js';
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.js';
+export { default as LayoutAuth, LayoutAuthProps } from './layouts/auth/auth.js';
 export { default as Breadcrumbs, BreadcrumbsProps } from './components/breadcrumbs/breadcrumbs.js';
 import 'react';
 import './types-By9fL_Nu.js';

package/index.js

@@ -31,6 +31,7 @@ export { default as Modal } from './patterns/modal';
 export { default as LayoutFoundation } from './layouts/foundation';
 export { default as LayoutBase } from './layouts/base';
 export { default as LayoutSidebar } from './layouts/sidebar';
+export { default as LayoutAuth } from './layouts/auth';
 export { default as Breadcrumbs } from './components/breadcrumbs';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/layouts/auth/auth.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LayoutBase = require('../base');
+require('./auth.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var LayoutBase__default = /*#__PURE__*/_interopDefault(LayoutBase);
+
+const LayoutAuth = ({
+  brand,
+  footer,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutBase__default.default,
+    {
+      width: "narrow",
+      headerAlign: "end",
+      mainAlign: "center",
+      header: brand,
+      footer,
+      ...props,
+      children
+    }
+  );
+};
+var auth_default = LayoutAuth;
+
+module.exports = auth_default;
+//# sourceMappingURL=auth.cjs.map
+//# sourceMappingURL=auth.cjs.map

package/layouts/auth/auth.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":["jsx","LayoutBase"],"mappings":";;;;;;;;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACEA,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.cjs","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  ...props\n}) => {\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;"]}

package/layouts/auth/auth.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface LayoutAuthProps extends React.HTMLAttributes<HTMLDivElement> {
+    brand?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutAuth: React.FC<LayoutAuthProps>;
+
+export { type LayoutAuthProps, LayoutAuth as default };

package/layouts/auth/auth.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface LayoutAuthProps extends React.HTMLAttributes<HTMLDivElement> {
+    brand?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const LayoutAuth: React.FC<LayoutAuthProps>;
+
+export { type LayoutAuthProps, LayoutAuth as default };

package/layouts/auth/auth.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import LayoutBase from '../base';
+import './auth.css';
+
+const LayoutAuth = ({
+  brand,
+  footer,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    LayoutBase,
+    {
+      width: "narrow",
+      headerAlign: "end",
+      mainAlign: "center",
+      header: brand,
+      footer,
+      ...props,
+      children
+    }
+  );
+};
+var auth_default = LayoutAuth;
+
+export { auth_default as default };
+//# sourceMappingURL=auth.js.map
+//# sourceMappingURL=auth.js.map

package/layouts/auth/auth.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":[],"mappings":";;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.js","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  ...props\n}) => {\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;"]}

package/layouts/auth/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var auth = require('./auth');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var auth__default = /*#__PURE__*/_interopDefault(auth);
+
+
+
+module.exports = auth__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/layouts/auth/index.cjs.map

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

package/layouts/auth/index.d.cts

@@ -0,0 +1,2 @@
+export { LayoutAuthProps, default } from './auth.cjs';
+import 'react';

package/layouts/auth/index.d.ts

@@ -0,0 +1,2 @@
+export { LayoutAuthProps, default } from './auth.js';
+import 'react';

package/layouts/auth/index.js

@@ -0,0 +1,3 @@
+export { default } from './auth';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/layouts/auth/index.js.map

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

package/layouts/base/base.cjs

@@ -19,6 +19,7 @@ const LayoutBase = ({
   className = "",
   ...props
 }) => {
+  const classes = classnames.classnames("layout-base", className, {});
   const contentClasses = classnames.classnames("layout-base__content", "", {
     "layout-base__content--narrow": width === "narrow",
     "layout-base__content--wide": width === "wide",
@@ -32,17 +33,17 @@ const LayoutBase = ({
     "layout-base__main--align-center": mainAlign === "center",
     "layout-base__main--align-end": mainAlign === "end"
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     LayoutFoundation__default.default,
     {
       width: "full",
-      className,
+      className: classes,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-base", children: [
+      children: [
         header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: header }),
         /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children }) }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
-      ] })
+      ]
     }
   );
 };

package/layouts/base/base.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"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,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,cAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCF,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,OAAA,EAEJ;AAAA;AAAA,GACF;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 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={className}\n      {...props}\n    >\n      <div className=\"layout-base\">\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      </div>\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"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;"]}

package/layouts/base/base.css

@@ -1,4 +1,4 @@
-.layout-base {
+.layout-base .layout-foundation__grid {
   /* color */
 
   /* typography */
@@ -6,17 +6,10 @@
   /* size */
   --layout-base-header-height: 120px;
 
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  min-height:
-    calc(
-      100dvh -
-      (
-        var(--layout-foundation-padding-vert) * 2
-      )
-    );
+  grid-template-rows:
+    auto
+    minmax(0, 1fr)
+    auto;
 
   /* border */
 
@@ -36,7 +29,8 @@
   justify-content: center;
 
   width: 100%;
-  min-height: var(--layout-base-header-height);
+  min-height:
+    var(--layout-base-header-height);
 
   /* border */
 
@@ -60,19 +54,14 @@
 
   /* size */
   display: flex;
-  flex: 1;
-  justify-content: center;
   align-items: flex-start;
+  justify-content: center;
+
+  align-self: stretch;
 
   width: 100%;
   min-width: 0;
 
-  padding:
-    var(--layout-foundation-padding-vert)
-    var(--layout-foundation-padding-horz);
-
-  box-sizing: border-box;
-
   /* border */
 
   /* depth */
@@ -97,7 +86,8 @@
   --layout-base-content-width: 960px;
 
   width: 100%;
-  max-width: var(--layout-base-content-width);
+  max-width:
+    var(--layout-base-content-width);
 
   /* border */
 

package/layouts/base/base.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import LayoutFoundation from '../foundation';
 import './base.css';
 import { classnames } from '../../components/helpers/classnames';
@@ -13,6 +13,7 @@ const LayoutBase = ({
   className = "",
   ...props
 }) => {
+  const classes = classnames("layout-base", className, {});
   const contentClasses = classnames("layout-base__content", "", {
     "layout-base__content--narrow": width === "narrow",
     "layout-base__content--wide": width === "wide",
@@ -26,17 +27,17 @@ const LayoutBase = ({
     "layout-base__main--align-center": mainAlign === "center",
     "layout-base__main--align-end": mainAlign === "end"
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     LayoutFoundation,
     {
       width: "full",
-      className,
+      className: classes,
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "layout-base", children: [
+      children: [
         header && /* @__PURE__ */ jsx("div", { className: headerClasses, children: header }),
         /* @__PURE__ */ jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsx("div", { className: contentClasses, children }) }),
         footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
-      ] })
+      ]
     }
   );
 };

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,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,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,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,OAAA,EAEJ;AAAA;AAAA,GACF;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 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={className}\n      {...props}\n    >\n      <div className=\"layout-base\">\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      </div>\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"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;"]}

package/layouts/public.cjs

@@ -3,12 +3,14 @@
 var foundation = require('./foundation');
 var base = require('./base');
 var sidebar = require('./sidebar');
+var auth = require('./auth');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var foundation__default = /*#__PURE__*/_interopDefault(foundation);
 var base__default = /*#__PURE__*/_interopDefault(base);
 var sidebar__default = /*#__PURE__*/_interopDefault(sidebar);
+var auth__default = /*#__PURE__*/_interopDefault(auth);
 
 
 
@@ -24,5 +26,9 @@ Object.defineProperty(exports, "LayoutSidebar", {
   enumerable: true,
   get: function () { return sidebar__default.default; }
 });
+Object.defineProperty(exports, "LayoutAuth", {
+  enumerable: true,
+  get: function () { return auth__default.default; }
+});
 //# sourceMappingURL=public.cjs.map
 //# sourceMappingURL=public.cjs.map

package/layouts/public.d.cts

@@ -1,4 +1,5 @@
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './foundation/foundation.cjs';
 export { default as LayoutBase, LayoutBaseProps } from './base/base.cjs';
 export { default as LayoutSidebar, LayoutSidebarProps } from './sidebar/sidebar.cjs';
+export { default as LayoutAuth, LayoutAuthProps } from './auth/auth.cjs';
 import 'react';

package/layouts/public.d.ts

@@ -1,4 +1,5 @@
 export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth } from './foundation/foundation.js';
 export { default as LayoutBase, LayoutBaseProps } from './base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './sidebar/sidebar.js';
+export { default as LayoutAuth, LayoutAuthProps } from './auth/auth.js';
 import 'react';

package/layouts/public.js

@@ -1,5 +1,6 @@
 export { default as LayoutFoundation } from './foundation';
 export { default as LayoutBase } from './base';
 export { default as LayoutSidebar } from './sidebar';
+export { default as LayoutAuth } from './auth';
 //# sourceMappingURL=public.js.map
 //# sourceMappingURL=public.js.map

package/package.json

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

package/patterns/footer/footer.css

@@ -84,8 +84,8 @@
   color: inherit;
 
   /* typography */
-  text-decoration: underline;
-  text-underline-position: from-font;
+/*  text-decoration: underline;
+  text-underline-position: from-font;*/
 
   /* size */
 

package/styles.css

@@ -290,7 +290,6 @@
   color: inherit;
 
   /* typography */
-  text-decoration: underline;
 }
 
 .breadcrumbs__icon {
@@ -2589,8 +2588,8 @@
   color: inherit;
 
   /* typography */
-  text-decoration: underline;
-  text-underline-position: from-font;
+/*  text-decoration: underline;
+  text-underline-position: from-font;*/
 
   /* size */
 
@@ -2962,8 +2961,11 @@
   /* motion */
 }
 
+/* src/layouts/auth/auth.css */
+
+
 /* src/layouts/base/base.css */
-.layout-base {
+.layout-base .layout-foundation__grid {
   /* color */
 
   /* typography */
@@ -2971,17 +2973,10 @@
   /* size */
   --layout-base-header-height: 120px;
 
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  min-height:
-    calc(
-      100dvh -
-      (
-        var(--layout-foundation-padding-vert) * 2
-      )
-    );
+  grid-template-rows:
+    auto
+    minmax(0, 1fr)
+    auto;
 
   /* border */
 
@@ -3001,7 +2996,8 @@
   justify-content: center;
 
   width: 100%;
-  min-height: var(--layout-base-header-height);
+  min-height:
+    var(--layout-base-header-height);
 
   /* border */
 
@@ -3025,19 +3021,14 @@
 
   /* size */
   display: flex;
-  flex: 1;
-  justify-content: center;
   align-items: flex-start;
+  justify-content: center;
+
+  align-self: stretch;
 
   width: 100%;
   min-width: 0;
 
-  padding:
-    var(--layout-foundation-padding-vert)
-    var(--layout-foundation-padding-horz);
-
-  box-sizing: border-box;
-
   /* border */
 
   /* depth */
@@ -3062,7 +3053,8 @@
   --layout-base-content-width: 960px;
 
   width: 100%;
-  max-width: var(--layout-base-content-width);
+  max-width:
+    var(--layout-base-content-width);
 
   /* border */