@ozen-ui/kit 0.82.0 → 0.83.1

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/hooks/useSidebarCollapsibleItemAnimation.js

@@ -0,0 +1,103 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useStoredValue } from '../../../../../hooks/useStoredValue';
+import { useThemeVariables } from '../../../../../hooks/useThemeVariables';
+import { SIDEBAR_WIDTH_BY_VARIANT } from '../../../constants';
+import { useSidebarContext } from '../../../SidebarContext';
+export var useSidebarCollapsibleItemAnimation = function (_a) {
+    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
+    var _b = useSidebarContext(), variant = _b.variant, size = _b.size;
+    var transition = useThemeVariables().transition;
+    var _c = __read(useState(false), 2), wasRender = _c[0], setWasRender = _c[1];
+    var isFirstAnimation = useStoredValue(true);
+    var currentWidths = SIDEBAR_WIDTH_BY_VARIANT[size];
+    var calculateCenter = function () {
+        var _a;
+        if (!autoCenter) {
+            return null;
+        }
+        var element = ref.current;
+        if (!element) {
+            return null;
+        }
+        var parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!parent) {
+            return null;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return null;
+        }
+        var fixedRect = fixed.getBoundingClientRect();
+        var panelWidth = currentWidths[variant];
+        var targetLeftCenter = parent.left + (panelWidth - fixedRect.width) / 2;
+        var dx = fixedRect.left - targetLeftCenter;
+        return Math.abs(dx);
+    };
+    var onEnter = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var parent = ref.current;
+        var fixed = fixedRef.current;
+        if (!fixed || !parent) {
+            return;
+        }
+        var originalTransform = fixed.style.transform;
+        parent.style.marginInline = '0';
+        fixed.style.transition = '';
+        fixed.style.transform = '';
+        var centerX = calculateCenter();
+        if (centerX === null) {
+            return;
+        }
+        fixed.style.transform = originalTransform;
+        fixed.getBoundingClientRect();
+        if (!isFirstAnimation.current) {
+            fixed.style.transition = "".concat(transition.default, " transform");
+        }
+        fixed.style.transform = "translateX(".concat(centerX, "px)");
+        isFirstAnimation.current = false;
+    };
+    var onExit = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return;
+        }
+        fixed.style.transition = "".concat(transition.default, " transform");
+        fixed.style.transform = "translate(0px)";
+        isFirstAnimation.current = false;
+    };
+    var onTransitionEnd = function () {
+        var node = ref.current;
+        if (!node) {
+            return;
+        }
+        node.style.transition = '';
+        node.style.transform = '';
+    };
+    var previousIsCollapsed = useStoredValue(isCollapsed);
+    useEffect(function () {
+        setWasRender(true);
+    }, []);
+    useEffect(function () {
+        if (!wasRender) {
+            return;
+        }
+        if (previousIsCollapsed.current === isCollapsed) {
+            onEnter();
+        }
+        previousIsCollapsed.current = isCollapsed;
+    }, [variant]);
+    var hasMarginAutoClass = isCollapsed && autoCenter && !wasRender;
+    return {
+        calculateCenter: calculateCenter,
+        onExit: onExit,
+        onEnter: onEnter,
+        onTransitionEnd: onTransitionEnd,
+        hasMarginAutoClass: hasMarginAutoClass,
+    };
+};

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarCollapsibleItem';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarContent/SidebarContent.css

@@ -0,0 +1,16 @@
+.SidebarContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 0;
+  overflow: hidden auto;
+  scrollbar-width: none;
+}
+
+  .SidebarContent::-webkit-scrollbar {
+    display: none;
+  }
+
+  .SidebarContent-Content {
+    flex: 1 0;
+  }

package/__inner__/esm/components/Sidebar/modules/SidebarContent/SidebarContent.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { SIDEBAR_CONTENT_DEFAULT_TAG } from './constants';
+export var cnSidebarContent = cn('SidebarContent');
+export var SidebarContent = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarContent',
+    });
+    var _a = props.as, Tag = _a === void 0 ? SIDEBAR_CONTENT_DEFAULT_TAG : _a, className = props.className, children = props.children, bottom = props.bottom, other = __rest(props, ["as", "className", "children", "bottom"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnSidebarContent('', [className]) }),
+        React.createElement("div", { className: cnSidebarContent('Content') }, children),
+        bottom && React.createElement("div", { className: cnSidebarContent('Bottom') }, bottom)));
+});
+SidebarContent.displayName = 'SidebarContent';

package/__inner__/esm/components/Sidebar/modules/SidebarContent/constants.js

@@ -0,0 +1 @@
+export var SIDEBAR_CONTENT_DEFAULT_TAG = 'nav';

