draft-components 0.71.0 → 0.72.0

package/components/date-preset-picker-popover/date-preset-picker-popover.js

@@ -52,9 +52,9 @@ function DatePresetPickerPopover({ locale, timeZone, defaultIsOpen = false, hide
         }
         (_a = popover.current) === null || _a === void 0 ? void 0 : _a.close();
     }
-    const formattedTimeZone = timeZone ? formatTimeZone(timeZone) : '';
+    const formattedTimeZone = timeZone ? formatTimeZone(timeZone, locale) : '';
     const formattedDateRange = selectedDateRange
-        ? formatDateRange(selectedDateRange)
+        ? formatDateRange(selectedDateRange, locale)
         : '';
     return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { ref: popover, className: "dc-date-preset-picker-popover", defaultIsOpen: defaultIsOpen, placement: placement, alignment: alignment, anchor: children, onOpen: handleOpenPopover, children: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { locale: locale, formattedTimeZone: formattedTimeZone, formattedDateRange: hideSelectedRange ? '' : formattedDateRange, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, dateRange: selection.dateRange, datePreset: ((_a = selection.option) === null || _a === void 0 ? void 0 : _a.datePreset) || '', onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: handleCancel, onConfirm: handleConfirm }) }));
 }

package/components/dialog/dialog.js

