draft-components 0.65.0 → 0.70.0

package/components/tabs/tabs.js

@@ -8,7 +8,7 @@ const tab_list_1 = require("./tab-list");
 const tab_1 = require("./tab");
 const tab_panel_1 = require("./tab-panel");
 function Tabs({ className, children, selectedTabKey, onSelectTab, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(tabs_state_1.TabsStateProvider, Object.assign({ selectedTabKey: selectedTabKey, onSelectTab: onSelectTab }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-tabs') }, { children: children }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(tabs_state_1.TabsStateProvider, { selectedTabKey: selectedTabKey, onSelectTab: onSelectTab, children: (0, jsx_runtime_1.jsx)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-tabs'), children: children }) }));
 }
 exports.Tabs = Tabs;
 Tabs.List = tab_list_1.TabList;

package/components/tag/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/tag/tag.js

@@ -12,9 +12,9 @@ const removeButtonIconSize = {
     lg: 12,
 };
 exports.Tag = (0, react_1.forwardRef)(function Tag({ isRounded, size = 'md', fillColor = 'gray', children: text, leadingIcon, isRemovable, isRemoveButtonDisabled, removeButtonAriaLabel, onRemove, className, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({}, props, { ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-tag', {
+    return ((0, jsx_runtime_1.jsxs)("span", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-tag', {
             'dc-tag_rounded': isRounded,
             [`dc-tag_color_${fillColor}`]: fillColor,
             [`dc-tag_size_${size}`]: size,
-        }) }, { children: [leadingIcon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-tag__icon" }, { children: leadingIcon }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-tag__text" }, { children: text }), void 0), isRemovable && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dc-tag__btn", disabled: isRemoveButtonDisabled, "aria-label": removeButtonAriaLabel, onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: removeButtonIconSize[size] || removeButtonIconSize['md'], icon: x_lg_1.xLg }, void 0) }), void 0))] }), void 0));
+        }), children: [leadingIcon && (0, jsx_runtime_1.jsx)("span", { className: "dc-tag__icon", children: leadingIcon }), (0, jsx_runtime_1.jsx)("span", { className: "dc-tag__text", children: text }), isRemovable && ((0, jsx_runtime_1.jsx)("button", { className: "dc-tag__btn", disabled: isRemoveButtonDisabled, "aria-label": removeButtonAriaLabel, onClick: onRemove, children: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: removeButtonIconSize[size] || removeButtonIconSize['md'], icon: x_lg_1.xLg }) }))] }));
 });

package/components/text-input/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/text-input/text-input.js

@@ -20,13 +20,13 @@ exports.textInputTypes = new Set([
 ]);
 exports.TextInput = (0, react_1.forwardRef)(function TextInput({ size = 'md', invalid, fullWidth, leadingAddOn, trailingAddOn, style, className, type = 'text', disabled, onFocus, onBlur, onChange, onChangeValue, ...props }, ref) {
     const [focused, setFocused] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)(className, 'dc-input', 'dc-text-input', {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)(className, 'dc-input', 'dc-text-input', {
             'dc-input_disabled': disabled,
             'dc-input_invalid': invalid,
             'dc-input_focused': focused,
             'dc-input_full_width': fullWidth,
             [`dc-input_size_${size}`]: size,
-        }) }, { children: [leadingAddOn && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-text-input__add-on" }, { children: leadingAddOn }), void 0)), (0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: "dc-text-input__native-input", ref: ref, type: type, disabled: disabled, onFocus: (event) => {
+        }), children: [leadingAddOn && ((0, jsx_runtime_1.jsx)("span", { className: "dc-text-input__add-on", children: leadingAddOn })), (0, jsx_runtime_1.jsx)("input", { ...props, className: "dc-text-input__native-input", ref: ref, type: type, disabled: disabled, onFocus: (event) => {
                     setFocused(true);
                     (0, guards_1.isFunction)(onFocus) && onFocus(event);
                 }, onBlur: (event) => {
@@ -35,5 +35,5 @@ exports.TextInput = (0, react_1.forwardRef)(function TextInput({ size = 'md', in
                 }, onChange: (event) => {
                     (0, guards_1.isFunction)(onChangeValue) && onChangeValue(event.target.value);
                     (0, guards_1.isFunction)(onChange) && onChange(event);
-                } }), void 0), trailingAddOn && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-text-input__add-on" }, { children: trailingAddOn }), void 0))] }), void 0));
+                } }), trailingAddOn && ((0, jsx_runtime_1.jsx)("span", { className: "dc-text-input__add-on", children: trailingAddOn }))] }));
 });

