jvetrau-ds 0.2.22 → 0.2.24

package/components/avatar-upload/avatar-upload.cjs

@@ -71,7 +71,8 @@ const AvatarUpload = ({
             className: "avatar-upload__avatar",
             src,
             initials,
-            alt
+            alt,
+            size: "preview"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/components/avatar-upload/avatar-upload.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":["React","classnames","jsxs","jsx","Avatar","Button"],"mappings":"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","file":"avatar-upload.cjs","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src?: string;\n  initials?: string;\n  alt?: string;\n  accept?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: React.ReactNode;\n  selectLabel: React.ReactNode;\n  onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n  AvatarUploadProps\n> = ({\n  src,\n  initials,\n  alt,\n  accept,\n  disabled = false,\n  loading = false,\n  error,\n  selectLabel,\n  onFileSelect,\n  className = '',\n  ...props\n}) => {\n  const inputRef =\n    React.useRef<HTMLInputElement>(\n      null,\n    );\n\n  const reactId = React.useId();\n\n  const errorId = `${reactId}-error`;\n\n  const hasError =\n    error !== null &&\n    error !== undefined;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'avatar-upload',\n    className,\n    {\n      'avatar-upload--disabled':\n        isDisabled,\n      'avatar-upload--loading':\n        loading,\n      'avatar-upload--error':\n        hasError,\n    },\n  );\n\n  const handleSelectClick = () => {\n    if (isDisabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  };\n\n  const handleFileChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const input = event.currentTarget;\n    const file = input.files?.[0];\n\n    /*\n     * Reset the native input after reading\n     * the selected file so the same file\n     * can be selected again later.\n     */\n    input.value = '';\n\n    if (!file) {\n      return;\n    }\n\n    onFileSelect(file);\n  };\n\n  const resolvedAriaBusy = loading\n    ? true\n    : props['aria-busy'];\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      aria-busy={resolvedAriaBusy}\n    >\n      <Avatar\n        className=\"avatar-upload__avatar\"\n        src={src}\n        initials={initials}\n        alt={alt}\n      />\n\n      <input\n        ref={inputRef}\n        className=\"avatar-upload__input\"\n        type=\"file\"\n        accept={accept}\n        disabled={isDisabled}\n        onChange={handleFileChange}\n      />\n\n      <Button\n        className=\"avatar-upload__button\"\n        type=\"button\"\n        rank=\"link\"\n        disabled={isDisabled}\n        aria-describedby={\n          hasError\n            ? errorId\n            : undefined\n        }\n        onClick={handleSelectClick}\n      >\n        {selectLabel}\n      </Button>\n\n      {hasError && (\n        <div\n          className=\"avatar-upload__error\"\n          id={errorId}\n          role=\"alert\"\n        >\n          {error}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AvatarUpload;\n"]}
+{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":["React","classnames","jsxs","jsx","Avatar","Button"],"mappings":"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","file":"avatar-upload.cjs","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src?: string;\n  initials?: string;\n  alt?: string;\n  accept?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: React.ReactNode;\n  selectLabel: React.ReactNode;\n  onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n  AvatarUploadProps\n> = ({\n  src,\n  initials,\n  alt,\n  accept,\n  disabled = false,\n  loading = false,\n  error,\n  selectLabel,\n  onFileSelect,\n  className = '',\n  ...props\n}) => {\n  const inputRef =\n    React.useRef<HTMLInputElement>(\n      null,\n    );\n\n  const reactId = React.useId();\n\n  const errorId = `${reactId}-error`;\n\n  const hasError =\n    error !== null &&\n    error !== undefined;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'avatar-upload',\n    className,\n    {\n      'avatar-upload--disabled':\n        isDisabled,\n      'avatar-upload--loading':\n        loading,\n      'avatar-upload--error':\n        hasError,\n    },\n  );\n\n  const handleSelectClick = () => {\n    if (isDisabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  };\n\n  const handleFileChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const input = event.currentTarget;\n    const file = input.files?.[0];\n\n    /*\n     * Reset the native input after reading\n     * the selected file so the same file\n     * can be selected again later.\n     */\n    input.value = '';\n\n    if (!file) {\n      return;\n    }\n\n    onFileSelect(file);\n  };\n\n  const resolvedAriaBusy = loading\n    ? true\n    : props['aria-busy'];\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      aria-busy={resolvedAriaBusy}\n    >\n      <Avatar\n        className=\"avatar-upload__avatar\"\n        src={src}\n        initials={initials}\n        alt={alt}\n        size=\"preview\"\n      />\n\n      <input\n        ref={inputRef}\n        className=\"avatar-upload__input\"\n        type=\"file\"\n        accept={accept}\n        disabled={isDisabled}\n        onChange={handleFileChange}\n      />\n\n      <Button\n        className=\"avatar-upload__button\"\n        type=\"button\"\n        rank=\"link\"\n        disabled={isDisabled}\n        aria-describedby={\n          hasError\n            ? errorId\n            : undefined\n        }\n        onClick={handleSelectClick}\n      >\n        {selectLabel}\n      </Button>\n\n      {hasError && (\n        <div\n          className=\"avatar-upload__error\"\n          id={errorId}\n          role=\"alert\"\n        >\n          {error}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AvatarUpload;\n"]}

