jvetrau-ds 0.2.24 → 0.2.26

package/components/form-message/form-message.cjs

@@ -5,6 +5,7 @@ require('./form-message.css');
 var classnames = require('../helpers/classnames');
 
 const FormMessageItem = ({
+  status = "default",
   children,
   className = "",
   ...props
@@ -12,19 +13,25 @@ const FormMessageItem = ({
   const classes = classnames.classnames(
     "form-message__item",
     className,
-    {}
+    {
+      "form-message__item--default": status === "default",
+      "form-message__item--success": status === "success",
+      "form-message__item--warning": status === "warning",
+      "form-message__item--error": status === "error"
+    }
   );
+  const role = status === "error" ? "alert" : status === "success" || status === "warning" ? "status" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
       ...props,
       className: classes,
+      role,
       children
     }
   );
 };
 const FormMessage = ({
-  status,
   children,
   className = "",
   ...props
@@ -32,20 +39,13 @@ const FormMessage = ({
   const classes = classnames.classnames(
     "form-message",
     className,
-    {
-      "form-message--info": status === "info",
-      "form-message--success": status === "success",
-      "form-message--warning": status === "warning",
-      "form-message--error": status === "error"
-    }
+    {}
   );
-  const role = status === "error" ? "alert" : "status";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...props,
       className: classes,
-      role,
       children
     }
   );

package/components/form-message/form-message.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.cjs","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,MAAA,GAAS,SAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,6BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,WAAW,OAAA,GACP,OAAA,GACA,WAAW,SAAA,IACT,MAAA,KAAW,YACX,QAAA,GACA,MAAA;AAER,EAAA,uBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.cjs","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'default'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  status?: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  status = 'default',\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {\n      'form-message__item--default':\n        status === 'default',\n      'form-message__item--success':\n        status === 'success',\n      'form-message__item--warning':\n        status === 'warning',\n      'form-message__item--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : status === 'success' ||\n          status === 'warning'\n        ? 'status'\n        : undefined;\n\n  return (\n    <p\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/form-message/form-message.css

@@ -38,14 +38,19 @@
   /* motion */
 }
 
-.form-message--info {
+.form-message__item {
   /* color */
-  --form-message-color:
-    var(--color-text);
+  --form-message-item-color:
+    var(--form-message-color);
+
+  color: var(--form-message-item-color);
 
   /* typography */
+  font: inherit;
+  letter-spacing: inherit;
 
   /* size */
+  margin: 0;
 
   /* border */
 
@@ -54,10 +59,10 @@
   /* motion */
 }
 
-.form-message--success {
+.form-message__item--default {
   /* color */
-  --form-message-color:
-    var(--color-text-good);
+  --form-message-item-color:
+    var(--form-message-color);
 
   /* typography */
 
@@ -70,10 +75,10 @@
   /* motion */
 }
 
-.form-message--warning {
+.form-message__item--success {
   /* color */
-  --form-message-color:
-    var(--color-text-med);
+  --form-message-item-color:
+    var(--color-text-good);
 
   /* typography */
 
@@ -86,10 +91,10 @@
   /* motion */
 }
 
-.form-message--error {
+.form-message__item--warning {
   /* color */
-  --form-message-color:
-    var(--color-text-bad);
+  --form-message-item-color:
+    var(--color-text-med);
 
   /* typography */
 
@@ -102,16 +107,14 @@
   /* motion */
 }
 
-.form-message__item {
+.form-message__item--error {
   /* color */
-  color: inherit;
+  --form-message-item-color:
+    var(--color-text-bad);
 
   /* typography */
-  font: inherit;
-  letter-spacing: inherit;
 
   /* size */
-  margin: 0;
 
   /* border */
 
@@ -133,4 +136,4 @@
   /* depth */
 
   /* motion */
-}
+}

package/components/form-message/form-message.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import './form-message.css';
-export type FormMessageStatus = 'info' | 'success' | 'warning' | 'error';
+export type FormMessageStatus = 'default' | 'success' | 'warning' | 'error';
 export interface FormMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    status: FormMessageStatus;
     children: React.ReactNode;
 }
 export interface FormMessageItemProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    status?: FormMessageStatus;
     children: React.ReactNode;
 }
 interface FormMessageComponent extends React.FC<FormMessageProps> {

package/components/form-message/form-message.js

@@ -3,6 +3,7 @@ import './form-message.css';
 import { classnames } from '../helpers/classnames';
 
 const FormMessageItem = ({
+  status = "default",
   children,
   className = "",
   ...props
@@ -10,19 +11,25 @@ const FormMessageItem = ({
   const classes = classnames(
     "form-message__item",
     className,
-    {}
+    {
+      "form-message__item--default": status === "default",
+      "form-message__item--success": status === "success",
+      "form-message__item--warning": status === "warning",
+      "form-message__item--error": status === "error"
+    }
   );
+  const role = status === "error" ? "alert" : status === "success" || status === "warning" ? "status" : void 0;
   return /* @__PURE__ */ jsx(
     "p",
     {
       ...props,
       className: classes,
+      role,
       children
     }
   );
 };
 const FormMessage = ({
-  status,
   children,
   className = "",
   ...props
@@ -30,20 +37,13 @@ const FormMessage = ({
   const classes = classnames(
     "form-message",
     className,
-    {
-      "form-message--info": status === "info",
-      "form-message--success": status === "success",
-      "form-message--warning": status === "warning",
-      "form-message--error": status === "error"
-    }
+    {}
   );
-  const role = status === "error" ? "alert" : "status";
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...props,
       className: classes,
-      role,
       children
     }
   );

package/components/form-message/form-message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.js","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,MAAA,GAAS,SAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,6BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,WAAW,OAAA,GACP,OAAA,GACA,WAAW,SAAA,IACT,MAAA,KAAW,YACX,QAAA,GACA,MAAA;AAER,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.js","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'default'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  status?: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  status = 'default',\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {\n      'form-message__item--default':\n        status === 'default',\n      'form-message__item--success':\n        status === 'success',\n      'form-message__item--warning':\n        status === 'warning',\n      'form-message__item--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : status === 'success' ||\n          status === 'warning'\n        ? 'status'\n        : undefined;\n\n  return (\n    <p\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/surface/surface.css

@@ -72,6 +72,21 @@
   /* motion */
 }
 
+.surface--secondary a {
+  /* color */
+  --link-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);

package/index.cjs

@@ -37,6 +37,7 @@ var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
 var form = require('./patterns/form');
+var formComp = require('./patterns/form-comp');
 var masthead = require('./patterns/masthead');
 var modal = require('./patterns/modal');
 var foundation = require('./layouts/foundation');
@@ -82,6 +83,7 @@ var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
 var form__default = /*#__PURE__*/_interopDefault(form);
+var formComp__default = /*#__PURE__*/_interopDefault(formComp);
 var masthead__default = /*#__PURE__*/_interopDefault(masthead);
 var modal__default = /*#__PURE__*/_interopDefault(modal);
 var foundation__default = /*#__PURE__*/_interopDefault(foundation);
@@ -239,6 +241,10 @@ Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () { return form__default.default; }
 });
+Object.defineProperty(exports, "FormComp", {
+  enumerable: true,
+  get: function () { return formComp__default.default; }
+});
 Object.defineProperty(exports, "Masthead", {
   enumerable: true,
   get: function () { return masthead__default.default; }

package/index.d.ts

@@ -76,6 +76,8 @@ export { default as ScreenHeader } from './patterns/screen-header';
 export type { ScreenHeaderProps } from './patterns/screen-header';
 export { default as Form } from './patterns/form';
 export type { FormProps } from './patterns/form';
+export { default as FormComp } from './patterns/form-comp';
+export type { FormCompProps } from './patterns/form-comp';
 export { default as Masthead } from './patterns/masthead';
 export type { MastheadProps } from './patterns/masthead';
 export { default as Modal } from './patterns/modal';

package/index.js

@@ -35,6 +35,7 @@ export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';
 export { default as Form } from './patterns/form';
+export { default as FormComp } from './patterns/form-comp';
 export { default as Masthead } from './patterns/masthead';
 export { default as Modal } from './patterns/modal';
 export { default as LayoutFoundation } from './layouts/foundation';

package/package.json

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

package/patterns/form-comp/form-comp.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./form-comp.css');
+var classnames = require('../../components/helpers/classnames');
+
+const FormComp = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "form-comp",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var form_comp_default = FormComp;
+
+module.exports = form_comp_default;
+//# sourceMappingURL=form-comp.cjs.map
+//# sourceMappingURL=form-comp.cjs.map

package/patterns/form-comp/form-comp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/form-comp/form-comp.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAQA,MAAM,WAAoC,CAAC;AAAA,EACzC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,iBAAA,GAAQ","file":"form-comp.cjs","sourcesContent":["import React from 'react';\n\nimport './form-comp.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface FormCompProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst FormComp: React.FC<FormCompProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'form-comp',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FormComp;\n"]}

package/patterns/form-comp/form-comp.css

@@ -0,0 +1,16 @@
+.form-comp {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--margin-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/patterns/form-comp/form-comp.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './form-comp.css';
+export interface FormCompProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const FormComp: React.FC<FormCompProps>;
+export default FormComp;

package/patterns/form-comp/form-comp.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import './form-comp.css';
+import { classnames } from '../../components/helpers/classnames';
+
+const FormComp = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames(
+    "form-comp",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var form_comp_default = FormComp;
+
+export { form_comp_default as default };
+//# sourceMappingURL=form-comp.js.map
+//# sourceMappingURL=form-comp.js.map

package/patterns/form-comp/form-comp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/patterns/form-comp/form-comp.tsx"],"names":[],"mappings":";;;;AAQA,MAAM,WAAoC,CAAC;AAAA,EACzC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,iBAAA,GAAQ","file":"form-comp.js","sourcesContent":["import React from 'react';\n\nimport './form-comp.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface FormCompProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst FormComp: React.FC<FormCompProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'form-comp',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FormComp;\n"]}

package/patterns/form-comp/form-comp.meta.d.ts

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

package/patterns/form-comp/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formComp = require('./form-comp');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var formComp__default = /*#__PURE__*/_interopDefault(formComp);
+
+
+
+Object.defineProperty(exports, "FormComp", {
+  enumerable: true,
+  get: function () { return formComp__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return formComp__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/patterns/form-comp/index.cjs.map

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

package/patterns/form-comp/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './form-comp';
+export { default as FormComp } from './form-comp';
+export type { FormCompProps } from './form-comp';

package/patterns/form-comp/index.js

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

package/patterns/form-comp/index.js.map

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

package/patterns/index.cjs

@@ -4,6 +4,7 @@ var header = require('./header');
 var footer = require('./footer');
 var screenHeader = require('./screen-header');
 var form = require('./form');
+var formComp = require('./form-comp');
 var masthead = require('./masthead');
 var modal = require('./modal');
 
@@ -13,6 +14,7 @@ var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
 var form__default = /*#__PURE__*/_interopDefault(form);
+var formComp__default = /*#__PURE__*/_interopDefault(formComp);
 var masthead__default = /*#__PURE__*/_interopDefault(masthead);
 var modal__default = /*#__PURE__*/_interopDefault(modal);
 
@@ -34,6 +36,10 @@ Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () { return form__default.default; }
 });
+Object.defineProperty(exports, "FormComp", {
+  enumerable: true,
+  get: function () { return formComp__default.default; }
+});
 Object.defineProperty(exports, "Masthead", {
   enumerable: true,
   get: function () { return masthead__default.default; }

package/patterns/index.d.ts

@@ -6,6 +6,8 @@ export { default as ScreenHeader } from './screen-header';
 export type { ScreenHeaderProps } from './screen-header';
 export { default as Form } from './form';
 export type { FormProps } from './form';
+export { default as FormComp } from './form-comp';
+export type { FormCompProps } from './form-comp';
 export { default as Masthead } from './masthead';
 export type { MastheadProps } from './masthead';
 export { default as Modal } from './modal';

package/patterns/index.js

@@ -2,6 +2,7 @@ export { default as Header } from './header';
 export { default as Footer } from './footer';
 export { default as ScreenHeader } from './screen-header';
 export { default as Form } from './form';
+export { default as FormComp } from './form-comp';
 export { default as Masthead } from './masthead';
 export { default as Modal } from './modal';
 //# sourceMappingURL=index.js.map

package/styles.css

@@ -3469,14 +3469,19 @@
   /* motion */
 }
 
-.form-message--info {
+.form-message__item {
   /* color */
-  --form-message-color:
-    var(--color-text);
+  --form-message-item-color:
+    var(--form-message-color);
+
+  color: var(--form-message-item-color);
 
   /* typography */
+  font: inherit;
+  letter-spacing: inherit;
 
   /* size */
+  margin: 0;
 
   /* border */
 
@@ -3485,10 +3490,10 @@
   /* motion */
 }
 
-.form-message--success {
+.form-message__item--default {
   /* color */
-  --form-message-color:
-    var(--color-text-good);
+  --form-message-item-color:
+    var(--form-message-color);
 
   /* typography */
 
@@ -3501,10 +3506,10 @@
   /* motion */
 }
 
-.form-message--warning {
+.form-message__item--success {
   /* color */
-  --form-message-color:
-    var(--color-text-med);
+  --form-message-item-color:
+    var(--color-text-good);
 
   /* typography */
 
@@ -3517,10 +3522,10 @@
   /* motion */
 }
 
-.form-message--error {
+.form-message__item--warning {
   /* color */
-  --form-message-color:
-    var(--color-text-bad);
+  --form-message-item-color:
+    var(--color-text-med);
 
   /* typography */
 
@@ -3533,16 +3538,14 @@
   /* motion */
 }
 
-.form-message__item {
+.form-message__item--error {
   /* color */
-  color: inherit;
+  --form-message-item-color:
+    var(--color-text-bad);
 
   /* typography */
-  font: inherit;
-  letter-spacing: inherit;
 
   /* size */
-  margin: 0;
 
   /* border */
 
@@ -4743,6 +4746,21 @@
   /* motion */
 }
 
+.surface--secondary a {
+  /* color */
+  --link-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);
@@ -5695,6 +5713,24 @@
   /* motion */
 }
 
+/* src/patterns/form-comp/form-comp.css */
+.form-comp {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--margin-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/patterns/header/header.css */
 .header {
   /* color */

package/themes/base/desktop.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;