@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/DataList/useDataListNavigation.js

@@ -0,0 +1,60 @@
+"use strict";
+exports.__esModule = true;
+exports.useDataListNavigation = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useBoolean_1 = require("../../hooks/useBoolean");
+var useUniqueId_1 = require("../../hooks/useUniqueId");
+var getNextIndex_1 = require("../../utils/getNextIndex");
+var getPrevIndex_1 = require("../../utils/getPrevIndex");
+var isKey_1 = require("../../utils/isKey");
+var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
+function useDataListNavigation(_a) {
+    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, listRef = _b.listRef;
+    var name = (0, useUniqueId_1.useUniqueId)(nameProp);
+    var _c = tslib_1.__read((0, react_1.useState)(null), 2), currentItem = _c[0], setCurrentItem = _c[1];
+    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), keyboardHighlight = _d[0], _e = _d[1], showKeyboardHighlight = _e.on, hideKeyboardHighlight = _e.off;
+    var onKeyDown = function (event) {
+        var _a;
+        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var items = Array.from(((_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return item.getAttribute('aria-disabled') !== 'true'; });
+        var currentIndex = currentItem !== null ? items.indexOf(currentItem) : null;
+        var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
+        var newIndex = isArrowUp
+            ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
+            : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, items.length);
+        var item = items[newIndex];
+        setCurrentItem(item);
+        showKeyboardHighlight();
+        if (listRef === null || listRef === void 0 ? void 0 : listRef.current) {
+            (0, scrollContainerToElement_1.scrollContainerToElement)({
+                container: listRef.current,
+                element: item
+            });
+        }
+    };
+    var onMouseMove = function (event) {
+        if (currentItem !== event.currentTarget) {
+            setCurrentItem(event.currentTarget || null);
+        }
+        hideKeyboardHighlight();
+    };
+    var onMouseLeave = function () {
+        if (keyboardHighlight) {
+            return;
+        }
+        setCurrentItem(null);
+    };
+    return {
+        'data-list': name,
+        currentItem: currentItem,
+        keyboardHighlight: keyboardHighlight,
+        onKeyDown: onKeyDown,
+        onMouseMove: onMouseMove,
+        onMouseLeave: onMouseLeave
+    };
+}
+exports.useDataListNavigation = useDataListNavigation;

package/__inner__/cjs/components/Dialog/Dialog.css

