@koobiq/react-components 0.9.0 → 0.10.0

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
-import { isPrimitiveNode } from "./utils.js";
+import { isPrimitiveNode } from "../../../utils/isPrimitiveNode.js";
 const FieldSelect = polymorphicForwardRef(
   ({
     variant = "filled",

package/dist/components/List/List.js

@@ -15,7 +15,7 @@ import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
 const { list } = utilClasses;
 function ListInner(props) {
-  const { label, className, style, slotProps, state, listRef } = props;
+  const { label, className, style, slotProps, state, listRef, isPadded } = props;
   const domRef = useDOMRef(listRef);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
@@ -30,7 +30,8 @@ function ListInner(props) {
     {
       style,
       ref: domRef,
-      className: clsx(list, className)
+      className: clsx(list, className),
+      "data-padded": isPadded || void 0
     },
     slotProps?.list,
     listBoxProps
@@ -38,7 +39,7 @@ function ListInner(props) {
   const renderItems = (listState) => [...listState.collection].map((item) => {
     switch (item.type) {
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(ListOption, { item, state }, item.key);
       case "section":

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

@@ -1,11 +1,8 @@
 const label = "kbq-list-label-e4431c";
-const divider = "kbq-list-divider-fd5123";
 const s = {
-  label,
-  divider
+  label
 };
 export {
   s as default,
-  divider,
   label
 };

package/dist/components/List/components/ListSection/ListSection.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useListBoxSection } from "@koobiq/react-primitives";
-import s from "./ListSection.module.css.js";
+import { utilClasses } from "../../../../styles/utility.js";
 import { Typography } from "../../../Typography/Typography.js";
 import { ListOption } from "../ListOption/ListOption.js";
+const { listHeading } = utilClasses;
 function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
@@ -17,12 +18,12 @@ function ListSection({ section, state }) {
         display: "block",
         variant: "caps-compact-strong",
         color: "contrast-secondary",
-        className: s.heading,
+        className: listHeading,
         ...headingProps,
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(ListOption, { item: node, state }, node.key)) })
+    /* @__PURE__ */ jsx("ul", { ...groupProps, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(ListOption, { item: node, state }, node.key)) })
   ] }) });
 }
 export {

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

@@ -14,6 +14,8 @@ export type ListProps<T> = ExtendableProps<{
         label?: TypographyProps;
         list?: ComponentPropsWithRef<'div'>;
     };
+    /** Whether the component has outer padding. */
+    isPadded?: boolean;
 }, AriaListBoxProps<T>>;
 export type ListRef = ComponentRef<'ul'>;
 export type ListComponent = <T>(props: ListProps<T>) => ReactElement | null;

package/dist/components/Menu/Menu.js

@@ -6,7 +6,7 @@ import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
 import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Menu.module.css.js";
-import { MenuInner } from "./components/MenuInner/MenuInner.js";
+import { MenuList } from "./components/MenuList/MenuList.js";
 import { Header } from "../Collections/Header.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
@@ -59,7 +59,7 @@ function MenuRender(props, ref) {
       ref: controlRef,
       ...menuTriggerProps
     }),
-    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...listProps }) })
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuList, { ...listProps }) })
   ] });
 }
 const MenuComponent = forwardRef(MenuRender);

package/dist/components/Menu/components/MenuList/MenuList.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentRef, ReactElement } from 'react';
+import type { AriaMenuOptions } from '@koobiq/react-primitives';
+export type MenuListProps<T> = AriaMenuOptions<T>;
+export type MenuListComponent = <T>(props: MenuListProps<T>) => ReactElement | null;
+export type MenuListRef = ComponentRef<'ul'>;
+export declare const MenuList: MenuListComponent;

package/dist/components/Menu/components/{MenuInner/MenuInner.js → MenuList/MenuList.js}

@@ -4,13 +4,13 @@ import { forwardRef } from "react";
 import { useDOMRef, clsx } from "@koobiq/react-core";
 import { useTreeState, useMenu } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import s from "./MenuInner.module.css.js";
+import s from "./MenuList.module.css.js";
 import { MenuSection } from "../MenuSection/MenuSection.js";
 import { MenuHeader } from "../MenuHeader/MenuHeader.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
 import { Divider } from "../../../Divider/Divider.js";
 const { list } = utilClasses;