package/components/textarea/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/textarea/textarea.js

@@ -6,12 +6,12 @@ const react_1 = require("react");
 const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
 exports.Textarea = (0, react_1.forwardRef)(function Textarea({ size = 'md', invalid, fullWidth, className, onChange, onChangeValue, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({}, props, { ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-input', 'dc-textarea', {
+    return ((0, jsx_runtime_1.jsx)("textarea", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-input', 'dc-textarea', {
             'dc-input_invalid': invalid,
             'dc-input_full_width': fullWidth,
             [`dc-input_size_${size}`]: size,
         }), onChange: (event) => {
             (0, guards_1.isFunction)(onChange) && onChange(event);
             (0, guards_1.isFunction)(onChangeValue) && onChangeValue(event.target.value);
-        } }), void 0));
+        } }));
 });

package/components/toast/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/toast/toast-button.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_helpers_1 = require("../../lib/react-helpers");
 exports.ToastButton = (0, react_1.forwardRef)(function ToastButton({ className, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, props, { ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-toast-btn') }), void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-toast-btn') }));
 });

package/components/toast/toast.js

@@ -17,12 +17,12 @@ const defaultIcons = {
 };
 function Toast({ appearance, fullWidth, icon, message, informativeText, className, children: buttons, ...props }) {
     if (!icon && appearance) {
-        icon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { icon: defaultIcons[appearance], size: "1.15em" }, void 0);
+        icon = (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { icon: defaultIcons[appearance], size: "1.15em" });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-toast', {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-toast', {
             'dc-toast_full-width': fullWidth,
             [`dc-toast_appearance_${appearance}`]: appearance,
-        }) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-toast__body" }, { children: [icon && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-toast__icon" }, { children: icon }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-toast__content" }, { children: [message && (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "dc-toast__message" }, { children: message }), void 0), informativeText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ className: "dc-toast__informative-text" }, { children: informativeText }), void 0))] }), void 0)] }), void 0), buttons && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-toast__btns" }, { children: buttons }), void 0)] }), void 0));
+        }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "dc-toast__body", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "dc-toast__icon", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "dc-toast__content", children: [message && (0, jsx_runtime_1.jsx)("h3", { className: "dc-toast__message", children: message }), informativeText && ((0, jsx_runtime_1.jsx)("p", { className: "dc-toast__informative-text", children: informativeText }))] })] }), buttons && (0, jsx_runtime_1.jsx)("div", { className: "dc-toast__btns", children: buttons })] }));
 }
 exports.Toast = Toast;
 Toast.Button = toast_button_1.ToastButton;

package/components/toaster/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/toaster/toaster.js

