jvetrau-ds 0.2.11 → 0.2.12

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./form-message.css');
+var classnames = require('../helpers/classnames');
+
+const FormMessageItem = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "form-message__item",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ...props,
+      className: classes,
+      children
+    }
+  );
+};
+const FormMessage = ({
+  status,
+  children,
+  className = "",
+  ...props
+}) => {
+  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
+    }
+  );
+};
+FormMessage.Item = FormMessageItem;
+var form_message_default = FormMessage;
+
+module.exports = form_message_default;
+//# sourceMappingURL=form-message.cjs.map
+//# sourceMappingURL=form-message.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,136 @@
+.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 */
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './form-message.css';
+export type FormMessageStatus = 'info' | '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'> {
+    children: React.ReactNode;
+}
+interface FormMessageComponent extends React.FC<FormMessageProps> {
+    Item: React.FC<FormMessageItemProps>;
+}
+declare const FormMessage: FormMessageComponent;
+export default FormMessage;

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

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import './form-message.css';
+import { classnames } from '../helpers/classnames';
+
+const FormMessageItem = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "form-message__item",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: classes,
+      children
+    }
+  );
+};
+const FormMessage = ({
+  status,
+  children,
+  className = "",
+  ...props
+}) => {
+  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
+    }
+  );
+};
+FormMessage.Item = FormMessageItem;
+var form_message_default = FormMessage;
+
+export { form_message_default as default };
+//# sourceMappingURL=form-message.js.map
+//# sourceMappingURL=form-message.js.map

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

@@ -0,0 +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"]}

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

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

package/components/form-message/index.cjs

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

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './form-message';
+export { default as FormMessage, } from './form-message';
+export type { FormMessageItemProps, FormMessageProps, FormMessageStatus, } from './form-message';

package/components/form-message/index.js

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

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

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

package/components/index.cjs

@@ -8,6 +8,8 @@ var dropdown = require('./dropdown/dropdown');
 var checkbox = require('./checkbox/checkbox');
 var radio = require('./radio/radio');
 var field = require('./field/field');
+var fieldGroup = require('./field-group/field-group');
+var formMessage = require('./form-message');
 var menu = require('./menu/menu');
 var tabs = require('./tabs/tabs');
 var tag = require('./tag/tag');
@@ -19,7 +21,6 @@ var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
 var actionGroup = require('./action-group/action-group');
-var fieldGroup = require('./field-group/field-group');
 var cardGroup = require('./card-group/card-group');
 var breadcrumbs = require('./breadcrumbs/breadcrumbs');
 var markdown = require('./markdown/markdown');
@@ -39,6 +40,8 @@ var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
 var field__default = /*#__PURE__*/_interopDefault(field);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
 var menu__default = /*#__PURE__*/_interopDefault(menu);
 var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var tag__default = /*#__PURE__*/_interopDefault(tag);
@@ -50,7 +53,6 @@ var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
 var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
-var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
 var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 var markdown__default = /*#__PURE__*/_interopDefault(markdown);
@@ -97,6 +99,14 @@ Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }
 });
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
+Object.defineProperty(exports, "FormMessage", {
+  enumerable: true,
+  get: function () { return formMessage__default.default; }
+});
 Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () { return menu__default.default; }
@@ -141,10 +151,6 @@ Object.defineProperty(exports, "ActionGroup", {
   enumerable: true,
   get: function () { return actionGroup__default.default; }
 });
-Object.defineProperty(exports, "FieldGroup", {
-  enumerable: true,
-  get: function () { return fieldGroup__default.default; }
-});
 Object.defineProperty(exports, "CardGroup", {
   enumerable: true,
   get: function () { return cardGroup__default.default; }

package/components/index.d.ts

@@ -15,6 +15,10 @@ export { default as Radio } from './radio/radio';
 export type { RadioProps } from './radio/radio';
 export { default as Field } from './field/field';
 export type { FieldProps } from './field/field';
+export { default as FieldGroup } from './field-group/field-group';
+export type { FieldGroupProps } from './field-group/field-group';
+export { default as FormMessage } from './form-message';
+export type { FormMessageItemProps, FormMessageProps, FormMessageStatus, } from './form-message';
 export { default as Menu } from './menu/menu';
 export type { MenuItem, MenuProps, } from './menu/menu';
 export { default as Tabs } from './tabs/tabs';
@@ -37,8 +41,6 @@ export { default as Attach } from './attach/attach';
 export type { AttachItem, AttachProps, } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
 export type { ActionGroupProps } from './action-group/action-group';
-export { default as FieldGroup } from './field-group/field-group';
-export type { FieldGroupProps } from './field-group/field-group';
 export { default as CardGroup } from './card-group/card-group';
 export type { CardGroupProps } from './card-group/card-group';
 export { default as Breadcrumbs } from './breadcrumbs/breadcrumbs';

package/components/index.js

@@ -6,6 +6,8 @@ export { default as Dropdown } from './dropdown/dropdown';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as Radio } from './radio/radio';
 export { default as Field } from './field/field';
+export { default as FieldGroup } from './field-group/field-group';
+export { default as FormMessage } from './form-message';
 export { default as Menu } from './menu/menu';
 export { default as Tabs } from './tabs/tabs';
 export { default as Tag } from './tag/tag';
@@ -17,7 +19,6 @@ export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
-export { default as FieldGroup } from './field-group/field-group';
 export { default as CardGroup } from './card-group/card-group';
 export { default as Breadcrumbs } from './breadcrumbs/breadcrumbs';
 export { default as Markdown } from './markdown/markdown';

package/index.cjs

@@ -8,6 +8,8 @@ var dropdown = require('./components/dropdown');
 var checkbox = require('./components/checkbox');
 var radio = require('./components/radio');
 var field = require('./components/field');
+var fieldGroup = require('./components/field-group');
+var formMessage = require('./components/form-message');
 var menu = require('./components/menu');
 var tabs = require('./components/tabs');
 var video = require('./components/video');
@@ -21,7 +23,6 @@ var logo = require('./components/logo');
 var avatar = require('./components/avatar');
 var attach = require('./components/attach');
 var actionGroup = require('./components/action-group');
-var fieldGroup = require('./components/field-group');
 var cardGroup = require('./components/card-group');
 var breadcrumbs = require('./components/breadcrumbs');
 var markdown = require('./components/markdown');
@@ -51,6 +52,8 @@ var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
 var field__default = /*#__PURE__*/_interopDefault(field);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
 var menu__default = /*#__PURE__*/_interopDefault(menu);
 var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var video__default = /*#__PURE__*/_interopDefault(video);
@@ -64,7 +67,6 @@ var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
 var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
-var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 var cardGroup__default = /*#__PURE__*/_interopDefault(cardGroup);
 var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 var markdown__default = /*#__PURE__*/_interopDefault(markdown);
@@ -121,6 +123,14 @@ Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }
 });
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
+Object.defineProperty(exports, "FormMessage", {
+  enumerable: true,
+  get: function () { return formMessage__default.default; }
+});
 Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () { return menu__default.default; }
