jvetrau-ds 0.2.3 → 0.2.5

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

@@ -90,6 +90,7 @@ const AvatarUpload = ({
           {
             className: "avatar-upload__button",
             type: "button",
+            rank: "link",
             disabled: isDisabled,
             "aria-describedby": hasError ? errorId : void 0,
             onClick: handleSelectClick,

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":";;;;;;;;;;;;;;;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;"]}
+{"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,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,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        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

@@ -82,6 +82,7 @@ const AvatarUpload = ({
           {
             className: "avatar-upload__button",
             type: "button",
+            rank: "link",
             disabled: isDisabled,
             "aria-describedby": hasError ? errorId : void 0,
             onClick: handleSelectClick,

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

package/components/button/button.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 require('./button.css');
 var Icon = require('../../icons/icon');
 var classnames = require('../helpers/classnames');
@@ -24,7 +23,7 @@ const Button = ({
   children,
   ...props
 }) => {
-  const hasIcon = hasContent(icon);
+  const hasIcon = icon !== void 0;
   const hasChildren = hasContent(children);
   const isIconOnly = hasIcon && !hasChildren;
   const isDisabled = disabled || loading;
@@ -41,22 +40,16 @@ const Button = ({
       "button--icon-only": isIconOnly
     }
   );
-  let resolvedIcon = icon;
-  if (react.isValidElement(icon) && icon.type === Icon__default.default) {
-    const iconElement = icon;
-    resolvedIcon = react.cloneElement(
-      iconElement,
-      {
-        size: iconElement.props.size ?? "base",
-        className: classnames.classnames(
-          "button__icon",
-          iconElement.props.className
-        ),
-        "aria-hidden": iconElement.props["aria-hidden"] ?? true,
-        focusable: iconElement.props.focusable ?? false
-      }
-    );
-  }
+  const resolvedIcon = hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+    Icon__default.default,
+    {
+      name: icon,
+      size: "base",
+      className: "button__icon",
+      "aria-hidden": true,
+      focusable: false
+    }
+  ) : null;
   const resolvedAriaBusy = loading ? true : props["aria-busy"];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",

package/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AA6DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IACEC,oBAAA,CAAe,IAAI,CAAA,IACnB,IAAA,CAAK,SAASC,qBAAA,EACd;AACA,IAAA,MAAM,WAAA,GACJ,IAAA;AAEF,IAAA,YAAA,GAAeC,kBAAA;AAAA,MACb,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EACE,WAAA,CAAY,KAAA,CAAM,IAAA,IAClB,MAAA;AAAA,QACF,SAAA,EAAWH,qBAAA;AAAA,UACT,cAAA;AAAA,UACA,YAAY,KAAA,CAAM;AAAA,SACpB;AAAA,QACA,aAAA,EACE,WAAA,CAAY,KAAA,CACV,aACF,CAAA,IAAK,IAAA;AAAA,QACP,SAAA,EACE,WAAA,CAAY,KAAA,CACT,SAAA,IAAa;AAAA;AACpB,KACF;AAAA,EACF;AAEA,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\n\nimport './button.css';\nimport Icon, { type IconProps } from '../../icons/icon';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: React.ReactNode;\n    }\n  | {\n      children?: never;\n      icon: React.ReactNode;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: React.ReactNode;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\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\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = hasContent(icon);\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  let resolvedIcon = icon;\n\n  if (\n    isValidElement(icon) &&\n    icon.type === Icon\n  ) {\n    const iconElement =\n      icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(\n      iconElement,\n      {\n        size:\n          iconElement.props.size ??\n          'base',\n        className: classnames(\n          'button__icon',\n          iconElement.props.className,\n        ),\n        'aria-hidden':\n          iconElement.props[\n            'aria-hidden'\n          ] ?? true,\n        focusable:\n          iconElement.props\n            .focusable ?? false,\n      },\n    );\n  }\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","jsx","Icon","jsxs"],"mappings":";;;;;;;;;;;AA0DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAU,IAAA,KAAS,MAAA;AACzB,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,eAAe,OAAA,mBACnBC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,cAAA;AAAA,MACV,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW;AAAA;AAAA,GACb,GACE,IAAA;AAEJ,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React from 'react';\n\nimport './button.css';\nimport Icon from '../../icons/icon';\nimport type { IconName } from '../../icons/types';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: IconName;\n    }\n  | {\n      children?: never;\n      icon: IconName;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: IconName;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\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\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = icon !== undefined;\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  const resolvedIcon = hasIcon ? (\n    <Icon\n      name={icon}\n      size=\"base\"\n      className=\"button__icon\"\n      aria-hidden\n      focusable={false}\n    />\n  ) : null;\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}

package/components/button/button.css

@@ -233,14 +233,15 @@
 .button--toolbar {
   /* color */
   --button-bg: transparent;
-  --button-color: var(--color-text);
-  --button-focus-color: var(--color-text);
+  --button-color: inherit;
+  --button-focus-color: currentColor;
 
   background: transparent;
 
   /* typography */
 
   /* size */
+  min-height: 0;
   padding-inline: 0;
 
   /* border */

package/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './button.css';
+import type { IconName } from '../../icons/types';
 export type ButtonRank = 'default' | 'primary' | 'link';
 export type ButtonDensity = 'default' | 'compact';
 type ButtonNativeProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
@@ -9,10 +10,10 @@ interface ButtonSharedProps extends ButtonNativeProps {
 }
 type RegularButtonContentProps = {
     children: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: IconName;
 } | {
     children?: never;
-    icon: React.ReactNode;
+    icon: IconName;
     'aria-label': string;
 };
 type RegularButtonProps = ButtonSharedProps & RegularButtonContentProps & {
@@ -21,7 +22,7 @@ type RegularButtonProps = ButtonSharedProps & RegularButtonContentProps & {
 };
 type ToolbarButtonProps = ButtonSharedProps & {
     mode: 'toolbar';
-    icon: React.ReactNode;
+    icon: IconName;
     children?: never;
     rank?: never;
     'aria-label': string;

package/components/button/button.js

@@ -1,5 +1,4 @@
-import { jsxs } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import './button.css';
 import Icon from '../../icons/icon';
 import { classnames } from '../helpers/classnames';
@@ -18,7 +17,7 @@ const Button = ({
   children,
   ...props
 }) => {
-  const hasIcon = hasContent(icon);
+  const hasIcon = icon !== void 0;
   const hasChildren = hasContent(children);
   const isIconOnly = hasIcon && !hasChildren;
   const isDisabled = disabled || loading;
@@ -35,22 +34,16 @@ const Button = ({
       "button--icon-only": isIconOnly
     }
   );
-  let resolvedIcon = icon;
-  if (isValidElement(icon) && icon.type === Icon) {
-    const iconElement = icon;
-    resolvedIcon = cloneElement(
-      iconElement,
-      {
-        size: iconElement.props.size ?? "base",
-        className: classnames(
-          "button__icon",
-          iconElement.props.className
-        ),
-        "aria-hidden": iconElement.props["aria-hidden"] ?? true,
-        focusable: iconElement.props.focusable ?? false
-      }
-    );
-  }
+  const resolvedIcon = hasIcon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: icon,
+      size: "base",
+      className: "button__icon",
+      "aria-hidden": true,
+      focusable: false
+    }
+  ) : null;
   const resolvedAriaBusy = loading ? true : props["aria-busy"];
   return /* @__PURE__ */ jsxs(
     "button",

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AA6DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IACE,cAAA,CAAe,IAAI,CAAA,IACnB,IAAA,CAAK,SAAS,IAAA,EACd;AACA,IAAA,MAAM,WAAA,GACJ,IAAA;AAEF,IAAA,YAAA,GAAe,YAAA;AAAA,MACb,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EACE,WAAA,CAAY,KAAA,CAAM,IAAA,IAClB,MAAA;AAAA,QACF,SAAA,EAAW,UAAA;AAAA,UACT,cAAA;AAAA,UACA,YAAY,KAAA,CAAM;AAAA,SACpB;AAAA,QACA,aAAA,EACE,WAAA,CAAY,KAAA,CACV,aACF,CAAA,IAAK,IAAA;AAAA,QACP,SAAA,EACE,WAAA,CAAY,KAAA,CACT,SAAA,IAAa;AAAA;AACpB,KACF;AAAA,EACF;AAEA,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\n\nimport './button.css';\nimport Icon, { type IconProps } from '../../icons/icon';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: React.ReactNode;\n    }\n  | {\n      children?: never;\n      icon: React.ReactNode;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: React.ReactNode;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\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\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = hasContent(icon);\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  let resolvedIcon = icon;\n\n  if (\n    isValidElement(icon) &&\n    icon.type === Icon\n  ) {\n    const iconElement =\n      icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(\n      iconElement,\n      {\n        size:\n          iconElement.props.size ??\n          'base',\n        className: classnames(\n          'button__icon',\n          iconElement.props.className,\n        ),\n        'aria-hidden':\n          iconElement.props[\n            'aria-hidden'\n          ] ?? true,\n        focusable:\n          iconElement.props\n            .focusable ?? false,\n      },\n    );\n  }\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;AA0DA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAU,IAAA,KAAS,MAAA;AACzB,EAAA,MAAM,WAAA,GAAc,WAAW,QAAQ,CAAA;AAEvC,EAAA,MAAM,UAAA,GACJ,WAAW,CAAC,WAAA;AAEd,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,gBACE,IAAA,KAAS,MAAA;AAAA,MACX,mBACE,OAAA,KAAY,SAAA;AAAA,MACd,mBACE,IAAA,KAAS,SAAA;AAAA,MACX,kBAAA,EACE,UAAA;AAAA,MACF,iBAAA,EACE,OAAA;AAAA,MACF,mBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,eAAe,OAAA,mBACnB,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,cAAA;AAAA,MACV,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW;AAAA;AAAA,GACb,GACE,IAAA;AAEJ,EAAA,MAAM,gBAAA,GACJ,OAAA,GACI,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAEvB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,gBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React from 'react';\n\nimport './button.css';\nimport Icon from '../../icons/icon';\nimport type { IconName } from '../../icons/types';\nimport { classnames } from '../helpers/classnames';\n\nexport type ButtonRank =\n  | 'default'\n  | 'primary'\n  | 'link';\n\nexport type ButtonDensity =\n  | 'default'\n  | 'compact';\n\ntype ButtonNativeProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n>;\n\ninterface ButtonSharedProps\n  extends ButtonNativeProps {\n  density?: ButtonDensity;\n  loading?: boolean;\n}\n\ntype RegularButtonContentProps =\n  | {\n      children: React.ReactNode;\n      icon?: IconName;\n    }\n  | {\n      children?: never;\n      icon: IconName;\n      'aria-label': string;\n    };\n\ntype RegularButtonProps =\n  ButtonSharedProps &\n  RegularButtonContentProps & {\n    mode?: 'default';\n    rank?: ButtonRank;\n  };\n\ntype ToolbarButtonProps =\n  ButtonSharedProps & {\n    mode: 'toolbar';\n    icon: IconName;\n    children?: never;\n    rank?: never;\n    'aria-label': string;\n  };\n\nexport type ButtonProps =\n  | RegularButtonProps\n  | ToolbarButtonProps;\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\nconst Button: React.FC<ButtonProps> = ({\n  mode = 'default',\n  rank = 'default',\n  density = 'default',\n  loading = false,\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const hasIcon = icon !== undefined;\n  const hasChildren = hasContent(children);\n\n  const isIconOnly =\n    hasIcon && !hasChildren;\n\n  const isDisabled =\n    disabled || loading;\n\n  const classes = classnames(\n    'button',\n    className,\n    {\n      'button--primary':\n        rank === 'primary',\n      'button--link':\n        rank === 'link',\n      'button--compact':\n        density === 'compact',\n      'button--toolbar':\n        mode === 'toolbar',\n      'button--disabled':\n        isDisabled,\n      'button--loading':\n        loading,\n      'button--icon-only':\n        isIconOnly,\n    },\n  );\n\n  const resolvedIcon = hasIcon ? (\n    <Icon\n      name={icon}\n      size=\"base\"\n      className=\"button__icon\"\n      aria-hidden\n      focusable={false}\n    />\n  ) : null;\n\n  const resolvedAriaBusy =\n    loading\n      ? true\n      : props['aria-busy'];\n\n  return (\n    <button\n      {...props}\n      className={classes}\n      disabled={isDisabled}\n      aria-busy={resolvedAriaBusy}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"]}

package/components/card/card.cjs

@@ -4,28 +4,49 @@ var jsxRuntime = require('react/jsx-runtime');
 require('./card.css');
 var classnames = require('../helpers/classnames');
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Card = ({
-  state = "default",
   heading,
+  headingLevel = 2,
   description,
   actions,
   className = "",
   children,
   ...props
 }) => {
-  const classes = classnames.classnames("card", className, {});
+  const classes = classnames.classnames(
+    "card",
+    className,
+    {}
+  );
+  const HeadingTag = `h${headingLevel}`;
+  const hasHeading = hasContent(heading);
+  const hasDescription = hasContent(description);
+  const hasHeader = hasHeading || hasDescription;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card__header", children: [
-          heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "card__heading", children: heading }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card__description", children: description })
+        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card__header", children: [
+          hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
+            HeadingTag,
+            {
+              className: classnames.classnames(
+                "card__heading",
+                `card__heading--h${headingLevel}`,
+                {}
+              ),
+              children: heading
+            }
+          ),
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card__description", children: description })
         ] }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card__content", children }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card__actions", children: actions })
+        hasContent(children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card__content", children }),
+        hasContent(actions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card__actions", children: actions })
       ]
     }
   );

package/components/card/card.cjs.map

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

package/components/card/card.css

@@ -13,12 +13,11 @@
   --card-padding: var(--padding-container);
   --card-gap: var(--margin-container-item);
   --card-title-gap: var(--font-h2-margin);
-  --card-content-min-height: 200px;
 
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--card-gap);
   width: var(--card-width);
   padding: var(--card-padding);
@@ -51,10 +50,25 @@
   /* motion */
 }
 
-.card__title {
+.card__heading {
   /* color */
   color: inherit;
 
+  /* typography */
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__heading--h2 {
+  /* color */
+
   /* typography */
   font-family: var(--font-h2-family);
   font-size: var(--font-h2);
@@ -63,7 +77,25 @@
   letter-spacing: var(--font-h2-letter-spacing);
 
   /* size */
-  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__heading--h3 {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3);
+  font-weight: var(--font-h3-weight);
+  line-height: var(--font-h3-line);
+  letter-spacing: var(--font-h3-letter-spacing);
+
+  /* size */
 
   /* border */
 
@@ -99,7 +131,6 @@
   /* typography */
 
   /* size */
-  min-height: var(--card-content-min-height);
   width: 100%;
 
   /* border */

package/components/card/card.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import './card.css';
 export interface CardProps extends React.HTMLAttributes<HTMLElement> {
-    state?: 'default';
     heading?: React.ReactNode;
+    headingLevel?: 2 | 3;
     description?: React.ReactNode;
     actions?: React.ReactNode;
 }

package/components/card/card.js

@@ -2,28 +2,49 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import './card.css';
 import { classnames } from '../helpers/classnames';
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Card = ({
-  state = "default",
   heading,
+  headingLevel = 2,
   description,
   actions,
   className = "",
   children,
   ...props
 }) => {
-  const classes = classnames("card", className, {});
+  const classes = classnames(
+    "card",
+    className,
+    {}
+  );
+  const HeadingTag = `h${headingLevel}`;
+  const hasHeading = hasContent(heading);
+  const hasDescription = hasContent(description);
+  const hasHeader = hasHeading || hasDescription;
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "card__header", children: [
-          heading && /* @__PURE__ */ jsx("h2", { className: "card__heading", children: heading }),
-          description && /* @__PURE__ */ jsx("p", { className: "card__description", children: description })
+        hasHeader && /* @__PURE__ */ jsxs("div", { className: "card__header", children: [
+          hasHeading && /* @__PURE__ */ jsx(
+            HeadingTag,
+            {
+              className: classnames(
+                "card__heading",
+                `card__heading--h${headingLevel}`,
+                {}
+              ),
+              children: heading
+            }
+          ),
+          hasDescription && /* @__PURE__ */ jsx("p", { className: "card__description", children: description })
         ] }),
-        children && /* @__PURE__ */ jsx("div", { className: "card__content", children }),
-        actions && /* @__PURE__ */ jsx("div", { className: "card__actions", children: actions })
+        hasContent(children) && /* @__PURE__ */ jsx("div", { className: "card__content", children }),
+        hasContent(actions) && /* @__PURE__ */ jsx("div", { className: "card__actions", children: actions })
       ]
     }
   );

package/components/card/card.js.map

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

package/components/card-group/card-group.css

@@ -8,6 +8,7 @@
   --card-group-min-column-width: var(--size-container-width-min);
 
   display: grid;
+  align-items: stretch;
   gap: var(--card-group-gap);
   width: 100%;
 
@@ -19,6 +20,10 @@
 }
 
 .card-group--auto {
+  /* color */
+
+  /* typography */
+
   /* size */
   grid-template-columns:
     repeat(
@@ -28,33 +33,105 @@
         1fr
       )
     );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-1 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      1,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-2 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      2,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-3 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      3,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-4 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      4,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 @media (max-width: 720px) {
   .card-group--columns-2,
   .card-group--columns-3,
   .card-group--columns-4 {
+    /* color */
+
+    /* typography */
+
     /* size */
     grid-template-columns: 1fr;
+
+    /* border */
+
+    /* depth */
+
+    /* motion */
   }
 }