package/__inner__/esm/components/Sidebar/modules/SidebarContent/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarContent';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarContent/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarDivider/SidebarDivider.css

@@ -0,0 +1,10 @@
+.SidebarDivider {
+  box-sizing: border-box;
+  margin-block: var(--spacing-xs);
+  margin-inline: auto;
+  inline-size: calc(100% - var(--sidebar-padding-inline) * 2);
+}
+
+  .SidebarDivider_color_accent {
+    --divider-color: var(--color-accent-primary);
+  }

package/__inner__/esm/components/Sidebar/modules/SidebarDivider/SidebarDivider.js

@@ -0,0 +1,18 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Divider } from '../../../Divider';
+import { useSidebarContext } from '../../SidebarContext';
+import { SIDEBAR_DIVIDER_DEFAULT_TAG } from './constants';
+export var cnSidebarDivider = cn('SidebarDivider');
+export var SidebarDivider = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarDivider',
+    });
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_DIVIDER_DEFAULT_TAG : _a, className = props.className, other = __rest(props, ["as", "className"]);
+    var color = useSidebarContext().color;
+    return (React.createElement(Divider, __assign({}, other, { as: as, ref: ref, size: "s", color: "secondary", className: cnSidebarDivider({ color: color }, [className]) })));
+});
+SidebarDivider.displayName = 'SidebarDivider';

package/__inner__/esm/components/Sidebar/modules/SidebarDivider/constants.js

@@ -0,0 +1,2 @@
+import { DIVIDER_DEFAULT_TAG } from '../../../Divider/constants';
+export var SIDEBAR_DIVIDER_DEFAULT_TAG = DIVIDER_DEFAULT_TAG;

package/__inner__/esm/components/Sidebar/modules/SidebarDivider/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarDivider';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarDivider/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarFooter/SidebarFooter.css

@@ -0,0 +1,7 @@
+.SidebarFooter {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: var(--sidebar-padding-inline);
+  overflow: hidden;
+}

package/__inner__/esm/components/Sidebar/modules/SidebarFooter/SidebarFooter.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { SIDEBAR_FOOTER_DEFAULT_TAG } from './constants';
+export var cnSidebarFooter = cn('SidebarFooter');
+export var SidebarFooter = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarFooter',
+    });
+    var _a = props.as, Tag = _a === void 0 ? SIDEBAR_FOOTER_DEFAULT_TAG : _a, className = props.className, children = props.children, other = __rest(props, ["as", "className", "children"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnSidebarFooter('', [className]) }), children));
+});
+SidebarFooter.displayName = 'SidebarFooter';

package/__inner__/esm/components/Sidebar/modules/SidebarFooter/constants.js

@@ -0,0 +1 @@
+export var SIDEBAR_FOOTER_DEFAULT_TAG = 'div';

package/__inner__/esm/components/Sidebar/modules/SidebarFooter/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarFooter';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarFooter/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarHeader/SidebarHeader.css

@@ -0,0 +1,7 @@
+.SidebarHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: var(--sidebar-padding-inline);
+  overflow: hidden;
+}

package/__inner__/esm/components/Sidebar/modules/SidebarHeader/SidebarHeader.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { SIDEBAR_HEADER_DEFAULT_TAG } from './constants';
+export var cnSidebarHeader = cn('SidebarHeader');
+export var SidebarHeader = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarHeader',
+    });
+    var _a = props.as, Tag = _a === void 0 ? SIDEBAR_HEADER_DEFAULT_TAG : _a, className = props.className, children = props.children, other = __rest(props, ["as", "className", "children"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnSidebarHeader('', [className]) }), children));
+});
+SidebarHeader.displayName = 'SidebarHeader';

package/__inner__/esm/components/Sidebar/modules/SidebarHeader/constants.js

@@ -0,0 +1 @@
+export var SIDEBAR_HEADER_DEFAULT_TAG = 'div';

