jvetrau-ds 0.2.20 → 0.2.23

package/base.css

@@ -181,17 +181,6 @@ h4 {
 
 p {
   /* typography */
-  --p-font-family: var(--font-body-family);
-  --p-font-size: var(--font-body);
-  --p-font-weight: var(--font-body-weight);
-  --p-line-height: var(--font-body-line);
-  --p-letter-spacing: var(--font-body-letter-spacing);
-
-  font-family: var(--p-font-family);
-  font-size: var(--p-font-size);
-  font-weight: var(--p-font-weight);
-  line-height: var(--p-line-height);
-  letter-spacing: var(--p-letter-spacing);
 
   /* size */
   --p-margin: var(--font-body-margin);
@@ -205,3 +194,34 @@ p {
   /* motion */
 }
 
+ul,
+ol {
+  /* typography */
+
+  /* size */
+  --list-margin: var(--font-list-margin);
+
+  margin: 0 0 var(--list-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+li {
+  /* typography */
+
+  /* size */
+  --li-margin: var(--font-list-item-margin);
+
+  margin: 0 0 var(--li-margin);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+

package/components/action-group/action-group.css

@@ -1,24 +1,63 @@
 .action-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
   gap: var(--margin-control);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--row {
+  /* color */
+
+  /* typography */
+
+  /* size */
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--column {
+  /* color */
+
+  /* typography */
+
+  /* size */
   flex-direction: column;
   align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--end {
+  /* color */
+
+  /* typography */
+
+  /* size */
   justify-content: flex-end;
-}
 
-.action-group--column.action-group--end {
-  align-items: flex-end;
-  justify-content: flex-start;
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }

package/components/action-group/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var actionGroup = require('./action-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -8,6 +10,13 @@ var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
 
 
 
-module.exports = actionGroup__default.default;
+Object.defineProperty(exports, "ActionGroup", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/action-group/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './action-group';
+export { default, default as ActionGroup, } from './action-group';
 export type { ActionGroupProps } from './action-group';

package/components/action-group/index.js

@@ -1,3 +1,3 @@
-export { default } from './action-group';
+export { default as ActionGroup, default } from './action-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/attach/attach.css

@@ -37,6 +37,23 @@
   /* motion */
 }
 
+.panel:not(.panel--transparent) .attach {
+  /* color */
+  --attachment-item-bg: var(--color-bg-contrast);
+  --attachment-item-color: var(--color-text-contrast);
+  --attachment-item-meta-color: var(--color-text-contrast);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__list {
   /* color */
 

package/components/avatar/avatar.cjs

@@ -13,6 +13,7 @@ const Avatar = ({
   src,
   alt = "",
   initials,
+  size = "base",
   className = "",
   onClick,
   ...props
@@ -21,7 +22,9 @@ const Avatar = ({
   const isInteractive = !!onClick;
   const showImage = Boolean(src) && src !== failedSrc;
   const classes = classnames.classnames("avatar", className, {
-    "avatar--button": isInteractive
+    "avatar--button": isInteractive,
+    "avatar--preview": size === "preview",
+    "avatar--full": size === "full"
   });
   const content = showImage ? /* @__PURE__ */ jsxRuntime.jsx(
     "img",

package/components/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"names":["React","classnames","jsx"],"mappings":";;;;;;;;;;;AA2BA,MAAM,SAAgC,CAAC;AAAA,EACrC,GAAA;AAAA,EACA,GAAA,GAAM,EAAA;AAAA,EACN,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAC5BA,uBAAM,QAAA,EAA6B;AAErC,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,SAAA,GACJ,OAAA,CAAQ,GAAG,CAAA,IAAK,GAAA,KAAQ,SAAA;AAE1B,EAAA,MAAM,OAAA,GAAUC,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB;AAAA,GACnB,CAAA;AAED,EAAA,MAAM,UAAU,SAAA,mBACdC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,GAAG,CAAA;AAAA,MAClB;AAAA;AAAA,GACF,mBAEAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBACb,QAAA,EAAA,QAAA,EACH,CAAA;AAGF,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,uBACEA,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACX,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,GAAA;AAAA,QACnC,OAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,GAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"avatar.cjs","sourcesContent":["import React from 'react';\nimport './avatar.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  initials?: string;\n}\n\ntype AvatarStaticProps =\n  AvatarBaseProps &\n  React.HTMLAttributes<HTMLDivElement> & {\n    onClick?: undefined;\n  };\n\ntype AvatarButtonProps =\n  AvatarBaseProps &\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n  };\n\nexport type AvatarProps =\n  | AvatarStaticProps\n  | AvatarButtonProps;\n\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt = '',\n  initials,\n  className = '',\n  onClick,\n  ...props\n}) => {\n  const [failedSrc, setFailedSrc] =\n    React.useState<string | undefined>();\n\n  const isInteractive = !!onClick;\n\n  const showImage =\n    Boolean(src) && src !== failedSrc;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n  });\n\n  const content = showImage ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\n      onError={() => {\n        setFailedSrc(src);\n      }}\n    />\n  ) : (\n    <span className=\"avatar__initials\">\n      {initials}\n    </span>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        className={classes}\n        type=\"button\"\n        aria-label={props['aria-label'] ?? alt}\n        onClick={onClick}\n        {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={classes}\n      aria-label={alt}\n      {...props as React.HTMLAttributes<HTMLDivElement>}\n    >\n      {content}\n    </div>\n  );\n};\n\nexport default Avatar;\n"]}
+{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"names":["React","classnames","jsx"],"mappings":";;;;;;;;;;;AAiCA,MAAM,SAAgC,CAAC;AAAA,EACrC,GAAA;AAAA,EACA,GAAA,GAAM,EAAA;AAAA,EACN,QAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAC5BA,uBAAM,QAAA,EAA6B;AAErC,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,SAAA,GACJ,OAAA,CAAQ,GAAG,CAAA,IAAK,GAAA,KAAQ,SAAA;AAE1B,EAAA,MAAM,OAAA,GAAUC,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB,aAAA;AAAA,IAClB,mBAAmB,IAAA,KAAS,SAAA;AAAA,IAC5B,gBAAgB,IAAA,KAAS;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,UAAU,SAAA,mBACdC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,GAAG,CAAA;AAAA,MAClB;AAAA;AAAA,GACF,mBAEAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBACb,QAAA,EAAA,QAAA,EACH,CAAA;AAGF,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,uBACEA,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACX,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,GAAA;AAAA,QACnC,OAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,GAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"avatar.cjs","sourcesContent":["import React from 'react';\nimport './avatar.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AvatarSize =\n  | 'base'\n  | 'preview'\n  | 'full';\n\nexport interface AvatarBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  initials?: string;\n  size?: AvatarSize;\n}\n\ntype AvatarStaticProps =\n  AvatarBaseProps &\n  React.HTMLAttributes<HTMLDivElement> & {\n    onClick?: undefined;\n  };\n\ntype AvatarButtonProps =\n  AvatarBaseProps &\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n  };\n\nexport type AvatarProps =\n  | AvatarStaticProps\n  | AvatarButtonProps;\n\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt = '',\n  initials,\n  size = 'base',\n  className = '',\n  onClick,\n  ...props\n}) => {\n  const [failedSrc, setFailedSrc] =\n    React.useState<string | undefined>();\n\n  const isInteractive = !!onClick;\n\n  const showImage =\n    Boolean(src) && src !== failedSrc;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n    'avatar--preview': size === 'preview',\n    'avatar--full': size === 'full',\n  });\n\n  const content = showImage ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\n      onError={() => {\n        setFailedSrc(src);\n      }}\n    />\n  ) : (\n    <span className=\"avatar__initials\">\n      {initials}\n    </span>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        className={classes}\n        type=\"button\"\n        aria-label={props['aria-label'] ?? alt}\n        onClick={onClick}\n        {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={classes}\n      aria-label={alt}\n      {...props as React.HTMLAttributes<HTMLDivElement>}\n    >\n      {content}\n    </div>\n  );\n};\n\nexport default Avatar;\n"]}

package/components/avatar/avatar.css

@@ -20,7 +20,7 @@
   letter-spacing: var(--avatar-letter-spacing);
 
   /* size */
-  --avatar-size: 48px;
+  --avatar-size: var(--size-avatar-base);
 
   display: inline-flex;
   align-items: center;
@@ -39,6 +39,36 @@
   /* motion */
 }
 
+.avatar--preview {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --avatar-size: var(--size-avatar-preview);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar--full {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --avatar-size: var(--size-avatar-full);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .avatar--button {
   /* color */
 

package/components/avatar/avatar.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import './avatar.css';
+export type AvatarSize = 'base' | 'preview' | 'full';
 export interface AvatarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     initials?: string;
+    size?: AvatarSize;
 }
 type AvatarStaticProps = AvatarBaseProps & React.HTMLAttributes<HTMLDivElement> & {
     onClick?: undefined;

package/components/avatar/avatar.js

@@ -7,6 +7,7 @@ const Avatar = ({
   src,
   alt = "",
   initials,
+  size = "base",
   className = "",
   onClick,
   ...props
@@ -15,7 +16,9 @@ const Avatar = ({
   const isInteractive = !!onClick;
   const showImage = Boolean(src) && src !== failedSrc;
   const classes = classnames("avatar", className, {
-    "avatar--button": isInteractive
+    "avatar--button": isInteractive,
+    "avatar--preview": size === "preview",
+    "avatar--full": size === "full"
   });
   const content = showImage ? /* @__PURE__ */ jsx(
     "img",

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":";;;;;AA2BA,MAAM,SAAgC,CAAC;AAAA,EACrC,GAAA;AAAA,EACA,GAAA,GAAM,EAAA;AAAA,EACN,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAC5B,MAAM,QAAA,EAA6B;AAErC,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,SAAA,GACJ,OAAA,CAAQ,GAAG,CAAA,IAAK,GAAA,KAAQ,SAAA;AAE1B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB;AAAA,GACnB,CAAA;AAED,EAAA,MAAM,UAAU,SAAA,mBACd,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,GAAG,CAAA;AAAA,MAClB;AAAA;AAAA,GACF,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBACb,QAAA,EAAA,QAAA,EACH,CAAA;AAGF,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACX,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,GAAA;AAAA,QACnC,OAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,GAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"avatar.js","sourcesContent":["import React from 'react';\nimport './avatar.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  initials?: string;\n}\n\ntype AvatarStaticProps =\n  AvatarBaseProps &\n  React.HTMLAttributes<HTMLDivElement> & {\n    onClick?: undefined;\n  };\n\ntype AvatarButtonProps =\n  AvatarBaseProps &\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n  };\n\nexport type AvatarProps =\n  | AvatarStaticProps\n  | AvatarButtonProps;\n\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt = '',\n  initials,\n  className = '',\n  onClick,\n  ...props\n}) => {\n  const [failedSrc, setFailedSrc] =\n    React.useState<string | undefined>();\n\n  const isInteractive = !!onClick;\n\n  const showImage =\n    Boolean(src) && src !== failedSrc;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n  });\n\n  const content = showImage ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\n      onError={() => {\n        setFailedSrc(src);\n      }}\n    />\n  ) : (\n    <span className=\"avatar__initials\">\n      {initials}\n    </span>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        className={classes}\n        type=\"button\"\n        aria-label={props['aria-label'] ?? alt}\n        onClick={onClick}\n        {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={classes}\n      aria-label={alt}\n      {...props as React.HTMLAttributes<HTMLDivElement>}\n    >\n      {content}\n    </div>\n  );\n};\n\nexport default Avatar;\n"]}
+{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":";;;;;AAiCA,MAAM,SAAgC,CAAC;AAAA,EACrC,GAAA;AAAA,EACA,GAAA,GAAM,EAAA;AAAA,EACN,QAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAC5B,MAAM,QAAA,EAA6B;AAErC,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,SAAA,GACJ,OAAA,CAAQ,GAAG,CAAA,IAAK,GAAA,KAAQ,SAAA;AAE1B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB,aAAA;AAAA,IAClB,mBAAmB,IAAA,KAAS,SAAA;AAAA,IAC5B,gBAAgB,IAAA,KAAS;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,UAAU,SAAA,mBACd,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,GAAG,CAAA;AAAA,MAClB;AAAA;AAAA,GACF,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBACb,QAAA,EAAA,QAAA,EACH,CAAA;AAGF,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACX,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,GAAA;AAAA,QACnC,OAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,GAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"avatar.js","sourcesContent":["import React from 'react';\nimport './avatar.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AvatarSize =\n  | 'base'\n  | 'preview'\n  | 'full';\n\nexport interface AvatarBaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  initials?: string;\n  size?: AvatarSize;\n}\n\ntype AvatarStaticProps =\n  AvatarBaseProps &\n  React.HTMLAttributes<HTMLDivElement> & {\n    onClick?: undefined;\n  };\n\ntype AvatarButtonProps =\n  AvatarBaseProps &\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n  };\n\nexport type AvatarProps =\n  | AvatarStaticProps\n  | AvatarButtonProps;\n\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt = '',\n  initials,\n  size = 'base',\n  className = '',\n  onClick,\n  ...props\n}) => {\n  const [failedSrc, setFailedSrc] =\n    React.useState<string | undefined>();\n\n  const isInteractive = !!onClick;\n\n  const showImage =\n    Boolean(src) && src !== failedSrc;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n    'avatar--preview': size === 'preview',\n    'avatar--full': size === 'full',\n  });\n\n  const content = showImage ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\n      onError={() => {\n        setFailedSrc(src);\n      }}\n    />\n  ) : (\n    <span className=\"avatar__initials\">\n      {initials}\n    </span>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        className={classes}\n        type=\"button\"\n        aria-label={props['aria-label'] ?? alt}\n        onClick={onClick}\n        {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={classes}\n      aria-label={alt}\n      {...props as React.HTMLAttributes<HTMLDivElement>}\n    >\n      {content}\n    </div>\n  );\n};\n\nexport default Avatar;\n"]}

package/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './avatar';
-export type { AvatarProps } from './avatar';
+export type { AvatarProps, AvatarSize, } from './avatar';

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/index.d.ts

@@ -40,7 +40,7 @@ export type { EmbedViewerProps } from './embed-viewer';
 export { default as Logo } from './logo/logo';
 export type { LogoBrand, LogoMode, LogoProps, } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
-export type { AvatarProps } from './avatar/avatar';
+export type { AvatarProps, AvatarSize, } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
 export type { AttachItem, AttachItemKind, AttachProps, } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';

package/components/markdown/markdown.css

@@ -1,211 +1,2 @@
 .markdown {
-  /* color */
-
-  /* typography */
-
-  /* size */
-  --markdown-block-gap: var(--margin-container-item);
-  --markdown-list-gap: var(--margin-control);
-  --markdown-list-padding: var(--padding-container);
-  --markdown-code-padding-inline: var(--padding-control-horz);
-  --markdown-code-padding-block: var(--padding-control-vert);
-  --markdown-table-cell-padding: var(--padding-control-vert);
-
-  /* border */
-  --markdown-border-width: var(--size-border-width-base);
-  --markdown-radius: var(--radius-control);
-
-  /* depth */
-
-  /* motion */
-}
-
-.markdown > * {
-  /* size */
-  margin: 0;
-}
-
-.markdown > :not(:first-child) {
-  /* size */
-  margin-top: var(--markdown-block-gap);
-}
-
-.markdown h1,
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6,
-.markdown p {
-  /* size */
-  margin: 0;
-}
-
-.markdown h5,
-.markdown h6 {
-  /* typography */
-  font-family: var(--font-h4-family);
-  font-size: var(--font-h4);
-  font-weight: var(--font-h4-weight);
-  line-height: var(--font-h4-line);
-  letter-spacing: var(--font-h4-letter-spacing);
-}
-
-.markdown ul,
-.markdown ol {
-  /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--markdown-list-gap);
-  margin: 0;
-  padding-left: var(--markdown-list-padding);
-}
-
-.markdown ul {
-  /* border */
-  list-style: disc;
-}
-
-.markdown ol {
-  /* border */
-  list-style: decimal;
-}
-
-.markdown li {
-  /* size */
-  margin: 0;
-}
-
-.markdown li > ul,
-.markdown li > ol {
-  /* size */
-  margin-top: var(--markdown-list-gap);
-}
-
-.markdown blockquote {
-  /* color */
-  color: var(--color-text-note);
-
-  /* size */
-  margin: 0;
-  padding-left: var(--padding-container);
-
-  /* border */
-  border-left:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown img {
-  /* size */
-  display: block;
-  max-width: 100%;
-  height: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown hr {
-  /* size */
-  margin: 0;
-
-  /* border */
-  border: 0;
-  border-top:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown code {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* typography */
-  font-family: monospace;
-  font-size: 0.9em;
-
-  /* size */
-  padding:
-    0
-    var(--markdown-code-padding-inline);
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* size */
-  margin: 0;
-  padding:
-    var(--markdown-code-padding-block)
-    var(--markdown-code-padding-inline);
-  overflow-x: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre code {
-  /* color */
-  background: transparent;
-  color: inherit;
-
-  /* typography */
-  font-size: inherit;
-
-  /* size */
-  padding: 0;
-
-  /* border */
-  border-radius: 0;
-}
-
-.markdown table {
-  /* size */
-  width: 100%;
-
-  /* border */
-  border-collapse: collapse;
-}
-
-.markdown th,
-.markdown td {
-  /* color */
-  color: inherit;
-
-  /* typography */
-  text-align: left;
-  vertical-align: top;
-
-  /* size */
-  padding: var(--markdown-table-cell-padding);
-
-  /* border */
-  border:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown th {
-  /* typography */
-  font-weight: var(--font-body-weight);
-}
-
-.markdown input[type='checkbox'] {
-  /* size */
-  margin: 0;
-}
-
-.markdown--excerpt > p {
-  /* size */
-  margin: 0;
 }

package/fonts/fonts.css

@@ -3,6 +3,6 @@
   font-family: 'PP Object Sans Variable';
   src: url('./pp-object-sans/PP Object Sans Variable.woff2') format('woff2');
   font-style: normal;
-  font-weight: 300 900;
+  font-weight: 143 900;
   font-display: swap;
-}
+}

package/index.d.ts

@@ -47,7 +47,7 @@ export type { PanelProps } from './components/panel';
 export { default as Logo } from './components/logo';
 export type { LogoBrand, LogoMode, LogoProps, } from './components/logo';
 export { default as Avatar } from './components/avatar';
-export type { AvatarProps } from './components/avatar';
+export type { AvatarProps, AvatarSize, } from './components/avatar';
 export { default as Attach } from './components/attach';
 export type { AttachItem, AttachItemKind, AttachProps, } from './components/attach';
 export { default as ActionGroup } from './components/action-group';

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",