draft-components 1.13.0 → 2.0.1

package/css/draft-components.dark.css

@@ -31,49 +31,49 @@
   --dc-error-text-color: var(--dc-red-400);
   --dc-warning-text-color: var(--dc-orange-400);
 
-  /* Default button */
-  --dc-button-default-text-color: var(--dc-gray-100);
-  --dc-button-default-border-color: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-button-default-bg: var(--dc-gray-700);
-  --dc-button-default-bg-hover: var(--dc-gray-600);
-  --dc-button-default-tinted-text-color: var(--dc-gray-100);
-  --dc-button-default-tinted-bg: rgb(var(--dc-gray-50-rgb) / 0.1);
-  --dc-button-default-tinted-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.2);
-  --dc-button-default-plain-text-color: var(--dc-gray-100);
-  --dc-button-default-plain-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.1);
-
-  /* Primary button */
-  --dc-button-primary-text-color: var(--dc-white);
-  --dc-button-primary-border-color: transparent;
-  --dc-button-primary-bg: var(--dc-blue-600);
-  --dc-button-primary-bg-hover: var(--dc-blue-500);
-  --dc-button-primary-tinted-text-color: var(--dc-blue-400);
-  --dc-button-primary-tinted-bg: rgb(var(--dc-blue-400-rgb) / 0.15);
-  --dc-button-primary-tinted-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.3);
-  --dc-button-primary-plain-text-color: var(--dc-blue-400);
-  --dc-button-primary-plain-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.15);
-
-  /* Danger button */
-  --dc-button-danger-text-color: var(--dc-white);
-  --dc-button-danger-border-color: transparent;
-  --dc-button-danger-bg: var(--dc-red-600);
-  --dc-button-danger-bg-hover: var(--dc-red-500);
-  --dc-button-danger-tinted-text-color: var(--dc-red-400);
-  --dc-button-danger-tinted-bg: rgb(var(--dc-red-400-rgb) / 0.15);
-  --dc-button-danger-tinted-bg-hover: rgb(var(--dc-red-400-rgb) / 0.3);
-  --dc-button-danger-plain-text-color: var(--dc-red-400);
-  --dc-button-danger-plain-bg-hover: rgb(var(--dc-red-400-rgb) / 0.15);
-
-  /* Success button */
-  --dc-button-success-text-color: var(--dc-white);
-  --dc-button-success-border-color: transparent;
-  --dc-button-success-bg: var(--dc-green-600);
-  --dc-button-success-bg-hover: var(--dc-green-500);
-  --dc-button-success-tinted-text-color: var(--dc-green-400);
-  --dc-button-success-tinted-bg: rgb(var(--dc-green-400-rgb) / 0.15);
-  --dc-button-success-tinted-bg-hover: rgb(var(--dc-green-400-rgb) / 0.3);
-  --dc-button-success-plain-text-color: var(--dc-green-400);
-  --dc-button-success-plain-bg-hover: rgb(var(--dc-green-400-rgb) / 0.15);
+  /* Gray button */
+  --dc-button-gray-text-color: var(--dc-gray-100);
+  --dc-button-gray-border-color: rgb(var(--dc-gray-50-rgb) / 0.1);
+  --dc-button-gray-bg: var(--dc-gray-700);
+  --dc-button-gray-bg-hover: var(--dc-gray-600);
+  --dc-button-gray-tinted-text-color: var(--dc-gray-100);
+  --dc-button-gray-tinted-bg: rgb(var(--dc-gray-50-rgb) / 0.1);
+  --dc-button-gray-tinted-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.2);
+  --dc-button-gray-plain-text-color: var(--dc-gray-100);
+  --dc-button-gray-plain-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.1);
+
+  /* Blue button */
+  --dc-button-blue-text-color: var(--dc-white);
+  --dc-button-blue-border-color: transparent;
+  --dc-button-blue-bg: var(--dc-blue-600);
+  --dc-button-blue-bg-hover: var(--dc-blue-500);
+  --dc-button-blue-tinted-text-color: var(--dc-blue-400);
+  --dc-button-blue-tinted-bg: rgb(var(--dc-blue-400-rgb) / 0.15);
+  --dc-button-blue-tinted-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.3);
+  --dc-button-blue-plain-text-color: var(--dc-blue-400);
+  --dc-button-blue-plain-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.15);
+
+  /* Red button */
+  --dc-button-red-text-color: var(--dc-white);
+  --dc-button-red-border-color: transparent;
+  --dc-button-red-bg: var(--dc-red-600);
+  --dc-button-red-bg-hover: var(--dc-red-500);
+  --dc-button-red-tinted-text-color: var(--dc-red-400);
+  --dc-button-red-tinted-bg: rgb(var(--dc-red-400-rgb) / 0.15);
+  --dc-button-red-tinted-bg-hover: rgb(var(--dc-red-400-rgb) / 0.3);
+  --dc-button-red-plain-text-color: var(--dc-red-400);
+  --dc-button-red-plain-bg-hover: rgb(var(--dc-red-400-rgb) / 0.15);
+
+  /* Green button */
+  --dc-button-green-text-color: var(--dc-white);
+  --dc-button-green-border-color: transparent;
+  --dc-button-green-bg: var(--dc-green-600);
+  --dc-button-green-bg-hover: var(--dc-green-500);
+  --dc-button-green-tinted-text-color: var(--dc-green-400);
+  --dc-button-green-tinted-bg: rgb(var(--dc-green-400-rgb) / 0.15);
+  --dc-button-green-tinted-bg-hover: rgb(var(--dc-green-400-rgb) / 0.3);
+  --dc-button-green-plain-text-color: var(--dc-green-400);
+  --dc-button-green-plain-bg-hover: rgb(var(--dc-green-400-rgb) / 0.15);
 
   /* Controls */
   --dc-control-primary-text-color: var(--dc-gray-100);
