@koobiq/react-components 0.0.1-beta.11 → 0.0.1-beta.13

package/dist/components/Popover/index.js

@@ -0,0 +1,11 @@
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const PopoverHeader = DialogHeader;
+const PopoverContent = DialogContent;
+const PopoverFooter = DialogFooter;
+export {
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader
+};

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

@@ -12,6 +12,8 @@ export declare const popoverPropPlacement: readonly ["bottom", "bottom start", "
 export type PopoverPropPlacement = (typeof popoverPropPlacement)[number];
 export declare const popoverPropSize: readonly ["small", "medium", "large"];
 export type PopoverPropSize = (typeof popoverPropSize)[number] | CSSProperties['inlineSize'];
+export declare const popoverPropType: readonly ["dialog", "menu", "listbox", "tree", "grid"];
+export type PopoverPropType = (typeof popoverPropType)[number];
 export type PopoverBaseProps = {
     /** If `true`, the component is shown. */
     open?: boolean;
@@ -19,7 +21,7 @@ export type PopoverBaseProps = {
     defaultOpen?: boolean;
     /** The content of the component. */
     children?: PopoverPropContent;
-    /** The render function of the control for displaying the modal window. */
+    /** The render function of the control for displaying the popover. */
     control?: PopoverPropControl;
     /**
      * Component width size.
@@ -103,7 +105,7 @@ export type PopoverBaseProps = {
      * By default, onClose will always be called on interaction outside the popover ref.
      */
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
-    type?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
+    type?: PopoverPropType;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/Popover/types.js

@@ -13,7 +13,15 @@ const popoverPropPlacement = [
   "end bottom"
 ];
 const popoverPropSize = ["small", "medium", "large"];
+const popoverPropType = [
+  "dialog",
+  "menu",
+  "listbox",
+  "tree",
+  "grid"
+];
 export {
   popoverPropPlacement,
-  popoverPropSize
+  popoverPropSize,
+  popoverPropType
 };

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

@@ -1,2 +1,11 @@
-import type { SelectComponent } from './index';
-export declare const Select: SelectComponent;
+import { Item, Section } from '../Collections';
+import { ListItemText } from '../List';
+import type { SelectComponentProp } from './index';
+declare const SelectComponent: SelectComponentProp;
+type CompoundedComponent = typeof SelectComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const Select: CompoundedComponent;
+export {};

package/dist/components/Select/Select.js

@@ -3,14 +3,17 @@ import { forwardRef } from "react";
 import { useDOMRef, useBoolean, mergeProps, clsx, useElementSize } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
 import { useSelectState, useSelect, HiddenSelect } from "@koobiq/react-primitives";
-import { ListInner } from "../List/List.js";
 import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
 import { PopoverInner } from "../Popover/Popover.js";
+import { ListInner } from "../List/List.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
 function SelectRender(props, ref) {
   const {
     fullWidth = false,
@@ -166,7 +169,11 @@ function SelectRender(props, ref) {
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
   ] });
 }
-const Select = forwardRef(SelectRender);
+const SelectComponent = forwardRef(SelectRender);
+const Select = SelectComponent;
+Select.Item = Item;
+Select.Section = Section;
+Select.ItemText = ListItemText;
 export {
   Select
 };

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

@@ -83,5 +83,5 @@ export type SelectProps<T extends object> = {
         errorMessage?: FieldErrorProps;
     };
 };
-export type SelectComponent = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'button'>;

package/dist/components/SidePanel/SidePanel.d.ts

@@ -1,2 +1,10 @@
+import { DialogContent, DialogFooter, DialogHeader } from '../Dialog';
 import type { SidePanelProps } from './types';
-export declare const SidePanel: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof SidePanelComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogContent;
+    Footer: typeof DialogFooter;
+};
+export declare const SidePanel: CompoundedComponent;
+export {};

package/dist/components/SidePanel/SidePanel.js

@@ -7,7 +7,10 @@ import { Transition } from "react-transition-group";
 import s from "./SidePanel.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const SidePanel = forwardRef(
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const SidePanelComponent = forwardRef(
   (props, ref) => {
     const {
       size = "medium",
@@ -88,10 +91,9 @@ const SidePanel = forwardRef(
       },
       slotProps?.panel
     );
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+    const { isDisabled, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       control?.({
-        onClick: onPress,
         disabled: isDisabled,
         ...otherTriggerProps
       }),
@@ -121,7 +123,11 @@ const SidePanel = forwardRef(
     ] });
   }
 );
