draft-components 1.2.2 → 1.4.0

package/css/draft-components.dark.css

@@ -1,14 +1,14 @@
 .dark {
   /* Background */
   --dc-primary-bg: var(--dc-gray-900);
-  --dc-bg-transparent-1: rgba(249, 250, 251, 0.1); /* gray-50 */
-  --dc-bg-transparent-2: rgba(249, 250, 251, 0.15); /* gray-50 */
-  --dc-bg-transparent-3: rgba(249, 250, 251, 0.25); /* gray-50 */
+  --dc-bg-transparent-1: rgb(var(--dc-gray-50-rgb) / 0.1);
+  --dc-bg-transparent-2: rgb(var(--dc-gray-50-rgb) / 0.15);
+  --dc-bg-transparent-3: rgb(var(--dc-gray-50-rgb) / 0.25);
 
   /* Borders */
-  --dc-border-color-transparent-1: rgba(249, 250, 251, 0.1); /* gray-50 */
-  --dc-border-color-transparent-2: rgba(249, 250, 251, 0.2); /* gray-50 */
-  --dc-border-color-transparent-3: rgba(249, 250, 251, 0.3); /* gray-50 */
+  --dc-border-color-transparent-1: rgb(var(--dc-gray-50-rgb) / 0.1);
+  --dc-border-color-transparent-2: rgb(var(--dc-gray-50-rgb) / 0.2);
+  --dc-border-color-transparent-3: rgb(var(--dc-gray-50-rgb) / 0.3);
 
   /* Text */
   --dc-primary-text-color: var(--dc-gray-100);
@@ -18,11 +18,11 @@
   /* Primary */
   --dc-primary-color: var(--dc-blue-600);
   --dc-primary-color-hover: var(--dc-blue-500);
-  --dc-on-primary-color: #fff;
+  --dc-on-primary-color: var(--dc-white);
 
   /* Secondary */
-  --dc-secondary-color: rgba(96, 165, 250, 0.15); /* blue-400 */
-  --dc-secondary-color-hover: rgba(96, 165, 250, 0.3); /* blue-400 */
+  --dc-secondary-color: rgb(var(--dc-blue-400-rgb) / 0.15);
+  --dc-secondary-color-hover: rgb(var(--dc-blue-400-rgb) / 0.3);
   --dc-on-secondary-color: var(--dc-blue-400);
 
   /* Accents */
@@ -33,60 +33,60 @@
 
   /* Default button */
   --dc-button-default-text-color: var(--dc-gray-100);
-  --dc-button-default-border-color: rgba(249, 250, 251, 0.1); /* gray-50 */
+  --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: rgba(249, 250, 251, 0.1); /* gray-50 */
-  --dc-button-default-tinted-bg-hover: rgba(249, 250, 251, 0.2); /* gray-50 */
+  --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: rgba(249, 250, 251, 0.1); /* gray-50 */
+  --dc-button-default-plain-bg-hover: rgb(var(--dc-gray-50-rgb) / 0.1);
 
   /* Primary button */
-  --dc-button-primary-text-color: #fff;
+  --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: rgba(96, 165, 250, 0.15); /* blue-400 */
-  --dc-button-primary-tinted-bg-hover: rgba(96, 165, 250, 0.3); /* 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: rgba(96, 165, 250, 0.15); /* blue-400 */
+  --dc-button-primary-plain-bg-hover: rgb(var(--dc-blue-400-rgb) / 0.15);
 
   /* Danger button */
-  --dc-button-danger-text-color: #fff;
+  --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: rgba(248, 113, 113, 0.15); /* red-400 */
-  --dc-button-danger-tinted-bg-hover: rgba(248, 113, 113, 0.3); /* 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: rgba(248, 113, 113, 0.15); /* red-400 */
+  --dc-button-danger-plain-bg-hover: rgb(var(--dc-red-400-rgb) / 0.15);
 
   /* Success button */
-  --dc-button-success-text-color: #fff;
+  --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: rgba(74, 222, 128, 0.15); /* green-400 */
-  --dc-button-success-tinted-bg-hover: rgba(74, 222, 128, 0.3); /* 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: rgba(74, 222, 128, 0.15); /* green-400 */
+  --dc-button-success-plain-bg-hover: rgb(var(--dc-green-400-rgb) / 0.15);
 
   /* Controls */
   --dc-control-primary-text-color: var(--dc-gray-100);
   --dc-control-secondary-text-color: var(--dc-gray-400);
   --dc-control-primary-color: var(--dc-blue-600);
   --dc-control-primary-color-hover: var(--dc-blue-500);
-  --dc-control-on-primary-color: #fff;
-  --dc-control-secondary-color: rgba(96, 165, 250, 0.15); /* blue-400 */
+  --dc-control-on-primary-color: var(--dc-white);
+  --dc-control-secondary-color: rgb(var(--dc-blue-400-rgb) / 0.15);
   --dc-control-border-color: var(--dc-gray-600);
-  --dc-control-bg: rgba(249, 250, 251, 0.08); /* gray-50 */
-  --dc-control-bg-inset: rgba(249, 250, 251, 0.25); /* gray-50 */
+  --dc-control-bg: rgb(var(--dc-gray-50-rgb) / 0.08);
+  --dc-control-bg-inset: rgb(var(--dc-gray-50-rgb) / 0.25);
   --dc-control-error-color: var(--dc-red-400);
-  --dc-focus-ring-color: rgb(96, 165, 250, 0.7); /* blue-400 */
+  --dc-focus-ring-color: rgb(var(--dc-blue-400-rgb) / 0.7);
 }
 
 /* Elements */