@@ -41,11 +41,11 @@ function Toaster({ className, position = 'top-center', toastGap = 16, ...props }
             }
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, props, { ref: ref, className: (0, react_helpers_1.classNames)(className, 'toaster', `toaster_position_${position}`) }, { children: toasts.map((toast) => ((0, jsx_runtime_1.jsx)("li", { children: toast.render({
+    return ((0, jsx_runtime_1.jsx)("ul", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'toaster', `toaster_position_${position}`), children: toasts.map((toast) => ((0, jsx_runtime_1.jsx)("li", { children: toast.render({
                 toastId: toast.id,
                 className: 'toaster__item',
                 dismiss: () => dismissToast(toast.id),
-            }) }, toast.id))) }), void 0));
+            }) }, toast.id))) }));
 }
 exports.Toaster = Toaster;
 function dismissToast(toastId) {

package/components/tooltip/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/tooltip/tooltip.d.ts

@@ -1,20 +1,17 @@
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
-import { PositionerProps } from '../positioner';
+import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
+import { Alignment, Placement } from '../positioner/types';
 declare type RenderFn = (props: {
-    ref: RefObject<HTMLElement>;
-    tooltipId?: string;
+    setRef: RefCallback<HTMLElement>;
+    tooltipId: string;
     hideTooltip(): void;
     showTooltip(): void;
-}) => JSX.Element;
-interface JSXElementWithRef extends JSX.Element {
-    ref?: RefObject<HTMLElement>;
-}
-export interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
-    position?: PositionerProps['position'];
-    alignment?: PositionerProps['alignment'];
-    anchorOffset?: PositionerProps['anchorOffset'];
-    content: ReactNode;
-    children: RenderFn | JSXElementWithRef;
-}
-export declare function Tooltip({ className, position, alignment, anchorOffset, content, children, ...props }: TooltipProps): JSX.Element;
+}) => ReactNode;
+export declare type TooltipProps = {
+    placement?: Placement;
+    alignment?: Alignment;
+    anchorGap?: number;
+    label: ReactNode;
+    children: RenderFn | ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export declare function Tooltip({ id, className, placement, alignment, anchorGap, label, children, ...props }: TooltipProps): JSX.Element;
 export {};

package/components/tooltip/tooltip.js

@@ -6,43 +6,55 @@ const react_1 = require("react");
 const util_1 = require("../../lib/util");
 const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
+const use_close_animation_1 = require("../../hooks/use-close-animation");
 const positioner_1 = require("../positioner");
-function Tooltip({ className, position = 'bottom', alignment = 'center', anchorOffset = 8, content, children, ...props }) {
-    const anchorRef = (0, react_1.useRef)(null);
+function Tooltip({ id = (0, util_1.uniqueId)('dc_tooltip_'), className, placement = 'top', alignment = 'center', anchorGap = 8, label, children, ...props }) {
+    const tooltipId = (0, react_1.useRef)(id);
+    const tooltipRef = (0, react_1.useRef)(null);
     const [isShown, setIsShown] = (0, react_1.useState)(false);
-    const tooltipId = isShown ? (0, util_1.uniqueId)('tooltip-') : undefined;
-    function showTooltip() {
+    const { shouldRender, animationClassName } = (0, use_close_animation_1.useCloseAnimation)({
+        isOpen: isShown,
+        closeDurationMs: 150,
+        className: 'dc-tooltip_fade-transition',
+        openClassName: 'dc-tooltip_show',
+    });
+    const showTooltip = (0, react_1.useCallback)(() => {
         setIsShown(true);
-    }
-    function hideTooltip() {
+    }, []);
+    const hideTooltip = (0, react_1.useCallback)(() => {
         setIsShown(false);
-    }
-    function renderAnchor() {
-        if (typeof children === 'function') {
-            return children({
-                tooltipId,
-                showTooltip,
-                hideTooltip,
-                ref: anchorRef,
-            });
-        }
-        return (0, react_1.cloneElement)(children, {
-            ref: (0, react_helpers_1.mergeRefs)(children.ref, anchorRef),
-            onMouseEnter: (event) => {
-                showTooltip();
-                if ((0, guards_1.isFunction)(children.props.onMouseEnter)) {
-                    children.props.onMouseEnter(event);
-                }
-            },
-            onMouseLeave: (event) => {
-                hideTooltip();
-                if ((0, guards_1.isFunction)(children.props.onMouseLeave)) {
-                    children.props.onMouseLeave(event);
-                }
-            },
-            'aria-labelledby': tooltipId,
-        });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderAnchor(), (0, jsx_runtime_1.jsx)(positioner_1.Positioner, Object.assign({ anchorRef: anchorRef, isShown: isShown, position: position, alignment: alignment, anchorOffset: anchorOffset }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { id: tooltipId, role: "tooltip", className: (0, react_helpers_1.classNames)(className, 'dc-tooltip') }, { children: content }), void 0) }), void 0)] }, void 0));
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: ({ setRef }) => {
+            if ((0, guards_1.isFunction)(children)) {
+                return children({
+                    setRef,
+                    showTooltip,
+                    hideTooltip,
+                    tooltipId: tooltipId.current,
+                });
+            }
+            if ((0, react_1.isValidElement)(children)) {
+                return (0, react_1.cloneElement)(children, {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    ref: (0, react_helpers_1.mergeRefs)(setRef, children.ref),
+                    onMouseEnter: (event) => {
+                        const onMouseEnter = children.props.onMouseEnter;
+                        (0, guards_1.isFunction)(onMouseEnter) && onMouseEnter(event);
+                        showTooltip();
+                    },
+                    onMouseLeave: (event) => {
+                        const onMouseLeave = children.props.onMouseLeave;
+                        (0, guards_1.isFunction)(onMouseLeave) && onMouseLeave(event);
+                        hideTooltip();
+                    },
+                    'aria-labelledby': tooltipId.current,
+                });
+            }
+            return ((0, jsx_runtime_1.jsx)("span", { ref: setRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, children: children }));
+        }, renderContent: ({ style, setRef }) => {
+            if (shouldRender) {
+                return ((0, jsx_runtime_1.jsx)("div", { ref: setRef, style: style, className: "dc-tooltip-container", children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: tooltipRef, id: tooltipId.current, className: (0, react_helpers_1.classNames)('dc-tooltip', animationClassName, className), role: "tooltip", children: label }) }));
+            }
+        } }));
 }
 exports.Tooltip = Tooltip;

