jvetrau-ds 0.2.11 → 0.2.13

package/patterns/footer/footer.css

@@ -1,11 +1,9 @@
 .footer {
   /* color */
-/*  color: var(--color-text);
-  background: var(--color-bg);*/
-  border-top:
-    var(--border-size-width-min)
-    solid
-    var(--color-line);
+  /*
+  color: var(--color-text);
+  background: var(--color-bg);
+  */
 
   /* typography */
   font-family: var(--font-note-family);
@@ -15,9 +13,12 @@
   letter-spacing: var(--font-note-letter-spacing);
 
   /* size */
-  display: flex;
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr)
+    auto
+    minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: var(--margin-menu);
 
   width: 100%;
@@ -28,6 +29,10 @@
   box-sizing: border-box;
 
   /* border */
+  border-top:
+    var(--border-size-width-min)
+    solid
+    var(--color-line);
 
   /* depth */
 
@@ -40,10 +45,15 @@
   /* typography */
 
   /* size */
+  grid-column: 1;
+  justify-self: start;
+
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  justify-content: flex-start;
+
+  min-width: 0;
+
   white-space: nowrap;
 
   /* border */
@@ -59,11 +69,15 @@
   /* typography */
 
   /* size */
+  grid-column: 2;
+  justify-self: center;
+
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--margin-menu);
 
-  flex-shrink: 0;
+  min-width: 0;
 
   white-space: nowrap;
 
@@ -74,6 +88,40 @@
   /* motion */
 }
 