@@ -173,10 +183,6 @@ Object.defineProperty(exports, "ActionGroup", {
   enumerable: true,
   get: function () { return actionGroup__default.default; }
 });
-Object.defineProperty(exports, "FieldGroup", {
-  enumerable: true,
-  get: function () { return fieldGroup__default.default; }
-});
 Object.defineProperty(exports, "CardGroup", {
   enumerable: true,
   get: function () { return cardGroup__default.default; }

package/index.d.ts

@@ -18,6 +18,10 @@ export { default as Radio } from './components/radio';
 export type { RadioProps } from './components/radio';
 export { default as Field } from './components/field';
 export type { FieldProps } from './components/field';
+export { default as FieldGroup } from './components/field-group';
+export type { FieldGroupProps } from './components/field-group';
+export { default as FormMessage } from './components/form-message';
+export type { FormMessageItemProps, FormMessageProps, FormMessageStatus, } from './components/form-message';
 export { default as Menu } from './components/menu';
 export type { MenuProps } from './components/menu';
 export { default as Tabs } from './components/tabs';
@@ -44,8 +48,6 @@ export { default as Attach } from './components/attach';
 export type { AttachItem, AttachProps, } from './components/attach';
 export { default as ActionGroup } from './components/action-group';
 export type { ActionGroupProps } from './components/action-group';
-export { default as FieldGroup } from './components/field-group';
-export type { FieldGroupProps } from './components/field-group';
 export { default as CardGroup } from './components/card-group';
 export type { CardGroupProps } from './components/card-group';
 export { default as Breadcrumbs } from './components/breadcrumbs';

package/index.js

@@ -6,6 +6,8 @@ export { default as Dropdown } from './components/dropdown';
 export { default as Checkbox } from './components/checkbox';
 export { default as Radio } from './components/radio';
 export { default as Field } from './components/field';
+export { default as FieldGroup } from './components/field-group';
+export { default as FormMessage } from './components/form-message';
 export { default as Menu } from './components/menu';
 export { default as Tabs } from './components/tabs';
 export { default as Video } from './components/video';
@@ -19,7 +21,6 @@ export { default as Logo } from './components/logo';
 export { default as Avatar } from './components/avatar';
 export { default as Attach } from './components/attach';
 export { default as ActionGroup } from './components/action-group';
-export { default as FieldGroup } from './components/field-group';
 export { default as CardGroup } from './components/card-group';
 export { default as Breadcrumbs } from './components/breadcrumbs';
 export { default as Markdown } from './components/markdown';

package/package.json

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

package/patterns/footer/footer.cjs

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

package/patterns/footer/footer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/footer/footer.tsx"],"names":["jsxs","jsx"],"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,uBACEA,eAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,QAAA,EAAU,GAAG,KAAA,EAC5B,QAAA,EAAA;AAAA,IAAA,SAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACZ,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,IAAA,CAGA,SAAS,QAAA,qBACTA,cAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACZ,mBAAS,QAAA,EACZ,CAAA;AAAA,IAGD,cAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CACZ,QAAA,EAAA,cAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"footer.cjs","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":["classnames","jsxs","jsx"],"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,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mCACE,CAAC;AAAA;AACL,GACF;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACZ,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,QAAA,CAGA,SAAS,QAAA,qBACTA,cAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACZ,mBAAS,QAAA,EACZ,CAAA;AAAA,QAGD,cAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CACZ,QAAA,EAAA,cAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"footer.cjs","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.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;
   }
 }