package/__inner__/esm/components/Sidebar/modules/SidebarHeader/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarHeader';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarHeader/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -0,0 +1,24 @@
+/* stylelint-disable */
+.SidebarHeaderLogo {
+  --sidebar-collapsible-item-gap: var(--spacing-2xs);
+}
+.SidebarHeaderLogo_color_main {
+    --sidebar-header-icon-background: var(--color-background-primary);
+  }
+.SidebarHeaderLogo_color_accent {
+    --sidebar-header-icon-background: var(--color-accent-primary);
+  }
+.SidebarHeaderLogo-Text {
+    font: var(--typography-text-m_1-font);
+    letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+    text-transform: var(--typography-text-m_1-text_transform, none);
+    color: var(--sidebar-content-primary-color);
+    white-space: nowrap;
+  }
+.SidebarHeaderLogo-Icon {
+    background-color: var(--sidebar-header-icon-background);
+    color: var(--sidebar-content-secondary-color);
+    border-radius: var(--border-radius-m);
+    flex-shrink: 0;
+    padding: var(--spacing-2xs);
+  }

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -0,0 +1,19 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Stack } from '../../../Stack';
+import { useSidebarContext } from '../../SidebarContext';
+import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
+import { SIDEBAR_HEADER_LOGO_DEFAULT_TAG } from './constants';
+export var cnSidebarHeaderLogo = cn('SidebarHeaderLogo');
+export var SidebarHeaderLogo = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarHeaderLogo',
+    });
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = __rest(props, ["as", "className", "children", "icon"]);
+    var _b = useSidebarContext(), color = _b.color, variant = _b.variant;
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color }, [className]), align: "center" }), children));
+});
+SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/constants.js

@@ -0,0 +1 @@
+export var SIDEBAR_HEADER_LOGO_DEFAULT_TAG = 'div';

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarHeaderLogo';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.css