+.footer__links--secondary {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: 3;
+  justify-self: end;
+  justify-content: flex-end;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer--without-secondary-links .footer__links {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: 3;
+  justify-self: end;
+  justify-content: flex-end;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .footer__links > * {
   display: flex;
   align-items: center;
@@ -84,8 +132,10 @@
   color: inherit;
 
   /* typography */
-/*  text-decoration: underline;
-  text-underline-position: from-font;*/
+  /*
+  text-decoration: underline;
+  text-underline-position: from-font;
+  */
 
   /* size */
 
@@ -98,8 +148,9 @@
 
 @media (max-width: 1024px) {
   .footer {
-    align-items: flex-start;
+    display: flex;
     flex-direction: column;
+    align-items: flex-start;
     justify-content: flex-start;
   }
 
@@ -110,5 +161,6 @@
 
   .footer__links {
     flex-wrap: wrap;
+    justify-content: flex-start;
   }
 }

package/patterns/footer/footer.js

@@ -1,18 +1,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './footer.css';
+import { classnames } from '../../components/helpers/classnames';
 
 const Footer = ({
   copyright,
   links,
   secondaryLinks,
   children,
+  className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs("footer", { className: "footer", ...props, children: [
-    copyright && /* @__PURE__ */ jsx("div", { className: "footer__copyright", children: copyright }),
-    (links || children) && /* @__PURE__ */ jsx("div", { className: "footer__links", children: links || children }),
-    secondaryLinks && /* @__PURE__ */ jsx("div", { className: "footer__links footer__links--secondary", children: secondaryLinks })
-  ] });
+  const classes = classnames(
+    "footer",
+    className,
+    {
+      "footer--without-secondary-links": !secondaryLinks
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      ...props,
+      className: classes,
+      children: [
+        copyright && /* @__PURE__ */ jsx("div", { className: "footer__copyright", children: copyright }),
+        (links || children) && /* @__PURE__ */ jsx("div", { className: "footer__links", children: links || children }),
+        secondaryLinks && /* @__PURE__ */ jsx("div", { className: "footer__links footer__links--secondary", children: secondaryLinks })
+      ]
+    }
+  );
 };
 var footer_default = Footer;
 

package/patterns/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/footer/footer.tsx"],"names":[],"mappings":";;;AASA,MAAM,SAAgC,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,QAAA,EAAU,GAAG,KAAA,EAC5B,QAAA,EAAA;AAAA,IAAA,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACZ,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,IAAA,CAGA,SAAS,QAAA,qBACT,GAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACZ,mBAAS,QAAA,EACZ,CAAA;AAAA,IAGD,cAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CACZ,QAAA,EAAA,cAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"footer.js","sourcesContent":["import React from 'react';\nimport './footer.css';\n\nexport interface FooterProps extends React.HTMLAttributes<HTMLElement> {\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  secondaryLinks?: React.ReactNode;\n}\n\nconst Footer: React.FC<FooterProps> = ({\n  copyright,\n  links,\n  secondaryLinks,\n  children,\n  ...props\n}) => {\n  return (\n    <footer className=\"footer\" {...props}>\n      {copyright && (\n        <div className=\"footer__copyright\">\n          {copyright}\n        </div>\n      )}\n\n      {(links || children) && (\n        <div className=\"footer__links\">\n          {links || children}\n        </div>\n      )}\n\n      {secondaryLinks && (\n        <div className=\"footer__links footer__links--secondary\">\n          {secondaryLinks}\n        </div>\n      )}\n    </footer>\n  );\n};\n\nexport default Footer;"]}
+{"version":3,"sources":["../../../src/patterns/footer/footer.tsx"],"names":[],"mappings":";;;;AAYA,MAAM,SAAgC,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mCACE,CAAC;AAAA;AACL,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACZ,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,QAAA,CAGA,SAAS,QAAA,qBACT,GAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACZ,mBAAS,QAAA,EACZ,CAAA;AAAA,QAGD,cAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CACZ,QAAA,EAAA,cAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"footer.js","sourcesContent":["import React from 'react';\n\nimport './footer.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface FooterProps\n  extends React.HTMLAttributes<HTMLElement> {\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  secondaryLinks?: React.ReactNode;\n}\n\nconst Footer: React.FC<FooterProps> = ({\n  copyright,\n  links,\n  secondaryLinks,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'footer',\n    className,\n    {\n      'footer--without-secondary-links':\n        !secondaryLinks,\n    },\n  );\n\n  return (\n    <footer\n      {...props}\n      className={classes}\n    >\n      {copyright && (\n        <div className=\"footer__copyright\">\n          {copyright}\n        </div>\n      )}\n\n      {(links || children) && (\n        <div className=\"footer__links\">\n          {links || children}\n        </div>\n      )}\n\n      {secondaryLinks && (\n        <div className=\"footer__links footer__links--secondary\">\n          {secondaryLinks}\n        </div>\n      )}\n    </footer>\n  );\n};\n\nexport default Footer;\n"]}

package/patterns/footer/footer.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const footerMeta: ComponentMeta;

package/styles.css

@@ -3153,6 +3153,144 @@
   /* motion */
 }
 
+/* src/components/form-message/form-message.css */
+.form-message {
+  /* color */
+  --form-message-color:
+    var(--color-text);
+
+  color: var(--form-message-color);
+
+  /* typography */
+  --form-message-font-family:
+    var(--font-body-family);
+  --form-message-font-size:
+    var(--font-body);
+  --form-message-font-weight:
+    var(--font-body-weight);
+  --form-message-line-height:
+    var(--font-body-line);
+  --form-message-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  font-family:
+    var(--form-message-font-family);
+  font-size:
+    var(--form-message-font-size);
+  font-weight:
+    var(--form-message-font-weight);
+  line-height:
+    var(--form-message-line-height);
+  letter-spacing:
+    var(--form-message-letter-spacing);
+
+  /* size */
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--info {
+  /* color */
+  --form-message-color:
+    var(--color-text);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--success {
+  /* color */
+  --form-message-color:
+    var(--color-text-good);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--warning {
+  /* color */
+  --form-message-color:
+    var(--color-text-med);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message--error {
+  /* color */
+  --form-message-color:
+    var(--color-text-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message__item {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font: inherit;
+  letter-spacing: inherit;
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.form-message__item + .form-message__item {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--font-body-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/input/input.css */
 .input {
   /* color */
@@ -5148,12 +5286,10 @@
 /* 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);
+  /*
+  color: var(--color-text);
+  background: var(--color-bg);
+  */
 
   /* typography */
   font-family: var(--font-note-family);
@@ -5163,9 +5299,12 @@
   letter-spacing: var(--font-note-letter-spacing);
 
   /* size */
-  display: flex;
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr)
+    auto
+    minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: var(--margin-menu);
 
   width: 100%;
@@ -5176,6 +5315,10 @@
   box-sizing: border-box;
 
   /* border */
+  border-top:
+    var(--border-size-width-min)
+    solid
+    var(--color-line);
 
   /* depth */
 
@@ -5188,10 +5331,15 @@
   /* typography */
 
   /* size */
+  grid-column: 1;
+  justify-self: start;
+
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  justify-content: flex-start;
+
+  min-width: 0;
+
   white-space: nowrap;
 
   /* border */
@@ -5207,11 +5355,15 @@
   /* typography */
 
   /* size */
+  grid-column: 2;
+  justify-self: center;
+
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--margin-menu);
 
-  flex-shrink: 0;
+  min-width: 0;
 
   white-space: nowrap;
 
@@ -5222,6 +5374,40 @@
   /* motion */
 }
 
+.footer__links--secondary {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: 3;
+  justify-self: end;
+  justify-content: flex-end;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer--without-secondary-links .footer__links {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: 3;
+  justify-self: end;
+  justify-content: flex-end;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .footer__links > * {
   display: flex;
   align-items: center;
@@ -5232,8 +5418,10 @@
   color: inherit;
 
   /* typography */
-/*  text-decoration: underline;
-  text-underline-position: from-font;*/
+  /*
+  text-decoration: underline;
+  text-underline-position: from-font;
+  */
 
   /* size */
 
@@ -5246,8 +5434,9 @@
 
 @media (max-width: 1024px) {
   .footer {
-    align-items: flex-start;
+    display: flex;
     flex-direction: column;
+    align-items: flex-start;
     justify-content: flex-start;
   }
 
@@ -5258,6 +5447,7 @@
 
   .footer__links {
     flex-wrap: wrap;
+    justify-content: flex-start;
   }
 }
 

package/themes/base/desktop.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 12px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 32px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/base/desktop.md

@@ -55,7 +55,7 @@
 | `font/body/letter/spacing` | `float` | `0` |
 | `font/body/line` | `float` | `24` |
 | `font/body/margin` | `float` | `12` |
-| `font/body/weight` | `float` | `300` |
+| `font/body/weight` | `float` | `400` |
 | `font/body/weight/accent` | `float` | `573` |
 | `font/control` | `float` | `24` |
 | `font/control/family` | `string` | `PP Object Sans Variable` |
@@ -98,8 +98,8 @@
 | `font/lead/letter/spacing` | `float` | `0` |
 | `font/lead/line` | `float` | `32` |
 | `font/lead/margin` | `float` | `12` |
-| `font/lead/weight` | `float` | `300` |
-| `font/lead/weight/accent` | `float` | `400` |
+| `font/lead/weight` | `float` | `400` |
+| `font/lead/weight/accent` | `float` | `573` |
 | `font/note` | `float` | `16` |
 | `font/note/family` | `string` | `PP Object Sans Variable` |
 | `font/note/letter/spacing` | `float` | `0` |

package/themes/base/desktop.scoped.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 12px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 32px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/base/diagram.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 8px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 24px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/base/diagram.md

@@ -55,7 +55,7 @@
 | `font/body/letter/spacing` | `float` | `0` |
 | `font/body/line` | `float` | `24` |
 | `font/body/margin` | `float` | `8` |
-| `font/body/weight` | `float` | `300` |
+| `font/body/weight` | `float` | `400` |
 | `font/body/weight/accent` | `float` | `573` |
 | `font/control` | `float` | `20` |
 | `font/control/family` | `string` | `PP Object Sans Variable` |
@@ -98,8 +98,8 @@
 | `font/lead/letter/spacing` | `float` | `0` |
 | `font/lead/line` | `float` | `24` |
 | `font/lead/margin` | `float` | `12` |
-| `font/lead/weight` | `float` | `300` |
-| `font/lead/weight/accent` | `float` | `400` |
+| `font/lead/weight` | `float` | `400` |
+| `font/lead/weight/accent` | `float` | `573` |
 | `font/note` | `float` | `16` |
 | `font/note/family` | `string` | `PP Object Sans Variable` |
 | `font/note/letter/spacing` | `float` | `0` |

package/themes/base/diagram.scoped.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 8px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 24px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/base/mobile.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 20px;
   --font-body-margin: 8px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 24px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/base/mobile.md

@@ -55,7 +55,7 @@
 | `font/body/letter/spacing` | `float` | `0` |
 | `font/body/line` | `float` | `20` |
 | `font/body/margin` | `float` | `8` |
-| `font/body/weight` | `float` | `300` |
+| `font/body/weight` | `float` | `400` |
 | `font/body/weight/accent` | `float` | `573` |
 | `font/control` | `float` | `20` |
 | `font/control/family` | `string` | `PP Object Sans Variable` |
@@ -98,8 +98,8 @@
 | `font/lead/letter/spacing` | `float` | `0` |
 | `font/lead/line` | `float` | `24` |
 | `font/lead/margin` | `float` | `12` |
-| `font/lead/weight` | `float` | `300` |
-| `font/lead/weight/accent` | `float` | `400` |
+| `font/lead/weight` | `float` | `400` |
+| `font/lead/weight/accent` | `float` | `573` |
 | `font/note` | `float` | `16` |
 | `font/note/family` | `string` | `PP Object Sans Variable` |
 | `font/note/letter/spacing` | `float` | `0` |

package/themes/base/mobile.scoped.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 20px;
   --font-body-margin: 8px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 24px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;

package/themes/brandcopilot/desktop.css

@@ -45,7 +45,7 @@
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 12px;
-  --font-body-weight: 300;
+  --font-body-weight: 400;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
@@ -88,8 +88,8 @@
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 32px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 300;
-  --font-lead-weight-accent: 400;
+  --font-lead-weight: 400;
+  --font-lead-weight-accent: 573;
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;