@m4l/components 9.3.34-BE20251127-beta.1 → 9.3.34-JT20251210-beta.1

package/components/CheckableList/hooks/useCheckableListItems.js

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+const useCheckableListItems = ({
+  items = [],
+  groups,
+  searchQuery,
+  filterFn,
+  expandedGroups
+}) => {
+  const isGrouped = !!groups && groups.length > 0;
+  const normalizedItems = useMemo(() => {
+    if (isGrouped) {
+      return groups.flatMap((group) => group.items);
+    }
+    return items;
+  }, [items, groups, isGrouped]);
+  const filteredItems = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return normalizedItems;
+    }
+    const query = searchQuery.toLowerCase();
+    const defaultFilter = (item) => item.label.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query);
+    return normalizedItems.filter(
+      (item) => filterFn ? filterFn(item, searchQuery) : defaultFilter(item)
+    );
+  }, [normalizedItems, searchQuery, filterFn]);
+  const filteredGroups = useMemo(() => {
+    if (!isGrouped || !searchQuery.trim()) {
+      return groups || [];
+    }
+    const normalizedQuery = searchQuery.toLowerCase();
+    const defaultGroupFilter = (candidate) => candidate.label.toLowerCase().includes(normalizedQuery) || candidate.description?.toLowerCase().includes(normalizedQuery);
+    return (groups || []).map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (groupItem) => filterFn ? filterFn(groupItem, searchQuery) : defaultGroupFilter(groupItem)
+      )
+    })).filter((group) => group.items.length > 0);
+  }, [groups, isGrouped, searchQuery, filterFn]);
+  const virtualizedItems = useMemo(() => {
+    if (isGrouped) {
+      const virtualizedList = [];
+      filteredGroups.forEach((group, groupIndex) => {
+        const isExpanded = expandedGroups.has(group.id);
+        virtualizedList.push({
+          type: "group",
+          data: group,
+          index: virtualizedList.length,
+          groupIndex
+        });
+        if (isExpanded) {
+          group.items.forEach((item) => {
+            virtualizedList.push({
+              type: "item",
+              data: item,
+              index: virtualizedList.length,
+              groupIndex
+            });
+          });
+        }
+      });
+      return virtualizedList;
+    }
+    return filteredItems.map((item, index) => ({
+      type: "item",
+      data: item,
+      index
+    }));
+  }, [isGrouped, filteredGroups, filteredItems, expandedGroups]);
+  return {
+    isGrouped,
+    normalizedItems,
+    filteredItems,
+    filteredGroups,
+    virtualizedItems
+  };
+};
+export {
+  useCheckableListItems as u
+};

package/components/CheckableList/hooks/useCheckableListRender.d.ts

@@ -0,0 +1,52 @@
+import { MouseEvent, ChangeEvent } from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { Sizes } from '@m4l/styles';
+import { CheckableListItem, CheckableListGroup, CheckableListRenderItemParams } from '../types';
+export interface CheckableListRenderGroupParams {
+    group: CheckableListGroup;
+    items: CheckableListItem[];
+    index: number;
+    expanded: boolean;
+    disabled: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+    variant: 'standard' | 'outlined' | 'compact';
+    checkboxState: boolean | 'indeterminate';
+    onToggleExpand: (event: MouseEvent) => void;
+    onToggleGroup: (event: ChangeEvent<HTMLInputElement>) => void;
+    selectedCount: number;
+    totalCount: number;
+}
+interface UseCheckableListRenderProps {
+    isItemSelected: (itemId: string | number) => boolean;
+    disabled?: boolean;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    variant?: 'standard' | 'outlined' | 'compact';
+    checkboxSize?: 'small' | 'medium';
+    handleItemToggle: (itemId: string | number) => void;
+    renderItem?: (params: CheckableListRenderItemParams) => React.ReactNode;
+    expandedGroups: Set<string | number>;
+    isGroupFullySelected: (group: CheckableListGroup) => boolean;
+    isGroupPartiallySelected: (group: CheckableListGroup) => boolean;
+    getGroupItems: (group: CheckableListGroup) => CheckableListItem[];
+    indeterminateBehavior?: 'select-all' | 'indicate-some';
+    renderGroup?: (params: CheckableListRenderGroupParams) => React.ReactNode;
+    groupable?: boolean;
+    showCheckboxOnGroup?: boolean;
+    handleGroupExpandToggle: (groupId: string | number) => void;
+    handleGroupToggle: (group: CheckableListGroup) => void;
+}
+/**
+ * Tipo de retorno del hook useCheckableListRender
+ */
+interface UseCheckableListRenderReturn {
+    renderItemContent: (item: CheckableListItem, index: number) => React.ReactNode;
+    renderGroupContent: (group: CheckableListGroup, index: number) => React.ReactNode;
+    renderVirtualizedItem: (props: ListChildComponentProps) => React.ReactNode;
+    urlIconSearch: string;
+    urlIconNoResults: string;
+}
+/**
+ * Hook para manejar el renderizado de items y grupos
+ */
+export declare const useCheckableListRender: ({ isItemSelected, disabled, size, variant, checkboxSize, handleItemToggle, renderItem, expandedGroups, isGroupFullySelected, isGroupPartiallySelected, getGroupItems, indeterminateBehavior, renderGroup, groupable, showCheckboxOnGroup, handleGroupExpandToggle, handleGroupToggle, }: UseCheckableListRenderProps) => UseCheckableListRenderReturn;
+export {};