@@ -33,16 +33,19 @@ function Dialog({ style, className, isOpen = false, showCloseButton = true, focu
     (0, use_esc_key_down_1.useEscKeyDown)(() => (0, guards_1.isFunction)(onClose) && onClose(), isOpen);
     (0, use_focus_trap_1.useFocusTrap)(dialogRef, isOpen);
     (0, react_1.useEffect)(() => {
-        if (shouldRender) {
-            if (focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current) {
-                focusAfterOpen.current.focus();
-            }
+        if (!shouldRender) {
+            return;
         }
-        else {
-            if (focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current) {
-                focusAfterClose.current.focus();
-            }
+        const focusAfterOpenEl = focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current;
+        const focusAfterCloseEl = focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current;
+        if (focusAfterOpenEl) {
+            focusAfterOpenEl.focus();
         }
+        return () => {
+            if (focusAfterCloseEl) {
+                focusAfterCloseEl.focus();
+            }
+        };
     }, [shouldRender, focusAfterOpen, focusAfterClose]);
     if (!shouldRender) {
         return null;

package/components/file-input/file-input-button.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare type FileInputButtonProps = ComponentPropsWithoutRef<'label'>;
+export declare function FileInputButton({ htmlFor, children }: FileInputButtonProps): JSX.Element;

package/components/file-input/file-input-button.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInputButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const file_input_context_1 = require("./file-input-context");
+function FileInputButton({ htmlFor, children }) {
+    const { inputId } = (0, file_input_context_1.useFileInputContext)();
+    return ((0, jsx_runtime_1.jsx)("label", { role: "button", className: "dc-file-input__button", htmlFor: htmlFor || inputId, children: children }));
+}
+exports.FileInputButton = FileInputButton;

package/components/file-input/file-input-context.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type FileInputContext = {
+    inputId: string;
+};
+declare type FileInputContextProviderProps = {
+    inputId: string;
+    children: ReactNode;
+};
+export declare const fileInputContext: import("react").Context<FileInputContext | null>;
+export declare function useFileInputContext(): FileInputContext;
+export declare function FileInputContextProvider({ inputId, children, }: FileInputContextProviderProps): JSX.Element;
+export {};

package/components/file-input/file-input-context.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInputContextProvider = exports.useFileInputContext = exports.fileInputContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.fileInputContext = (0, react_1.createContext)(null);
+function useFileInputContext() {
+    const value = (0, react_1.useContext)(exports.fileInputContext);
+    if (value == null) {
+        throw new Error('useFileInputContext must be used within FileInputContextProvider');
+    }
+    return value;
+}
+exports.useFileInputContext = useFileInputContext;
+function FileInputContextProvider({ inputId, children, }) {
+    const Provider = exports.fileInputContext.Provider;
+    const value = (0, react_1.useMemo)(() => ({ inputId }), [inputId]);
+    return (0, jsx_runtime_1.jsx)(Provider, { value: value, children: children });
+}
+exports.FileInputContextProvider = FileInputContextProvider;

package/components/file-input/file-input.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type FileInputProps = {
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    shouldShowIcon?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    accept?: string;
+    icon?: ReactNode;
+    helpText?: ReactNode;
+    children: ReactNode;
+    onSelectFiles(files: File[]): void;
+};
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/file-input/file-input.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_helpers_1 = require("../../lib/react-helpers");
+const util_1 = require("../../lib/util");
+const file_input_context_1 = require("./file-input-context");
+const svg_icon_1 = require("../svg-icon");
+const file_earmark_arrow_up_1 = require("../../bootstrap-icons/file-earmark-arrow-up");
+exports.FileInput = (0, react_1.forwardRef)(function FileInput({ id: defaultId, style, className, shouldShowIcon = true, multiple = false, disabled = false, accept, icon, children, helpText, onSelectFiles, }, ref) {
+    const id = (0, react_1.useRef)(defaultId);
+    if (!id.current) {
+        id.current = (0, util_1.uniqueId)('file_input_');
+    }
+    const [isDragOver, setIsDragOver] = (0, react_1.useState)(false);
+    function handleSelectFiles(fileList) {
+        if (disabled) {
+            return;
+        }
+        let files = fileList ? Array.from(fileList) : [];
+        if (!multiple) {
+            files = files.slice(0, 1);
+        }
+        onSelectFiles(files);
+    }
+    function handleDrag(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(true);
+    }
+    function handleDragEnd(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(false);
+    }
+    function handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(false);
+        handleSelectFiles(event.dataTransfer.files);
+    }
+    return ((0, jsx_runtime_1.jsx)(file_input_context_1.FileInputContextProvider, { inputId: id.current, children: (0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)('dc-file-input', disabled && 'dc-file-input_disabled', className), children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, id: id.current, accept: accept, className: "dc-file-input__native", disabled: disabled, multiple: multiple, type: "file", onChange: (event) => {
+                        const target = event.target;
+                        handleSelectFiles(target.files);
+                        target.value = '';
+                    } }), (0, jsx_runtime_1.jsxs)("div", { "data-testid": "dc-file-input-drop-zone", className: (0, react_helpers_1.classNames)('dc-file-input__drop-zone', isDragOver && 'dc-file-input__drop-zone_drag-over'), draggable: !disabled, onDrag: handleDrag, onDragStart: handleDrag, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragEnd, onDragEnd: handleDragEnd, onDrop: handleDrop, children: [shouldShowIcon && ((0, jsx_runtime_1.jsx)("div", { className: "dc-file-input__icon", children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "3x", icon: file_earmark_arrow_up_1.fileEarmarkArrowUp }) })), children && ((0, jsx_runtime_1.jsx)("div", { className: "dc-file-input__content", children: children })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "dc-file-input__help-text", children: helpText }))] })] }) }));
+});

package/components/file-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './file-input';
+export * from './file-input-button';

package/components/file-input/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./file-input"), exports);
+__exportStar(require("./file-input-button"), exports);

package/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './date-preset-picker-popover';
 export * from './date-range-picker';
 export * from './datetime-input';
 export * from './dialog';
+export * from './file-input';
 export * from './form-field';
 export * from './formatted-content';
 export * from './inline-message';

package/components/index.js

@@ -28,6 +28,7 @@ __exportStar(require("./date-preset-picker-popover"), exports);
 __exportStar(require("./date-range-picker"), exports);
 __exportStar(require("./datetime-input"), exports);
 __exportStar(require("./dialog"), exports);
+__exportStar(require("./file-input"), exports);
 __exportStar(require("./form-field"), exports);
 __exportStar(require("./formatted-content"), exports);
 __exportStar(require("./inline-message"), exports);