-function MenuInnerRender(props, ref) {
+function MenuListRender(props, ref) {
   const state = useTreeState(props);
   const domRef = useDOMRef(ref);
   const { menuProps } = useMenu(props, state, domRef);
@@ -20,7 +20,7 @@ function MenuInnerRender(props, ref) {
       case "header":
         return /* @__PURE__ */ jsx(MenuHeader, { item }, item.key);
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(MenuItem, { item, state }, item.key);
       case "section":
@@ -33,6 +33,7 @@ function MenuInnerRender(props, ref) {
     "ul",
     {
       ...menuProps,
+      "data-padded": true,
       className: clsx(s.base, list),
       ...multiple && { "aria-multiselectable": true },
       ref: domRef,
@@ -40,7 +41,7 @@ function MenuInnerRender(props, ref) {
     }
   );
 }
-const MenuInner = forwardRef(MenuInnerRender);
+const MenuList = forwardRef(MenuListRender);
 export {
-  MenuInner
+  MenuList
 };

package/dist/components/Menu/components/MenuList/MenuList.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-menulist-0e5f46";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Menu/components/MenuList/index.d.ts

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

package/dist/components/Menu/components/MenuSection/MenuSection.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMenuSection } from "@koobiq/react-primitives";
-import s from "./MenuSection.module.css.js";
+import { utilClasses } from "../../../../styles/utility.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
 import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
 function MenuSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useMenuSection({
     heading: section.rendered,
@@ -17,12 +18,12 @@ function MenuSection({ section, state }) {
         display: "block",
         variant: "caps-compact-strong",
         color: "contrast-secondary",
-        className: s.heading,
+        className: listHeading,
         ...headingProps,
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
+    /* @__PURE__ */ jsx("ul", { ...groupProps, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
   ] });
 }
 export {

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

@@ -1 +1 @@
-export * from './MenuInner';
+export * from './MenuList';

package/dist/components/Select/Select.js

@@ -26,6 +26,7 @@ function SelectRender(props, ref) {
     isClearable,
     "data-testid": testId,
     selectionMode = "single",
+    noItemsText,
     selectedTagsOverflow = "responsive",
     labelPlacement,
     labelAlign,
@@ -85,14 +86,14 @@ function SelectRender(props, ref) {
     style
   });
   const listProps = mergeProps(
-    { className: s.list, state },
-    slotProps?.list,
-    menuProps
+    { className: s.list, state, noItemsText },
+    menuProps,
+    slotProps?.list
   );
   const labelProps = mergeProps(
     { isHidden: isLabelHidden, children: label, isRequired },
-    slotProps?.label,
-    labelPropsAria
+    labelPropsAria,
+    slotProps?.label
   );
   const clearButtonProps = mergeProps(
     {
@@ -150,7 +151,7 @@ function SelectRender(props, ref) {
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
   const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage, errorMessageProps);
   const renderDefaultValue = (state2, states) => {
-    if (!state2.selectedItems) return null;
+    if (!state2.selectedItems?.length) return null;
     if (selectionMode === "multiple")
       return /* @__PURE__ */ jsx(
         TagGroup,

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -1,8 +1,10 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { type MultiSelectState } from '@koobiq/react-primitives';
 import type { ListProps } from '../../../List';
 export type SelectListProps<T extends object> = {
     state: MultiSelectState<T>;
     listRef?: Ref<HTMLUListElement>;
-} & Omit<ListProps<T>, 'ref'>;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+} & Omit<ListProps<T>, 'ref' | 'children'>;
 export declare function SelectList<T extends object>(props: SelectListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.js

@@ -1,16 +1,28 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { useListBox } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.js";
 import s from "./SelectList.module.css.js";
 import { SelectOption } from "../SelectOption/SelectOption.js";
+import { isPrimitiveNode } from "../../../../utils/isPrimitiveNode.js";
 import { Typography } from "../../../Typography/Typography.js";
 import { ListSection } from "../../../List/components/ListSection/ListSection.js";
 import { Divider } from "../../../Divider/Divider.js";
-const { list } = utilClasses;
+const { list, typography } = utilClasses;
 function SelectList(props) {
-  const { label, className, style, slotProps, state, listRef } = props;
+  const {
+    label,
+    className,
+    style,
+    slotProps,
+    state,
+    listRef,
+    noItemsText: noItemsTextProp
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(listRef);
+  const isEmpty = state.collection.size === 0;
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
     {
@@ -24,15 +36,28 @@ function SelectList(props) {
     {
       style,
       ref: domRef,
-      className: clsx(list, className)
+      className: clsx(list, className),
+      "data-padded": true
     },
     slotProps?.list,
     listBoxProps
   );
+  const noItemsText = noItemsTextProp ?? t.format("empty items");
+  const emptyState = isEmpty ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "option",
+      className: clsx(s.empty, typography["text-normal"]),
+      ...!isPrimitiveNode(noItemsText) && {
+        style: { display: "contents" }
+      },
+      children: noItemsText
+    }
+  ) : null;
   const renderItems = (treeState) => [...treeState.collection].map((item) => {
     switch (item.type) {
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(SelectOption, { item, state }, item.key);
       case "section":
@@ -43,7 +68,10 @@ function SelectList(props) {
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
-    /* @__PURE__ */ jsx("ul", { ...listProps, children: renderItems(state) })
+    /* @__PURE__ */ jsxs("ul", { ...listProps, children: [
+      renderItems(state),
+      emptyState
+    ] })
   ] });
 }
 export {

package/dist/components/Select/components/SelectList/SelectList.module.css.js

@@ -1,11 +1,11 @@
 const label = "kbq-selectlist-label-4b49f4";
-const divider = "kbq-selectlist-divider-7c167f";
+const empty = "kbq-selectlist-empty-e6a9b0";
 const s = {
   label,
-  divider
+  empty
 };
 export {
   s as default,
-  divider,
+  empty,
   label
 };

package/dist/components/Select/intl.js

@@ -1,10 +1,12 @@
 const intlMessages = {
   "ru-RU": {
+    "empty items": "Нет вариантов выбора",
     "selected items": "Выбранные элементы",
     clear: "Очистить",
     more: ({ count }) => `еще ${count}`
   },
   "en-US": {
+    "empty items": "No options available",
     "selected items": "Selected items",
     clear: "Clear",
     more: ({ count }) => `${count} more`

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

@@ -5,8 +5,8 @@ import { type FieldErrorProps, type FieldSelectProps, type FieldCaptionProps, ty
 import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
 import type { FormControlLabelProps } from '../FormControlLabel';
 import type { IconButtonProps } from '../IconButton';
-import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
+import type { SelectListProps } from './components';
 export declare const selectPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
 export type SelectPropSelectedTagsOverflow = (typeof selectPropSelectedTagsOverflow)[number];
 export declare const selectPropLabelPlacement: readonly ["top", "side"];
@@ -77,11 +77,13 @@ export type SelectProps<T> = ExtendableProps<{
         isDisabled?: boolean;
         isRequired?: boolean;
     }) => ReactNode;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
         label?: FormControlLabelProps;
-        list?: ListProps<T>;
+        list?: Omit<SelectListProps<object>, 'state'>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;

package/dist/style.css

@@ -1352,7 +1352,7 @@
   font-family: inherit;
 }
 
-.kbq-utility-list-792630 {
+.kbq-utility-list-792630, .kbq-utility-list-792630 ul {
   outline: none;
   margin: 0;
   padding: 0;
@@ -1360,6 +1360,22 @@
   overflow: auto;
 }
 
+.kbq-utility-list-792630[data-padded] {
+  padding-block: var(--kbq-size-xxs);
+}
+
+.kbq-utility-list-792630[data-padded] .kbq-utility-list-item-862731, .kbq-utility-list-792630[data-padded] .kbq-utility-list-heading-3c364a {
+  border-inline: var(--kbq-size-xxs) solid transparent;
+  background-clip: padding-box;
+}
+
+.kbq-utility-list-heading-3c364a {
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  padding: var(--kbq-size-s) var(--kbq-size-m);
+}
+
 .kbq-utility-list-item-862731 {
   --list-item-bg-color: ;
   --list-item-outline-color: transparent;
@@ -1367,17 +1383,33 @@
   cursor: pointer;
   box-sizing: border-box;
   gap: var(--kbq-size-s);
-  border-radius: var(--kbq-size-s);
   color: var(--kbq-foreground-contrast);
-  background-color: var(--list-item-bg-color);
   padding: var(--kbq-size-xs) var(--kbq-size-m);
-  outline-offset: calc(-1 * var(--list-item-outline-width));
-  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
-  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  z-index: var(--kbq-layer-absolute);
+  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), color var(--kbq-transition-default);
+  outline: none;
   flex-shrink: 0;
   align-items: center;
   text-decoration: none;
   display: flex;
+  position: relative;
+}
+
+.kbq-utility-list-item-862731 > * {
+  z-index: var(--kbq-layer-absolute);
+}
+
+.kbq-utility-list-item-862731:before {
+  content: "";
+  outline-offset: calc(-1 * var(--list-item-outline-width));
+  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
+  transition: background-color var(--kbq-transition-default);
+  background-color: var(--list-item-bg-color);
+  border-radius: var(--kbq-size-s);
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  inset: 0;
 }
 
 .kbq-utility-list-item-862731:where([data-hovered="true"]) {
@@ -1426,12 +1458,12 @@
   --list-item-bg-color: var(--kbq-states-background-contrast-less-active);
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])):before {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]):before {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
@@ -3117,24 +3149,6 @@
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
-
-.kbq-list-divider-fd5123 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-listsection-d94a57 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-listsection-heading-5bd9e3 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-divider-16da20 {
   border-style: solid;
   border-color: var(--kbq-line-contrast-less);
@@ -3209,7 +3223,6 @@
 
 .kbq-select-list-8ffac0 {
   inline-size: 100%;
-  padding: var(--kbq-size-xxs);
 }
 
 .kbq-select-popover-79fc05 {
@@ -3305,9 +3318,10 @@
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
 
-.kbq-selectlist-divider-7c167f {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
+.kbq-selectlist-empty-e6a9b0 {
+  color: var(--kbq-foreground-contrast-secondary);
+  padding-block: var(--kbq-size-xs);
+  padding-inline: var(--kbq-size-l);
 }
 .kbq-taggroup-container-c4d544 {
   inline-size: calc(100% + var(--kbq-size-s));
@@ -3457,28 +3471,9 @@
   min-inline-size: 200px;
   max-inline-size: 640px;
 }
-.kbq-menuinner-0117f8 {
-  padding: var(--kbq-size-xxs);
+.kbq-menulist-0e5f46 {
   inline-size: 100%;
 }
-
-.kbq-menuinner-divider-acbe04 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-menusection-6a5530 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-menusection-heading-2be1f1 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-buttontogglegroup-79a88d {
   --thumb-inline-size-start: ;
   --thumb-transform-start: ;

package/dist/styles/utility.d.ts

@@ -70,5 +70,6 @@ export declare const utilClasses: {
     };
     list: string;
     listItem: string;
+    listHeading: string;
     scrollable: string;
 };

package/dist/styles/utility.js

@@ -71,7 +71,8 @@ const utilClasses = {
   color,
   typography,
   list: s.list,
-  listItem: s["list-item"]
+  listItem: s["list-item"],
+  listHeading: s["list-heading"]
 };
 export {
   utilClasses

package/dist/styles/utility.module.css.js

@@ -67,7 +67,8 @@ const s = {
   "italic-compact-strong": "kbq-utility-italic-compact-strong-d8e16e",
   inherit,
   list,
-  "list-item": "kbq-utility-list-item-862731"
+  "list-item": "kbq-utility-list-item-862731",
+  "list-heading": "kbq-utility-list-heading-3c364a"
 };
 export {
   s as default,

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './getResponsiveValue';
 export * from './capitalizeFirstLetter';
+export * from './isPrimitiveNode';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.9.0",
-    "@koobiq/react-core": "0.9.0",
-    "@koobiq/react-icons": "0.9.0",
-    "@koobiq/react-primitives": "0.9.0"
+    "@koobiq/react-core": "0.10.0",
+    "@koobiq/logger": "0.10.0",
+    "@koobiq/react-icons": "0.10.0",
+    "@koobiq/react-primitives": "0.10.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

package/dist/components/List/components/ListSection/ListSection.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-listsection-d94a57";
-const heading = "kbq-listsection-heading-5bd9e3";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};

package/dist/components/Menu/components/MenuInner/MenuInner.d.ts

@@ -1,6 +0,0 @@
-import type { ComponentRef, ReactElement } from 'react';
-import type { AriaMenuOptions } from '@koobiq/react-primitives';
-export type MenuInnerProps<T> = AriaMenuOptions<T>;
-export type MenuInnerComponent = <T>(props: MenuInnerProps<T>) => ReactElement | null;
-export type MenuInnerRef = ComponentRef<'ul'>;
-export declare const MenuInner: MenuInnerComponent;

package/dist/components/Menu/components/MenuInner/MenuInner.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-menuinner-0117f8";
-const divider = "kbq-menuinner-divider-acbe04";
-const s = {
-  base,
-  divider
-};
-export {
-  base,
-  s as default,
-  divider
-};

package/dist/components/Menu/components/MenuInner/index.d.ts

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

package/dist/components/Menu/components/MenuSection/MenuSection.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-menusection-6a5530";
-const heading = "kbq-menusection-heading-2be1f1";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};