package/components/CheckableList/hooks/useCheckableListRender.js

@@ -0,0 +1,223 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useEnvironment } from "@m4l/core";
+import { I as ICONS } from "../icons.js";
+import { I as ItemLabelTypografyStyled, e as ItemDescriptionTypografyStyled, f as ItemWrapperStyled, g as ItemCheckboxStyled, h as ItemIconStyled, i as ItemContentWrapperStyled, G as GroupLabelCountWrapperStyled, j as GroupLabelTypografyStyled, C as ChipCountTypografyStyled, k as GroupWrapperStyled, l as GroupHeaderStyled, m as GroupCheckboxStyled, n as GroupIconStyled, o as GroupToggleButtonStyled } from "../slots/styled.js";
+const useCheckableListRender = ({
+  isItemSelected,
+  disabled = false,
+  size = "medium",
+  variant = "standard",
+  checkboxSize = "medium",
+  handleItemToggle,
+  renderItem,
+  expandedGroups,
+  isGroupFullySelected,
+  isGroupPartiallySelected,
+  getGroupItems,
+  indeterminateBehavior = "indicate-some",
+  renderGroup,
+  groupable = true,
+  showCheckboxOnGroup = true,
+  handleGroupExpandToggle,
+  handleGroupToggle
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const urlIconExpanded = `${host_static_assets}/${environment_assets}/frontend/components/checkable_list/assets/icons/${ICONS.EXPANDED_LIST}`;
+  const urlIconCompact = `${host_static_assets}/${environment_assets}/frontend/components/checkable_list/assets/icons/${ICONS.COMPACT_LIST}`;
+  const urlIconSearch = `${host_static_assets}/${environment_assets}/frontend/components/checkable_list/assets/icons/${ICONS.SEARCH}`;
+  const urlIconNoResults = `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  const renderItemContent = useCallback(
+    (item, index) => {
+      const checked = isItemSelected(item.id);
+      const itemDisabled = Boolean(disabled || item.disabled);
+      const customContent = renderItem?.({
+        item,
+        checked,
+        index,
+        disabled: itemDisabled,
+        size,
+        variant
+      });
+      const fallbackContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ItemLabelTypografyStyled,
+          {
+            ownerState: { size, variant, disabled: itemDisabled },
+            variant: "body",
+            color: "text.primary",
+            disabled: itemDisabled,
+            children: item.label
+          }
+        ),
+        item.description && /* @__PURE__ */ jsx(
+          ItemDescriptionTypografyStyled,
+          {
+            ownerState: { size, variant },
+            variant: "body",
+            color: "text.secondary",
+            disabled: itemDisabled,
+            children: item.description
+          }
+        )
+      ] });
+      return /* @__PURE__ */ jsxs(
+        ItemWrapperStyled,
+        {
+          ownerState: { size, variant, disabled: itemDisabled, selected: checked },
+          onClick: () => !itemDisabled && handleItemToggle(item.id),
+          children: [
+            /* @__PURE__ */ jsx(
+              ItemCheckboxStyled,
+              {
+                checked,
+                disabled: itemDisabled,
+                size: checkboxSize,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  handleItemToggle(item.id);
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            item.icon && /* @__PURE__ */ jsx(ItemIconStyled, { children: item.icon }),
+            /* @__PURE__ */ jsx(ItemContentWrapperStyled, { children: customContent ?? fallbackContent })
+          ]
+        }
+      );
+    },
+    [
+      isItemSelected,
+      disabled,
+      renderItem,
+      size,
+      variant,
+      checkboxSize,
+      handleItemToggle
+    ]
+  );
+  const renderGroupContent = useCallback(
+    (group, index) => {
+      const isExpanded = expandedGroups.has(group.id);
+      const groupDisabled = Boolean(disabled || group.disabled);
+      const fullySelected = isGroupFullySelected(group);
+      const partiallySelected = isGroupPartiallySelected(group);
+      const groupItems = getGroupItems(group);
+      let checkboxState = false;
+      if (fullySelected) {
+        checkboxState = true;
+      } else if (partiallySelected && indeterminateBehavior === "indicate-some") {
+        checkboxState = "indeterminate";
+      }
+      const handleExpand = (event) => {
+        event.stopPropagation();
+        if (groupDisabled || !groupable) {
+          return;
+        }
+        handleGroupExpandToggle(group.id);
+      };
+      const handleToggleGroup = (event) => {
+        event.stopPropagation();
+        handleGroupToggle(group);
+      };
+      const selectedCount = groupItems.filter(
+        (item) => isItemSelected(item.id)
+      ).length;
+      const customGroupContent = renderGroup?.({
+        group,
+        items: groupItems,
+        index,
+        expanded: isExpanded,
+        disabled: groupDisabled,
+        size,
+        variant,
+        checkboxState,
+        onToggleExpand: handleExpand,
+        onToggleGroup: handleToggleGroup,
+        selectedCount,
+        totalCount: groupItems.length
+      });
+      const fallbackGroupLabel = /* @__PURE__ */ jsxs(GroupLabelCountWrapperStyled, { children: [
+        /* @__PURE__ */ jsx(
+          GroupLabelTypografyStyled,
+          {
+            ownerState: { size, variant, disabled: groupDisabled },
+            ellipsis: true,
+            variant: "captionDens",
+            children: group.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ChipCountTypografyStyled,
+          {
+            ownerState: { size, variant, disabled: groupDisabled, color: group.color },
+            children: [
+              selectedCount,
+              "/",
+              groupItems.length
+            ]
+          }
+        )
+      ] });
+      const groupBodyContent = customGroupContent ?? fallbackGroupLabel;
+      return /* @__PURE__ */ jsx(GroupWrapperStyled, { ownerState: { size, variant, grouped: true, selected: checkboxState === true }, children: /* @__PURE__ */ jsxs(
+        GroupHeaderStyled,
+        {
+          ownerState: { size, variant, disabled: groupDisabled },
+          onClick: handleExpand,
+          children: [
+            showCheckboxOnGroup && /* @__PURE__ */ jsx(
+              GroupCheckboxStyled,
+              {
+                checked: checkboxState === true,
+                indeterminate: checkboxState === "indeterminate",
+                disabled: groupDisabled,
+                size: checkboxSize,
+                onChange: handleToggleGroup,
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            group.icon && /* @__PURE__ */ jsx(GroupIconStyled, { children: group.icon }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: groupBodyContent }),
+            groupable && /* @__PURE__ */ jsx(
+              GroupToggleButtonStyled,
+              {
+                size,
+                variant: "text",
+                icon: isExpanded ? urlIconCompact : urlIconExpanded,
+                onClick: handleExpand
+              }
+            )
+          ]
+        }
+      ) });
+    },
+    [expandedGroups, disabled, isGroupFullySelected, isGroupPartiallySelected, getGroupItems, indeterminateBehavior, renderGroup, size, variant, showCheckboxOnGroup, checkboxSize, groupable, urlIconCompact, urlIconExpanded, handleGroupExpandToggle, handleGroupToggle, isItemSelected]
+  );
+  const renderVirtualizedItem = useCallback(
+    ({ index, style, data }) => {
+      const virtualizedItems = data;
+      const item = virtualizedItems[index];
+      if (!item) {
+        return null;
+      }
+      return (
+        /**
+         * Sobre este div React-Window aplica los estilos de posicionamiento y tamaño.
+         */
+        /* @__PURE__ */ jsx("div", { style, children: item.type === "group" ? renderGroupContent(item.data, index) : renderItemContent(item.data, index) })
+      );
+    },
+    [renderGroupContent, renderItemContent]
+  );
+  return {
+    renderItemContent,
+    renderGroupContent,
+    renderVirtualizedItem,
+    urlIconSearch,
+    urlIconNoResults
+  };
+};
+export {
+  useCheckableListRender as u
+};

package/components/CheckableList/hooks/useCheckableListSelection.d.ts

@@ -0,0 +1,19 @@
+import { CheckableListItem, CheckableListGroup } from '../types';
+interface UseCheckableListSelectionProps {
+    value: (string | number)[];
+    normalizedItems: CheckableListItem[];
+    groups?: CheckableListGroup[];
+    isGrouped: boolean;
+}
+/**
+ * Hook para manejar la lógica de selección del componente CheckableList
+ */
+export declare const useCheckableListSelection: ({ value, normalizedItems, groups, isGrouped, }: UseCheckableListSelectionProps) => {
+    getGroupItems: (group: CheckableListGroup) => CheckableListItem[];
+    isItemSelected: (itemId: string | number) => boolean;
+    isGroupFullySelected: (group: CheckableListGroup) => boolean;
+    isGroupPartiallySelected: (group: CheckableListGroup) => boolean;
+    areAllItemsSelected: boolean;
+    areSomeItemsSelected: boolean;
+};
+export {};

package/components/CheckableList/hooks/useCheckableListSelection.js

@@ -0,0 +1,69 @@
+import { useCallback, useMemo } from "react";
+const useCheckableListSelection = ({
+  value,
+  normalizedItems,
+  groups,
+  isGrouped
+}) => {
+  const getGroupItems = useCallback(
+    (group) => {
+      if (isGrouped && groups) {
+        return groups.find((g) => g.id === group.id)?.items || [];
+      }
+      return [];
+    },
+    [isGrouped, groups]
+  );
+  const isItemSelected = useCallback(
+    (itemId) => {
+      return value.includes(itemId);
+    },
+    [value]
+  );
+  const isGroupFullySelected = useCallback(
+    (group) => {
+      const groupItems = getGroupItems(group);
+      if (groupItems.length === 0) {
+        return false;
+      }
+      return groupItems.every((item) => isItemSelected(item.id));
+    },
+    [getGroupItems, isItemSelected]
+  );
+  const isGroupPartiallySelected = useCallback(
+    (group) => {
+      const groupItems = getGroupItems(group);
+      if (groupItems.length === 0) {
+        return false;
+      }
+      const selectedCount = groupItems.filter(
+        (item) => isItemSelected(item.id)
+      ).length;
+      return selectedCount > 0 && selectedCount < groupItems.length;
+    },
+    [getGroupItems, isItemSelected]
+  );
+  const areAllItemsSelected = useMemo(() => {
+    if (normalizedItems.length === 0) {
+      return false;
+    }
+    return normalizedItems.every((item) => isItemSelected(item.id));
+  }, [normalizedItems, isItemSelected]);
+  const areSomeItemsSelected = useMemo(() => {
+    if (normalizedItems.length === 0) {
+      return false;
+    }
+    return normalizedItems.some((item) => isItemSelected(item.id));
+  }, [normalizedItems, isItemSelected]);
+  return {
+    getGroupItems,
+    isItemSelected,
+    isGroupFullySelected,
+    isGroupPartiallySelected,
+    areAllItemsSelected,
+    areSomeItemsSelected
+  };
+};
+export {
+  useCheckableListSelection as u
+};

package/components/CheckableList/hooks/useCheckableListState.d.ts

@@ -0,0 +1,17 @@
+import { CheckableListGroup } from '../types';
+interface UseCheckableListStateProps {
+    groups?: CheckableListGroup[];
+    expandAllGroups?: boolean;
+}
+/**
+ * Hook para manejar el estado local del componente CheckableList
+ */
+export declare const useCheckableListState: ({ groups, expandAllGroups, }: UseCheckableListStateProps) => {
+    searchQuery: string;
+    setSearchQuery: import('react').Dispatch<import('react').SetStateAction<string>>;
+    expandedGroups: Set<string | number>;
+    itemHeights: Map<number, number>;
+    setItemHeights: import('react').Dispatch<import('react').SetStateAction<Map<number, number>>>;
+    handleGroupExpandToggle: (groupId: string | number) => void;
+};
+export {};

package/components/CheckableList/hooks/useCheckableListState.js

@@ -0,0 +1,59 @@
+import { useState, useRef, useEffect } from "react";
+const useCheckableListState = ({
+  groups,
+  expandAllGroups = true
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedGroups, setExpandedGroups] = useState(
+    () => {
+      if (!groups) {
+        return /* @__PURE__ */ new Set();
+      }
+      return expandAllGroups ? new Set(groups.map((g) => g.id)) : new Set(groups.filter((g) => !g.collapsed).map((g) => g.id));
+    }
+  );
+  const [itemHeights, setItemHeights] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const previousGroupIdsRef = useRef([]);
+  const previousExpandAllGroupsRef = useRef(expandAllGroups);
+  useEffect(() => {
+    if (!groups) {
+      setExpandedGroups(/* @__PURE__ */ new Set());
+      previousGroupIdsRef.current = [];
+      return;
+    }
+    const currentGroupIds = groups.map((g) => g.id);
+    const previousGroupIds = previousGroupIdsRef.current;
+    const groupIdsChanged = currentGroupIds.length !== previousGroupIds.length || currentGroupIds.some((id, index) => id !== previousGroupIds[index]);
+    const expandAllGroupsChanged = previousExpandAllGroupsRef.current !== expandAllGroups;
+    if (groupIdsChanged || expandAllGroupsChanged) {
+      const newExpandedGroups = expandAllGroups ? new Set(groups.map((g) => g.id)) : new Set(groups.filter((g) => !g.collapsed).map((g) => g.id));
+      setExpandedGroups(newExpandedGroups);
+      previousGroupIdsRef.current = currentGroupIds;
+      previousExpandAllGroupsRef.current = expandAllGroups;
+    }
+  }, [groups, expandAllGroups]);
+  const handleGroupExpandToggle = (groupId) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  };
+  return {
+    searchQuery,
+    setSearchQuery,
+    expandedGroups,
+    itemHeights,
+    setItemHeights,
+    handleGroupExpandToggle
+  };
+};
+export {
+  useCheckableListState as u
+};

package/components/CheckableList/hooks/useCheckableListVirtualization.d.ts

@@ -0,0 +1,14 @@
+import { VirtualizedItem } from '../types';
+interface UseCheckableListVirtualizationProps {
+    virtualizedItems: VirtualizedItem[];
+    itemHeights: Map<number, number>;
+    defaultItemRowHeight?: number;
+    defaultGroupRowHeight?: number;
+}
+/**
+ * Hook para manejar la virtualización de items
+ */
+export declare const useCheckableListVirtualization: ({ virtualizedItems, itemHeights, defaultItemRowHeight, defaultGroupRowHeight, }: UseCheckableListVirtualizationProps) => {
+    getItemSize: (index: number) => number;
+};
+export {};

package/components/CheckableList/hooks/useCheckableListVirtualization.js

@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import { a as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT, b as CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT, c as CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION } from "../constants.js";
+const useCheckableListVirtualization = ({
+  virtualizedItems,
+  itemHeights,
+  defaultItemRowHeight,
+  defaultGroupRowHeight
+}) => {
+  const getItemSize = useCallback(
+    (index) => {
+      const storedHeight = itemHeights.get(index);
+      if (storedHeight) {
+        return storedHeight;
+      }
+      const item = virtualizedItems[index];
+      if (!item) {
+        return defaultItemRowHeight ?? CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT;
+      }
+      if (item.type === "group") {
+        return defaultGroupRowHeight ?? CHECKABLE_LIST_DEFAULT_GROUP_ROW_HEIGHT;
+      }
+      const checkableItem = item.data;
+      if (typeof checkableItem.rowHeight === "number") {
+        return checkableItem.rowHeight;
+      }
+      const hasDescription = !!checkableItem.description;
+      return defaultItemRowHeight ?? (hasDescription ? CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT_WITH_DESCRIPTION : CHECKABLE_LIST_DEFAULT_ITEM_ROW_HEIGHT);
+    },
+    [
+      virtualizedItems,
+      itemHeights,
+      defaultItemRowHeight,
+      defaultGroupRowHeight
+    ]
+  );
+  return {
+    getItemSize
+  };
+};
+export {
+  useCheckableListVirtualization as u
+};

package/components/CheckableList/icons.d.ts

@@ -0,0 +1,5 @@
+export declare const ICONS: {
+    COMPACT_LIST: string;
+    EXPANDED_LIST: string;
+    SEARCH: string;
+};

package/components/CheckableList/icons.js

@@ -0,0 +1,8 @@
+const ICONS = {
+  COMPACT_LIST: "compact_list.svg",
+  EXPANDED_LIST: "expanded_list.svg",
+  SEARCH: "search.svg"
+};
+export {
+  ICONS as I
+};

package/components/CheckableList/index.d.ts

@@ -0,0 +1,3 @@
+export { CheckableList } from './CheckableList';
+export type { CheckableListProps, CheckableListItem, CheckableListGroup, CheckableListOwnerState, } from './types';
+export { getCheckableListComponentsDictionary } from './dictionary';

package/components/CheckableList/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './slots';
+export * from './styled';

package/components/CheckableList/slots/index.js

@@ -0,0 +1 @@
+

package/components/CheckableList/slots/slots.d.ts

@@ -0,0 +1,26 @@
+export declare enum CheckableListSlots {
+    root = "root",
+    searchContainer = "searchContainer",
+    searchInput = "searchInput",
+    selectAllContainer = "selectAllContainer",
+    selectAllCheckbox = "selectAllCheckbox",
+    listContainer = "listContainer",
+    virtualizedList = "virtualizedList",
+    itemWrapper = "itemWrapper",
+    itemCheckbox = "itemCheckbox",
+    itemContentWrapper = "itemContentWrapper",
+    itemLabel = "itemLabel",
+    itemDescription = "itemDescription",
+    itemIcon = "itemIcon",
+    groupWrapper = "groupWrapper",
+    groupHeader = "groupHeader",
+    groupCheckbox = "groupCheckbox",
+    groupLabelCountWrapper = "groupLabelCountWrapper",
+    groupLabel = "groupLabel",
+    chipCount = "chipCount",
+    groupIcon = "groupIcon",
+    groupToggleButton = "groupToggleButton",
+    groupItems = "groupItems",
+    emptyMessageWrapper = "emptyMessageWrapper",
+    loadingContainer = "loadingContainer"
+}

package/components/CheckableList/slots/slots.js

@@ -0,0 +1,30 @@
+var CheckableListSlots = /* @__PURE__ */ ((CheckableListSlots2) => {
+  CheckableListSlots2["root"] = "root";
+  CheckableListSlots2["searchContainer"] = "searchContainer";
+  CheckableListSlots2["searchInput"] = "searchInput";
+  CheckableListSlots2["selectAllContainer"] = "selectAllContainer";
+  CheckableListSlots2["selectAllCheckbox"] = "selectAllCheckbox";
+  CheckableListSlots2["listContainer"] = "listContainer";
+  CheckableListSlots2["virtualizedList"] = "virtualizedList";
+  CheckableListSlots2["itemWrapper"] = "itemWrapper";
+  CheckableListSlots2["itemCheckbox"] = "itemCheckbox";
+  CheckableListSlots2["itemContentWrapper"] = "itemContentWrapper";
+  CheckableListSlots2["itemLabel"] = "itemLabel";
+  CheckableListSlots2["itemDescription"] = "itemDescription";
+  CheckableListSlots2["itemIcon"] = "itemIcon";
+  CheckableListSlots2["groupWrapper"] = "groupWrapper";
+  CheckableListSlots2["groupHeader"] = "groupHeader";
+  CheckableListSlots2["groupCheckbox"] = "groupCheckbox";
+  CheckableListSlots2["groupLabelCountWrapper"] = "groupLabelCountWrapper";
+  CheckableListSlots2["groupLabel"] = "groupLabel";
+  CheckableListSlots2["chipCount"] = "chipCount";
+  CheckableListSlots2["groupIcon"] = "groupIcon";
+  CheckableListSlots2["groupToggleButton"] = "groupToggleButton";
+  CheckableListSlots2["groupItems"] = "groupItems";
+  CheckableListSlots2["emptyMessageWrapper"] = "emptyMessageWrapper";
+  CheckableListSlots2["loadingContainer"] = "loadingContainer";
+  return CheckableListSlots2;
+})(CheckableListSlots || {});
+export {
+  CheckableListSlots as C
+};