@@ -98,126 +98,198 @@
 
 .dark .dc-tag,
 .dark.dc-tag {
-  --dc-tag-text-color: var(--dc-gray-50);
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.4);
+  --dc-tag-text-color: var(--dc-gray-300);
+  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 0.2);
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.1);
 
   color-scheme: dark;
 }
 
-.dark .dc-tag_plain,
-.dark.dc-tag_plain {
-  --dc-tag-text-color: var(--dc-gray-300);
-  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 0.2);
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.1);
+.dark .dc-tag_filled,
+.dark.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-gray-800);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-gray-300);
 }
 
-.dark .dc-tag_green,
-.dark.dc-tag_green {
-  --dc-tag-text-color: var(--dc-green-50);
-  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.5);
+.dark .dc-tag_tinted,
+.dark.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-gray-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.4);
 }
 
-.dark .dc-tag_green.dc-tag_plain,
-.dark.dc-tag_green.dc-tag_plain {
+.dark .dc-tag_green,
+.dark.dc-tag_green {
   --dc-tag-text-color: var(--dc-green-400);
   --dc-tag-border-color: rgb(var(--dc-green-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_cyan,
-.dark.dc-tag_cyan {
-  --dc-tag-text-color: var(--dc-sky-50);
-  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.5);
+.dark.dc-tag_green.dc-tag_filled,
+.dark .dc-tag_green.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-green-600);
+}
+
+.dark .dc-tag_green.dc-tag_tinted,
+.dark.dc-tag_green.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-green-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.5);
 }
 
-.dark .dc-tag_cyan.dc-tag_plain,
-.dark.dc-tag_cyan.dc-tag_plain {
+.dark .dc-tag_cyan,
+.dark.dc-tag_cyan {
   --dc-tag-text-color: var(--dc-sky-400);
   --dc-tag-border-color: rgb(var(--dc-sky-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_blue,
-.dark.dc-tag_blue {
-  --dc-tag-text-color: var(--dc-blue-50);
-  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.5);
+.dark .dc-tag_cyan.dc-tag_filled,
+.dark.dc-tag_cyan.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-sky-600);
+}
+
+.dark .dc-tag_cyan.dc-tag_tinted,
+.dark.dc-tag_cyan.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-sky-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.5);
 }
 