package/components/avatar-upload/avatar-upload.js

@@ -63,7 +63,8 @@ const AvatarUpload = ({
             className: "avatar-upload__avatar",
             src,
             initials,
-            alt
+            alt,
+            size: "preview"
           }
         ),
         /* @__PURE__ */ jsx(

package/components/avatar-upload/avatar-upload.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,eAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WACJ,KAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GAAU,MAAM,KAAA,EAAM;AAE5B,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAE1B,EAAA,MAAM,QAAA,GACJ,KAAA,KAAU,IAAA,IACV,KAAA,KAAU,MAAA;AAEZ,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,eAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,yBAAA,EACE,UAAA;AAAA,MACF,wBAAA,EACE,OAAA;AAAA,MACF,sBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,UAAA,EAAY;AACd,MAAA;AAAA,IACF;AAEA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CACvB,KAAA,KACG;AACH,IAAA,MAAM,QAAQ,KAAA,CAAM,aAAA;AACpB,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAA;AAO5B,IAAA,KAAA,CAAM,KAAA,GAAQ,EAAA;AAEd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,OAAA,GACrB,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAErB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,WAAA,EAAW,gBAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,GAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAU,sBAAA;AAAA,YACV,IAAA,EAAK,MAAA;AAAA,YACL,MAAA;AAAA,YACA,QAAA,EAAU,UAAA;AAAA,YACV,QAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,MAAA;AAAA,YACL,QAAA,EAAU,UAAA;AAAA,YACV,kBAAA,EACE,WACI,OAAA,GACA,MAAA;AAAA,YAEN,OAAA,EAAS,iBAAA;AAAA,YAER,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC,QAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,sBAAA;AAAA,YACV,EAAA,EAAI,OAAA;AAAA,YACJ,IAAA,EAAK,OAAA;AAAA,YAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"avatar-upload.js","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src?: string;\n  initials?: string;\n  alt?: string;\n  accept?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: React.ReactNode;\n  selectLabel: React.ReactNode;\n  onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n  AvatarUploadProps\n> = ({\n  src,\n  initials,\n  alt,\n  accept,\n  disabled = false,\n  loading = false,\n  error,\n  selectLabel,\n  onFileSelect,\n  className = '',\n  ...props\n}) => {\n  const inputRef =\n    React.useRef<HTMLInputElement>(\n      null,\n    );\n\n  const reactId = React.useId();\n\n  const errorId = `${reactId}-error`;\n\n  const hasError =\n    error !== null &&\n    error !== undefined;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'avatar-upload',\n    className,\n    {\n      'avatar-upload--disabled':\n        isDisabled,\n      'avatar-upload--loading':\n        loading,\n      'avatar-upload--error':\n        hasError,\n    },\n  );\n\n  const handleSelectClick = () => {\n    if (isDisabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  };\n\n  const handleFileChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const input = event.currentTarget;\n    const file = input.files?.[0];\n\n    /*\n     * Reset the native input after reading\n     * the selected file so the same file\n     * can be selected again later.\n     */\n    input.value = '';\n\n    if (!file) {\n      return;\n    }\n\n    onFileSelect(file);\n  };\n\n  const resolvedAriaBusy = loading\n    ? true\n    : props['aria-busy'];\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      aria-busy={resolvedAriaBusy}\n    >\n      <Avatar\n        className=\"avatar-upload__avatar\"\n        src={src}\n        initials={initials}\n        alt={alt}\n      />\n\n      <input\n        ref={inputRef}\n        className=\"avatar-upload__input\"\n        type=\"file\"\n        accept={accept}\n        disabled={isDisabled}\n        onChange={handleFileChange}\n      />\n\n      <Button\n        className=\"avatar-upload__button\"\n        type=\"button\"\n        rank=\"link\"\n        disabled={isDisabled}\n        aria-describedby={\n          hasError\n            ? errorId\n            : undefined\n        }\n        onClick={handleSelectClick}\n      >\n        {selectLabel}\n      </Button>\n\n      {hasError && (\n        <div\n          className=\"avatar-upload__error\"\n          id={errorId}\n          role=\"alert\"\n        >\n          {error}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AvatarUpload;\n"]}
+{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":[],"mappings":"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","file":"avatar-upload.js","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src?: string;\n  initials?: string;\n  alt?: string;\n  accept?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: React.ReactNode;\n  selectLabel: React.ReactNode;\n  onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n  AvatarUploadProps\n> = ({\n  src,\n  initials,\n  alt,\n  accept,\n  disabled = false,\n  loading = false,\n  error,\n  selectLabel,\n  onFileSelect,\n  className = '',\n  ...props\n}) => {\n  const inputRef =\n    React.useRef<HTMLInputElement>(\n      null,\n    );\n\n  const reactId = React.useId();\n\n  const errorId = `${reactId}-error`;\n\n  const hasError =\n    error !== null &&\n    error !== undefined;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'avatar-upload',\n    className,\n    {\n      'avatar-upload--disabled':\n        isDisabled,\n      'avatar-upload--loading':\n        loading,\n      'avatar-upload--error':\n        hasError,\n    },\n  );\n\n  const handleSelectClick = () => {\n    if (isDisabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  };\n\n  const handleFileChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const input = event.currentTarget;\n    const file = input.files?.[0];\n\n    /*\n     * Reset the native input after reading\n     * the selected file so the same file\n     * can be selected again later.\n     */\n    input.value = '';\n\n    if (!file) {\n      return;\n    }\n\n    onFileSelect(file);\n  };\n\n  const resolvedAriaBusy = loading\n    ? true\n    : props['aria-busy'];\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      aria-busy={resolvedAriaBusy}\n    >\n      <Avatar\n        className=\"avatar-upload__avatar\"\n        src={src}\n        initials={initials}\n        alt={alt}\n        size=\"preview\"\n      />\n\n      <input\n        ref={inputRef}\n        className=\"avatar-upload__input\"\n        type=\"file\"\n        accept={accept}\n        disabled={isDisabled}\n        onChange={handleFileChange}\n      />\n\n      <Button\n        className=\"avatar-upload__button\"\n        type=\"button\"\n        rank=\"link\"\n        disabled={isDisabled}\n        aria-describedby={\n          hasError\n            ? errorId\n            : undefined\n        }\n        onClick={handleSelectClick}\n      >\n        {selectLabel}\n      </Button>\n\n      {hasError && (\n        <div\n          className=\"avatar-upload__error\"\n          id={errorId}\n          role=\"alert\"\n        >\n          {error}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AvatarUpload;\n"]}