package/components/vertical-navigation/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/components/vertical-navigation/vertical-navigation-item.js

@@ -7,12 +7,12 @@ function VerticalNavigationItem({ className, selected, icon, badge, children, re
     className = (0, react_helpers_1.classNames)(className, 'dc-vertical-nav-item', {
         [VerticalNavigationItem.SELECTED_STATE_CSS_MODIFIER]: selected,
     });
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-vertical-nav-item__icon" }, { children: [icon, " "] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-vertical-nav-item__content" }, { children: children }), void 0), badge && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-vertical-nav-item__badge" }, { children: [" ", badge] }), void 0)] }, void 0));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsxs)("div", { className: "dc-vertical-nav-item__icon", children: [icon, " "] }), (0, jsx_runtime_1.jsx)("div", { className: "dc-vertical-nav-item__content", children: children }), badge && (0, jsx_runtime_1.jsxs)("div", { className: "dc-vertical-nav-item__badge", children: [" ", badge] })] }));
     if (typeof renderAs === 'function') {
         return renderAs({ className, children: content });
     }
     else {
-        return ((0, jsx_runtime_1.jsx)("a", Object.assign({}, props, { className: className }, { children: content }), void 0));
+        return ((0, jsx_runtime_1.jsx)("a", { ...props, className: className, children: content }));
     }
 }
 exports.VerticalNavigationItem = VerticalNavigationItem;

package/components/vertical-navigation/vertical-navigation.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const vertical_navigation_item_1 = require("./vertical-navigation-item");
 const react_helpers_1 = require("../../lib/react-helpers");
 function VerticalNavigation({ className, header, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-vertical-nav') }, { children: [header && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-vertical-nav__header" }, { children: header }), void 0), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "dc-vertical-nav__items" }, { children: react_1.Children.map(children, (child, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-vertical-nav'), children: [header && (0, jsx_runtime_1.jsx)("div", { className: "dc-vertical-nav__header", children: header }), (0, jsx_runtime_1.jsx)("ul", { className: "dc-vertical-nav__items", children: react_1.Children.map(children, (child, index) => {
                     return (0, jsx_runtime_1.jsx)("li", { children: child }, `vertical-navigation-item-${index}`);
-                }) }), void 0)] }), void 0));
+                }) })] }));
 }
 exports.VerticalNavigation = VerticalNavigation;
 VerticalNavigation.Item = vertical_navigation_item_1.VerticalNavigationItem;

package/css/draft-components-utils.css