-.dark .dc-tag_blue.dc-tag_plain,
-.dark.dc-tag_blue.dc-tag_plain {
+.dark .dc-tag_blue,
+.dark.dc-tag_blue {
   --dc-tag-text-color: var(--dc-blue-400);
   --dc-tag-border-color: rgb(var(--dc-blue-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_purple,
-.dark.dc-tag_purple {
-  --dc-tag-text-color: var(--dc-violet-50);
-  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.5);
+.dark .dc-tag_blue.dc-tag_filled,
+.dark.dc-tag_blue.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-blue-600);
 }
 
-.dark .dc-tag_purple.dc-tag_plain,
-.dark.dc-tag_purple.dc-tag_plain {
+.dark .dc-tag_blue.dc-tag_tinted,
+.dark.dc-tag_blue.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-blue-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.5);
+}
+
+.dark .dc-tag_purple,
+.dark.dc-tag_purple {
   --dc-tag-text-color: var(--dc-violet-400);
   --dc-tag-border-color: rgb(var(--dc-violet-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.1);
 }
 
-.dark.dc-tag_pink,
-.dark .dc-tag_pink {
-  --dc-tag-text-color: var(--dc-pink-50);
-  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.5);
+.dark .dc-tag_purple.dc-tag_filled,
+.dark.dc-tag_purple.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-violet-600);
+}
+
+.dark .dc-tag_purple.dc-tag_tinted,
+.dark.dc-tag_purple.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-violet-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.5);
 }
 
-.dark .dc-tag_pink.dc-tag_plain,
-.dark.dc-tag_pink.dc-tag_plain {
+.dark.dc-tag_pink,
+.dark .dc-tag_pink {
   --dc-tag-text-color: var(--dc-pink-400);
   --dc-tag-border-color: rgb(var(--dc-pink-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_red,
-.dark.dc-tag_red {
-  --dc-tag-text-color: var(--dc-red-50);
-  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.5);
+.dark .dc-tag_pink.dc-tag_filled,
+.dark.dc-tag_pink.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-pink-600);
+}
+
+.dark .dc-tag_pink.dc-tag_tinted,
+.dark.dc-tag_pink.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-pink-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.5);
 }
 
-.dark .dc-tag_red.dc-tag_plain,
-.dark.dc-tag_red.dc-tag_plain {
+.dark .dc-tag_red,
+.dark.dc-tag_red {
   --dc-tag-text-color: var(--dc-red-400);
   --dc-tag-border-color: rgb(var(--dc-red-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_orange,
-.dark.dc-tag_orange {
-  --dc-tag-text-color: var(--dc-orange-50);
-  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.5);
+.dark .dc-tag_red.dc-tag_filled,
+.dark.dc-tag_red.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-red-500);
+}
+
+.dark .dc-tag_red.dc-tag_tinted,
+.dark.dc-tag_red.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-red-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.5);
 }
 
-.dark .dc-tag_orange.dc-tag_plain,
-.dark.dc-tag_orange.dc-tag_plain {
+.dark .dc-tag_orange,
+.dark.dc-tag_orange {
   --dc-tag-text-color: var(--dc-orange-500);
   --dc-tag-border-color: rgb(var(--dc-orange-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.1);
 }
 
-.dark .dc-tag_yellow,
-.dark.dc-tag_yellow {
-  --dc-tag-text-color: var(--dc-yellow-50);
-  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.5);
+.dark .dc-tag_orange.dc-tag_filled,
+.dark.dc-tag_orange.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-white);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-orange-500);
 }
 
-.dark .dc-tag_yellow.dc-tag_plain,
-.dark.dc-tag_yellow.dc-tag_plain {
+.dark .dc-tag_orange.dc-tag_tinted,
+.dark.dc-tag_orange.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-orange-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.5);
+}
+
+.dark .dc-tag_yellow,
+.dark.dc-tag_yellow {
   --dc-tag-text-color: var(--dc-yellow-500);
   --dc-tag-border-color: rgb(var(--dc-yellow-200-rgb) / 0.2);
   --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.1);
 }
 
