draft-components 2.11.0 → 3.0.0

package/dist/components/alert/alert.css

@@ -0,0 +1,163 @@
+.dc-alert {
+  --dc-alert-text-color: var(--dc-gray-700);
+  --dc-alert-icon-color: var(--dc-gray-500);
+  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 25%);
+  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-gray-500);
+  --dc-alert-icon-size: 20px;
+
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px 16px;
+  font: var(--dc-text-sm);
+  color: var(--dc-alert-text-color);
+  text-align: left;
+  color-scheme: light;
+  background: var(--dc-alert-bg);
+  border: 1px solid var(--dc-alert-border-color);
+  border-radius: 8px;
+}
+
+.dc-alert_has_icon {
+  padding-left: 12px;
+}
+
+.dc-alert_has_dismiss-button {
+  padding-right: 12px;
+}
+
+.dc-alert__icon {
+  display: inline-flex;
+  color: var(--dc-alert-icon-color);
+}
+
+.dc-alert__body {
+  flex-grow: 1;
+}
+
+.dc-alert__title {
+  display: block;
+  width: 100%;
+  margin: 0 0 8px;
+  font: 600 var(--dc-text-sm);
+}
+
+.dc-alert__dismiss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 4px;
+}
+
+.dc-alert__dismiss-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px currentcolor;
+}
+
+.dc-alert__dismiss-button:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.dc-alert_style_full-width {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+.dc-alert_style_accent-left {
+  border: none;
+  border-left: 4px solid var(--dc-alert-accent-border-color);
+  border-radius: 0;
+}
+
+.dc-alert_tint_orange {
+  --dc-alert-text-color: var(--dc-orange-700);
+  --dc-alert-icon-color: var(--dc-orange-600);
+  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-orange-500-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-orange-500);
+}
+
+.dc-alert_tint_red {
+  --dc-alert-text-color: var(--dc-red-700);
+  --dc-alert-icon-color: var(--dc-red-600);
+  --dc-alert-bg: rgb(var(--dc-red-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-red-500-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-red-500);
+}
+
+.dc-alert_tint_blue {
+  --dc-alert-text-color: var(--dc-blue-700);
+  --dc-alert-icon-color: var(--dc-blue-600);
+  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-blue-500-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-blue-500);
+}
+
+.dc-alert_tint_green {
+  --dc-alert-text-color: var(--dc-green-700);
+  --dc-alert-icon-color: var(--dc-green-600);
+  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 20%);
+  --dc-alert-border-color: rgb(var(--dc-green-600-rgb) / 25%);
+  --dc-alert-accent-border-color: var(--dc-green-500);
+}
+
+.dark .dc-alert,
+.dark.dc-alert {
+  --dc-alert-text-color: var(--dc-gray-300);
+  --dc-alert-icon-color: var(--dc-gray-300);
+  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 20%);
+  --dc-alert-accent-border-color: var(--dc-gray-400);
+
+  color-scheme: dark;
+}
+
+.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) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-orange-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-orange-500);
+}
+
+.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) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-red-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-red-500);
+}
+
+.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) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-blue-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-blue-400);
+}
+
+.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) / 10%);
+  --dc-alert-border-color: rgb(var(--dc-green-400-rgb) / 30%);
+  --dc-alert-accent-border-color: var(--dc-green-500);
+}

package/dist/components/avatar/avatar.css

@@ -0,0 +1,91 @@
+.dc-avatar {
+  --dc-avatar-monogram-color: var(--dc-white);
+  --dc-avatar-silhouette-color: var(--dc-white);
+  --dc-avatar-bg-color-1: #94a3b8;
+  --dc-avatar-bg-color-2: #64748b;
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 2.5%);
+
+  -webkit-user-select: none;
+
+     -moz-user-select: none;
+
+          user-select: none;
+}
+
+.dc-avatar_type_image {
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 10%);
+}
+
+.dc-avatar_fill_pink {
+  --dc-avatar-bg-color-1: #fb7185;
+  --dc-avatar-bg-color-2: #f43f5e;
+}
+
+.dc-avatar_fill_red {
+  --dc-avatar-bg-color-1: #f87171;
+  --dc-avatar-bg-color-2: #ef4444;
+}
+
+.dc-avatar_fill_orange {
+  --dc-avatar-bg-color-1: #fb923c;
+  --dc-avatar-bg-color-2: #f97316;
+}
+
+.dc-avatar_fill_yellow {
+  --dc-avatar-bg-color-1: #fbbf24;
+  --dc-avatar-bg-color-2: #f59e0b;
+}
+
+.dc-avatar_fill_green {
+  --dc-avatar-bg-color-1: #4ade80;
+  --dc-avatar-bg-color-2: #22c55e;
+}
+
+.dc-avatar_fill_teal {
+  --dc-avatar-bg-color-1: #2dd4bf;
+  --dc-avatar-bg-color-2: #14b8a6;
+}
+
+.dc-avatar_fill_blue {
+  --dc-avatar-bg-color-1: #38bdf8;
+  --dc-avatar-bg-color-2: #0ea5e9;
+}
+
+.dc-avatar_fill_indigo {
+  --dc-avatar-bg-color-1: #818cf8;
+  --dc-avatar-bg-color-2: #6366f1;
+}
+
+.dc-avatar_fill_violet {
+  --dc-avatar-bg-color-1: #c084fc;
+  --dc-avatar-bg-color-2: #a855f7;
+}
+
+.dc-avatar__monogram {
+  font-family: var(--dc-primary-font);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  fill: var(--dc-avatar-monogram-color);
+}
+
+.dc-avatar__silhouette {
+  fill: var(--dc-avatar-silhouette-color);
+}
+
+.dc-avatar__border {
+  fill: none;
+  stroke: var(--dc-avatar-border-color);
+}
+
+.dark .dc-avatar,
+.dark.dc-avatar {
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 2.5%);
+
+  color-scheme: dark;
+}
+
+.dark .dc-avatar_type_image,
+.dark.dc-avatar_type_image {
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 10%);
+}