@@ -0,0 +1,148 @@
+/* stylelint-disable */
+.Dialog {
+  --dialog-header-item-padding-right: 0;
+}
+.Dialog .Modal-Window {
+    outline: none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    inline-size: calc(100% - 64px);
+    max-inline-size: var(--modal-width);
+    /* stylelint-disable-next-line plugin/use-logical-units */
+    max-block-size: calc(100vh - 64px);
+    border-radius: var(--border-radius-m);
+    box-shadow: var(--shadow-l);
+  }
+.Dialog-InnerContainer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-block-size: 100%;
+    overflow: auto;
+  }
+.Dialog-Header,
+  .Dialog-Footer {
+    background-color: inherit;
+  }
+.Dialog-Header {
+    padding: var(--dialog-space-size) var(--dialog-space-size)
+      var(--dialog-padding-bottom);
+  }
+.Dialog-Footer {
+    padding: var(--dialog-space-size);
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+.Dialog-Title {
+    margin: 0;
+    padding-inline-end: var(--dialog-header-item-padding-right);
+  }
+.Dialog-Subtitle {
+    color: var(--color-content-secondary);
+    margin-block-start: var(--dialog-subtitle-margin-top);
+    padding-inline-end: var(--dialog-header-item-padding-right);
+  }
+.Dialog-Body {
+    flex-grow: 1;
+    max-block-size: 100%;
+    padding: 0 var(--dialog-space-size);
+    overflow: auto;
+  }
+.Dialog-Body:first-child {
+    margin-block-start: var(--dialog-body-first-child-margin-top);
+  }
+.Dialog-Body:last-child {
+    margin-block-end: var(--dialog-body-last-child-margin-bottom);
+  }
+.Dialog_variant_small {
+      --modal-width: 480px;
+    }
+.Dialog_variant_medium {
+      --modal-width: 720px;
+    }
+.Dialog_variant_large {
+      --modal-width: 960px;
+    }
+.Dialog_variant_fullsize .Modal-Window {
+        inline-size: 100%;
+        max-block-size: 100%;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        inset-inline-start: 0;
+        inset-block-end: 0;
+        margin: 0;
+        border-radius: 0;
+        transform: translate(0, 0);
+      }
+.Dialog_variant_fullsize .Dialog-Footer {
+        flex-direction: row-reverse;
+      }
+.Dialog_size_s {
+      --dialog-space-size: 24px;
+      --dialog-padding-bottom: 16px;
+      --dialog-body-first-child-margin-top: 40px;
+      --dialog-body-last-child-margin-bottom: var(--dialog-space-size);
+      --dialog-subtitle-margin-top: 4px;
+    }
+.Dialog_size_s .Dialog-Title {
+        font: var(--typography-heading-xl-font);
+        letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
+        text-transform: var(--typography-heading-xl-text_transform, none);
+      }
+.Dialog_size_s .Dialog-Subtitle {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.Dialog_size_l {
+      --dialog-space-size: 32px;
+      --dialog-padding-bottom: 24px;
+      --dialog-body-first-child-margin-top: 56px;
+      --dialog-body-last-child-margin-bottom: var(--dialog-space-size);
+      --dialog-subtitle-margin-top: 8px;
+    }
+.Dialog_size_l .Dialog-Title {
+        font: var(--typography-heading-2xl-font);
+        letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
+        text-transform: var(--typography-heading-2xl-text_transform, none);
+      }
+.Dialog_size_l .Dialog-Subtitle {
+        font: var(--typography-text-l-font);
+        letter-spacing: var(--typography-text-l-letter_spacing, 0);
+        text-transform: var(--typography-text-l-text_transform, none);
+      }
+.Dialog_hasCloseButton {
+    --dialog-header-item-padding-right: 24px;
+  }
+.IconButton.Dialog-CloseButton {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+}
+.Dialog_animation_fullsize-appear .Modal-Window, .Dialog_animation_fullsize-enter .Modal-Window {
+      transform: translate(0, 100%);
+    }
+.Dialog_animation_fullsize-appear-active .Modal-Window, .Dialog_animation_fullsize-enter-active .Modal-Window {
+      transition: transform var(--transition-slow);
+      transform: translate(0, 0);
+    }
+.Dialog_animation_fullsize-enter-done .Modal-Window {
+      transform: translate(0, 0);
+    }
+.Dialog_animation_fullsize-exit .Modal-Window {
+      visibility: visible;
+      transform: translate(0, 0);
+    }
+.Dialog_animation_fullsize-exit-active .Modal-Window {
+      visibility: visible;
+      transition: transform var(--transition-slow);
+      transform: translate(0, 100%);
+    }
+.Dialog_animation_fullsize-exit-done .Modal-Window {
+      visibility: hidden;
+      transform: translate(0, 100%);
+    }

package/__inner__/cjs/components/Dialog/Dialog.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type IconButtonProps } from '../IconButton';
+import { type ModalProps } from '../Modal';
+import './Dialog.css';
+export declare const cnDialog: import("@bem-react/classname").ClassNameFormatter;
+export declare const dialogSizeVariant: readonly ["s", "l"];
+export declare const dialogVariant: readonly ["small", "medium", "large", "fullsize"];
+export type DialogSizeVariant = (typeof dialogSizeVariant)[number];
+export type DialogVariant = (typeof dialogVariant)[number];
+export type DialogProps = {
+    /** Признак по которому компонент будет представлен */
+    open: boolean;
+    /** Содержимое диалогового окна */
+    children: React.ReactNode;
+    /** Устанавливает размер типографики и отступов в диалоговом окне */
+    size?: DialogSizeVariant;
+    /** Вариант диалогового окна */
+    variant?: DialogVariant;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: () => void;
+    /** Свойства кнопки закрытия диалогового окна */
+    closeButtonProps?: Omit<IconButtonProps, 'icon'> & {
+        'data-testid'?: string;
+    };
+    /** Признак по которому кнопка закрытия диалогового окна будет скрыта */
+    hideCloseButton?: boolean;
+    /** Кастомный класс контейнера диалогового окна */
+    className?: string;
+} & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Dialog/Dialog.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+exports.Dialog = exports.dialogVariant = exports.dialogSizeVariant = exports.cnDialog = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var classname_1 = require("../../utils/classname");
+var IconButton_1 = require("../IconButton");
+var Modal_1 = require("../Modal");
+require("./Dialog.css");
+exports.cnDialog = (0, classname_1.cn)('Dialog');
+exports.dialogSizeVariant = ['s', 'l'];
+exports.dialogVariant = ['small', 'medium', 'large', 'fullsize'];
+var iconButtonSizeMapper = {
+    l: 'm',
+    s: 's'
+};
+exports.Dialog = (0, react_1.forwardRef)(function (_a, ref) {
+    var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, onClose = _a.onClose, children = _a.children, className = _a.className, windowProps = _a.windowProps, closeButtonProps = _a.closeButtonProps, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d, transitionProps = _a.transitionProps, other = tslib_1.__rest(_a, ["open", "variant", "size", "onClose", "children", "className", "windowProps", "closeButtonProps", "hideCloseButton", "transitionProps"]);
+    var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = tslib_1.__rest(_e, ["className"]);
+    return (react_1["default"].createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, windowProps: tslib_1.__assign({ role: 'dialog' }, windowProps), className: (0, exports.cnDialog)({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign(tslib_1.__assign({}, (variant === 'fullsize' && {
+            classNames: (0, exports.cnDialog)({ animation: 'fullsize' })
+        })), transitionProps), ref: ref }),
+        !hideCloseButton && (react_1["default"].createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: (0, exports.cnDialog)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CloseIcon, compressed: true }))),
+        react_1["default"].createElement("div", { className: (0, exports.cnDialog)('InnerContainer') }, children)));
+});
+exports.Dialog.displayName = 'Dialog';