+.dark .dc-tag_yellow.dc-tag_filled,
+.dark.dc-tag_yellow.dc-tag_filled {
+  --dc-tag-text-color: var(--dc-yellow-900);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: var(--dc-yellow-400);
+}
+
+.dark .dc-tag_yellow.dc-tag_tinted,
+.dark.dc-tag_yellow.dc-tag_tinted {
+  --dc-tag-text-color: var(--dc-yellow-50);
+  --dc-tag-border-color: transparent;
+  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.5);
+}
+
 .dark .dc-avatar,
 .dark.dc-avatar {
-  --dc-avatar-inner-border-color: rgb(var(--dc-gray-50-rgb) / 0.15);
+  --dc-avatar-image-border-color: rgb(var(--dc-gray-50-rgb) / 0.15);
 
   color-scheme: dark;
 }
@@ -292,8 +364,8 @@
 
 /* Forms */
 
-.dark .dc-text-input__container,
-.dark.dc-text-input__container {
+.dark .dc-text-input,
+.dark.dc-text-input {
   color-scheme: dark;
 }
 
@@ -302,13 +374,13 @@
   color-scheme: dark;
 }
 
-.dark .dc-textarea__container,
-.dark.dc-textarea__container {
+.dark .dc-textarea,
+.dark.dc-textarea {
   color-scheme: dark;
 }
 
-.dark .dc-select__container,
-.dark.dc-select__container {
+.dark .dc-select,
+.dark.dc-select {
   color-scheme: dark;
 }
 
@@ -412,8 +484,8 @@
   color-scheme: dark;
 }
 
-.dark .dc-alert_appearance_warning,
-.dark.dc-alert_appearance_warning {
+.dark .dc-alert_tint_orange,
+.dark.dc-alert_tint_orange {
   --dc-alert-text-color: var(--dc-orange-400);
   --dc-alert-icon-color: var(--dc-orange-400);
   --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 0.1);
@@ -421,8 +493,8 @@
   --dc-alert-accent-border-color: var(--dc-orange-500);
 }
 
-.dark .dc-alert_appearance_error,
-.dark.dc-alert_appearance_error {
+.dark .dc-alert_tint_red,
+.dark.dc-alert_tint_red {
   --dc-alert-text-color: var(--dc-red-400);
   --dc-alert-icon-color: var(--dc-red-400);
   --dc-alert-bg: rgb(var(--dc-red-300-rgb) / 0.1);
@@ -430,8 +502,8 @@
   --dc-alert-accent-border-color: var(--dc-red-500);
 }
 
-.dark .dc-alert_appearance_info,
-.dark.dc-alert_appearance_info {
+.dark .dc-alert_tint_blue,
+.dark.dc-alert_tint_blue {
   --dc-alert-text-color: var(--dc-blue-300);
   --dc-alert-icon-color: var(--dc-blue-300);
   --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 0.1);
@@ -439,8 +511,8 @@
   --dc-alert-accent-border-color: var(--dc-blue-400);
 }
 
-.dark .dc-alert_appearance_success,
-.dark.dc-alert_appearance_success {
+.dark .dc-alert_tint_green,
+.dark.dc-alert_tint_green {
   --dc-alert-text-color: var(--dc-green-400);
   --dc-alert-icon-color: var(--dc-green-400);
   --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 0.1);

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef, MouseEventHandler, ReactNode } from 'react';
+type AlertHTMLProps = ComponentPropsWithRef<'div'>;
+type AlertBaseProps = Omit<AlertHTMLProps, 'title'>;
+export type AlertStyle = 'default' | 'full-width' | 'accent-left';
+export type AlertTint = 'gray' | 'orange' | 'red' | 'blue' | 'green';
+export type AlertProps = {
+    shouldShowDismissButton?: boolean;
+    alertStyle?: AlertStyle;
+    tint?: AlertTint;
+    icon?: ReactNode;
+    title?: ReactNode;
+    onClickDismissButton?: MouseEventHandler<HTMLButtonElement>;
+} & AlertBaseProps;
+export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/alert/alert.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
+export const Alert = forwardRef(function Alert({ shouldShowDismissButton, alertStyle = 'default', tint = 'gray', icon, title, children, className, onClickDismissButton, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, 'dc-alert', {
+            [`dc-alert_style_${alertStyle}`]: alertStyle,
+            [`dc-alert_tint_${tint}`]: tint,
+            'dc-alert_has_icon': icon,
+            'dc-alert_has_dismiss-button': shouldShowDismissButton,
+        }), children: [icon ? _jsx("div", { className: "dc-alert__icon", children: icon }) : null, _jsxs("div", { className: "dc-alert__body", children: [title ? _jsx("h2", { className: "dc-alert__title", children: title }) : null, children] }), shouldShowDismissButton && (_jsx("button", { type: "button", className: "dc-alert__dismiss-button", onClick: onClickDismissButton, children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) }))] }));
+});

