jvetrau-ds 0.1.16 → 0.1.18

package/components/attach/attach.css

@@ -0,0 +1,141 @@
+.attach {
+  /* color */
+  --attachment-color: var(--color-text);
+  --attachment-item-bg: var(--color-control);
+  --attachment-border-color: var(--color-line);
+  --attachment-size-color: var(--color-text-note);
+
+  color: var(--attachment-color);
+
+  /* typography */
+  --attachment-font-family: var(--font-control-family);
+  --attachment-font-size: var(--font-control);
+  --attachment-font-weight: var(--font-control-weight);
+  --attachment-line-height: var(--font-control-line);
+  --attachment-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--attachment-font-family);
+  font-size: var(--attachment-font-size);
+  font-weight: var(--attachment-font-weight);
+  line-height: var(--attachment-line-height);
+  letter-spacing: var(--attachment-letter-spacing);
+
+  /* size */
+  --attachment-gap: var(--margin-control);
+  --attachment-item-gap: var(--margin-icon);
+  --attachment-item-padding: var(--padding-control-vert);
+  --attachment-preview-max-width: 240px;
+  --attachment-preview-max-height: 180px;
+
+  /* border */
+  --attachment-radius: var(--radius-control);
+  --attachment-border-width: var(--size-border-width-base);
+
+  /* depth */
+
+  /* motion */
+}
+
+.attach__list {
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--attachment-gap);
+  margin: 0;
+  padding: 0;
+
+  /* border */
+  list-style: none;
+}
+
+.attach__item {
+  /* color */
+  background: var(--attachment-item-bg);
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--attachment-item-gap);
+  padding: var(--attachment-item-padding);
+
+  /* border */
+  border:
+    var(--attachment-border-width)
+    solid
+    var(--attachment-border-color);
+  border-radius: var(--attachment-radius);
+}
+
+.attach__link {
+  /* color */
+  color: inherit;
+
+  /* size */
+  min-width: 0;
+
+  /* typography */
+  text-decoration: none;
+}
+
+.attach__link:hover .attach__name {
+  text-decoration: underline;
+}
+
+.attach__preview {
+  /* size */
+  display: block;
+  max-width: var(--attachment-preview-max-width);
+  max-height: var(--attachment-preview-max-height);
+  object-fit: contain;
+
+  /* border */
+  border-radius: var(--attachment-radius);
+}
+
+.attach__file {
+  /* size */
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.attach__name {
+  /* size */
+  overflow: hidden;
+
+  /* typography */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attach__size {
+  /* color */
+  color: var(--attachment-size-color);
+
+  /* typography */
+  font-size: 0.85em;
+}
+
+.attach__remove {
+  /* color */
+  background: transparent;
+  color: inherit;
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  flex-shrink: 0;
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* motion */
+  cursor: pointer;
+}
+
+.attach__remove:hover {
+  text-decoration: underline;
+}

package/components/avatar/avatar.css

@@ -0,0 +1,69 @@
+.avatar {
+  /* color */
+  --avatar-bg: var(--color-control);
+  --avatar-color: var(--color-text-control);
+
+  background: var(--avatar-bg);
+  color: var(--avatar-color);
+
+  /* typography */
+  --avatar-font-family: var(--font-control-family);
+  --avatar-font-size: var(--font-control);
+  --avatar-font-weight: var(--font-control-weight);
+  --avatar-line-height: var(--font-control-line);
+  --avatar-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--avatar-font-family);
+  font-size: var(--avatar-font-size);
+  font-weight: var(--avatar-font-weight);
+  line-height: var(--avatar-line-height);
+  letter-spacing: var(--avatar-letter-spacing);
+
+  /* size */
+  --avatar-size: 48px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+
+  /* border */
+  --avatar-radius: 50%;
+
+  border-radius: var(--avatar-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar--button {
+  /* color */
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* motion */
+  cursor: pointer;
+}
+
+.avatar__image {
+  /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar__initials {
+  /* typography */
+  text-transform: uppercase;
+}

package/components/button/button.cjs

@@ -28,7 +28,7 @@ const Button = ({
   if (react.isValidElement(icon) && icon.type === Icon__default.default) {
     const iconElement = icon;
     resolvedIcon = react.cloneElement(iconElement, {
-      size: iconElement.props.size ?? "s",
+      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

package/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAIC,oBAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAASC,qBAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAeC,mBAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,GAAA;AAAA,MAChC,SAAA,EAAWH,qBAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,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';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 's',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAIC,oBAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAASC,qBAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAeC,mBAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAWH,qBAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,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';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}

package/components/button/button.css

@@ -0,0 +1,104 @@
+.button {
+  /* color */
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+  --button-bg-disabled: var(--color-bg-disabled);
+  --button-color-disabled: var(--color-text-disabled, var(--color-text-control));
+
+  background: var(--button-bg);
+  color: var(--button-color);
+
+  /* typography */
+  --button-font-family: var(--font-control-family);
+  --button-font-weight: var(--font-control-weight);
+  --button-font-size: var(--font-control);
+  --button-line-height: var(--font-control-line);
+  --button-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  letter-spacing: var(--button-letter-spacing);
+
+  /* size */
+  --button-gap: var(--margin-icon);
+  --button-height: var(--size-control-height);
+  --button-padding-x: var(--padding-control-button-horz);
+  --button-padding-icon-only: var(--padding-control-button-icon-horz);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-gap);
+  min-height: var(--button-height);
+  padding-inline: var(--button-padding-x);
+
+  /* border */
+  --button-radius: var(--radius-control-button);
+  --button-focus-width: var(--size-border-width-base);
+  --button-focus-offset: var(--size-border-width-base);
+
+  border: 0;
+  border-radius: var(--button-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-opacity-hover: 0.8;
+  --button-opacity-active: 0.6;
+  --button-opacity-disabled: 0.6;
+  --button-transition-duration: 0.2s;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-transition-duration) ease;
+}
+
+.button__icon {
+  /* color */
+
+  /* typography */
+  line-height: 0;
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.button:hover {
+  opacity: var(--button-opacity-hover);
+}
+
+.button:focus-visible {
+  outline: var(--button-focus-width) solid var(--button-bg);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button:active {
+  opacity: var(--button-opacity-active);
+}
+
+.button:disabled,
+.button--disabled {
+  background: var(--button-bg-disabled);
+  color: var(--button-color-disabled);
+  opacity: var(--button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.button--primary {
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+}
+
+.button--icon-only {
+  padding-inline: var(--button-padding-icon-only);
+}

package/components/button/button.js

@@ -22,7 +22,7 @@ const Button = ({
   if (isValidElement(icon) && icon.type === Icon) {
     const iconElement = icon;
     resolvedIcon = cloneElement(iconElement, {
-      size: iconElement.props.size ?? "s",
+      size: iconElement.props.size ?? "base",
       className: classnames("button__icon", iconElement.props.className),
       "aria-hidden": iconElement.props["aria-hidden"] ?? true,
       focusable: iconElement.props.focusable ?? false

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAI,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAe,aAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,GAAA;AAAA,MAChC,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,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';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 's',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAI,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAe,aAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,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';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}

package/components/button-icon/button-icon.css

@@ -0,0 +1,67 @@
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}

package/components/button-icon/button-icon.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as IconName } from '../../types-PU1522Kr.cjs';
+import { a as IconName } from '../../types-DboVOY__.cjs';
 
 interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: IconName;

package/components/button-icon/button-icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as IconName } from '../../types-PU1522Kr.js';
+import { a as IconName } from '../../types-DboVOY__.js';
 
 interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: IconName;

package/components/button-icon/index.d.cts

@@ -1,3 +1,3 @@
 export { ButtonIconProps, default } from './button-icon.cjs';
 import 'react';
-import '../../types-PU1522Kr.cjs';
+import '../../types-DboVOY__.cjs';

package/components/button-icon/index.d.ts

@@ -1,3 +1,3 @@
 export { ButtonIconProps, default } from './button-icon.js';
 import 'react';
-import '../../types-PU1522Kr.js';
+import '../../types-DboVOY__.js';

package/components/card/card.css

@@ -0,0 +1,128 @@
+.card {
+  /* color */
+  --card-bg: var(--color-bg-container);
+  --card-color: var(--color-text-container);
+
+  background: var(--card-bg);
+  color: var(--card-color);
+
+  /* typography */
+
+  /* size */
+  --card-width: 100%;
+  --card-padding: var(--padding-container);
+  --card-gap: var(--margin-container-item);
+  --card-title-gap: var(--font-h2-margin);
+  --card-content-min-height: 200px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--card-gap);
+  width: var(--card-width);
+  padding: var(--card-padding);
+
+  /* border */
+  --card-radius: var(--radius-container);
+
+  border-radius: var(--card-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: var(--card-content-min-height);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-control);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/checkbox/checkbox.css

@@ -0,0 +1,80 @@
+.checkbox {
+  /* color */
+  --checkbox-label-color: var(--color-text);
+
+  color: var(--checkbox-label-color);
+
+  /* typography */
+  --checkbox-font-family: var(--font-body-family);
+  --checkbox-font-weight: var(--font-body-weight);
+  --checkbox-font-size: var(--font-body);
+  --checkbox-line-height: var(--font-body-line);
+  --checkbox-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--checkbox-font-family);
+  font-size: var(--checkbox-font-size);
+  font-weight: var(--checkbox-font-weight);
+  line-height: var(--checkbox-line-height);
+  letter-spacing: var(--checkbox-letter-spacing);
+
+  /* size */
+  --checkbox-gap: var(--margin-choice);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  --checkbox-opacity-disabled: 0.6;
+}
+
+.checkbox__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: var(--size-control-checkbox);
+  height: var(--size-control-checkbox);
+  margin: 0;
+  flex-shrink: 0;
+
+  /* border */
+  --сheckbox-radius: var(--radius-control);
+  --сheckbox-focus-width: var(--size-border-width-base);
+  --сheckbox-focus-offset: var(--size-border-width-base);
+
+  border: var(--сheckbox-border-width) solid var(--сheckbox-border-color);
+  border-radius: var(--сheckbox-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox--disabled {
+  opacity: var(--checkbox-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox__input:disabled {
+  cursor: not-allowed;
+}