package/components/menu/menu.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 import { BoxElevation } from '../box';
+import { Alignment, Placement } from '../positioner/types';
 declare type RenderLabel = (props: {
     id: string;
     isOpen: boolean;
@@ -12,9 +13,13 @@ declare type RenderLabel = (props: {
 export declare type MenuProps = {
     className?: string;
     elevation?: BoxElevation;
+    placement?: Placement;
+    alignment?: Alignment;
+    anchorGap?: number;
+    viewportGap?: number;
     defaultIsOpen?: boolean;
     label: ReactNode | RenderLabel;
     children: ReactNode;
 };
-export declare function Menu({ className, elevation, defaultIsOpen, label, children, }: MenuProps): JSX.Element;
+export declare function Menu({ className, elevation, placement, alignment, anchorGap, viewportGap, defaultIsOpen, label, children, }: MenuProps): JSX.Element;
 export {};

package/components/menu/menu.js

@@ -10,7 +10,7 @@ const popover_1 = require("../popover");
 const button_1 = require("../button");
 const menu_button_1 = require("./menu-button");
 const react_helpers_1 = require("../../lib/react-helpers");
-function Menu({ className, elevation, defaultIsOpen = false, label, children, }) {
+function Menu({ className, elevation, placement, alignment, anchorGap, viewportGap, defaultIsOpen = false, label, children, }) {
     const menuId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_'));
     const menuButtonId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_button_'));
     const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
@@ -81,7 +81,7 @@ function Menu({ className, elevation, defaultIsOpen = false, label, children, })
             activeMenuItem.focus();
         }
     }
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: (0, react_helpers_1.classNames)('dc-menu', className), elevation: elevation, isOpen: isOpen, onClose: closeMenu, anchor: (0, guards_1.isFunction)(label) ? (label({
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: (0, react_helpers_1.classNames)('dc-menu', className), elevation: elevation, placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, isOpen: isOpen, onClose: closeMenu, anchor: (0, guards_1.isFunction)(label) ? (label({
             isOpen,
             id: menuButtonId.current,
             'aria-haspopup': true,

package/components/popover/popover.d.ts

@@ -19,6 +19,8 @@ export declare type PopoverProps = {
     shouldFocusAnchorAfterClose?: boolean;
     placement?: Placement;
     alignment?: Alignment;
+    anchorGap?: number;
+    viewportGap?: number;
     anchor: ReactNode | RenderFn;
     children: ReactNode;
     onOpen?(): void;
@@ -31,6 +33,8 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     shouldFocusAnchorAfterClose?: boolean | undefined;
     placement?: Placement | undefined;
     alignment?: Alignment | undefined;
+    anchorGap?: number | undefined;
+    viewportGap?: number | undefined;
     anchor: ReactNode | RenderFn;
     children: ReactNode;
     onOpen?(): void;

package/components/popover/popover.js

@@ -12,7 +12,7 @@ const use_focus_trap_1 = require("../../hooks/use-focus-trap");
 const use_body_click_1 = require("./use-body-click");
 const box_1 = require("../box");
 const positioner_1 = require("../positioner");
-exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTrapFocus = true, shouldFocusAnchorAfterClose = true, placement = 'bottom', alignment = 'start', borderRadius = 'lg', elevation = 'md', anchor, children, onOpen, onClose, ...props }, ref) {
+exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTrapFocus = true, shouldFocusAnchorAfterClose = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, borderRadius = 'lg', elevation = 'md', anchor, children, onOpen, onClose, ...props }, ref) {
     var _a, _b;
     const anchorRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
@@ -66,7 +66,7 @@ exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTr
         }
     }, isOpen);
     (0, use_focus_trap_1.useFocusTrap)(contentRef, shouldTrapFocus ? isOpen : false);
-    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, renderAnchor: ({ setRef }) => {
+    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: ({ setRef }) => {
             if ((0, guards_1.isFunction)(anchor)) {
                 return anchor({
                     openPopover,

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-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}
+.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-gray-50{color:#fafafa!important}.text-gray-100{color:#f4f4f5!important}.text-gray-200{color:#e4e4e7!important}.text-gray-300{color:#d4d4d8!important}.text-gray-400{color:#a1a1aa!important}.text-gray-500{color:#71717a!important}.text-gray-600{color:#52525b!important}.text-gray-700{color:#3f3f46!important}.text-gray-800{color:#27272a!important}.text-gray-900{color:#18181b!important}.text-blue-50{color:#eff6ff!important}.text-blue-100{color:#dbeafe!important}.text-blue-200{color:#bfdbfe!important}.text-blue-300{color:#93c5fd!important}.text-blue-400{color:#60a5fa!important}.text-blue-500{color:#3b82f6!important}.text-blue-600{color:#2563eb!important}.text-blue-700{color:#1d4ed8!important}.text-blue-800{color:#1e40af!important}.text-blue-900{color:#1e3a8a!important}.text-cyan-50{color:#e3fafc!important}.text-cyan-100{color:#c5f6fa!important}.text-cyan-200{color:#99e9f2!important}.text-cyan-300{color:#66d9e8!important}.text-cyan-400{color:#3bc9db!important}.text-cyan-500{color:#22b8cf!important}.text-cyan-600{color:#15aabf!important}.text-cyan-700{color:#1098ad!important}.text-cyan-800{color:#0c8599!important}.text-cyan-900{color:#0b7285!important}.text-red-50{color:#fff5f5!important}.text-red-100{color:#ffe3e3!important}.text-red-200{color:#ffc9c9!important}.text-red-300{color:#ffa8a8!important}.text-red-400{color:#ff8787!important}.text-red-500{color:#ff6b6b!important}.text-red-600{color:#fa5252!important}.text-red-700{color:#f03e3e!important}.text-red-800{color:#e03131!important}.text-red-900{color:#b52626!important}.text-green-50{color:#f2fcf5!important}.text-green-100{color:#e2fbe8!important}.text-green-200{color:#c7f5d4!important}.text-green-300{color:#9fecb1!important}.text-green-400{color:#77d989!important}.text-green-500{color:#5ec169!important}.text-green-600{color:#4ca054!important}.text-green-700{color:#3b7c44!important}.text-green-800{color:#306339!important}.text-green-900{color:#285131!important}.text-lime-50{color:#f4fce3!important}.text-lime-100{color:#e9fac8!important}.text-lime-200{color:#d8f5a2!important}.text-lime-300{color:#c0eb75!important}.text-lime-400{color:#a9e34b!important}.text-lime-500{color:#94d82d!important}.text-lime-600{color:#82c91e!important}.text-lime-700{color:#74b816!important}.text-lime-800{color:#66a80f!important}.text-lime-900{color:#47730a!important}.text-indigo-50{color:#edf2ff!important}.text-indigo-100{color:#dbe4ff!important}.text-indigo-200{color:#bac8ff!important}.text-indigo-300{color:#91a7ff!important}.text-indigo-400{color:#748ffc!important}.text-indigo-500{color:#5c7cfa!important}.text-indigo-600{color:#4c6ef5!important}.text-indigo-700{color:#4263eb!important}.text-indigo-800{color:#3b5bdb!important}.text-indigo-900{color:#364fc7!important}.text-yellow-50{color:#fffceb!important}.text-yellow-100{color:#fff3bf!important}.text-yellow-200{color:#ffec99!important}.text-yellow-300{color:#ffe066!important}.text-yellow-400{color:#ffd43b!important}.text-yellow-500{color:#fcc419!important}.text-yellow-600{color:#f0a800!important}.text-yellow-700{color:#c78100!important}.text-yellow-800{color:#ab6700!important}.text-yellow-900{color:#995200!important}.text-orange-50{color:#fff4e6!important}.text-orange-100{color:#ffe8cc!important}.text-orange-200{color:#ffd8a8!important}.text-orange-300{color:#ffc078!important}.text-orange-400{color:#ffa94d!important}.text-orange-500{color:#ff922b!important}.text-orange-600{color:#fd7e14!important}.text-orange-700{color:#f76707!important}.text-orange-800{color:#e8590c!important}.text-orange-900{color:#d9480f!important}.text-light{font-weight:300!important}.text-normal{font-weight:400!important}.text-medium{font-weight:500!important}.text-semi-bold{font-weight:600!important}.text-bold{font-weight:700!important}.text-extra-bold{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-wrap{white-space:normal!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}