jvetrau-ds 0.2.23 → 0.2.25

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/patterns/modal/modal.cjs

@@ -78,6 +78,7 @@ const Modal = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           Panel__default.default,
           {
+            rank: "primary",
             layout: panelLayout,
             overflow: "content",
             heading,

package/patterns/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useRef","classnames","useEffect","jsx","jsxs","Panel","Button"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJA,aAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAD,cAAA;AAAA,UAACE,sBAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEAF,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useRef","classnames","useEffect","jsx","jsxs","Panel","Button"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJA,aAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAD,cAAA;AAAA,UAACE,sBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,SAAA;AAAA,YACL,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEAF,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          rank=\"primary\"\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}

package/patterns/modal/modal.js

@@ -71,6 +71,7 @@ const Modal = ({
         /* @__PURE__ */ jsx(
           Panel,
           {
+            rank: "primary",
             layout: panelLayout,
             overflow: "content",
             heading,

package/patterns/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJ,OAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJ,OAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,SAAA;AAAA,YACL,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          rank=\"primary\"\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}

package/styles.css

@@ -1181,17 +1181,11 @@
 /* src/components/card/card.css */
 .card {
   /* color */
-  --card-bg: var(--color-bg-container);
-  --card-color: var(--color-text-container);
-
-  background: var(--card-bg);
-  color: var(--card-color);
 
   /* typography */
 
   /* size */
   --card-width: 100%;
-  --card-padding: var(--padding-container);
   --card-gap: var(--margin-container-item);
   --card-title-gap: var(--font-h2-margin);
 
@@ -1201,12 +1195,8 @@
   justify-content: flex-start;
   gap: var(--card-gap);
   width: var(--card-width);
-  padding: var(--card-padding);
 
   /* border */
-  --card-radius: var(--radius-container);
-
-  border-radius: var(--card-radius);
 
   /* depth */
 
@@ -3884,17 +3874,11 @@
 /* src/components/panel/panel.css */
 .panel {
   /* color */
-  --panel-bg: var(--color-bg-container);
-  --panel-color: var(--color-text-container);
-
-  background: var(--panel-bg);
-  color: var(--panel-color);
 
   /* typography */
 
   /* size */
   --panel-width: 100%;
-  --panel-padding: var(--padding-container);
   --panel-gap: var(--margin-container-item);
   --panel-title-gap: var(--font-h2-margin);
 
@@ -3904,12 +3888,8 @@
   justify-content: flex-start;
   gap: var(--panel-gap);
   width: var(--panel-width);
-  padding: var(--panel-padding);
 
   /* border */
-  --panel-radius: var(--radius-container);
-
-  border-radius: var(--panel-radius);
 
   /* depth */
 
@@ -3918,16 +3898,13 @@
 
 .panel--transparent {
   /* color */
-  --panel-bg: transparent;
-  --panel-color: var(--color-text);
+  color: var(--color-text);
 
   /* typography */
 
   /* size */
-  padding: 0;
 
   /* border */
-  border-radius: 0;
 
   /* depth */
 
@@ -4691,6 +4668,134 @@
   border-color: var(--select-border-color-success);
 }
 
+/* src/components/surface/surface.css */
+.surface {
+  /* color */
+  --surface-bg: var(--color-bg-container);
+  --surface-color: var(--color-text-container);
+
+  background: var(--surface-bg);
+  color: var(--surface-color);
+
+  /* typography */
+
+  /* size */
+  --surface-padding: var(--padding-container);
+
+  padding: var(--surface-padding);
+
+  /* border */
+  --surface-radius: var(--radius-container);
+
+  border-radius: var(--surface-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--secondary {
+  /* color */
+  --surface-bg: var(--color-bg-container-secondary);
+  --surface-color: var(--color-text-container-secondary);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--secondary .button--primary {
+  /* color */
+  --button-bg: var(--color-primary-1);
+  --button-color: var(--color-text-primary-1);
+  --button-focus-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--secondary .button--link {
+  /* color */
+  --button-color: var(--color-primary-1);
+  --button-focus-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--tertiary {
+  /* color */
+  --surface-bg: var(--color-bg-container-tertiary);
+  --surface-color: var(--color-text-container-tertiary);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--tertiary
+  .button:not(.button--primary):not(.button--link):not(.button--toolbar) {
+  /* color */
+  --button-bg: var(--color-bg);
+  --button-color: var(--color-text);
+  --button-focus-color: var(--color-bg);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.surface--outline {
+  /* color */
+  background: transparent;
+  color: inherit;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  border-color: var(--color-line);
+  border-style: dashed;
+  border-width: var(--size-border-width-base);
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/tabs/tabs.css */
 .tabs {
   /* color */
@@ -5590,6 +5695,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

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/base/desktop.md

@@ -8,6 +8,8 @@
 | `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#191A1A` |
 | `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/container/secondary` | `color` | `#FA4691` |
+| `color/bg/container/tertiary` | `color` | `#FFFFFF` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
 | `color/text/alt` | `color` | `#FFFFFF` |
 | `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
+| `color/text/container/secondary` | `color` | `#FFFFFF` |
+| `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
 | `color/text/good` | `color` | `#F9EC0E` |

package/themes/base/desktop.scoped.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/base/diagram.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #0D0D0D;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/base/diagram.md

@@ -8,6 +8,8 @@
 | `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#0D0D0D` |
 | `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/container/secondary` | `color` | `#FA4691` |
+| `color/bg/container/tertiary` | `color` | `#FFFFFF` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
 | `color/text/alt` | `color` | `#FFFFFF` |
 | `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
+| `color/text/container/secondary` | `color` | `#FFFFFF` |
+| `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
 | `color/text/good` | `color` | `#F9EC0E` |

package/themes/base/diagram.scoped.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #0D0D0D;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/base/mobile.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/base/mobile.md

@@ -8,6 +8,8 @@
 | `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#191A1A` |
 | `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/container/secondary` | `color` | `#FA4691` |
+| `color/bg/container/tertiary` | `color` | `#FFFFFF` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
 | `color/text/alt` | `color` | `#FFFFFF` |
 | `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
+| `color/text/container/secondary` | `color` | `#FFFFFF` |
+| `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
 | `color/text/good` | `color` | `#F9EC0E` |

package/themes/base/mobile.scoped.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/brandcopilot/desktop.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/brandcopilot/desktop.md

@@ -8,6 +8,8 @@
 | `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#191A1A` |
 | `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/container/secondary` | `color` | `#FA4691` |
+| `color/bg/container/tertiary` | `color` | `#FFFFFF` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
 | `color/text/alt` | `color` | `#FFFFFF` |
 | `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
+| `color/text/container/secondary` | `color` | `#FFFFFF` |
+| `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
 | `color/text/good` | `color` | `#F9EC0E` |

package/themes/brandcopilot/desktop.scoped.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/brandcopilot/diagram.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #0D0D0D;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/brandcopilot/diagram.md

@@ -8,6 +8,8 @@
 | `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#0D0D0D` |
 | `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/container/secondary` | `color` | `#FA4691` |
+| `color/bg/container/tertiary` | `color` | `#FFFFFF` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
 | `color/text/alt` | `color` | `#FFFFFF` |
 | `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
+| `color/text/container/secondary` | `color` | `#FFFFFF` |
+| `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
 | `color/text/good` | `color` | `#F9EC0E` |

package/themes/brandcopilot/diagram.scoped.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #0D0D0D;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);

package/themes/brandcopilot/mobile.css

@@ -3,6 +3,8 @@
   --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
   --color-text-alt: var(--color-alt);
   --color-text-bad: var(--color-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);