package/components/card/card.cjs

@@ -3,11 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('./card.css');
 var classnames = require('../helpers/classnames');
+var surfacePresentation = require('../surface/surface-presentation');
 
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
 const Card = ({
+  rank = "primary",
   heading,
   headingLevel = 2,
   description,
@@ -19,7 +21,7 @@ const Card = ({
   const classes = classnames.classnames(
     "card",
     className,
-    {}
+    surfacePresentation.surfacePresentation(rank)
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);

package/components/card/card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/card.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAaA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,OAA4B,CAAC;AAAA,EACjC,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACCC,cAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWF,qBAAA;AAAA,gBACT,eAAA;AAAA,gBACA,mBAAmB,YAAY,CAAA,CAAA;AAAA,gBAC/B;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACCE,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,mCACjB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EACH,CAAA;AAAA,QAGD,WAAW,OAAO,CAAA,mCAChB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"card.cjs","sourcesContent":["import React from 'react';\n\nimport './card.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLElement> {\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Card: React.FC<CardProps> = ({\n  heading,\n  headingLevel = 2,\n  description,\n  actions,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'card',\n    className,\n    {},\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"card__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'card__heading',\n                `card__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"card__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"card__content\">\n          {children}\n        </div>\n      )}\n\n      {hasContent(actions) && (\n        <div className=\"card__actions\">\n          {actions}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Card;\n"]}
+{"version":3,"sources":["../../../src/components/card/card.tsx"],"names":["classnames","surfacePresentation","jsxs","jsx"],"mappings":";;;;;;;AAkBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,OAA4B,CAAC;AAAA,EACjC,IAAA,GAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAA;AAAA,IACAC,wCAAoB,IAAI;AAAA,GAC1B;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACCC,cAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWH,qBAAA;AAAA,gBACT,eAAA;AAAA,gBACA,mBAAmB,YAAY,CAAA,CAAA;AAAA,gBAC/B;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACCG,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,mCACjB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EACH,CAAA;AAAA,QAGD,WAAW,OAAO,CAAA,mCAChB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"card.cjs","sourcesContent":["import React from 'react';\n\nimport './card.css';\nimport { classnames } from '../helpers/classnames';\nimport {\n  surfacePresentation,\n  type SurfaceRank,\n} from '../surface/surface-presentation';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLElement> {\n  rank?: SurfaceRank;\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Card: React.FC<CardProps> = ({\n  rank = 'primary',\n  heading,\n  headingLevel = 2,\n  description,\n  actions,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'card',\n    className,\n    surfacePresentation(rank),\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"card__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'card__heading',\n                `card__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"card__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"card__content\">\n          {children}\n        </div>\n      )}\n\n      {hasContent(actions) && (\n        <div className=\"card__actions\">\n          {actions}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Card;\n"]}

package/components/card/card.css

@@ -1,16 +1,10 @@
 .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);
 
@@ -20,12 +14,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 */
 

package/components/card/card.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import './card.css';
+import { type SurfaceRank } from '../surface/surface-presentation';
 export interface CardProps extends React.HTMLAttributes<HTMLElement> {
+    rank?: SurfaceRank;
     heading?: React.ReactNode;
     headingLevel?: 2 | 3;
     description?: React.ReactNode;

package/components/card/card.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './card.css';
 import { classnames } from '../helpers/classnames';
+import { surfacePresentation } from '../surface/surface-presentation';
 
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
 const Card = ({
+  rank = "primary",
   heading,
   headingLevel = 2,
   description,
@@ -17,7 +19,7 @@ const Card = ({
   const classes = classnames(
     "card",
     className,
-    {}
+    surfacePresentation(rank)
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);

package/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":";;;;AAaA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,OAA4B,CAAC;AAAA,EACjC,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,UAAA;AAAA,gBACT,eAAA;AAAA,gBACA,mBAAmB,YAAY,CAAA,CAAA;AAAA,gBAC/B;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,wBACjB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EACH,CAAA;AAAA,QAGD,WAAW,OAAO,CAAA,wBAChB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"card.js","sourcesContent":["import React from 'react';\n\nimport './card.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLElement> {\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Card: React.FC<CardProps> = ({\n  heading,\n  headingLevel = 2,\n  description,\n  actions,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'card',\n    className,\n    {},\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"card__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'card__heading',\n                `card__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"card__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"card__content\">\n          {children}\n        </div>\n      )}\n\n      {hasContent(actions) && (\n        <div className=\"card__actions\">\n          {actions}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Card;\n"]}
+{"version":3,"sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":";;;;;AAkBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,OAA4B,CAAC;AAAA,EACjC,IAAA,GAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAoB,IAAI;AAAA,GAC1B;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,UAAA;AAAA,gBACT,eAAA;AAAA,gBACA,mBAAmB,YAAY,CAAA,CAAA;AAAA,gBAC/B;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,wBACjB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EACH,CAAA;AAAA,QAGD,WAAW,OAAO,CAAA,wBAChB,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"card.js","sourcesContent":["import React from 'react';\n\nimport './card.css';\nimport { classnames } from '../helpers/classnames';\nimport {\n  surfacePresentation,\n  type SurfaceRank,\n} from '../surface/surface-presentation';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLElement> {\n  rank?: SurfaceRank;\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Card: React.FC<CardProps> = ({\n  rank = 'primary',\n  heading,\n  headingLevel = 2,\n  description,\n  actions,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'card',\n    className,\n    surfacePresentation(rank),\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"card__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'card__heading',\n                `card__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"card__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"card__content\">\n          {children}\n        </div>\n      )}\n\n      {hasContent(actions) && (\n        <div className=\"card__actions\">\n          {actions}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Card;\n"]}

package/components/panel/panel.cjs

@@ -3,11 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('./panel.css');
 var classnames = require('../helpers/classnames');
+var surfacePresentation = require('../surface/surface-presentation');
 
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
 const Panel = ({
+  rank = "primary",
   layout = "card",
   overflow = "visible",
   heading,
@@ -17,10 +19,12 @@ const Panel = ({
   children,
   ...props
 }) => {
+  const surfaceClasses = layout === "transparent" ? {} : surfacePresentation.surfacePresentation(rank);
   const classes = classnames.classnames(
     "panel",
     className,
     {
+      ...surfaceClasses,
       "panel--transparent": layout === "transparent",
       "panel--content-overflow": overflow === "content"
     }

package/components/panel/panel.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAcA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACCC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,qBAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["surfacePresentation","classnames","jsxs","jsx"],"mappings":";;;;;;;AAmBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,iBACJ,MAAA,KAAW,aAAA,GACP,EAAC,GACDA,wCAAoB,IAAI,CAAA;AAE9B,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,GAAG,cAAA;AAAA,MACH,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACCC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,qBAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\nimport {\n  surfacePresentation,\n  type SurfaceRank,\n} from '../surface/surface-presentation';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  rank?: SurfaceRank;\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  rank = 'primary',\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const surfaceClasses =\n    layout === 'transparent'\n      ? {}\n      : surfacePresentation(rank);\n\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      ...surfaceClasses,\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/panel/panel.css

@@ -1,16 +1,10 @@
 .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);
 
@@ -20,12 +14,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 */
 
@@ -34,16 +24,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 */
 

package/components/panel/panel.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import './panel.css';
+import { type SurfaceRank } from '../surface/surface-presentation';
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
+    rank?: SurfaceRank;
     layout?: 'card' | 'transparent';
     overflow?: 'visible' | 'content';
     heading?: React.ReactNode;

package/components/panel/panel.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './panel.css';
 import { classnames } from '../helpers/classnames';
+import { surfacePresentation } from '../surface/surface-presentation';
 
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
 const Panel = ({
+  rank = "primary",
   layout = "card",
   overflow = "visible",
   heading,
@@ -15,10 +17,12 @@ const Panel = ({
   children,
   ...props
 }) => {
+  const surfaceClasses = layout === "transparent" ? {} : surfacePresentation(rank);
   const classes = classnames(
     "panel",
     className,
     {
+      ...surfaceClasses,
       "panel--transparent": layout === "transparent",
       "panel--content-overflow": overflow === "content"
     }

package/components/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAcA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;;AAmBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,iBACJ,MAAA,KAAW,aAAA,GACP,EAAC,GACD,oBAAoB,IAAI,CAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,GAAG,cAAA;AAAA,MACH,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\nimport {\n  surfacePresentation,\n  type SurfaceRank,\n} from '../surface/surface-presentation';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  rank?: SurfaceRank;\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  rank = 'primary',\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const surfaceClasses =\n    layout === 'transparent'\n      ? {}\n      : surfacePresentation(rank);\n\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      ...surfaceClasses,\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/surface/surface-presentation.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+require('./surface.css');
+
+function surfacePresentation(rank) {
+  return {
+    surface: true,
+    "surface--secondary": rank === "secondary",
+    "surface--tertiary": rank === "tertiary",
+    "surface--outline": rank === "outline"
+  };
+}
+
+exports.surfacePresentation = surfacePresentation;
+//# sourceMappingURL=surface-presentation.cjs.map
+//# sourceMappingURL=surface-presentation.cjs.map

package/components/surface/surface-presentation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;;;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.cjs","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'outline';\n\nexport function surfacePresentation(\n  rank: SurfaceRank,\n): Record<string, boolean> {\n  return {\n    surface: true,\n    'surface--secondary':\n      rank === 'secondary',\n    'surface--tertiary':\n      rank === 'tertiary',\n    'surface--outline':\n      rank === 'outline',\n  };\n}\n"]}

package/components/surface/surface-presentation.d.ts

@@ -0,0 +1,3 @@
+import './surface.css';
+export type SurfaceRank = 'primary' | 'secondary' | 'tertiary' | 'outline';
+export declare function surfacePresentation(rank: SurfaceRank): Record<string, boolean>;

package/components/surface/surface-presentation.js

@@ -0,0 +1,14 @@
+import './surface.css';
+
+function surfacePresentation(rank) {
+  return {
+    surface: true,
+    "surface--secondary": rank === "secondary",
+    "surface--tertiary": rank === "tertiary",
+    "surface--outline": rank === "outline"
+  };
+}
+
+export { surfacePresentation };
+//# sourceMappingURL=surface-presentation.js.map
+//# sourceMappingURL=surface-presentation.js.map

package/components/surface/surface-presentation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.js","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'outline';\n\nexport function surfacePresentation(\n  rank: SurfaceRank,\n): Record<string, boolean> {\n  return {\n    surface: true,\n    'surface--secondary':\n      rank === 'secondary',\n    'surface--tertiary':\n      rank === 'tertiary',\n    'surface--outline':\n      rank === 'outline',\n  };\n}\n"]}

package/components/surface/surface.css

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

package/index.d.ts

@@ -44,6 +44,7 @@ export { default as Card } from './components/card';
 export type { CardProps } from './components/card';
 export { default as Panel } from './components/panel';
 export type { PanelProps } from './components/panel';
+export type { SurfaceRank } from './components/surface/surface-presentation';
 export { default as Logo } from './components/logo';
 export type { LogoBrand, LogoMode, LogoProps, } from './components/logo';
 export { default as Avatar } from './components/avatar';

package/layouts/base/base.cjs

@@ -13,6 +13,7 @@ const LayoutBase = ({
   width = "default",
   headerAlign = "start",
   mainAlign = "start",
+  contentAlign = "start",
   header,
   footer,
   children,
@@ -23,7 +24,8 @@ const LayoutBase = ({
   const contentClasses = classnames.classnames("layout-base__content", "", {
     "layout-base__content--narrow": width === "narrow",
     "layout-base__content--wide": width === "wide",
-    "layout-base__content--full": width === "full"
+    "layout-base__content--full": width === "full",
+    "layout-base__content--align-center": contentAlign === "center"
   });
   const headerClasses = classnames.classnames("layout-base__header", "", {
     "layout-base__header--align-center": headerAlign === "center",

package/layouts/base/base.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;"]}
+{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n  type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseMainAlign =\n  | 'start'\n  | 'center'\n  | 'end';\n\nexport type LayoutBaseContentAlign =\n  | 'start'\n  | 'center';\n\nexport interface LayoutBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  width?: LayoutFoundationWidth;\n  headerAlign?: LayoutBaseHeaderAlign;\n  mainAlign?: LayoutBaseMainAlign;\n  contentAlign?: LayoutBaseContentAlign;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n  width = 'default',\n  headerAlign = 'start',\n  mainAlign = 'start',\n  contentAlign = 'start',\n  header,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('layout-base', className, {});\n\n  const contentClasses = classnames('layout-base__content', '', {\n    'layout-base__content--narrow': width === 'narrow',\n    'layout-base__content--wide': width === 'wide',\n    'layout-base__content--full': width === 'full',\n    'layout-base__content--align-center': contentAlign === 'center',\n  });\n\n  const headerClasses = classnames('layout-base__header', '', {\n    'layout-base__header--align-center': headerAlign === 'center',\n    'layout-base__header--align-end': headerAlign === 'end',\n  });\n\n  const mainClasses = classnames('layout-base__main', '', {\n    'layout-base__main--align-center': mainAlign === 'center',\n    'layout-base__main--align-end': mainAlign === 'end',\n  });\n\n  return (\n    <LayoutFoundation\n      width=\"full\"\n      className={classes}\n      {...props}\n    >\n      {header && (\n        <div className={headerClasses}>\n          {header}\n        </div>\n      )}\n\n      <main className={mainClasses}>\n        <div className={contentClasses}>\n          {children}\n        </div>\n      </main>\n\n      {footer && (\n        <div className=\"layout-base__footer\">\n          {footer}\n        </div>\n      )}\n    </LayoutFoundation>\n  );\n};\n\nexport default LayoutBase;\n"]}

package/layouts/base/base.css

@@ -123,6 +123,23 @@
   max-width: none;
 }
 
+.layout-base__content--align-center {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__footer {
   /* color */
 
@@ -136,4 +153,4 @@
   /* depth */
 
   /* motion */
-}
+}

package/layouts/base/base.d.ts

@@ -3,10 +3,12 @@ import { type LayoutFoundationWidth } from '../foundation';
 import './base.css';
 export type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
 export type LayoutBaseMainAlign = 'start' | 'center' | 'end';
+export type LayoutBaseContentAlign = 'start' | 'center';
 export interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: LayoutFoundationWidth;
     headerAlign?: LayoutBaseHeaderAlign;
     mainAlign?: LayoutBaseMainAlign;
+    contentAlign?: LayoutBaseContentAlign;
     header?: React.ReactNode;
     footer?: React.ReactNode;
 }