package/__inner__/cjs/components/Dialog/components/DialogBody.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import '../Dialog.css';
+export type DialogBodyProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DialogBody: FC<DialogBodyProps>;

package/__inner__/cjs/components/Dialog/components/DialogBody.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.DialogBody = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Dialog_1 = require("../Dialog");
+require("../Dialog.css");
+exports.DialogBody = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("div", tslib_1.__assign({ ref: ref, className: (0, Dialog_1.cnDialog)('Body', [className]) }, restProps), children));
+});
+exports.DialogBody.displayName = 'DialogBody';

package/__inner__/cjs/components/Dialog/components/DialogFooter.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import '../Dialog.css';
+export type DialogFooterProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DialogFooter: FC<DialogFooterProps>;

package/__inner__/cjs/components/Dialog/components/DialogFooter.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.DialogFooter = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Dialog_1 = require("../Dialog");
+require("../Dialog.css");
+exports.DialogFooter = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("div", tslib_1.__assign({ ref: ref, className: (0, Dialog_1.cnDialog)('Footer', [className]) }, restProps), children));
+});
+exports.DialogFooter.displayName = 'DialogFooter';

package/__inner__/cjs/components/Dialog/components/DialogHeader.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import '../Dialog.css';
+export type DialogHeaderProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DialogHeader: FC<DialogHeaderProps>;

package/__inner__/cjs/components/Dialog/components/DialogHeader.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.DialogHeader = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Dialog_1 = require("../Dialog");
+require("../Dialog.css");
+exports.DialogHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("div", tslib_1.__assign({ ref: ref, className: (0, Dialog_1.cnDialog)('Header', [className]) }, restProps), children));
+});
+exports.DialogHeader.displayName = 'DialogHeader';

package/__inner__/cjs/components/Dialog/components/DialogSubtitle.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import '../Dialog.css';
+export type DialogSubtitleProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DialogSubtitle: FC<DialogSubtitleProps>;

package/__inner__/cjs/components/Dialog/components/DialogSubtitle.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.DialogSubtitle = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Dialog_1 = require("../Dialog");
+require("../Dialog.css");
+exports.DialogSubtitle = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("div", tslib_1.__assign({ ref: ref, className: (0, Dialog_1.cnDialog)('Subtitle', [className]) }, restProps), children));
+});
+exports.DialogSubtitle.displayName = 'DialogSubtitle';

package/__inner__/cjs/components/Dialog/components/DialogTitle.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import '../Dialog.css';
+export type DialogTitleProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLHeadingElement>;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLHeadingElement>;
+export declare const DialogTitle: FC<DialogTitleProps>;

package/__inner__/cjs/components/Dialog/components/DialogTitle.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.DialogTitle = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Dialog_1 = require("../Dialog");
+require("../Dialog.css");
+exports.DialogTitle = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("h2", tslib_1.__assign({ ref: ref, className: (0, Dialog_1.cnDialog)('Title', [className]) }, restProps), children));
+});
+exports.DialogTitle.displayName = 'DialogTitle';

package/__inner__/cjs/components/Dialog/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DialogHeader';
+export * from './DialogTitle';
+export * from './DialogSubtitle';
+export * from './DialogBody';
+export * from './DialogFooter';

package/__inner__/cjs/components/Dialog/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DialogHeader"), exports);
+tslib_1.__exportStar(require("./DialogTitle"), exports);
+tslib_1.__exportStar(require("./DialogSubtitle"), exports);
+tslib_1.__exportStar(require("./DialogBody"), exports);
+tslib_1.__exportStar(require("./DialogFooter"), exports);

package/__inner__/cjs/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+export * from './components';

package/__inner__/cjs/components/Dialog/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Dialog"), exports);
+tslib_1.__exportStar(require("./components"), exports);

package/__inner__/cjs/components/Divider/Divider.css