@@ -99,7 +99,7 @@
 .dark .dc-tag,
 .dark.dc-tag {
   --dc-tag-text-color: var(--dc-gray-50);
-  --dc-tag-bg: rgba(156, 163, 175, 0.4); /* gray-400 */
+  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 0.4);
 
   color-scheme: dark;
 }
@@ -107,117 +107,117 @@
 .dark .dc-tag_plain,
 .dark.dc-tag_plain {
   --dc-tag-text-color: var(--dc-gray-300);
-  --dc-tag-border-color: rgba(229, 231, 235, 0.2); /* gray-200 */
-  --dc-tag-bg: rgba(156, 163, 175, 0.1); /* gray-400 */
+  --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_green,
 .dark.dc-tag_green {
   --dc-tag-text-color: var(--dc-green-50);
-  --dc-tag-bg: rgba(74, 222, 128, 0.5); /* green-400 */
+  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_green.dc-tag_plain,
 .dark.dc-tag_green.dc-tag_plain {
   --dc-tag-text-color: var(--dc-green-400);
-  --dc-tag-border-color: rgba(187, 247, 208, 0.2); /* green-200 */
-  --dc-tag-bg: rgba(74, 222, 128, 0.1); /* 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: rgba(56, 189, 248, 0.5); /* sky-400 */
+  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_cyan.dc-tag_plain,
 .dark.dc-tag_cyan.dc-tag_plain {
   --dc-tag-text-color: var(--dc-sky-400);
-  --dc-tag-border-color: rgba(165, 243, 252, 0.2); /* sky-700 */
-  --dc-tag-bg: rgba(56, 189, 248, 0.1); /* 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: rgba(96, 165, 250, 0.5); /* blue-400 */
+  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_blue.dc-tag_plain,
 .dark.dc-tag_blue.dc-tag_plain {
   --dc-tag-text-color: var(--dc-blue-400);
-  --dc-tag-border-color: rgba(191, 219, 254, 0.2); /* blue-200 */
-  --dc-tag-bg: rgba(96, 165, 250, 0.1); /* 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: rgba(167, 139, 250, 0.5); /* violet-400 */
+  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_purple.dc-tag_plain,
 .dark.dc-tag_purple.dc-tag_plain {
   --dc-tag-text-color: var(--dc-violet-400);
-  --dc-tag-border-color: rgba(221, 214, 254, 0.2); /* violet-200 */
-  --dc-tag-bg: rgba(167, 139, 250, 0.1); /* 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: rgba(244, 114, 182, 0.5); /* pink-400 */
+  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_pink.dc-tag_plain,
 .dark.dc-tag_pink.dc-tag_plain {
   --dc-tag-text-color: var(--dc-pink-400);
-  --dc-tag-border-color: rgba(251, 207, 232, 0.2); /* pink-200 */
-  --dc-tag-bg: rgba(244, 114, 182, 0.1); /* 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: rgba(248, 113, 113, 0.5); /* red-400 */
+  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_red.dc-tag_plain,
 .dark.dc-tag_red.dc-tag_plain {
   --dc-tag-text-color: var(--dc-red-400);
-  --dc-tag-border-color: rgba(254, 202, 202, 0.2); /* red-200 */
-  --dc-tag-bg: rgba(248, 113, 113, 0.1); /* 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: rgba(251, 146, 60, 0.5); /* orange-400 */
+  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_orange.dc-tag_plain,
 .dark.dc-tag_orange.dc-tag_plain {
   --dc-tag-text-color: var(--dc-orange-500);
-  --dc-tag-border-color: rgba(254, 215, 170, 0.2); /* orange-200 */
-  --dc-tag-bg: rgba(251, 146, 60, 0.1); /* orange-400 */
+  --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: rgba(250, 204, 21, 0.5); /* yellow-400 */
+  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 0.5);
 }
 
 .dark .dc-tag_yellow.dc-tag_plain,
 .dark.dc-tag_yellow.dc-tag_plain {
   --dc-tag-text-color: var(--dc-yellow-500);
-  --dc-tag-border-color: rgba(254, 240, 138, 0.2); /* yellow-200 */
-  --dc-tag-bg: rgba(250, 204, 21, 0.1); /* yellow-400 */
+  --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-avatar,
 .dark.dc-avatar {
-  --dc-avatar-inner-border-color: rgba(249, 250, 251, 0.15);
+  --dc-avatar-inner-border-color: rgb(var(--dc-gray-50-rgb) / 0.15);
 
   color-scheme: dark;
 }
@@ -327,7 +327,7 @@
 
 .dark .dc-color-picker,
 .dark.dc-color-picker {
-  --dc-color-picker-btn-inner-border-color: rgba(255, 255, 255, 0.1);
+  --dc-color-picker-btn-inner-border-color: rgb(255 255 255 / 0.1);
 
   color-scheme: dark;
 }
@@ -347,8 +347,8 @@
 .dark.dc-alert {
   --dc-alert-text-color: var(--dc-gray-300);
   --dc-alert-icon-color: var(--dc-gray-300);
-  --dc-alert-bg: rgba(229, 231, 235, 0.1); /* gray-200 */
-  --dc-alert-border-color: rgba(156, 163, 175, 0.2); /* gray-400 */
+  --dc-alert-bg: rgb(var(--dc-gray-200-rgb) / 0.1);
+  --dc-alert-border-color: rgb(var(--dc-gray-400-rgb) / 0.2);
   --dc-alert-accent-border-color: var(--dc-gray-400);
 
   color-scheme: dark;
@@ -358,8 +358,8 @@
 .dark.dc-alert_appearance_warning {
   --dc-alert-text-color: var(--dc-orange-400);
   --dc-alert-icon-color: var(--dc-orange-400);
-  --dc-alert-bg: rgba(254, 215, 170, 0.1); /* orange-200 */
-  --dc-alert-border-color: rgba(251, 146, 60, 0.3); /* orange-400 */
+  --dc-alert-bg: rgb(var(--dc-orange-200-rgb) / 0.1);
+  --dc-alert-border-color: rgb(var(--dc-orange-400-rgb) / 0.3);
   --dc-alert-accent-border-color: var(--dc-orange-500);
 }
 
@@ -367,8 +367,8 @@
 .dark.dc-alert_appearance_error {
   --dc-alert-text-color: var(--dc-red-400);
   --dc-alert-icon-color: var(--dc-red-400);
-  --dc-alert-bg: rgba(252, 165, 165, 0.1); /* red-300 */
-  --dc-alert-border-color: rgba(248, 113, 113, 0.3); /* red-400 */
+  --dc-alert-bg: rgb(var(--dc-red-300-rgb) / 0.1);
+  --dc-alert-border-color: rgb(var(--dc-red-400-rgb) / 0.3);
   --dc-alert-accent-border-color: var(--dc-red-500);
 }
 
@@ -376,8 +376,8 @@
 .dark.dc-alert_appearance_info {
   --dc-alert-text-color: var(--dc-blue-300);
   --dc-alert-icon-color: var(--dc-blue-300);
-  --dc-alert-bg: rgba(191, 219, 254, 0.1); /* blue-200 */
-  --dc-alert-border-color: rgba(96, 165, 250, 0.3); /* blue-400 */
+  --dc-alert-bg: rgb(var(--dc-blue-200-rgb) / 0.1);
+  --dc-alert-border-color: rgb(var(--dc-blue-400-rgb) / 0.3);
   --dc-alert-accent-border-color: var(--dc-blue-400);
 }
 
@@ -385,8 +385,8 @@
 .dark.dc-alert_appearance_success {
   --dc-alert-text-color: var(--dc-green-400);
   --dc-alert-icon-color: var(--dc-green-400);
-  --dc-alert-bg: rgba(187, 247, 208, 0.1); /* green-200 */
-  --dc-alert-border-color: rgba(74, 222, 128, 0.3); /* green-400 */
+  --dc-alert-bg: rgb(var(--dc-green-200-rgb) / 0.1);
+  --dc-alert-border-color: rgb(var(--dc-green-400-rgb) / 0.3);
   --dc-alert-accent-border-color: var(--dc-green-500);
 }
 
@@ -399,8 +399,8 @@
   --dc-toast-close-btn-color: var(--dc-gray-800);
   --dc-toast-close-btn-bg: var(--dc-gray-100);
   --dc-toast-btn-text-color: var(--dc-gray-800);
-  --dc-toast-btn-bg: rgba(17, 24, 39, 0.1); /* gray-900 */
-  --dc-toast-btn-bg-hover: rgba(17, 24, 39, 0.2); /* gray-900 */
+  --dc-toast-btn-bg: rgb(var(--dc-gray-900-rgb) / 0.1);
+  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-900-rgb) / 0.2);
   --dc-toast-btn-focus-ring-color: var(--dc-gray-700);
 
   color-scheme: dark;
@@ -409,7 +409,7 @@
 .dark .dc-toast .dc-toast__close-btn,
 .dark.dc-toast .dc-toast__close-btn {
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgb(var(--dc-black-rgb) / 0.1),
     var(--dc-shadow-sm),
     var(--dc-shadow-md);
 }
@@ -443,7 +443,7 @@
 
 .dark .dc-breadcrumbs,
 .dark.dc-breadcrumbs {
-  --dc-breadcrumbs-separator-color: rgb(156, 163, 175, 0.5); /* gray-400 */
+  --dc-breadcrumbs-separator-color: rgb(var(--dc-gray-400-rgb) / 0.5);
 
   color-scheme: dark;
 }

package/esm/components/button/button.js

@@ -3,17 +3,17 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Spinner } from '../spinner/spinner.js';
 
-const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', leftIcon = null, rightIcon = null, caption = null, renderAs, className, children, ...props }, ref) {
     let addOnLeft = null;
     if (loading) {
         addOnLeft = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
     }
-    else if (iconLeft) {
-        addOnLeft = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
+    else if (leftIcon) {
+        addOnLeft = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: leftIcon }));
     }
     let addOnRight = null;
-    if (iconRight) {
-        addOnRight = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
+    if (rightIcon) {
+        addOnRight = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: rightIcon }));
     }
     const shouldRenderLabel = Boolean(children);
     const shouldRenderCaption = Boolean(caption);

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

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

package/esm/components/dialog/dialog-body.js

@@ -1,49 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { assertIfNullable } from '../../lib/helpers.js';
+import { useRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, className, children, }) {
+function DialogBody({ className, children, }) {
     const ref = useRef(null);
-    useEffect(() => {
-        if (!scrollShadowTop && !scrollShadowBottom) {
-            return;
-        }
-        const el = ref.current;
-        assertIfNullable(el, 'DialogBody ref was not set');
-        const topShadowClass = 'dc-dialog-body_scroll-shadow-top';
-        const bottomShadowClass = 'dc-dialog-body_scroll-shadow-bottom';
-        const changeShadowsVisibility = () => {
-            const scrollTop = el.scrollTop;
-            const scrollHeight = el.scrollHeight;
-            const clientHeight = el.clientHeight;
-            if (scrollShadowTop) {
-                if (scrollTop > 0) {
-                    el.classList.add(topShadowClass);
-                }
-                else {
-                    el.classList.remove(topShadowClass);
-                }
-            }
-            if (scrollShadowBottom) {
-                if (scrollTop + clientHeight < scrollHeight) {
-                    el.classList.add(bottomShadowClass);
-                }
-                else {
-                    el.classList.remove(bottomShadowClass);
-                }
-            }
-        };
-        const resizeObserver = typeof ResizeObserver === 'undefined'
-            ? null
-            : new ResizeObserver(changeShadowsVisibility);
-        resizeObserver?.observe(el);
-        el.addEventListener('scroll', changeShadowsVisibility);
-        return () => {
-            resizeObserver?.unobserve(el);
-            el.removeEventListener('scroll', changeShadowsVisibility);
-        };
-    }, [scrollShadowTop, scrollShadowBottom]);
     return (jsx("div", { ref: ref, className: classNames('dc-dialog-body', className), children: children }));
 }
 

package/esm/components/dialog/dialog-footer.js

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { classNames } from '../../lib/react-helpers.js';
 
-function DialogFooter({ className, children, }) {
-    return (jsx("div", { className: classNames('dc-dialog-footer', className), children: children }));
+function DialogFooter({ hasBorder, className, children, }) {
+    return (jsx("div", { className: classNames(className, {
+            'dc-dialog-footer': true,
+            'dc-dialog-footer_has_border': hasBorder,
+        }), children: children }));
 }
 
 export { DialogFooter };

package/esm/components/dialog/dialog-header.js

@@ -5,12 +5,15 @@ import '../button/button.js';
 import { IconButton } from '../button/icon-button.js';
 import { XMarkIcon } from './x-mark-icon.js';
 
-function DialogHeader({ heading, subheading, className, children, }) {
+function DialogHeader({ hasBorder, heading, subheading, className, children, }) {
     const { titleId, descriptionId, onClose, } = useDialogContext();
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderDescription = Boolean(subheading);
     const shouldRenderChildren = Boolean(children);
-    return (jsxs("div", { className: classNames(className, 'dc-dialog-header'), children: [jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsx(IconButton, { icon: jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+    return (jsxs("div", { className: classNames(className, {
+            'dc-dialog-header': true,
+            'dc-dialog-header_has_border': hasBorder,
+        }), children: [jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsx(IconButton, { icon: jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
 }
 
 export { DialogHeader };

package/esm/components/menu/menu-item.js

@@ -2,18 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', iconLeft = null, iconRight = null, className, children, ...props }, ref) {
+const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', leftIcon = null, rightIcon = null, className, children, ...props }, ref) {
     let label = children;
-    if (iconLeft || iconRight) {
+    if (leftIcon || rightIcon) {
         const className = classNames('dc-menu-btn__label', {
-            'dc-menu-btn__label_gap_left': iconLeft,
-            'dc-menu-btn__label_gap_right': iconRight,
+            'dc-menu-btn__label_gap_left': leftIcon,
+            'dc-menu-btn__label_gap_right': rightIcon,
         });
         label = jsx("span", { className: className, children: label });
     }
     return (jsx("li", { role: "presentation", children: jsxs("button", { ...props, ref: ref, className: classNames(className, 'dc-menu-btn', {
                 [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
+            }), type: "button", role: role, tabIndex: -1, children: [leftIcon, label, rightIcon] }) }));
 });
 
 export { MenuItem };

package/esm/components/select/select.js

@@ -1,25 +1,37 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
+import { Spinner } from '../spinner/spinner.js';
 
-const Select = forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+const Select = forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, loading, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+    const onValueChanged = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        if (typeof onChangeValue === 'function') {
+            if (multiple === true) {
+                const values = Array.from(event.target.options)
+                    .filter((option) => option.selected)
+                    .map((option) => option.value);
+                onChangeValue(values);
+            }
+            else {
+                onChangeValue(event.target.value);
+            }
+        }
+    };
+    let addOn = (jsx("svg", { className: "dc-select__arrow", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }));
+    if (loading) {
+        addOn = (jsx(Spinner, { className: "dc-select__spinner", color: "currentColor", size: 16 }));
+    }
     return (jsxs("div", { style: style, className: classNames(className, 'dc-select__container', {
             [`dc-select__container_${size}`]: size !== undefined,
             'dc-select__container_multiple': multiple,
+            'dc-select__container_loading': loading,
             'dc-select__container_disabled': disabled,
             'dc-select__container_has_error': hasError,
             'dc-select__container_block': isBlock,
-        }), children: [jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled, onChange: (event) => {
-                    onChange?.(event);
-                    if (multiple === true) {
-                        onChangeValue?.(Array.from(event.target.options)
-                            .filter((option) => option.selected)
-                            .map((option) => option.value));
-                    }
-                    else {
-                        onChangeValue?.(event.target.value);
-                    }
-                }, children: children }), jsx("svg", { className: "dc-select__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) })] }));
+        }), children: [jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled || loading, onChange: onValueChanged, children: children }), jsx("span", { className: "dc-select__add-on", "aria-hidden": true, children: addOn })] }));
 });
 
 export { Select };