@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/TagGroup/components/TagInner/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

package/dist/components/TagGroup/components/index.d.ts

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

package/dist/components/TagGroup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TagGroup';
+export * from './Tag';
+export * from './types';

package/dist/components/TagGroup/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/TagGroup/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { AriaTagGroupProps } from '@koobiq/react-primitives';
+export type TagGroupPropChildren<T extends object> = AriaTagGroupProps<T>['children'];
+export type TagGroupPropItems<T extends object> = AriaTagGroupProps<T>['items'];
+export type TagGroupPropOnRemove<T extends object> = AriaTagGroupProps<T>['onRemove'];
+export type TagGroupPropDisabledKeys<T extends object> = AriaTagGroupProps<T>['disabledKeys'];
+export declare const tagGroupPropVariant: readonly ["theme-fade", "contrast-fade", "error-fade", "warning-fade"];
+export type TagGroupPropVariant = (typeof tagGroupPropVariant)[number];
+export type TagGroupProps<T extends object> = {
+    /** The contents of the collection. */
+    children?: TagGroupPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: TagGroupPropItems<T>;
+    /** Handler that is called when a user deletes a tag.  */
+    onRemove?: TagGroupPropOnRemove<T>;
+    /**
+     * The variant to use.
+     * @default theme-fade
+     * */
+    variant?: TagGroupPropVariant;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: TagGroupPropDisabledKeys<T>;
+    /** Ref to the HTML ul-element. */
+    ref?: Ref<HTMLElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type TagGroupComponentProp = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
+export type TagGroupRef = ComponentRef<'div'>;

package/dist/components/TagGroup/types.js

@@ -0,0 +1,9 @@
+const tagGroupPropVariant = [
+  "theme-fade",
+  "contrast-fade",
+  "error-fade",
+  "warning-fade"
+];
+export {
+  tagGroupPropVariant
+};

package/dist/components/Toggle/Toggle.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { Toggle as Toggle$1 } from "@koobiq/react-primitives";
 import s from "./Toggle.module.css.js";
 const Toggle = forwardRef(

package/dist/components/Tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
-    anchorRef?: import("react").RefObject<HTMLElement>;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
     arrowBoundaryOffset?: number;
     offset?: number;
     crossOffset?: number;
@@ -17,4 +17,5 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     trigger?: "focus";
     id?: string;
     className?: string;
+    portalContainer?: Element;
 } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDOMRef, useBoolean, FocusableProvider, mergeProps, clsx } from "@koobiq/react-core";
+import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
 import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import { utilClasses } from "../../styles/utility.js";
@@ -10,17 +10,18 @@ const Tooltip = forwardRef((props, ref) => {
   const {
     delay = 120,
     disabled = false,
-    defaultOpen,
     closeDelay = 120,
     hideArrow = false,
     variant = "contrast",
-    onOpenChange,
     placement: placementProp = "top",
     control,
     children,
     anchorRef,
     crossOffset,
+    defaultOpen,
+    onOpenChange,
     open: openProp,
+    portalContainer,
     offset: offsetProp,
     arrowBoundaryOffset,
     ...other
@@ -38,6 +39,7 @@ const Tooltip = forwardRef((props, ref) => {
   });
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
+  const controlRefCallback = useMultiRef([controlRef]);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     {
       delay,
@@ -67,20 +69,20 @@ const Tooltip = forwardRef((props, ref) => {
   const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
-      ref: controlRef,
+      ref: controlRefCallback,
       ...triggerProps
     }) }),
     /* @__PURE__ */ jsx(
       Transition,
       {
         onEnter: on,
-        timeout: 300,
+        timeout: 120,
         onExited: off,
         in: openState,
         nodeRef: domRef,
         unmountOnExit: true,
         appear: true,
-        children: (transition) => /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsxs(
+        children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ...mergeProps(localTooltipProps, tooltipProps),
@@ -108,8 +110,7 @@ const Tooltip = forwardRef((props, ref) => {
             ]
           }
         ) })
-      },
-      placement
+      }
     )
   ] });
 });

package/dist/components/Tooltip/types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode, ComponentRef, Ref, ReactElement, HTMLAttributes, RefObject } from 'react';
+import type { ReactNode, RefObject, ComponentRef, ReactElement, DOMAttributes } from 'react';
 import type { DataAttributeProps } from '@koobiq/react-core';