-SidePanel.displayName = "SidePanel";
+SidePanelComponent.displayName = "SidePanel";
+const SidePanel = SidePanelComponent;
+SidePanel.Header = DialogHeader;
+SidePanel.Body = DialogContent;
+SidePanel.Footer = DialogFooter;
 export {
   SidePanel
 };

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

@@ -1,4 +1,17 @@
 export * from './SidePanel';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as SidePanelHeader, DialogContent as SidePanelContent, DialogFooter as SidePanelFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Header` instead.
+ */
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Body` instead.
+ */
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Footer` instead.
+ */
+export declare const SidePanelFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SidePanel/index.js

@@ -0,0 +1,11 @@
+import { DialogHeader } from "../Dialog/components/DialoglHeader.js";
+import { DialogContent } from "../Dialog/components/DialogContent.js";
+import { DialogFooter } from "../Dialog/components/DialogFooter.js";
+const SidePanelHeader = DialogHeader;
+const SidePanelContent = DialogContent;
+const SidePanelFooter = DialogFooter;
+export {
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader
+};

package/dist/index.js

@@ -43,21 +43,22 @@ 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 { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
 import { Popover, PopoverInner } from "./components/Popover/Popover.js";
-import { popoverPropPlacement, popoverPropSize } from "./components/Popover/types.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 } 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 { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
@@ -71,9 +72,6 @@ export {
   Button,
   Checkbox,
   Container,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
   FlexBox,
   Grid,
   GridItem,
@@ -82,16 +80,18 @@ export {
   InputNumber,
   Link,
   List,
-  ListItem,
-  ListSection,
+  ListInner,
+  Item as ListItem,
+  ListItemText,
+  Section as ListSection,
   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,
@@ -104,9 +104,9 @@ export {
   RadioGroupLabel,
   Select,
   SidePanel,
-  DialogContent4 as SidePanelContent,
-  DialogFooter4 as SidePanelFooter,
-  DialogHeader4 as SidePanelHeader,
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
   Textarea,
@@ -139,6 +139,7 @@ export {
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,
+  popoverPropType,
   progressBarPropVariant,
   progressSpinnerPropSize,
   progressSpinnerPropVariant,

package/dist/style.css

@@ -1305,6 +1305,78 @@
   text-underline-offset: inherit;
   font-family: inherit;
 }
+
+.kbq-utility-list-792630 {
+  outline: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+
+.kbq-utility-list-item-862731 {
+  --list-item-bg-color: ;
+  --list-item-outline-color: transparent;
+  --list-item-outline-width: var(--kbq-size-3xs);
+  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);
+  flex-shrink: 0;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.kbq-utility-list-item-862731:where([data-hovered="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-transparent-hover);
+}
+
+.kbq-utility-list-item-862731:where([data-pressed="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-transparent-active);
+}
+
+.kbq-utility-list-item-862731:where([data-focus-visible="true"]) {
+  --list-item-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"]) {
+  --list-item-bg-color: var(--kbq-background-theme-less);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-hovered="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-theme-less-hover);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-pressed="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-theme-less-active);
+}
+
+.kbq-utility-list-item-862731:where([data-disabled="true"]), .kbq-utility-list-item-862731:where([aria-disabled="true"]) {
+  --list-item-bg-color: ;
+  cursor: default;
+  opacity: .3;
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-disabled="true"]), .kbq-utility-list-item-862731:where([data-selected="true"][aria-disabled="true"]) {
+  --list-item-bg-color: var(--kbq-background-theme-less);
+}
+
+.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"])) {
+  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"]) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
 .kbq-typography-645b00 {
   margin: unset;
 }
@@ -2538,6 +2610,73 @@
 .kbq-skeletontypography-skeleton-5db4ac {
   block-size: .9em;
 }
+.kbq-modal-4b03cd {
+  --modal-window-offset: 48px;
+  pointer-events: none;
+  z-index: var(--kbq-layer-modal);
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.kbq-modal-small-7273e9 {
+  --modal-window-inline-size: 400px;
+}
+
+.kbq-modal-medium-5db542 {
+  --modal-window-inline-size: 640px;
+}
+
+.kbq-modal-large-534723 {
+  --modal-window-inline-size: 960px;
+}
+
+.kbq-modal-4b03cd[data-transition="entering"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="entered"] .kbq-modal-modal-3e5b95 {
+  opacity: 1;
+  transform: translate(-50%);
+}
+
+.kbq-modal-4b03cd[data-transition="exiting"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="exited"] .kbq-modal-modal-3e5b95 {
+  opacity: 0;
+  transform: translate(-50%, 100px);
+}
+
+.kbq-modal-modal-3e5b95 {
+  pointer-events: auto;
+  border-radius: var(--kbq-size-m);
+  box-shadow: var(--kbq-shadow-overlay);
+  background-color: var(--kbq-background-bg);
+  max-inline-size: var(--modal-window-inline-size);
+  inline-size: calc(100% - var(--modal-window-offset) * 2);
+  max-block-size: calc(100vh - var(--modal-window-offset) * 2);
+  transition: opacity var(--kbq-transition-slow), transform var(--kbq-transition-slow);
+  position: absolute;
+  inset-block-start: var(--modal-window-offset);
+  inset-inline-start: 50%;
+  transform: translate(-50%, 100px);
+}
+.kbq-backdrop-238ef0 {
+  --backdrop-z-index: -1;
+  --backdrop-duration: ;
+  opacity: 0;
+  z-index: var(--backdrop-z-index);
+  pointer-events: auto;
+  background-color: var(--kbq-background-overlay);
+  transition: opacity var(--backdrop-duration) ease-in-out;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.kbq-backdrop-238ef0[data-transition="entering"], .kbq-backdrop-238ef0[data-transition="entered"] {
+  opacity: 1;
+}
+
+.kbq-backdrop-238ef0[data-transition="exiting"], .kbq-backdrop-238ef0[data-transition="exited"] {
+  opacity: 0;
+}
 .kbq-dialog-4c737c {
   --dialog-padding-inline-size: var(--kbq-size-xxl);
   pointer-events: auto;
@@ -2610,73 +2749,6 @@
 [data-bottom-overflow="true"] .kbq-dialog-footer-cf03d1 {
   box-shadow: var(--kbq-shadow-overflow-normal-top);
 }
-.kbq-modal-4b03cd {
-  --modal-window-offset: 48px;
-  pointer-events: none;
-  z-index: var(--kbq-layer-modal);
-  display: flex;
-  position: fixed;
-  inset: 0;
-}
-
-.kbq-modal-small-7273e9 {
-  --modal-window-inline-size: 400px;
-}
-
-.kbq-modal-medium-5db542 {
-  --modal-window-inline-size: 640px;
-}
-
-.kbq-modal-large-534723 {
-  --modal-window-inline-size: 960px;
-}
-
-.kbq-modal-4b03cd[data-transition="entering"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="entered"] .kbq-modal-modal-3e5b95 {
-  opacity: 1;
-  transform: translate(-50%);
-}
-
-.kbq-modal-4b03cd[data-transition="exiting"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="exited"] .kbq-modal-modal-3e5b95 {
-  opacity: 0;
-  transform: translate(-50%, 100px);
-}
-
-.kbq-modal-modal-3e5b95 {
-  pointer-events: auto;
-  border-radius: var(--kbq-size-m);
-  box-shadow: var(--kbq-shadow-overlay);
-  background-color: var(--kbq-background-bg);
-  max-inline-size: var(--modal-window-inline-size);
-  inline-size: calc(100% - var(--modal-window-offset) * 2);
-  max-block-size: calc(100vh - var(--modal-window-offset) * 2);
-  transition: opacity var(--kbq-transition-slow), transform var(--kbq-transition-slow);
-  position: absolute;
-  inset-block-start: var(--modal-window-offset);
-  inset-inline-start: 50%;
-  transform: translate(-50%, 100px);
-}
-.kbq-backdrop-238ef0 {
-  --backdrop-z-index: -1;
-  --backdrop-duration: ;
-  opacity: 0;
-  z-index: var(--backdrop-z-index);
-  pointer-events: auto;
-  background-color: var(--kbq-background-overlay);
-  transition: opacity var(--backdrop-duration) ease-in-out;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: fixed;
-  inset: 0;
-}
-
-.kbq-backdrop-238ef0[data-transition="entering"], .kbq-backdrop-238ef0[data-transition="entered"] {
-  opacity: 1;
-}
-
-.kbq-backdrop-238ef0[data-transition="exiting"], .kbq-backdrop-238ef0[data-transition="exited"] {
-  opacity: 0;
-}
 .kbq-sidepanel-2aae74 {
   pointer-events: none;
   z-index: var(--kbq-layer-modal);
@@ -2918,14 +2990,6 @@
 .kbq-tooltip-0c8f57[data-transition="exiting"], .kbq-tooltip-0c8f57[data-transition="exited"] {
   opacity: 0;
 }
-.kbq-list-928929 {
-  outline: none;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
@@ -2942,68 +3006,16 @@
   box-sizing: border-box;
   padding: var(--kbq-size-s) var(--kbq-size-m);
 }
-.kbq-listoption-8693c5 {
-  --list-item-bg-color: ;
-  --list-item-outline-color: transparent;
-  --list-item-outline-width: var(--kbq-size-3xs);
-  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);
-  flex-shrink: 0;
-  align-items: center;
-  text-decoration: none;
+.kbq-listitemtext-27bac6 {
+  gap: var(--kbq-size-3xs);
+  flex-direction: column;
+  flex-grow: 1;
+  min-inline-size: 0;
   display: flex;
 }
 
-.kbq-listoption-hovered-163e16 {
-  --list-item-bg-color: var(--kbq-states-background-transparent-hover);
-}
-
-.kbq-listoption-pressed-292310 {
-  --list-item-bg-color: var(--kbq-states-background-transparent-active);
-}
-
-.kbq-listoption-focusVisible-dcff25 {
-  --list-item-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-listoption-selected-012293 {
-  --list-item-bg-color: var(--kbq-background-theme-less);
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-hovered-163e16) {
-  --list-item-bg-color: var(--kbq-states-background-theme-less-hover);
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-pressed-292310) {
-  --list-item-bg-color: var(--kbq-states-background-theme-less-active);
-}
-
-.kbq-listoption-disabled-dafd94 {
-  --list-item-bg-color: ;
-  cursor: default;
-  opacity: .3;
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-disabled-dafd94) {
-  --list-item-bg-color: var(--kbq-background-theme-less);
-}
-
-[aria-multiselectable] :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25):has( + :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25)) {
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
-}
-
-[aria-multiselectable] :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25) + :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
+[data-slot="select-value"] .kbq-listitemtext-caption-ae96af {
+  display: none;
 }
 .kbq-select-6d31ad {
   --field-input-padding-inline-start: var(--kbq-size-m);

package/dist/styles/utility.d.ts

@@ -68,4 +68,6 @@ export declare const utilClasses: {
         'italic-compact-strong': string;
         inherit: string;
     };
+    list: string;
+    listItem: string;
 };

package/dist/styles/utility.js

@@ -69,7 +69,9 @@ const typography = {
 };
 const utilClasses = {
   color,
-  typography
+  typography,
+  list: s.list,
+  listItem: s["list-item"]
 };
 export {
   utilClasses

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

@@ -2,6 +2,7 @@ const headline = "kbq-utility-headline-b504fb";
 const title = "kbq-utility-title-49d974";
 const subheading = "kbq-utility-subheading-ec6b60";
 const inherit = "kbq-utility-inherit-6b72bf";
+const list = "kbq-utility-list-792630";
 const s = {
   "foreground-white": "kbq-utility-foreground-white-f552a0",
   "foreground-white-secondary": "kbq-utility-foreground-white-secondary-893462",
@@ -64,12 +65,15 @@ const s = {
   "italic-normal-strong": "kbq-utility-italic-normal-strong-88d247",
   "italic-compact": "kbq-utility-italic-compact-846466",
   "italic-compact-strong": "kbq-utility-italic-compact-strong-d8e16e",
-  inherit
+  inherit,
+  list,
+  "list-item": "kbq-utility-list-item-862731"
 };
 export {
   s as default,
   headline,
   inherit,
+  list,
   subheading,
   title
 };

package/dist/types.d.ts

@@ -1 +1,2 @@
+export type { PressEvent } from '@koobiq/react-primitives';
 export type Selection = 'all' | Set<string | number>;