jvetrau-ds 0.1.43 → 0.1.45

package/components/avatar/avatar.cjs

@@ -1,9 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 require('./avatar.css');
 var classnames = require('../helpers/classnames');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 const Avatar = ({
   src,
   alt = "",
@@ -12,16 +17,21 @@ const Avatar = ({
   onClick,
   ...props
 }) => {
+  const [failedSrc, setFailedSrc] = React__default.default.useState();
   const isInteractive = !!onClick;
+  const showImage = Boolean(src) && src !== failedSrc;
   const classes = classnames.classnames("avatar", className, {
     "avatar--button": isInteractive
   });
-  const content = src ? /* @__PURE__ */ jsxRuntime.jsx(
+  const content = showImage ? /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
       className: "avatar__image",
       src,
-      alt
+      alt,
+      onError: () => {
+        setFailedSrc(src);
+      }
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "avatar__initials", children: initials });
   if (isInteractive) {

package/components/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"names":["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,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB;AAAA,GACnB,CAAA;AAED,EAAA,MAAM,UAAU,GAAA,mBACdC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA;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 isInteractive = !!onClick;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n  });\n\n  const content = src ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\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;"]}
+{"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"]}

package/components/avatar/avatar.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import './avatar.css';
 import { classnames } from '../helpers/classnames';
 
@@ -10,16 +11,21 @@ const Avatar = ({
   onClick,
   ...props
 }) => {
+  const [failedSrc, setFailedSrc] = React.useState();
   const isInteractive = !!onClick;
+  const showImage = Boolean(src) && src !== failedSrc;
   const classes = classnames("avatar", className, {
     "avatar--button": isInteractive
   });
-  const content = src ? /* @__PURE__ */ jsx(
+  const content = showImage ? /* @__PURE__ */ jsx(
     "img",
     {
       className: "avatar__image",
       src,
-      alt
+      alt,
+      onError: () => {
+        setFailedSrc(src);
+      }
     }
   ) : /* @__PURE__ */ jsx("span", { className: "avatar__initials", children: initials });
   if (isInteractive) {

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,aAAA,GAAgB,CAAC,CAAC,OAAA;AAExB,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,gBAAA,EAAkB;AAAA,GACnB,CAAA;AAED,EAAA,MAAM,UAAU,GAAA,mBACd,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA;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 isInteractive = !!onClick;\n\n  const classes = classnames('avatar', className, {\n    'avatar--button': isInteractive,\n  });\n\n  const content = src ? (\n    <img\n      className=\"avatar__image\"\n      src={src}\n      alt={alt}\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;"]}
+{"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"]}

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

@@ -0,0 +1,116 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('./avatar-upload.css');
+var Avatar = require('../avatar/avatar');
+var Button = require('../button/button');
+var classnames = require('../helpers/classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
+const AvatarUpload = ({
+  src,
+  initials,
+  alt,
+  accept,
+  disabled = false,
+  loading = false,
+  error,
+  selectLabel,
+  onFileSelect,
+  className = "",
+  ...props
+}) => {
+  const inputRef = React__default.default.useRef(
+    null
+  );
+  const reactId = React__default.default.useId();
+  const errorId = `${reactId}-error`;
+  const hasError = error !== null && error !== void 0;
+  const isDisabled = disabled || loading;
+  const classes = classnames.classnames(
+    "avatar-upload",
+    className,
+    {
+      "avatar-upload--disabled": isDisabled,
+      "avatar-upload--loading": loading,
+      "avatar-upload--error": hasError
+    }
+  );
+  const handleSelectClick = () => {
+    if (isDisabled) {
+      return;
+    }
+    inputRef.current?.click();
+  };
+  const handleFileChange = (event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    input.value = "";
+    if (!file) {
+      return;
+    }
+    onFileSelect(file);
+  };
+  const resolvedAriaBusy = loading ? true : props["aria-busy"];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      className: classes,
+      "aria-busy": resolvedAriaBusy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Avatar__default.default,
+          {
+            className: "avatar-upload__avatar",
+            src,
+            initials,
+            alt
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "avatar-upload__input",
+            type: "file",
+            accept,
+            disabled: isDisabled,
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button__default.default,
+          {
+            className: "avatar-upload__button",
+            type: "button",
+            disabled: isDisabled,
+            "aria-describedby": hasError ? errorId : void 0,
+            onClick: handleSelectClick,
+            children: selectLabel
+          }
+        ),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "avatar-upload__error",
+            id: errorId,
+            role: "alert",
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+var avatar_upload_default = AvatarUpload;
+
+module.exports = avatar_upload_default;
+//# sourceMappingURL=avatar-upload.cjs.map
+//# sourceMappingURL=avatar-upload.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":["React","classnames","jsxs","jsx","Avatar","Button"],"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,WACJA,sBAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GAAUA,uBAAM,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,GAAUC,qBAAA;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,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,WAAA,EAAW,gBAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,GAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEAD,cAAA;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,wBAEAA,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,IAAA,EAAK,QAAA;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,oBACCF,cAAA;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.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        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;"]}

package/components/avatar-upload/avatar-upload.css

@@ -0,0 +1,89 @@
+.avatar-upload {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__avatar {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-bottom: var(--margin-control);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+
+  /* border */
+  border: 0;
+
+  /* depth */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+
+  /* motion */
+}
+
+.avatar-upload__button {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__error {
+  /* color */
+  color: var(--color-text-bad);
+
+  /* typography */
+  font-family: var(--font-note-family);
+  font-size: var(--font-note);
+  font-weight: var(--font-note-weight);
+  line-height: var(--font-note-line);
+  letter-spacing: var(--font-note-letter-spacing);
+
+  /* size */
+  margin-top: var(--margin-descriptor);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/avatar-upload/avatar-upload.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './avatar-upload.css';
+export interface AvatarUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    src?: string;
+    initials?: string;
+    alt?: string;
+    accept?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: React.ReactNode;
+    selectLabel: React.ReactNode;
+    onFileSelect: (file: File) => void;
+}
+declare const AvatarUpload: React.FC<AvatarUploadProps>;
+export default AvatarUpload;

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

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import './avatar-upload.css';
+import Avatar from '../avatar/avatar';
+import Button from '../button/button';
+import { classnames } from '../helpers/classnames';
+
+const AvatarUpload = ({
+  src,
+  initials,
+  alt,
+  accept,
+  disabled = false,
+  loading = false,
+  error,
+  selectLabel,
+  onFileSelect,
+  className = "",
+  ...props
+}) => {
+  const inputRef = React.useRef(
+    null
+  );
+  const reactId = React.useId();
+  const errorId = `${reactId}-error`;
+  const hasError = error !== null && error !== void 0;
+  const isDisabled = disabled || loading;
+  const classes = classnames(
+    "avatar-upload",
+    className,
+    {
+      "avatar-upload--disabled": isDisabled,
+      "avatar-upload--loading": loading,
+      "avatar-upload--error": hasError
+    }
+  );
+  const handleSelectClick = () => {
+    if (isDisabled) {
+      return;
+    }
+    inputRef.current?.click();
+  };
+  const handleFileChange = (event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    input.value = "";
+    if (!file) {
+      return;
+    }
+    onFileSelect(file);
+  };
+  const resolvedAriaBusy = loading ? true : props["aria-busy"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: classes,
+      "aria-busy": resolvedAriaBusy,
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "avatar-upload__avatar",
+            src,
+            initials,
+            alt
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "avatar-upload__input",
+            type: "file",
+            accept,
+            disabled: isDisabled,
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "avatar-upload__button",
+            type: "button",
+            disabled: isDisabled,
+            "aria-describedby": hasError ? errorId : void 0,
+            onClick: handleSelectClick,
+            children: selectLabel
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "avatar-upload__error",
+            id: errorId,
+            role: "alert",
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+var avatar_upload_default = AvatarUpload;
+
+export { avatar_upload_default as default };
+//# sourceMappingURL=avatar-upload.js.map
+//# sourceMappingURL=avatar-upload.js.map

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

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

package/components/avatar-upload/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var avatarUpload = require('./avatar-upload');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var avatarUpload__default = /*#__PURE__*/_interopDefault(avatarUpload);
+
+
+
+module.exports = avatarUpload__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

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

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

package/components/avatar-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './avatar-upload';
+export type { AvatarUploadProps } from './avatar-upload';

package/components/avatar-upload/index.js

@@ -0,0 +1,3 @@
+export { default } from './avatar-upload';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

package/components/flip-list/flip-list.cjs

@@ -12,36 +12,49 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
-function getInitialOpenItemId(items, defaultOpenId) {
-  if (defaultOpenId === void 0) {
+function normalizeOpenItemId(items, openId) {
+  if (openId === null || openId === void 0) {
     return null;
   }
   const hasMatchingItem = items.some(
-    (item) => item.id === defaultOpenId
+    (item) => item.id === openId
   );
-  return hasMatchingItem ? defaultOpenId : null;
+  return hasMatchingItem ? openId : null;
 }
 const FlipList = ({
   items,
+  openId,
   defaultOpenId,
-  scrollToDefaultOpen = false,
+  onOpenChange,
+  scrollToInitialOpen = false,
   className = "",
   ...props
 }) => {
   const componentId = React__default.default.useId();
+  const isControlled = openId !== void 0;
   const initialOpenItemIdRef = React__default.default.useRef(
-    getInitialOpenItemId(
+    normalizeOpenItemId(
       items,
-      defaultOpenId
+      isControlled ? openId : defaultOpenId
     )
   );
-  const shouldScrollInitiallyRef = React__default.default.useRef(scrollToDefaultOpen);
+  const shouldScrollInitiallyRef = React__default.default.useRef(scrollToInitialOpen);
   const initialOpenItemRef = React__default.default.useRef(
     null
   );
   const hasScrolledInitiallyRef = React__default.default.useRef(false);
-  const [openItemId, setOpenItemId] = React__default.default.useState(
-    initialOpenItemIdRef.current
+  const [
+    uncontrolledOpenItemId,
+    setUncontrolledOpenItemId
+  ] = React__default.default.useState(
+    () => normalizeOpenItemId(
+      items,
+      defaultOpenId
+    )
+  );
+  const resolvedOpenItemId = normalizeOpenItemId(
+    items,
+    isControlled ? openId : uncontrolledOpenItemId
   );
   React__default.default.useEffect(() => {
     if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
@@ -62,9 +75,13 @@ const FlipList = ({
     {}
   );
   const toggleItem = (itemId) => {
-    setOpenItemId(
-      (current) => current === itemId ? null : itemId
-    );
+    const nextOpenItemId = resolvedOpenItemId === itemId ? null : itemId;
+    if (!isControlled) {
+      setUncontrolledOpenItemId(
+        nextOpenItemId
+      );
+    }
+    onOpenChange?.(nextOpenItemId);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -72,7 +89,7 @@ const FlipList = ({
       className: classes,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
-        const isOpen = openItemId === item.id;
+        const isOpen = resolvedOpenItemId === item.id;
         const hasMeta = hasContent(
           item.meta
         );

package/components/flip-list/flip-list.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Item opened during the initial render.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Scrolls the initially opened item into view once\n   * after mounting.\n   *\n   * Has no effect without a valid defaultOpenId.\n   * Manual item opening never triggers scrolling.\n   */\n  scrollToDefaultOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialOpenItemId(\n  items: FlipListItem[],\n  defaultOpenId: React.Key | undefined,\n): OpenItemId {\n  if (defaultOpenId === undefined) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === defaultOpenId,\n  );\n\n  return hasMatchingItem\n    ? defaultOpenId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  defaultOpenId,\n  scrollToDefaultOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      getInitialOpenItemId(\n        items,\n        defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToDefaultOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [openItemId, setOpenItemId] =\n    React.useState<OpenItemId>(\n      initialOpenItemIdRef.current,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    setOpenItemId((current) =>\n      current === itemId\n        ? null\n        : itemId,\n    );\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            openItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/flip-list/flip-list.d.ts

@@ -9,20 +9,44 @@ export interface FlipListItem {
 export interface FlipListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     items: FlipListItem[];
     /**
-     * Item opened during the initial render.
+     * Currently opened item in controlled mode.
+     *
+     * `null` means that all items are closed.
+     *
+     * When this prop is provided, FlipList does not
+     * own the opened-item state.
+     */
+    openId?: React.Key | null;
+    /**
+     * Item opened during the initial render
+     * in uncontrolled mode.
      *
      * Later changes to this prop do not control
      * the component state.
      */
     defaultOpenId?: React.Key;
     /**
-     * Scrolls the initially opened item into view once
-     * after mounting.
+     * Called when the user requests a change
+     * of the opened item.
+     *
+     * Receives the item id when an item is opened,
+     * and `null` when the currently opened item
+     * is closed.
+     */
+    onOpenChange?: (id: React.Key | null) => void;
+    /**
+     * Scrolls the item that is open during
+     * the initial render into view once.
+     *
+     * In uncontrolled mode, the initial item comes
+     * from `defaultOpenId`.
+     *
+     * In controlled mode, the initial item comes
+     * from `openId`.
      *
-     * Has no effect without a valid defaultOpenId.
-     * Manual item opening never triggers scrolling.
+     * Later state changes never trigger scrolling.
      */
-    scrollToDefaultOpen?: boolean;
+    scrollToInitialOpen?: boolean;
 }
 declare const FlipList: React.FC<FlipListProps>;
 export default FlipList;

package/components/flip-list/flip-list.js

@@ -6,36 +6,49 @@ import { classnames } from '../helpers/classnames';
 function hasContent(value) {
   return value !== null && value !== void 0;
 }
-function getInitialOpenItemId(items, defaultOpenId) {
-  if (defaultOpenId === void 0) {
+function normalizeOpenItemId(items, openId) {
+  if (openId === null || openId === void 0) {
     return null;
   }
   const hasMatchingItem = items.some(
-    (item) => item.id === defaultOpenId
+    (item) => item.id === openId
   );
-  return hasMatchingItem ? defaultOpenId : null;
+  return hasMatchingItem ? openId : null;
 }
 const FlipList = ({
   items,
+  openId,
   defaultOpenId,
-  scrollToDefaultOpen = false,
+  onOpenChange,
+  scrollToInitialOpen = false,
   className = "",
   ...props
 }) => {
   const componentId = React.useId();
+  const isControlled = openId !== void 0;
   const initialOpenItemIdRef = React.useRef(
-    getInitialOpenItemId(
+    normalizeOpenItemId(
       items,
-      defaultOpenId
+      isControlled ? openId : defaultOpenId
     )
   );
-  const shouldScrollInitiallyRef = React.useRef(scrollToDefaultOpen);
+  const shouldScrollInitiallyRef = React.useRef(scrollToInitialOpen);
   const initialOpenItemRef = React.useRef(
     null
   );
   const hasScrolledInitiallyRef = React.useRef(false);
-  const [openItemId, setOpenItemId] = React.useState(
-    initialOpenItemIdRef.current
+  const [
+    uncontrolledOpenItemId,
+    setUncontrolledOpenItemId
+  ] = React.useState(
+    () => normalizeOpenItemId(
+      items,
+      defaultOpenId
+    )
+  );
+  const resolvedOpenItemId = normalizeOpenItemId(
+    items,
+    isControlled ? openId : uncontrolledOpenItemId
   );
   React.useEffect(() => {
     if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
@@ -56,9 +69,13 @@ const FlipList = ({
     {}
   );
   const toggleItem = (itemId) => {
-    setOpenItemId(
-      (current) => current === itemId ? null : itemId
-    );
+    const nextOpenItemId = resolvedOpenItemId === itemId ? null : itemId;
+    if (!isControlled) {
+      setUncontrolledOpenItemId(
+        nextOpenItemId
+      );
+    }
+    onOpenChange?.(nextOpenItemId);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -66,7 +83,7 @@ const FlipList = ({
       className: classes,
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
-        const isOpen = openItemId === item.id;
+        const isOpen = resolvedOpenItemId === item.id;
         const hasMeta = hasContent(
           item.meta
         );

package/components/flip-list/flip-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Item opened during the initial render.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Scrolls the initially opened item into view once\n   * after mounting.\n   *\n   * Has no effect without a valid defaultOpenId.\n   * Manual item opening never triggers scrolling.\n   */\n  scrollToDefaultOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialOpenItemId(\n  items: FlipListItem[],\n  defaultOpenId: React.Key | undefined,\n): OpenItemId {\n  if (defaultOpenId === undefined) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === defaultOpenId,\n  );\n\n  return hasMatchingItem\n    ? defaultOpenId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  defaultOpenId,\n  scrollToDefaultOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      getInitialOpenItemId(\n        items,\n        defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToDefaultOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [openItemId, setOpenItemId] =\n    React.useState<OpenItemId>(\n      initialOpenItemIdRef.current,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    setOpenItemId((current) =>\n      current === itemId\n        ? null\n        : itemId,\n    );\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            openItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/index.cjs

@@ -28,6 +28,7 @@ var discussion = require('./discussion/discussion');
 var courseOutline = require('./course-outline/course-outline');
 var calendarMonth = require('./calendar-month');
 var flipList = require('./flip-list/flip-list');
+var avatarUpload = require('./avatar-upload/avatar-upload');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -58,6 +59,7 @@ var markdown__default = /*#__PURE__*/_interopDefault(markdown);
 var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
 var flipList__default = /*#__PURE__*/_interopDefault(flipList);
+var avatarUpload__default = /*#__PURE__*/_interopDefault(avatarUpload);
 
 
 
@@ -169,6 +171,10 @@ Object.defineProperty(exports, "FlipList", {
   enumerable: true,
   get: function () { return flipList__default.default; }
 });
+Object.defineProperty(exports, "AvatarUpload", {
+  enumerable: true,
+  get: function () { return avatarUpload__default.default; }
+});
 Object.keys(calendarMonth).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/components/index.d.ts

@@ -53,3 +53,5 @@ export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem,
 export * from './calendar-month';
 export { default as FlipList } from './flip-list/flip-list';
 export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';
+export { default as AvatarUpload } from './avatar-upload/avatar-upload';
+export type { AvatarUploadProps, } from './avatar-upload/avatar-upload';

package/components/index.js

@@ -26,5 +26,6 @@ export { default as Discussion } from './discussion/discussion';
 export { default as CourseOutline } from './course-outline/course-outline';
 export * from './calendar-month';
 export { default as FlipList } from './flip-list/flip-list';
+export { default as AvatarUpload } from './avatar-upload/avatar-upload';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/index.cjs

@@ -30,6 +30,7 @@ var discussion = require('./components/discussion');
 var courseOutline = require('./components/course-outline');
 var calendarMonth = require('./components/calendar-month');
 var flipList = require('./components/flip-list');
+var avatarUpload = require('./components/avatar-upload');
 var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
@@ -72,6 +73,7 @@ var markdown__default = /*#__PURE__*/_interopDefault(markdown);
 var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
 var flipList__default = /*#__PURE__*/_interopDefault(flipList);
+var avatarUpload__default = /*#__PURE__*/_interopDefault(avatarUpload);
 var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
@@ -201,6 +203,10 @@ Object.defineProperty(exports, "FlipList", {
   enumerable: true,
   get: function () { return flipList__default.default; }
 });
+Object.defineProperty(exports, "AvatarUpload", {
+  enumerable: true,
+  get: function () { return avatarUpload__default.default; }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function () { return header__default.default; }

package/index.d.ts

@@ -61,6 +61,8 @@ export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem,
 export * from './components/calendar-month';
 export { default as FlipList } from './components/flip-list';
 export type { FlipListItem, FlipListProps, } from './components/flip-list';
+export { default as AvatarUpload } from './components/avatar-upload';
+export type { AvatarUploadProps, } from './components/avatar-upload';
 export { default as Header } from './patterns/header';
 export type { HeaderProps } from './patterns/header';
 export { default as Footer } from './patterns/footer';

package/index.js

@@ -28,6 +28,7 @@ export { default as Discussion } from './components/discussion';
 export { default as CourseOutline } from './components/course-outline';
 export * from './components/calendar-month';
 export { default as FlipList } from './components/flip-list';
+export { default as AvatarUpload } from './components/avatar-upload';
 export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';

package/package.json

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

package/styles.css

@@ -320,6 +320,97 @@
   text-transform: uppercase;
 }
 
+/* src/components/avatar-upload/avatar-upload.css */
+.avatar-upload {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__avatar {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-bottom: var(--margin-control);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+
+  /* border */
+  border: 0;
+
+  /* depth */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+
+  /* motion */
+}
+
+.avatar-upload__button {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar-upload__error {
+  /* color */
+  color: var(--color-text-bad);
+
+  /* typography */
+  font-family: var(--font-note-family);
+  font-size: var(--font-note);
+  font-weight: var(--font-note-weight);
+  line-height: var(--font-note-line);
+  letter-spacing: var(--font-note-letter-spacing);
+
+  /* size */
+  margin-top: var(--margin-descriptor);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/breadcrumbs/breadcrumbs.css */
 .breadcrumbs {
   /* color */