-export type TooltipPropControl = (props: HTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
+export type TooltipPropControl = (props: DOMAttributes<HTMLElement> & {
+    ref: ((node: HTMLElement | null) => void) | null;
 }) => ReactElement;
 export declare const tooltipPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
 export declare const tooltipPropVariant: readonly ["contrast", "contrast-fade", "error", "warning", "theme"];
@@ -34,7 +34,7 @@ export type TooltipProps = {
      * */
     placement?: TooltipPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * The minimum distance the arrow's edge should be from the edge of the overlay element.
      * @default 0
@@ -77,5 +77,10 @@ export type TooltipProps = {
     id?: string;
     /** Additional CSS-classes. */
     className?: string;
+    /**
+     * The container element in which the component portal will be placed.
+     * @default document.body
+     */
+    portalContainer?: Element;
 } & DataAttributeProps;
 export type TooltipRef = ComponentRef<'div'>;

package/dist/components/Typography/Typography.js

@@ -27,11 +27,11 @@ const Typography = polymorphicForwardRef(
       "data-ellipsis": ellipsis,
       className: clsx(
         s.base,
+        textVariant[variant],
         display && s[display],
         ellipsis && s.ellipsis,
         align && s[`align-${align}`],
-        textVariant[variant],
-        foregroundColor[color],
+        color === "inherit" ? s["color-inherit"] : foregroundColor[color],
         className
       ),
       ...other,

package/dist/components/Typography/Typography.module.css.js

@@ -12,7 +12,8 @@ const s = {
   "align-center": "kbq-typography-align-center-2d47fd",
   "align-initial": "kbq-typography-align-initial-faf6dd",
   "align-inherit": "kbq-typography-align-inherit-00f946",
-  ellipsis
+  ellipsis,
+  "color-inherit": "kbq-typography-color-inherit-35de13"
 };
 export {
   base,

package/dist/components/Typography/types.d.ts

@@ -2,10 +2,15 @@ import type { ReactNode } from 'react';
 export declare const typographyPropVariant: readonly ["display-big", "display-normal", "display-compact", "display-big-strong", "display-normal-strong", "display-compact-strong", "headline", "title", "subheading", "text-big", "text-big-strong", "text-big-medium", "text-normal", "text-normal-strong", "text-normal-medium", "text-compact", "text-compact-strong", "text-compact-medium", "caps-big", "caps-big-strong", "caps-normal", "caps-normal-strong", "caps-compact", "caps-compact-strong", "mono-big", "mono-big-strong", "mono-normal", "mono-normal-strong", "mono-compact", "mono-compact-strong", "mono-codeblock", "tabular-big", "tabular-big-strong", "tabular-normal", "tabular-normal-strong", "tabular-compact", "tabular-compact-strong", "italic-big", "italic-big-strong", "italic-normal", "italic-normal-strong", "italic-compact", "italic-compact-strong", "inherit"];
 export type TypographyPropVariant = (typeof typographyPropVariant)[number];
 export declare const typographyPropDisplay: readonly ["block", "inline", "inline-block"];
+/**
+ * @deprecated
+ * This type has been deprecated, please use `TypographyPropDisplay` instead.
+ */
 export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
+export type TypographyPropDisplay = (typeof typographyPropDisplay)[number];
 export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
 export type TypographyPropAlign = (typeof typographyPropAlign)[number];
-export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited"];
+export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited", "inherit"];
 export type TypographyPropColor = (typeof typographyPropColor)[number];
 export type TypographyBaseProps = {
     /**
@@ -14,7 +19,7 @@ export type TypographyBaseProps = {
      * */
     variant?: TypographyPropVariant;
     /** Set the display for the component. */
-    display?: TypographyDisplayVariant;
+    display?: TypographyPropDisplay;
     /** Set the text-align on the component. */
     align?: TypographyPropAlign;
     /** Hidden overflow content will be replaced by an ellipsis. */

package/dist/components/Typography/types.js

@@ -74,7 +74,8 @@ const typographyPropColor = [
   "success-secondary",
   "warning",
   "warning-secondary",
-  "visited"
+  "visited",
+  "inherit"
 ];
 export {
   typographyPropAlign,

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Provider';
+export * from './FlexBox';
 export * from './Container';
 export * from './Alert';
 export * from './Button';
@@ -22,4 +23,11 @@ export * from './SidePanel';
 export * from './Popover';
 export * from './Tooltip';
 export * from './List';
+export * from './AnimatedIcon';
+export * from './Select';
+export * from './Divider';
+export * from './Menu';
+export * from './ButtonToggleGroup';
+export * from './TagGroup';
 export * from './layout';
+export { useListData } from '@koobiq/react-primitives';

package/dist/components/layout/flex/flex.d.ts

@@ -13,13 +13,24 @@ export type FlexPropDirection = (typeof flexPropDirection)[number];
 export declare const flexPropOrder: readonly [-1, 0, 1];
 export type FlexPropOrder = (typeof flexPropOrder)[number];
 export type FlexProps = {
-    alignItems?: FlexPropAlignItems;
-    justifyContent?: FlexPropJustifyContent;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap;
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
     flex?: FlexPropFlex;
+    /** Defines the `flex-wrap` property. */
     wrap?: FlexPropWrap;
-    direction?: FlexPropDirection;
-    gap?: FlexPropGap;
+    /** Defines the `order` property. */
     order?: FlexPropOrder;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent;
 };
 export type FlexParams = (props: FlexProps, className?: string) => string;
 export declare const flex: FlexParams;

package/dist/components/layout/flex/flex.js

@@ -47,15 +47,20 @@ const flex = (props, className) => {
     wrap,
     direction,
     gap,
+    rowGap: rowGapProp,
+    colGap: colGapProp,
     order: orderProp
   } = props;
   const order = String(orderProp);
+  const colGap = colGapProp ?? gap;
+  const rowGap = rowGapProp ?? gap;
   return clsx(
     s.base,
-    gap && s[`gap_${gap}`],
     flex2 && s[`flex_${flex2}`],
     wrap && s[`wrap_${wrap}`],
     order && s[`order_${order}`],
+    rowGap && s[`gap_row_${rowGap}`],
+    colGap && s[`gap_column_${colGap}`],
     direction && s[`direction_${direction}`],
     alignItems && s[`alignItems_${alignItems}`],
     justifyContent && s[`justifyContent_${justifyContent}`],

package/dist/components/layout/flex/flex.module.css.js

@@ -10,19 +10,32 @@ const direction_row = "kbq-flex-direction_row-8fff0d";
 const direction_column = "kbq-flex-direction_column-29b97b";
 const order_0 = "kbq-flex-order_0-4a6164";
 const order_1 = "kbq-flex-order_1-b5e24c";
-const gap_3xs = "kbq-flex-gap_3xs-5c9d4e";
-const gap_xxs = "kbq-flex-gap_xxs-035614";
-const gap_xs = "kbq-flex-gap_xs-970b31";
-const gap_s = "kbq-flex-gap_s-e9d292";
-const gap_m = "kbq-flex-gap_m-21a099";
-const gap_l = "kbq-flex-gap_l-47c05c";
-const gap_xl = "kbq-flex-gap_xl-d76274";
-const gap_xxl = "kbq-flex-gap_xxl-0e68cb";
-const gap_3xl = "kbq-flex-gap_3xl-497012";
-const gap_4xl = "kbq-flex-gap_4xl-0b7c71";
-const gap_5xl = "kbq-flex-gap_5xl-ed56fe";
-const gap_6xl = "kbq-flex-gap_6xl-0749d1";
-const gap_7xl = "kbq-flex-gap_7xl-0a1536";
+const gap_column_3xs = "kbq-flex-gap_column_3xs-2aea22";
+const gap_column_xxs = "kbq-flex-gap_column_xxs-7586e8";
+const gap_column_xs = "kbq-flex-gap_column_xs-911f68";
+const gap_column_s = "kbq-flex-gap_column_s-a389c1";
+const gap_column_m = "kbq-flex-gap_column_m-21736b";
+const gap_column_l = "kbq-flex-gap_column_l-390cf2";
+const gap_column_xl = "kbq-flex-gap_column_xl-47b33c";
+const gap_column_xxl = "kbq-flex-gap_column_xxl-2f762a";
+const gap_column_3xl = "kbq-flex-gap_column_3xl-e81ba4";
+const gap_column_4xl = "kbq-flex-gap_column_4xl-502e67";
+const gap_column_5xl = "kbq-flex-gap_column_5xl-028451";
+const gap_column_6xl = "kbq-flex-gap_column_6xl-2f1bfa";
+const gap_column_7xl = "kbq-flex-gap_column_7xl-057b8a";
+const gap_row_3xs = "kbq-flex-gap_row_3xs-ea5984";
+const gap_row_xxs = "kbq-flex-gap_row_xxs-a520f4";
+const gap_row_xs = "kbq-flex-gap_row_xs-e62321";
+const gap_row_s = "kbq-flex-gap_row_s-2dab73";
+const gap_row_m = "kbq-flex-gap_row_m-6423db";
+const gap_row_l = "kbq-flex-gap_row_l-f312fe";
+const gap_row_xl = "kbq-flex-gap_row_xl-e85171";
+const gap_row_xxl = "kbq-flex-gap_row_xxl-c2548b";
+const gap_row_3xl = "kbq-flex-gap_row_3xl-34ef28";
+const gap_row_4xl = "kbq-flex-gap_row_4xl-29ec96";
+const gap_row_5xl = "kbq-flex-gap_row_5xl-c7e969";
+const gap_row_6xl = "kbq-flex-gap_row_6xl-afc87a";
+const gap_row_7xl = "kbq-flex-gap_row_7xl-d67bcc";
 const s = {
   base,
   "alignItems_flex-start": "kbq-flex-alignItems_flex-start-56df74",
@@ -48,19 +61,32 @@ const s = {
   "order_-1": "kbq-flex-order_-1-4f5108",
   order_0,
   order_1,
-  gap_3xs,
-  gap_xxs,
-  gap_xs,
-  gap_s,
-  gap_m,
-  gap_l,
-  gap_xl,
-  gap_xxl,
-  gap_3xl,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl
+  gap_column_3xs,
+  gap_column_xxs,
+  gap_column_xs,
+  gap_column_s,
+  gap_column_m,
+  gap_column_l,
+  gap_column_xl,
+  gap_column_xxl,
+  gap_column_3xl,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_row_3xs,
+  gap_row_xxs,
+  gap_row_xs,
+  gap_row_s,
+  gap_row_m,
+  gap_row_l,
+  gap_row_xl,
+  gap_row_xxl,
+  gap_row_3xl,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl
 };
 export {
   alignItems_baseline,
@@ -71,19 +97,32 @@ export {
   direction_column,
   direction_row,
   flex_flex,
-  gap_3xl,
-  gap_3xs,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl,
-  gap_l,
-  gap_m,
-  gap_s,
-  gap_xl,
-  gap_xs,
-  gap_xxl,
-  gap_xxs,
+  gap_column_3xl,
+  gap_column_3xs,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_column_l,
+  gap_column_m,
+  gap_column_s,
+  gap_column_xl,
+  gap_column_xs,
+  gap_column_xxl,
+  gap_column_xxs,
+  gap_row_3xl,
+  gap_row_3xs,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl,
+  gap_row_l,
+  gap_row_m,
+  gap_row_s,
+  gap_row_xl,
+  gap_row_xs,
+  gap_row_xxl,
+  gap_row_xxs,
   justifyContent_center,
   order_0,
   order_1,

package/dist/index.js

@@ -1,8 +1,10 @@
 /* empty css           */
+import { useListData } from "@koobiq/react-primitives";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
 import { BreakpointsContext, useBreakpoints, useMatchedBreakpoints } from "./components/Provider/BreakpointsContext.js";
+import { FlexBox } from "./components/FlexBox/FlexBox.js";
 import { Container } from "./components/Container/Container.js";
 import { containerMarginsProp, containerPositionProp } from "./components/Container/types.js";
 import { Alert } from "./components/Alert/Alert.js";
@@ -42,34 +44,48 @@ import { Grid } from "./components/Grid/Grid.js";
 import { GridItem } from "./components/Grid/components/GridItem/GridItem.js";
 import { SkeletonBlock } from "./components/SkeletonBlock/SkeletonBlock.js";
 import { SkeletonTypography } from "./components/SkeletonTypography/SkeletonTypography.js";
-import { DialogHeader, DialogHeader as DialogHeader2, DialogHeader as DialogHeader3, DialogHeader as DialogHeader4 } from "./components/Dialog/components/DialoglHeader.js";
-import { DialogFooter, DialogFooter as DialogFooter2, DialogFooter as DialogFooter3, DialogFooter as DialogFooter4 } from "./components/Dialog/components/DialogFooter.js";
-import { DialogContent, DialogContent as DialogContent2, DialogContent as DialogContent3, DialogContent as DialogContent4 } from "./components/Dialog/components/DialogContent.js";
 import { Modal } from "./components/Modal/Modal.js";
 import { modalPropSize } from "./components/Modal/types.js";
+import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index.js";
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
 import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
-import { Popover } from "./components/Popover/Popover.js";
-import { popoverPropPlacement, popoverPropSize } from "./components/Popover/types.js";
+import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
+import { Popover, PopoverInner } from "./components/Popover/Popover.js";
+import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
+import { PopoverContent, PopoverFooter, PopoverHeader } from "./components/Popover/index.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { tooltipPropPlacement, tooltipPropVariant } from "./components/Tooltip/types.js";
-import { List, ListRender } from "./components/List/List.js";
+import { Item } from "./components/Collections/Item.js";
+import { Section } from "./components/Collections/Section.js";
+import { List, ListInner } from "./components/List/List.js";
+import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
 import { listPropSelectionMode } from "./components/List/types.js";
-import { ListItem } from "./components/List/ListItem.js";
-import { ListSection } from "./components/List/ListSection.js";
+import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
+import { Select } from "./components/Select/Select.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { menuPropSelectionMode } from "./components/Menu/types.js";
+import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
+import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
+import { TagGroup } from "./components/TagGroup/TagGroup.js";
+import { Tag } from "./components/TagGroup/Tag.js";
+import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
   Alert,
+  AnimatedIcon,
   Badge,
   BreakpointsContext,
   BreakpointsProvider,
   Button,
+  ButtonToggle,
+  ButtonToggleGroup,
   Checkbox,
   Container,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
+  Divider,
+  FlexBox,
   Grid,
   GridItem,
   IconButton,
@@ -77,17 +93,20 @@ export {
   InputNumber,
   Link,
   List,
-  ListItem,
-  ListRender,
-  ListSection,
+  ListInner,
+  Item as ListItem,
+  ListItemText,
+  Section as ListSection,
+  Menu,
   Modal,
-  DialogContent2 as ModalContent,
-  DialogFooter2 as ModalFooter,
-  DialogHeader2 as ModalHeader,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   Popover,
-  DialogContent3 as PopoverContent,
-  DialogFooter3 as PopoverFooter,
-  DialogHeader3 as PopoverHeader,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverInner,
   ProgressBar,
   ProgressSpinner,
   Provider,
@@ -97,12 +116,15 @@ export {
   RadioGroupContext,
   RadioGroupDescription,
   RadioGroupLabel,
+  Select,
   SidePanel,
-  DialogContent4 as SidePanelContent,
-  DialogFooter4 as SidePanelFooter,
-  DialogHeader4 as SidePanelHeader,
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
+  Tag,
+  TagGroup,
   Textarea,
   Toggle,
   Tooltip,
@@ -116,6 +138,8 @@ export {
   containerMarginsProp,
   containerPositionProp,
   defaultBreakpoints,
+  dividerPropDisplay,
+  dividerPropOrientation,
   flex,
   flexPropAlignItems,
   flexPropDirection,
@@ -130,9 +154,11 @@ export {
   inputNumberPropVariant,
   inputPropVariant,
   listPropSelectionMode,
+  menuPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,
+  popoverPropType,
   progressBarPropVariant,
   progressSpinnerPropSize,
   progressSpinnerPropVariant,
@@ -144,6 +170,7 @@ export {
   sidePanelPropSize,
   spacing,
   spacingGap,
+  tagGroupPropVariant,
   textareaPropExpand,
   textareaPropVariant,
   togglePropLabelPlacement,
@@ -155,6 +182,7 @@ export {
   typographyPropDisplay,
   typographyPropVariant,
   useBreakpoints,
+  useListData,
   useMatchedBreakpoints,
   useProvider,
   useRadioGroupState