@@ -0,0 +1,60 @@
+.Divider {
+  flex-shrink: 0;
+  border-style: solid;
+  margin: 0;
+}
+
+  .Divider_color_primary {
+      border-color: var(--color-border-main);
+    }
+
+  .Divider_color_secondary {
+      border-color: var(--color-border-secondary);
+    }
+
+  .Divider_display_block {
+      display: block;
+    }
+
+  .Divider_display_inlineBlock {
+      display: inline-block;
+    }
+
+  .Divider_display_inline {
+      display: inline;
+    }
+
+  .Divider_orientation_vertical {
+    block-size: 100%;
+    inline-size: 0;
+  }
+
+  .Divider_orientation_horizontal {
+    block-size: 0;
+    inline-size: 100%;
+  }
+
+  .Divider_orientation_vertical.Divider_size_s {
+    border-width: 0 1px 0 0;
+  }
+
+  .Divider_orientation_vertical.Divider_size_m {
+    border-width: 0 2px 0 0;
+  }
+
+  .Divider_orientation_horizontal.Divider_size_s {
+    border-width: 0 0 1px;
+  }
+
+  .Divider_orientation_horizontal.Divider_size_m {
+    border-width: 0 0 2px;
+  }
+
+  .Divider_flexItem {
+    block-size: auto;
+    align-self: stretch;
+  }
+
+li.Divider {
+  list-style: none;
+}

package/__inner__/cjs/components/Divider/Divider.d.ts

@@ -0,0 +1,37 @@
+import './Divider.css';
+import React from 'react';
+import type { Ref, HTMLAttributes } from 'react';
+export declare const dividerDisplayVariant: readonly ["block", "inlineBlock", "inline"];
+export declare const dividerColorVariant: readonly ["primary", "secondary"];
+export declare const dividerSizeVariant: readonly ["m", "s"];
+export declare const dividerOrientationVariant: readonly ["vertical", "horizontal"];
+export declare const dividerAsVariant: readonly ["hr", "li", "span"];
+export type DividerColorVariant = (typeof dividerColorVariant)[number];
+export type DividerDisplayVariant = (typeof dividerDisplayVariant)[number];
+export type DividerSizeVariant = (typeof dividerSizeVariant)[number];
+export type DividerAsVariant = (typeof dividerAsVariant)[number];
+export type DividerOrientationVariant = (typeof dividerOrientationVariant)[number];
+type DividerBaseProps = {
+    /** Тип элемента */
+    display?: DividerDisplayVariant;
+    /** Размер */
+    size?: DividerSizeVariant;
+    /**
+     * Является ли разделитель дочерним элементом flex контейнера.
+     * В основном используется для вертикальной ориентации.
+     * Когда у блока нет фиксированной высоты.
+     * */
+    flexItem?: boolean;
+    /** Ориентация */
+    orientation?: DividerOrientationVariant;
+    /** Цвет */
+    color?: DividerColorVariant;
+    /** HTML-тег для компонента */
+    as?: DividerAsVariant;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLHRElement & HTMLLIElement & HTMLSpanElement>;
+};
+export type DividerProps = DividerBaseProps & HTMLAttributes<HTMLHRElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLLIElement>;
+export declare const cnDivider: import("@bem-react/classname").ClassNameFormatter;
+export declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React.RefAttributes<HTMLHRElement & HTMLLIElement & HTMLSpanElement>>;
+export {};

package/__inner__/cjs/components/Divider/Divider.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+exports.Divider = exports.cnDivider = exports.dividerAsVariant = exports.dividerOrientationVariant = exports.dividerSizeVariant = exports.dividerColorVariant = exports.dividerDisplayVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Divider.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+exports.dividerDisplayVariant = [
+    'block',
+    'inlineBlock',
+    'inline',
+];
+exports.dividerColorVariant = ['primary', 'secondary'];
+exports.dividerSizeVariant = ['m', 's'];
+exports.dividerOrientationVariant = ['vertical', 'horizontal'];
+exports.dividerAsVariant = ['hr', 'li', 'span'];
+exports.cnDivider = (0, classname_1.cn)('Divider');
+exports.Divider = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Divider'
+    });
+    var _a = props.color, color = _a === void 0 ? 'primary' : _a, _b = props.as, Tag = _b === void 0 ? 'hr' : _b, _c = props.size, size = _c === void 0 ? 's' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, display = props.display, className = props.className, flexItem = props.flexItem, other = tslib_1.__rest(props, ["color", "as", "size", "orientation", "display", "className", "flexItem"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnDivider)({ display: display, size: size, orientation: orientation, flexItem: flexItem, color: color }, [
+            className,
+        ]), role: "separator" }, other, { ref: ref })));
+});
+exports.Divider.displayName = 'Divider';

package/__inner__/cjs/components/Divider/index.d.ts

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

package/__inner__/cjs/components/Divider/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Divider"), exports);