package/dist/components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './alert.js';

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export * from './alert.js';

package/{types → dist}/components/avatar/avatar.d.ts

@@ -1,13 +1,14 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+type AvatarHTMLProps = ComponentPropsWithRef<'div'>;
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type AvatarFill = 'gray' | 'pink' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet';
-export type AvatarProps = ComponentPropsWithRef<'div'> & {
-    isSquare?: boolean;
-    hasInnerShadow?: boolean;
+export type AvatarFill = 'gray' | 'pink' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'indigo' | 'violet';
+export type AvatarProps = {
+    square?: boolean;
     size?: AvatarSize;
     fill?: AvatarFill;
     src?: string;
-    alt?: string;
-    placeholder?: ReactNode;
-};
+    altText?: string;
+    initials?: ReactNode;
+} & AvatarHTMLProps;
 export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+const sizesInPixels = {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 56,
+};
+export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = 'gray', src, altText, initials, className, ...props }, ref) {
+    const sizePx = sizesInPixels[size] ?? sizesInPixels.md;
+    const [type, setType] = useState(() => {
+        let type;
+        if (src) {
+            type = 'image';
+        }
+        else if (initials) {
+            type = 'initials';
+        }
+        else {
+            type = 'silhouette';
+        }
+        return type;
+    });
+    let children;
+    if (type === 'image') {
+        children = (_jsx("img", { className: "dc-avatar__image", src: src, alt: altText, width: sizePx, height: sizePx, onError: () => setType(initials ? 'initials' : 'silhouette') }));
+    }
+    else if (type === 'initials') {
+        children = (_jsx("span", { className: "dc-avatar__initials", "aria-label": altText, children: initials }));
+    }
+    else {
+        children = (_jsxs("svg", { className: "dc-avatar__silhouette", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 56 56", width: sizePx, height: sizePx, fill: "none", children: [altText ? _jsx("title", { children: altText }) : null, square ? (_jsx("path", { fill: "white", fillRule: "evenodd", clipRule: "evenodd", d: "M28.0001 29.5957C33.3078 29.5957 37.6106 24.9852 37.6106 19.2979C37.6106 13.6105 33.3078 9 28.0001 9C22.6923 9 18.3895 13.6105 18.3895 19.2979C18.3895 24.9852 22.6923 29.5957 28.0001 29.5957ZM7.03967 49.4839C6.71299 51.4741 8.45242 53 10.4693 53H45.5305C47.5474 53 49.2868 51.4741 48.9601 49.4839C47.6918 41.7571 39.6459 33.3404 27.9999 33.3404C16.3538 33.3404 8.30794 41.7571 7.03967 49.4839Z" })) : (_jsx("path", { fill: "white", fillRule: "evenodd", clipRule: "evenodd", d: "M9.28643 44.5776C12.6548 39.0053 19.3297 34.3404 27.9999 34.3404C36.6702 34.3404 43.3451 39.0054 46.7134 44.5777C42.1335 49.7439 35.447 53 28 53C20.5529 53 13.8664 49.7438 9.28643 44.5776ZM37.6106 20.2979C37.6106 25.9852 33.3078 30.5957 28.0001 30.5957C22.6923 30.5957 18.3895 25.9852 18.3895 20.2979C18.3895 14.6105 22.6923 10 28.0001 10C33.3078 10 37.6106 14.6105 37.6106 20.2979Z" }))] }));
+    }
+    return (_jsx("div", { ref: ref, "data-size": size, "data-fill": size, className: classNames(className, 'dc-avatar', `dc-avatar_${type}`, {
+            [`dc-avatar_size_${size}`]: size,
+            [`dc-avatar_fill_${fill}`]: fill,
+            'dc-avatar_square': square,
+        }), ...props, children: children }));
+});

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar.js';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export * from './avatar.js';

package/dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function AvatarGroup({ className, children, ...props }) {
+    return (_jsx("div", { ...props, className: classNames(className, 'dc-avatar-group'), children: children }));
+}

package/dist/components/avatar-group/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar-group.js';

package/dist/components/avatar-group/index.js

@@ -0,0 +1 @@
+export * from './avatar-group.js';

package/{esm → dist}/components/badge/badge.js

@@ -1,7 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-
-function Badge({ className, children, ...props }) {
+export function Badge({ className, children, ...props }) {
     let isCircle;
     if (typeof children === 'number' && children > 0 && children < 10) {
         isCircle = true;
@@ -12,10 +11,8 @@ function Badge({ className, children, ...props }) {
     else {
         isCircle = !children;
     }
-    return (jsx("span", { ...props, className: classNames(className, {
+    return (_jsx("span", { ...props, className: classNames(className, {
             'dc-badge': true,
             'dc-badge_circle': isCircle,
         }), children: children }));
 }
-
-export { Badge };

package/dist/components/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export * from './badge.js';

package/dist/components/breadcrumbs/breadcrumbs-context.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const BreadcrumbsContext = createContext(null);
+export function useBreadcrumbsContext() {
+    const context = useContext(BreadcrumbsContext);
+    if (!context) {
+        throw new Error('useBreadcrumbsContext must be used withing BreadcrumbsContextProvider');
+    }
+    return context;
+}
+export function BreadcrumbsContextProvider(props) {
+    return (_jsx(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
+}

package/dist/components/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { useBreadcrumbsContext } from './breadcrumbs-context.js';
+export function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
+    const { separator } = useBreadcrumbsContext();
+    className = classNames('dc-breadcrumbs-item__link', className);
+    children = (_jsxs(_Fragment, { children: [icon != null && _jsx("div", { className: "dc-breadcrumbs-item__icon", children: icon }), _jsx("div", { className: "dc-breadcrumbs-item__text", children: children })] }));
+    let content;
+    if (typeof renderAs === 'function') {
+        content = renderAs({ className, children });
+    }
+    else {
+        content = _jsx("a", { ...props, className: className, children: children });
+    }
+    return (_jsxs("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && (_jsx("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
+}

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { BreadcrumbsContextProvider } from './breadcrumbs-context.js';
+const defaultSeparator = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: _jsx("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
+export function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
+    return (_jsx(BreadcrumbsContextProvider, { separator: separator, children: _jsx("nav", { ...props, className: classNames('dc-breadcrumbs', className), children: _jsx("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
+}

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumbs.js';
+export * from './breadcrumbs-item.js';

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export * from './breadcrumbs.js';
+export * from './breadcrumbs-item.js';

package/{types → dist}/components/button/button.d.ts

@@ -1,20 +1,22 @@
 import { ComponentPropsWithRef, JSX, ReactNode } from 'react';
+type ButtonHTMLProps = ComponentPropsWithRef<'button'>;
+export type ButtonStyle = 'filled' | 'tinted' | 'plain';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type ButtonAppearance = 'default' | 'primary' | 'danger' | 'success';
-export type ButtonVariant = 'filled' | 'tinted' | 'plain';
-export type ButtonRenderFn = (props: {
+export type ButtonTint = 'gray' | 'blue' | 'red' | 'green';
+export type ButtonRenderer = (props: {
     className: string;
     children: JSX.Element;
 }) => JSX.Element;
 export type ButtonProps = {
-    isBlock?: boolean;
+    fullWidth?: boolean;
     loading?: boolean;
+    buttonStyle?: ButtonStyle;
     size?: ButtonSize;
-    variant?: ButtonVariant;
-    appearance?: ButtonAppearance;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
+    tint?: ButtonTint;
     caption?: ReactNode;
-    renderAs?: ButtonRenderFn;
-} & ComponentPropsWithRef<'button'>;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    renderAs?: ButtonRenderer;
+} & ButtonHTMLProps;
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};