@@ -1 +1 @@
-.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}.box-content{box-sizing:content-box!important}.box-border{box-sizing:border-box!important}.width-full{width:100%!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-center{align-items:center!important;display:flex!important;justify-content:center!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column{flex-direction:column!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-justify-start{justify-content:flex-start!important}.flex-justify-end{justify-content:flex-end!important}.flex-justify-center{justify-content:center!important}.flex-justify-between{justify-content:space-between!important}.flex-justify-around{justify-content:space-around!important}.flex-items-start{align-items:flex-start!important}.flex-items-end{align-items:flex-end!important}.flex-items-center{align-items:center!important}.flex-items-baseline{align-items:baseline!important}.flex-items-stretch{align-items:stretch!important}.flex-content-start{align-content:flex-start!important}.flex-content-end{align-content:flex-end!important}.flex-content-center{align-content:center!important}.flex-content-between{align-content:space-between!important}.flex-content-around{align-content:space-around!important}.flex-content-stretch{align-content:stretch!important}.flex-1{flex:1!important}.flex-auto{flex:auto!important}.flex-grow-0{flex-grow:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-self-auto{align-self:auto!important}.flex-self-start{align-self:flex-start!important}.flex-self-end{align-self:flex-end!important}.flex-self-center{align-self:center!important}.flex-self-baseline{align-self:baseline!important}.flex-self-stretch{align-self:stretch!important}.m-0{margin:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-bottom:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-bottom:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-bottom:.75rem!important}.mt-3,.my-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.m-4{margin:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-bottom:1rem!important}.mt-4,.my-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.m-5{margin:1.25rem!important}.mx-5{margin-left:1.25rem!important;margin-right:1.25rem!important}.my-5{margin-bottom:1.25rem!important}.mt-5,.my-5{margin-top:1.25rem!important}.mr-5{margin-right:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.m-6{margin:1.5rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-6{margin-bottom:1.5rem!important}.mt-6,.my-6{margin-top:1.5rem!important}.mr-6{margin-right:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.m-8{margin:2rem!important}.mx-8{margin-left:2rem!important;margin-right:2rem!important}.my-8{margin-bottom:2rem!important}.mt-8,.my-8{margin-top:2rem!important}.mr-8{margin-right:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.m-10{margin:2.5rem!important}.mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.my-10{margin-bottom:2.5rem!important}.mt-10,.my-10{margin-top:2.5rem!important}.mr-10{margin-right:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.m-12{margin:3rem!important}.mx-12{margin-left:3rem!important;margin-right:3rem!important}.my-12{margin-bottom:3rem!important}.mt-12,.my-12{margin-top:3rem!important}.mr-12{margin-right:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.m-16{margin:4rem!important}.mx-16{margin-left:4rem!important;margin-right:4rem!important}.my-16{margin-bottom:4rem!important}.mt-16,.my-16{margin-top:4rem!important}.mr-16{margin-right:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.m-20{margin:5rem!important}.mx-20{margin-left:5rem!important;margin-right:5rem!important}.my-20{margin-bottom:5rem!important}.mt-20,.my-20{margin-top:5rem!important}.mr-20{margin-right:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.m-24{margin:6rem!important}.mx-24{margin-left:6rem!important;margin-right:6rem!important}.my-24{margin-bottom:6rem!important}.mt-24,.my-24{margin-top:6rem!important}.mr-24{margin-right:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.p-0{padding:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.p-3{padding:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-bottom:.75rem!important}.pt-3,.py-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-bottom:1rem!important}.pt-4,.py-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.p-5{padding:1.25rem!important}.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.py-5{padding-bottom:1.25rem!important}.pt-5,.py-5{padding-top:1.25rem!important}.pr-5{padding-right:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.p-6{padding:1.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important}.pt-6,.py-6{padding-top:1.5rem!important}.pr-6{padding-right:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.p-8{padding:2rem!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.py-8{padding-bottom:2rem!important}.pt-8,.py-8{padding-top:2rem!important}.pr-8{padding-right:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.p-10{padding:2.5rem!important}.px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.py-10{padding-bottom:2.5rem!important}.pt-10,.py-10{padding-top:2.5rem!important}.pr-10{padding-right:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.p-12{padding:3rem!important}.px-12{padding-left:3rem!important;padding-right:3rem!important}.py-12{padding-bottom:3rem!important}.pt-12,.py-12{padding-top:3rem!important}.pr-12{padding-right:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.p-16{padding:4rem!important}.px-16{padding-left:4rem!important;padding-right:4rem!important}.py-16{padding-bottom:4rem!important}.pt-16,.py-16{padding-top:4rem!important}.pr-16{padding-right:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.p-20{padding:5rem!important}.px-20{padding-left:5rem!important;padding-right:5rem!important}.py-20{padding-bottom:5rem!important}.pt-20,.py-20{padding-top:5rem!important}.pr-20{padding-right:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.p-24{padding:6rem!important}.px-24{padding-left:6rem!important;padding-right:6rem!important}.py-24{padding-bottom:6rem!important}.pt-24,.py-24{padding-top:6rem!important}.pr-24{padding-right:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-10{gap:2.5rem!important}.gap-12{gap:3rem!important}.gap-16{gap:4rem!important}.gap-20{gap:5rem!important}.gap-24{gap:6rem!important}.rounded-none{border-radius:0!important}.rounded-2xs{border-radius:.125rem!important}.rounded-xs{border-radius:.25rem!important}.rounded-sm{border-radius:.3125rem!important}.rounded-md{border-radius:.375rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-xl{border-radius:.625rem!important}.rounded-2xl{border-radius:.75rem!important}.rounded-circle{border-radius:50%!important}.border{border:1px solid #d4d4d8!important}.border-top{border-top:1px solid #d4d4d8!important}.border-right{border-right:1px solid #d4d4d8!important}.border-bottom{border-bottom:1px solid #d4d4d8!important}.border-left{border-left:1px solid #d4d4d8!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-dashed{border-style:dashed!important}.border-dotted{border-style:dotted!important}.color-inherit{color:inherit!important}.color-primary{color:var(--dc-primary-text-color)!important}.color-secondary{color:var(--dc-secondary-text-color)!important}.color-tertiary{color:var(--dc-tertiary-text-color)!important}.color-link{color:var(--dc-link-text-color)!important}.color-error{color:var(--dc-error-text-color)!important}.color-warning{color:var(--dc-warning-text-color)!important}.color-info{color:var(--dc-info-text-color)!important}.color-success{color:var(--dc-success-text-color)!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semibold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extrabold{font-weight:800!important}.text-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-no-underline{text-decoration:none!important}.text-no-select{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.text-no-wrap{white-space:nowrap!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.fs-xs{font-size:.75rem!important}.fs-sm{font-size:.875rem!important}.fs-base{font-size:1rem!important}.fs-lg{font-size:1.125rem!important}.fs-xl{font-size:1.5rem!important}.fs-2xl{font-size:1.75rem!important}.fs-3xl{font-size:2rem!important}
+.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}.box-content{box-sizing:content-box!important}.box-border{box-sizing:border-box!important}.width-full{width:100%!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-center{align-items:center!important;display:flex!important;justify-content:center!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column{flex-direction:column!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-justify-start{justify-content:flex-start!important}.flex-justify-end{justify-content:flex-end!important}.flex-justify-center{justify-content:center!important}.flex-justify-between{justify-content:space-between!important}.flex-justify-around{justify-content:space-around!important}.flex-items-start{align-items:flex-start!important}.flex-items-end{align-items:flex-end!important}.flex-items-center{align-items:center!important}.flex-items-baseline{align-items:baseline!important}.flex-items-stretch{align-items:stretch!important}.flex-content-start{align-content:flex-start!important}.flex-content-end{align-content:flex-end!important}.flex-content-center{align-content:center!important}.flex-content-between{align-content:space-between!important}.flex-content-around{align-content:space-around!important}.flex-content-stretch{align-content:stretch!important}.flex-1{flex:1!important}.flex-auto{flex:auto!important}.flex-grow-0{flex-grow:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-self-auto{align-self:auto!important}.flex-self-start{align-self:flex-start!important}.flex-self-end{align-self:flex-end!important}.flex-self-center{align-self:center!important}.flex-self-baseline{align-self:baseline!important}.flex-self-stretch{align-self:stretch!important}.m-auto{margin:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-bottom:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.m-0{margin:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-bottom:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-bottom:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-bottom:.75rem!important}.mt-3,.my-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.m-4{margin:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-bottom:1rem!important}.mt-4,.my-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.m-5{margin:1.25rem!important}.mx-5{margin-left:1.25rem!important;margin-right:1.25rem!important}.my-5{margin-bottom:1.25rem!important}.mt-5,.my-5{margin-top:1.25rem!important}.mr-5{margin-right:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.m-6{margin:1.5rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-6{margin-bottom:1.5rem!important}.mt-6,.my-6{margin-top:1.5rem!important}.mr-6{margin-right:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.m-8{margin:2rem!important}.mx-8{margin-left:2rem!important;margin-right:2rem!important}.my-8{margin-bottom:2rem!important}.mt-8,.my-8{margin-top:2rem!important}.mr-8{margin-right:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.m-10{margin:2.5rem!important}.mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.my-10{margin-bottom:2.5rem!important}.mt-10,.my-10{margin-top:2.5rem!important}.mr-10{margin-right:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.m-12{margin:3rem!important}.mx-12{margin-left:3rem!important;margin-right:3rem!important}.my-12{margin-bottom:3rem!important}.mt-12,.my-12{margin-top:3rem!important}.mr-12{margin-right:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.m-16{margin:4rem!important}.mx-16{margin-left:4rem!important;margin-right:4rem!important}.my-16{margin-bottom:4rem!important}.mt-16,.my-16{margin-top:4rem!important}.mr-16{margin-right:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.m-20{margin:5rem!important}.mx-20{margin-left:5rem!important;margin-right:5rem!important}.my-20{margin-bottom:5rem!important}.mt-20,.my-20{margin-top:5rem!important}.mr-20{margin-right:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.m-24{margin:6rem!important}.mx-24{margin-left:6rem!important;margin-right:6rem!important}.my-24{margin-bottom:6rem!important}.mt-24,.my-24{margin-top:6rem!important}.mr-24{margin-right:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.p-0{padding:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.p-3{padding:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-bottom:.75rem!important}.pt-3,.py-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-bottom:1rem!important}.pt-4,.py-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.p-5{padding:1.25rem!important}.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.py-5{padding-bottom:1.25rem!important}.pt-5,.py-5{padding-top:1.25rem!important}.pr-5{padding-right:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.p-6{padding:1.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important}.pt-6,.py-6{padding-top:1.5rem!important}.pr-6{padding-right:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.p-8{padding:2rem!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.py-8{padding-bottom:2rem!important}.pt-8,.py-8{padding-top:2rem!important}.pr-8{padding-right:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.p-10{padding:2.5rem!important}.px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.py-10{padding-bottom:2.5rem!important}.pt-10,.py-10{padding-top:2.5rem!important}.pr-10{padding-right:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.p-12{padding:3rem!important}.px-12{padding-left:3rem!important;padding-right:3rem!important}.py-12{padding-bottom:3rem!important}.pt-12,.py-12{padding-top:3rem!important}.pr-12{padding-right:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.p-16{padding:4rem!important}.px-16{padding-left:4rem!important;padding-right:4rem!important}.py-16{padding-bottom:4rem!important}.pt-16,.py-16{padding-top:4rem!important}.pr-16{padding-right:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.p-20{padding:5rem!important}.px-20{padding-left:5rem!important;padding-right:5rem!important}.py-20{padding-bottom:5rem!important}.pt-20,.py-20{padding-top:5rem!important}.pr-20{padding-right:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.p-24{padding:6rem!important}.px-24{padding-left:6rem!important;padding-right:6rem!important}.py-24{padding-bottom:6rem!important}.pt-24,.py-24{padding-top:6rem!important}.pr-24{padding-right:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-10{gap:2.5rem!important}.gap-12{gap:3rem!important}.gap-16{gap:4rem!important}.gap-20{gap:5rem!important}.gap-24{gap:6rem!important}.rounded-none{border-radius:0!important}.rounded-2xs{border-radius:.125rem!important}.rounded-xs{border-radius:.25rem!important}.rounded-sm{border-radius:.3125rem!important}.rounded-md{border-radius:.375rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-xl{border-radius:.625rem!important}.rounded-2xl{border-radius:.75rem!important}.rounded-circle{border-radius:50%!important}.border{border:1px solid #d4d4d8!important}.border-top{border-top:1px solid #d4d4d8!important}.border-right{border-right:1px solid #d4d4d8!important}.border-bottom{border-bottom:1px solid #d4d4d8!important}.border-left{border-left:1px solid #d4d4d8!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-dashed{border-style:dashed!important}.border-dotted{border-style:dotted!important}.color-inherit{color:inherit!important}.color-primary{color:var(--dc-primary-text-color)!important}.color-secondary{color:var(--dc-secondary-text-color)!important}.color-tertiary{color:var(--dc-tertiary-text-color)!important}.color-link{color:var(--dc-link-text-color)!important}.color-error{color:var(--dc-error-text-color)!important}.color-warning{color:var(--dc-warning-text-color)!important}.color-info{color:var(--dc-info-text-color)!important}.color-success{color:var(--dc-success-text-color)!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semibold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extrabold{font-weight:800!important}.text-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-no-underline{text-decoration:none!important}.text-no-select{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.text-no-wrap{white-space:nowrap!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.fs-xs{font-size:.75rem!important}.fs-sm{font-size:.875rem!important}.fs-base{font-size:1rem!important}.fs-lg{font-size:1.125rem!important}.fs-xl{font-size:1.5rem!important}.fs-2xl{font-size:1.75rem!important}.fs-3xl{font-size:2rem!important}