@@ -0,0 +1,151 @@
+/* stylelint-disable */
+.SidebarItem {
+  --sidebar-item-background: transparent;
+  --sidebar-item-indicator-color: transparent;
+  --sidebar-item-indicator-transform-x: -2px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--spacing-3xs);
+}
+.SidebarItem_color_main {
+    --sidebar-item-background-hover: var(--color-background-main-hover);
+    --sidebar-item-background-active: var(--color-background-main-pressed);
+    --sidebar-item-background-selected: var(--color-background-main-pressed);
+    --sidebar-item-active-indicator-color: var(--color-content-action);
+  }
+.SidebarItem_color_accent {
+    --sidebar-item-background-hover: var(--color-accent-primary-hover);
+    --sidebar-item-background-active: var(--color-accent-primary-pressed);
+    --sidebar-item-background-selected: var(--color-accent-primary-pressed);
+    --sidebar-item-active-indicator-color: var(--color-content-accent-primary);
+  }
+.SidebarItem_interactive.SidebarItem:not(.SidebarItem_active) .SidebarItem-Item:hover {
+        background-color: var(--sidebar-item-background-hover);
+      }
+.SidebarItem_interactive.SidebarItem:not(.SidebarItem_active) .SidebarItem-Item:active {
+        background-color: var(--sidebar-item-background-active);
+      }
+.SidebarItem_interactive .SidebarItem-Item {
+      cursor: pointer;
+    }
+.SidebarItem_interactive .SidebarItem-Item:focus {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+.SidebarItem_interactive .SidebarItem-Item:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.SidebarItem_active {
+    --sidebar-item-indicator-color: var(--sidebar-item-active-indicator-color);
+    --sidebar-item-indicator-transform-x: 0;
+  }
+.SidebarItem_active > .SidebarItem-Item {
+      background-color: var(--sidebar-item-background-selected);
+    }
+.SidebarItem_gutters .SidebarItem-Item {
+      margin-inline: var(--sidebar-padding-inline);
+    }
+.SidebarItem_openSubitems .SidebarItem-Chevron {
+      transform: rotate(180deg);
+    }
+.SidebarItem-Chevron {
+    transform: rotate(0deg);
+    color: var(--sidebar-content-primary-color);
+    transition: var(--transition-default) transform;
+  }
+.SidebarItem-Icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sidebar-content-primary-color);
+    inline-size: 24px;
+    block-size: 24px;
+  }
+.SidebarItem-Content {
+    flex: 1;
+    color: var(--sidebar-content-primary-color);
+    white-space: nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+.SidebarItem-Item {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    outline: none;
+    text-decoration: none;
+    text-align: start;
+    -webkit-tap-highlight-color: transparent;
+    border: none;
+    border-radius: var(--border-radius-m);
+    padding: var(--sidebar-item-padding);
+    background-color: var(--sidebar-item-background);
+    transition: background-color var(--transition-default);
+    align-items: center;
+  }
+.SidebarItem-Item::before {
+    content: "";
+    box-sizing: border-box;
+    display: block;
+    inline-size: 2px;
+    block-size: 24px;
+    position: absolute;
+    transform: translate(var(--sidebar-item-indicator-transform-x), -50%);
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--sidebar-padding-inline) * -1);
+    transition: var(--transition-default);
+    transition-property: background-color, transform;
+    border-radius: 0 var(--border-radius-2xs) var(--border-radius-2xs) 0;
+    background-color: var(--sidebar-item-indicator-color);
+  }
+.SidebarItem-Right {
+    display: flex;
+    gap: var(--spacing-3xs);
+    align-items: center;
+    transition: var(--transition-slow) opacity;
+    opacity: 1;
+  }
+.SidebarItem .SidebarCollapsibleItem_collapsed .SidebarItem-Right {
+      opacity: 0;
+      transition-duration: 0ms;
+    }
+.SidebarItem_variant_compact .SidebarItem-Item {
+      --sidebar-collapsible-item-gap: 0;
+      padding-block: var(--spacing-2xs);
+    }
+.SidebarItem_variant_compact .SidebarItem-Content {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+      text-align: center;
+      margin-block-start: var(--spacing-3xs);
+    }
+.SidebarItem_variant_compact .SidebarItem-After {
+      display: none;
+    }
+.SidebarItem_variant_default .SidebarItem-Content {
+      text-align: start;
+    }
+.SidebarItem_variant_default.SidebarItem_size_s .SidebarItem-Content {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --sidebar-collapsible-item-gap: var(--spacing-s);
+    }
+.SidebarItem_variant_default.SidebarItem_size_s .SidebarItem-Item {
+      --sidebar-item-padding: var(--spacing-2xs);
+    }
+.SidebarItem_variant_default.SidebarItem_size_m .SidebarItem-Content {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --sidebar-collapsible-item-gap: 20px;
+    }
+.SidebarItem_variant_default.SidebarItem_size_m .SidebarItem-Item {
+      --sidebar-item-padding: var(--spacing-xs);
+    }

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -0,0 +1,76 @@
+import { __assign, __read, __rest } from "tslib";
+import React from 'react';
+import { ArrowDownFilledIcon } from '@ozen-ui/icons';
+import { useControlled } from '../../../../hooks/useControlled';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
+import { Badge } from '../../../Badge';
+import { Collapse } from '../../../Collapse';
+import { useSidebarContext } from '../../SidebarContext';
+import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
+import { SidebarList } from '../SidebarList';
+import { SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED, SIDEBAR_ITEM_DEFAULT_GUTTERS, SIDEBAR_ITEM_DEFAULT_INTERACTIVE, SIDEBAR_ITEM_DEFAULT_TAG, } from './constants';
+export var cnSidebarItem = cn('SidebarItem');
+export var SidebarItem = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarItem',
+    });
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_ITEM_DEFAULT_TAG : _a, icon = props.icon, children = props.children, className = props.className, _b = props.interactive, interactive = _b === void 0 ? SIDEBAR_ITEM_DEFAULT_INTERACTIVE : _b, subitems = props.subitems, onOpenChange = props.onOpenChange, open = props.open, wrapperProps = props.wrapperProps, onClick = props.onClick, _c = props.gutters, gutters = _c === void 0 ? SIDEBAR_ITEM_DEFAULT_GUTTERS : _c, _d = props.enableSubitemsOnCollapsed, enableSubitemsOnCollapsed = _d === void 0 ? SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED : _d, active = props.active, badgeProp = props.badge, badgeProps = props.badgeProps, after = props.after, dataTestId = props["data-testid"], other = __rest(props, ["as", "icon", "children", "className", "interactive", "subitems", "onOpenChange", "open", "wrapperProps", "onClick", "gutters", "enableSubitemsOnCollapsed", "active", "badge", "badgeProps", "after", 'data-testid']);
+    var _e = useSidebarContext(), variant = _e.variant, color = _e.color, size = _e.size;
+    var _f = __read(useControlled({
+        name: 'SidebarItem',
+        value: open,
+        defaultValue: false,
+        state: 'isOpenSubitems',
+    }), 2), isOpenSubitemsState = _f[0], setIsOpenSubitemsState = _f[1];
+    var hasSubitems = !!subitems;
+    var isOpenSubitems = hasSubitems && !!isOpenSubitemsState;
+    var isCollapsed = variant === 'mini';
+    var setIsOpenSubItems = function (isOpen) {
+        if (isCollapsed && !enableSubitemsOnCollapsed) {
+            return;
+        }
+        setIsOpenSubitemsState(isOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    };
+    var previousVariant = useStoredValue(variant);
+    var isCompact = variant === 'compact';
+    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
+    previousVariant.current = variant;
+    return (React.createElement("li", __assign({}, wrapperProps, { ref: ref, className: cnSidebarItem({
+            variant: isCompact ? 'compact' : 'default',
+            color: color,
+            interactive: interactive,
+            gutters: gutters,
+            active: active,
+            size: size,
+            openSubitems: isOpenSubitems,
+        }, [className]), "data-testid": dataTestId }),
+        React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, onClick: function (event) {
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                setIsOpenSubItems(!isOpenSubitems);
+            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), autoCenter: false, fixed: function (props) {
+                var badge = isFunction(badgeProp)
+                    ? badgeProp({ collapsed: props.collapsed })
+                    : badgeProp;
+                var renderedIcon = isFunction(icon)
+                    ? renderContent({ content: icon, props: props })
+                    : icon;
+                if (badge) {
+                    return (React.createElement(Badge, __assign({ variant: "dot", color: "errorDark" }, badgeProps, { className: cnSidebarItem('Badge', [badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.className]), size: "s" }), renderedIcon));
+                }
+                return renderedIcon;
+            }, animated: isAnimated, align: isCompact ? 'center' : 'start', direction: isCompact ? 'column' : 'row', classNames: {
+                content: cnSidebarItem('Content'),
+                fixed: cnSidebarItem('Icon'),
+            } }),
+            React.createElement("span", null, children),
+            (after || hasSubitems) && (React.createElement("div", { className: cnSidebarItem('Right') },
+                after && React.createElement("div", { className: cnSidebarItem('After') }, after),
+                hasSubitems && (React.createElement(ArrowDownFilledIcon, { className: cnSidebarItem('Chevron'), size: "s" }))))),
+        !!subitems && (React.createElement(Collapse, { expanded: isOpenSubitems, className: cnSidebarItem('SubitemsCollapse') },
+            React.createElement(SidebarList, { className: cnSidebarItem('Subitems') }, subitems)))));
+});
+SidebarItem.displayName = 'SidebarItem';