package/dist/components/avatar/avatar.js

@@ -26,7 +26,9 @@ export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = '
     }
     else {
         type = 'silhouette';
-        children = square ? (_jsx("path", { className: "dc-avatar__silhouette", 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", { className: "dc-avatar__silhouette", 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" }));
+        children = square
+            ? (_jsx("path", { className: "dc-avatar__silhouette", 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", { className: "dc-avatar__silhouette", 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" }));
     }
     const maskElement = square
         ? _jsx("rect", { width: "56", height: "56", rx: "10", fill: "#fff" })

package/dist/components/badge/badge.css

@@ -0,0 +1,28 @@
+.dc-badge {
+  --dc-badge-height: 20px;
+  --dc-badge-text-color: var(--dc-primary-text-color);
+  --dc-badge-bg: var(--dc-bg-transparent-2);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--dc-badge-height);
+  height: var(--dc-badge-height);
+  padding: 0 6px;
+  font: 12px/1 var(--dc-primary-font);
+  color: var(--dc-badge-text-color);
+  color-scheme: light;
+  background: var(--dc-badge-bg);
+  border-radius: calc(var(--dc-badge-height) / 2);
+}
+
+.dc-badge_circle {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.dark .dc-counter,
+.dark.dc-counter {
+  color-scheme: dark;
+}

package/dist/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,72 @@
+.dc-breadcrumbs {
+  --dc-breadcrumbs-text-color: var(--dc-secondary-text-color);
+  --dc-breadcrumbs-text-color-hover: var(--dc-primary-text-color);
+  --dc-breadcrumbs-text-color-active: var(--dc-primary-text-color);
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-500-rgb) / 50%);
+
+  color-scheme: light;
+}
+
+.dc-breadcrumbs__items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  color: var(--dc-breadcrumbs-text-color);
+  list-style: none;
+}
+
+.dc-breadcrumbs-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 0;
+  font: var(--dc-text-sm);
+  color: inherit;
+}
+
+.dc-breadcrumbs-item__link {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.dc-breadcrumbs-item__link:hover {
+  color: var(--dc-breadcrumbs-text-color-hover);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.dc-breadcrumbs-item__link.active,
+.dc-breadcrumbs-item__link[aria-current="page"],
+.dc-breadcrumbs-item__link[aria-current="step"],
+.dc-breadcrumbs-item__link[aria-current="true"] {
+  color: var(--dc-breadcrumbs-text-color-active);
+}
+
+.dc-breadcrumbs-item__icon {
+  display: inline-flex;
+  margin-right: 8px;
+}
+
+.dc-breadcrumbs-item__separator {
+  display: inline-flex;
+  margin: 0 12px;
+  color: var(--dc-breadcrumbs-separator-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dc-breadcrumbs-item:last-child .dc-breadcrumbs-item__separator {
+  display: none;
+}
+
+.dark .dc-breadcrumbs,
+.dark.dc-breadcrumbs {
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-400-rgb) / 50%);
+
+  color-scheme: dark;
+}

package/dist/components/button/button.css

@@ -0,0 +1,241 @@
+.dc-button {
+  --dc-button-height: 36px;
+  --dc-button-radius: 9px;
+  --dc-button-text-color: var(--dc-button-gray-text-color);
+  --dc-button-border-color: var(--dc-button-gray-border-color);
+  --dc-button-bg: var(--dc-button-gray-bg);
+  --dc-button-bg-hover: var(--dc-button-gray-bg-hover);
+  --dc-button-focus-ring-color: var(--dc-focus-ring-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: 0.5em;
+  place-items: center;
+  justify-content: center;
+  height: var(--dc-button-height);
+  padding: 0 16px;
+  font: 500 var(--dc-text-sm);
+  color: var(--dc-button-text-color);
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color-scheme: light;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: var(--dc-button-bg);
+  border: 1px solid var(--dc-button-border-color);
+  border-radius: var(--dc-button-radius);
+  transition-duration: 0.2s;
+  transition-property: color, background-color;
+}
+
+.dark .dc-button,
+.dark.dc-button {
+  color-scheme: dark;
+}
+
+.dc-button:focus {
+  outline: none;
+}
+
+.dc-button:focus::after {
+  position: absolute;
+  inset: -3px;
+  pointer-events: none;
+  content: "";
+  border-radius: calc(3px + var(--dc-button-radius));
+  box-shadow: 0 0 0 3px var(--dc-button-focus-ring-color);
+}
+
+.dc-button_full-width {
+  display: grid;
+  width: 100%;
+}
+
+.dc-button_style_plain:focus::after {
+  inset: 0;
+  border-radius: var(--dc-button-radius);
+}
+
+.dc-button:focus:not(:focus-visible)::after {
+  content: none;
+}
+
+.dc-button:disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-button:hover:not(:disabled) {
+  cursor: pointer;
+  background: var(--dc-button-bg-hover);
+}
+
+.dc-button_loading,
+.dc-button_has_icon-left,
+.dc-button_has_icon-right {
+  grid-template-columns: repeat(2, auto);
+}
+
+.dc-button_loading {
+  cursor: default;
+}
+
+.dc-button_loading:disabled {
+  opacity: initial;
+}
+
+.dc-button_loading.dc-button_has_icon-right,
+.dc-button_has_icon-left.dc-button_has_icon-right {
+  grid-template-columns: repeat(3, auto);
+}
+
+.dc-button_style_tinted {
+  --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
+  --dc-button-bg: var(--dc-button-gray-tinted-bg);
+  --dc-button-bg-hover: var(--dc-button-gray-tinted-bg-hover);
+
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.dc-button_style_plain {
+  --dc-button-text-color: var(--dc-button-gray-plain-text-color);
+  --dc-button-bg-hover: var(--dc-button-gray-plain-bg-hover);
+
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.dc-button_xs {
+  --dc-button-height: 28px;
+  --dc-button-radius: 7px;
+
+  padding-right: 8px;
+  padding-left: 8px;
+  font: 500 var(--dc-text-xs);
+}
+
+.dc-button_sm {
+  --dc-button-height: 32px;
+  --dc-button-radius: 8px;
+
+  padding-right: 12px;
+  padding-left: 12px;
+  font: 500 var(--dc-text-sm);
+}
+
+.dc-button_lg {
+  --dc-button-height: 40px;
+  --dc-button-radius: 10px;
+
+  padding-right: 18px;
+  padding-left: 18px;
+  font: 500 var(--dc-text-md);
+}
+
+.dc-button_xl {
+  --dc-button-height: 44px;
+  --dc-button-radius: 11px;
+
+  padding-right: 20px;
+  padding-left: 20px;
+  font: 500 var(--dc-text-md);
+}
+
+.dc-button_tint_blue.dc-button_style_filled {
+  --dc-button-text-color: var(--dc-button-blue-text-color);
+  --dc-button-border-color: var(--dc-button-blue-border-color);
+  --dc-button-bg: var(--dc-button-blue-bg);
+  --dc-button-bg-hover: var(--dc-button-blue-bg-hover);
+}
+
+.dc-button_tint_blue.dc-button_style_tinted {
+  --dc-button-text-color: var(--dc-button-blue-tinted-text-color);
+  --dc-button-bg: var(--dc-button-blue-tinted-bg);
+  --dc-button-bg-hover: var(--dc-button-blue-tinted-bg-hover);
+}
+
+.dc-button_tint_blue.dc-button_style_plain {
+  --dc-button-text-color: var(--dc-button-blue-plain-text-color);
+  --dc-button-bg-hover: var(--dc-button-blue-plain-bg-hover);
+}
+
+.dc-button_tint_red.dc-button_style_filled {
+  --dc-button-text-color: var(--dc-button-red-text-color);
+  --dc-button-border-color: var(--dc-button-red-border-color);
+  --dc-button-bg: var(--dc-button-red-bg);
+  --dc-button-bg-hover: var(--dc-button-red-bg-hover);
+}
+
+.dc-button_tint_red.dc-button_style_tinted {
+  --dc-button-text-color: var(--dc-button-red-tinted-text-color);
+  --dc-button-bg: var(--dc-button-red-tinted-bg);
+  --dc-button-bg-hover: var(--dc-button-red-tinted-bg-hover);
+}
+
+.dc-button_tint_red.dc-button_style_plain {
+  --dc-button-text-color: var(--dc-button-red-plain-text-color);
+  --dc-button-bg-hover: var(--dc-button-red-plain-bg-hover);
+}
+
+.dc-button_tint_green.dc-button_style_filled {
+  --dc-button-text-color: var(--dc-button-green-text-color);
+  --dc-button-border-color: var(--dc-button-green-border-color);
+  --dc-button-bg: var(--dc-button-green-bg);
+  --dc-button-bg-hover: var(--dc-button-green-bg-hover);
+}
+
+.dc-button_tint_green.dc-button_style_tinted {
+  --dc-button-text-color: var(--dc-button-green-tinted-text-color);
+  --dc-button-bg: var(--dc-button-green-tinted-bg);
+  --dc-button-bg-hover: var(--dc-button-green-tinted-bg-hover);
+}
+
+.dc-button_tint_green.dc-button_style_plain {
+  --dc-button-text-color: var(--dc-button-green-plain-text-color);
+  --dc-button-bg-hover: var(--dc-button-green-plain-bg-hover);
+}
+
+.dc-button__label {
+  font-size: 13px;
+  line-height: 1;
+}
+
+.dc-button__caption {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.dc-button_xs .dc-button__label {
+  font-size: 11px;
+}
+
+.dc-button_xs .dc-button__caption {
+  font-size: 9px;
+}
+
+.dc-button_sm .dc-button__label {
+  font-size: 12px;
+}
+
+.dc-button_sm .dc-button__caption {
+  font-size: 10px;
+}
+
+.dc-button_icon-only {
+  grid-template-columns: auto;
+  width: var(--dc-button-height);
+  height: var(--dc-button-height);
+  padding: 0;
+}

package/dist/components/button/button.js

@@ -5,7 +5,9 @@ import { Spinner } from '../spinner/index.js';
 export const Button = forwardRef(function Button({ fullWidth, disabled, loading, buttonStyle = 'filled', size = 'sm', tint = 'default', iconLeft, iconRight, caption, className, children, type = 'button', renderAs, ...props }, ref) {
     children = (_jsxs(_Fragment, { children: [loading
                 ? _jsx(Spinner, { "data-testid": "button-spinner", size: "1.15em" })
-                : iconLeft, caption ? (_jsxs("div", { className: "dc-button__label", children: [children, _jsx("small", { className: "dc-button__caption", children: caption })] })) : children, iconRight] }));
+                : iconLeft, caption
+                ? (_jsxs("div", { className: "dc-button__label", children: [children, _jsx("small", { className: "dc-button__caption", children: caption })] }))
+                : children, iconRight] }));
     className = classNames(className, 'dc-button', {
         [`dc-button_style_${buttonStyle}`]: buttonStyle,
         [`dc-button_tint_${tint}`]: tint,

package/dist/components/button/icon-button.js

@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Button } from './button.js';
 export const IconButton = forwardRef(function IconButton({ className, children, ...props }, ref) {
-    return _jsx(Button, { ...props, ref: ref, className: classNames('dc-button_icon-only', className), iconLeft: children });
+    return (_jsx(Button, { ...props, ref: ref, className: classNames('dc-button_icon-only', className), iconLeft: children }));
 });

package/dist/components/button-group/button-group.css

@@ -0,0 +1,27 @@
+.dc-button-group {
+  display: inline-flex;
+  align-items: center;
+  color-scheme: light;
+}
+
+.dc-button-group > .dc-button:focus::after {
+  z-index: 1;
+}
+
+.dc-button-group > .dc-button + .dc-button,
+.dc-button-group > .dc-button + .dc-button:focus::after {
+  border-left-width: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dc-button-group > .dc-button:first-child:not(:last-child),
+.dc-button-group > .dc-button:first-child:not(:last-child):focus::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dark .dc-button-group,
+.dark.dc-button-group {
+  color-scheme: dark;
+}

package/dist/components/caption/caption.css

@@ -0,0 +1,36 @@
+.dc-caption {
+  display: block;
+  align-items: center;
+  font: var(--dc-text-sm);
+  color: var(--dc-secondary-text-color);
+  text-align: left;
+  color-scheme: light;
+}
+
+.dc-caption_color_blue {
+  color: var(--dc-info-text-color);
+}
+
+.dc-caption_color_green {
+  color: var(--dc-success-text-color);
+}
+
+.dc-caption_color_orange {
+  color: var(--dc-warning-text-color);
+}
+
+.dc-caption_color_red {
+  color: var(--dc-error-text-color);
+}
+
+.dc-caption__icon {
+  display: inline-flex;
+  float: left;
+  margin-right: 0.5em;
+  color: inherit;
+}
+
+.dark .dc-caption,
+.dark.dc-caption {
+  color-scheme: dark;
+}