package/__inner__/esm/components/Sidebar/modules/SidebarItem/constants.js

@@ -0,0 +1,5 @@
+import { BUTTON_BASE_DEFAULT_TAG } from '../../../ButtonBase/constants';
+export var SIDEBAR_ITEM_DEFAULT_TAG = BUTTON_BASE_DEFAULT_TAG;
+export var SIDEBAR_ITEM_DEFAULT_INTERACTIVE = true;
+export var SIDEBAR_ITEM_DEFAULT_GUTTERS = true;
+export var SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED = true;

package/__inner__/esm/components/Sidebar/modules/SidebarItem/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarItem';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarItem/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarItemBadge/SidebarItemBadge.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Badge } from '../../../Badge';
+import { SIDEBAR_ITEM_BADGE_DEFAULT_COLOR, SIDEBAR_ITEM_BADGE_DEFAULT_TAG, } from './constants';
+export var cnSidebarItemBadge = cn('SidebarItemBadge');
+export var SidebarItemBadge = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarItemBadge',
+    });
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_ITEM_BADGE_DEFAULT_TAG : _a, _b = props.color, color = _b === void 0 ? SIDEBAR_ITEM_BADGE_DEFAULT_COLOR : _b, className = props.className, other = __rest(props, ["as", "color", "className"]);
+    return (React.createElement(Badge, __assign({}, other, { as: as, ref: ref, size: "s", color: color, className: cnSidebarItemBadge('', [className]) })));
+});
+SidebarItemBadge.displayName = 'SidebarItemBadge';

package/__inner__/esm/components/Sidebar/modules/SidebarItemBadge/constants.js

@@ -0,0 +1,3 @@
+import { BADGE_DEFAULT_TAG } from '../../../Badge';
+export var SIDEBAR_ITEM_BADGE_DEFAULT_TAG = BADGE_DEFAULT_TAG;
+export var SIDEBAR_ITEM_BADGE_DEFAULT_COLOR = 'errorDark';

package/__inner__/esm/components/Sidebar/modules/SidebarItemBadge/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarItemBadge';
+export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarItemBadge/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Sidebar/modules/SidebarList/SidebarList.css

@@ -0,0 +1,8 @@
+.SidebarList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/__inner__/esm/components/Sidebar/modules/SidebarList/SidebarList.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { SIDEBAR_LIST_DEFAULT_TAG } from './constants';
+export var cnSidebarList = cn('SidebarList');
+export var SidebarList = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SidebarList',
+    });
+    var _a = props.as, Tag = _a === void 0 ? SIDEBAR_LIST_DEFAULT_TAG : _a, className = props.className, children = props.children, other = __rest(props, ["as", "className", "children"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnSidebarList('', [className]) }), children));
+});
+SidebarList.displayName = 'SidebarList';

package/__inner__/esm/components/Sidebar/modules/SidebarList/constants.js

@@ -0,0 +1 @@
+export var SIDEBAR_LIST_DEFAULT_TAG = 'ul';

package/__inner__/esm/components/Sidebar/modules/SidebarList/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SidebarList';
+export * from './types';