@choice-ui/react 1.8.8 → 1.9.0

package/dist/components/button/dist/index.js

@@ -244,13 +244,6 @@ var buttonTv = tcv({
       loading: false,
       variant: "dark",
       class: { button: "active:bg-gray-600" }
-    },
-    {
-      disabled: false,
-      loading: false,
-      variant: "secondary",
-      active: false,
-      class: { button: "hover:bg-secondary-background" }
     }
   ],
   defaultVariants: {

package/dist/components/checkbox/src/checkbox-icon.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+export declare const CheckboxIcon: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/checkbox/src/checkbox-icon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Indeterminate, Check } from "@choiceform/icons-react";
+import { memo, forwardRef } from "react";
+import { useCheckboxContext } from "./context.js";
+import { checkboxTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
+export {
+  CheckboxIcon
+};

package/dist/components/checkbox/src/checkbox.d.ts

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { CheckboxIcon } from './checkbox-icon';
 import { CheckboxLabel } from './checkbox-label';
 export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
     children?: ReactNode;
@@ -14,6 +15,7 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }

package/dist/components/checkbox/src/checkbox.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId } from "react";
+import { memo, forwardRef, useId, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
+import { CheckboxIcon } from "./checkbox-icon.js";
 import { CheckboxLabel } from "./checkbox-label.js";
 import { CheckboxContext } from "./context.js";
 import { checkboxTv } from "./tv.js";
@@ -45,12 +46,23 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.Icon");
+  };
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -84,7 +96,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -93,6 +105,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
 });
 const MemoizedCheckbox = memo(CheckboxBase);
 const Checkbox = MemoizedCheckbox;
+Checkbox.Icon = CheckboxIcon;
 Checkbox.Label = CheckboxLabel;
 Checkbox.displayName = "Checkbox";
 export {

package/dist/components/checkbox/src/index.d.ts

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxIconProps } from './checkbox-icon';
+export type { CheckboxLabelProps } from './checkbox-label';

package/dist/components/colors/src/color-image-paint/color-image-paint.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
-import { Range as Range2 } from "../../../range/dist/index.js";
+import { Range } from "../../../range/dist/index.js";
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { ColorImageToolbar } from "./color-image-toolbar.js";
@@ -209,7 +209,7 @@ const ColorImagePaint = memo(function ColorImagePaint2(props) {
           return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: styles.adjustLabel(), children: (_a2 = features == null ? void 0 : features.labels) == null ? void 0 : _a2[filterName] }),
             /* @__PURE__ */ jsx(
-              Range2,
+              Range,
               {
                 min: -100,
                 max: 100,

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

@@ -7,12 +7,6 @@ interface DropdownProps {
      * @default true
      */
     autoSelectFirstItem?: boolean;
-    /**
-     * Whether to avoid collisions by flipping or shifting the dropdown position.
-     * When false, the dropdown will strictly follow the placement direction.
-     * @default true
-     */
-    avoidCollisions?: boolean;
     children?: React.ReactNode;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;

package/dist/components/dropdown/dist/index.js

@@ -13,7 +13,6 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
     autoSelectFirstItem = true,
-    avoidCollisions = true,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -78,14 +77,11 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     });
   });
   const lastPositionRef = useRef(null);
-  const middleware = useMemo(() => {
-    const baseMiddleware = [
-      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 })
-    ];
-    if (avoidCollisions) {
-      baseMiddleware.push(flip(), shift());
-    }
-    baseMiddleware.push(
+  const middleware = useMemo(
+    () => [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
+      flip(),
+      shift(),
       size({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
@@ -108,9 +104,9 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
           }
         }
       })
-    );
-    return baseMiddleware;
-  }, [isNested, offsetDistance, matchTriggerWidth, scrollRef, avoidCollisions]);
+    ],
+    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
+  );
   const { refs, floatingStyles, context, isPositioned } = useFloating({
     nodeId,
     open: isControlledOpen,

package/dist/components/dropdown/src/dropdown.js

@@ -54,7 +54,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested } = useMenuTree({
+  const { nodeId, item, isNested, tree } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -169,11 +169,17 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
+  const handleNavigate = useEventCallback((index) => {
+    setActiveIndex(index);
+    if (tree && index !== null) {
+      tree.events.emit("navigate", { nodeId, index });
+    }
+  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: setActiveIndex,
+    onNavigate: handleNavigate,
     loop: true
   });
   const typeahead = useTypeahead(context, {

package/dist/components/emoji-picker/dist/index.d.ts

@@ -15,24 +15,12 @@ type VirtualItem = {
     emojis: EmojiData[];
     type: "emojis";
 };
-interface CategoryNames {
-    activities: string;
-    animalsNature: string;
-    flags: string;
-    foodDrink: string;
-    frequentlyUsed: string;
-    objects: string;
-    smileysPeople: string;
-    symbols: string;
-    travelPlaces: string;
-}
 interface UseEmojiDataProps {
-    categoryNames?: CategoryNames;
     columns: number;
     searchQuery: string;
     showFrequentlyUsed: boolean;
 }
-declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed, categoryNames, }: UseEmojiDataProps): {
+declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
     categorizedData: VirtualItem[];
     categoryIndexMap: Map<EmojiCategory, number>;
     searchResults: {
@@ -64,22 +52,6 @@ interface EmojiPickerProps {
     showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
-    i18n?: {
-        noEmojisFoundTitle?: string;
-        noEmojisFoundDescription?: string;
-        footerPickAnEmoji?: string;
-        categories?: {
-            frequentlyUsed: string;
-            smileysPeople: string;
-            animalsNature: string;
-            foodDrink: string;
-            travelPlaces: string;
-            activities: string;
-            objects: string;
-            symbols: string;
-            flags: string;
-        };
-    };
 }
 declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;
 

package/dist/components/emoji-picker/dist/index.js

@@ -141,7 +141,7 @@ var emojiFooterTv = tcv({
 var emojiEmptyTv = tcv({
   slots: {
     container: "flex h-32 flex-col items-center justify-center p-4 text-center",
-    title: "text-body-large-strong",
+    title: "text-heading-display",
     description: "mt-2 w-32"
   },
   variants: {
@@ -179,20 +179,13 @@ var EmojiCategoryHeader = forwardRef(
     );
   }
 );
-var EmojiFooter = memo(function EmojiFooter2({
-  hoveredEmoji,
-  selectedEmoji,
-  variant = "dark",
-  i18n = {
-    pickAnEmoji: "Pick an emoji..."
-  }
-}) {
+function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
   var _a, _b;
   const tv = emojiFooterTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.footer(), children: [
     /* @__PURE__ */ jsx("div", { className: tv.emojiPreview(), children: ((_a = hoveredEmoji || selectedEmoji) == null ? void 0 : _a.emoji) || /* @__PURE__ */ jsx("div", { className: tv.emojiPreviewEmpty() }) }),
     /* @__PURE__ */ jsxs("div", { className: tv.emojiInfo(), children: [
-      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || i18n.pickAnEmoji }),
+      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || "Pick an emoji..." }),
       hoveredEmoji || selectedEmoji ? /* @__PURE__ */ jsxs("div", { className: tv.emojiCode(), children: [
         ":",
         (_b = hoveredEmoji || selectedEmoji) == null ? void 0 : _b.nameUrl,
@@ -200,7 +193,7 @@ var EmojiFooter = memo(function EmojiFooter2({
       ] }) : /* @__PURE__ */ jsx(Fragment, {})
     ] })
   ] });
-});
+}
 var EmojiItem = memo(function EmojiItem2(props) {
   const { emoji, onSelect, onHover, selected = false, variant = "dark" } = props;
   return /* @__PURE__ */ jsx(
@@ -216,17 +209,11 @@ var EmojiItem = memo(function EmojiItem2(props) {
     }
   );
 });
-var EmojiEmpty = memo(function EmojiEmpty2({
-  variant = "dark",
-  i18n = {
-    title: "No emoji found",
-    description: "You can search for an emoji by name or use the search bar to find it."
-  }
-}) {
+var EmojiEmpty = memo(function EmojiEmpty2({ variant = "dark" }) {
   const tv = emojiEmptyTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.container(), children: [
-    /* @__PURE__ */ jsx("div", { className: tv.title(), children: i18n.title }),
-    /* @__PURE__ */ jsx("p", { className: tv.description(), children: i18n.description })
+    /* @__PURE__ */ jsx("div", { className: tv.title(), children: "No emoji found" }),
+    /* @__PURE__ */ jsx("p", { className: tv.description(), children: "You can search for an emoji by name or use the search bar to find it." })
   ] });
 });
 var emojis = [
@@ -11740,15 +11727,15 @@ var emojis = [
   }
 ];
 var categories = [
-  { id: "frequently_used" },
-  { id: "smileys_people", range: [1, 460] },
-  { id: "animals_nature", range: [465, 591] },
-  { id: "food_drink", range: [592, 712] },
-  { id: "travel_places", range: [713, 922] },
-  { id: "activities", range: [923, 1001] },
-  { id: "objects", range: [1002, 1234] },
-  { id: "symbols", range: [1235, 1451] },
-  { id: "flags", range: [1452, 1719] }
+  { id: "frequently_used", name: "Frequently used" },
+  { id: "smileys_people", name: "Smileys & People", range: [1, 460] },
+  { id: "animals_nature", name: "Animals & Nature", range: [465, 591] },
+  { id: "food_drink", name: "Food & Drink", range: [592, 712] },
+  { id: "travel_places", name: "Travel & Places", range: [713, 922] },
+  { id: "activities", name: "Activities", range: [923, 1001] },
+  { id: "objects", name: "Objects", range: [1002, 1234] },
+  { id: "symbols", name: "Symbols", range: [1235, 1451] },
+  { id: "flags", name: "Flags", range: [1452, 1719] }
 ];
 var STORAGE_KEY = "emoji-picker-frequently-used";
 function getEmojiCategory(id) {
@@ -11782,34 +11769,7 @@ function saveFrequentlyUsedEmoji(emojiId) {
   } catch {
   }
 }
-var defaultCategoryNames = {
-  frequentlyUsed: "Frequently used",
-  smileysPeople: "Smileys & People",
-  animalsNature: "Animals & Nature",
-  foodDrink: "Food & Drink",
-  travelPlaces: "Travel & Places",
-  activities: "Activities",
-  objects: "Objects",
-  symbols: "Symbols",
-  flags: "Flags"
-};
-var categoryIdToI18nKey = {
-  frequently_used: "frequentlyUsed",
-  smileys_people: "smileysPeople",
-  animals_nature: "animalsNature",
-  food_drink: "foodDrink",
-  travel_places: "travelPlaces",
-  activities: "activities",
-  objects: "objects",
-  symbols: "symbols",
-  flags: "flags"
-};
-function useEmojiData({
-  searchQuery,
-  columns,
-  showFrequentlyUsed,
-  categoryNames = defaultCategoryNames
-}) {
+function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
   const [frequentlyUsed, setFrequentlyUsed] = useState([]);
   useEffect(() => {
     if (showFrequentlyUsed) {
@@ -11839,7 +11799,7 @@ function useEmojiData({
       items.push({
         type: "header",
         category: "frequently_used",
-        title: categoryNames.frequentlyUsed
+        title: "Frequently used"
       });
       for (let i = 0; i < frequentlyUsed.length; i += columns) {
         items.push({
@@ -11854,11 +11814,10 @@ function useEmojiData({
         (emoji) => emoji.id >= category.range[0] && emoji.id <= category.range[1]
       );
       if (categoryEmojis.length > 0) {
-        const i18nKey = categoryIdToI18nKey[category.id];
         items.push({
           type: "header",
           category: category.id,
-          title: i18nKey ? categoryNames[i18nKey] : category.id
+          title: category.name
         });
         for (let i = 0; i < categoryEmojis.length; i += columns) {
           items.push({
@@ -11869,7 +11828,7 @@ function useEmojiData({
       }
     });
     return items;
-  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed, categoryNames]);
+  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed]);
   const categoryIndexMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     categorizedData.forEach((item, index) => {
@@ -11925,8 +11884,6 @@ function useEmojiScroll({
   const [currentVisibleCategory, setCurrentVisibleCategory] = useState("frequently_used");
   const isScrollingToTarget = useRef(false);
   const isInternalUpdate = useRef(false);
-  const scrollingTimeoutRef = useRef(null);
-  const internalUpdateTimeoutRef = useRef(null);
   const virtualizer = useVirtualizer({
     count: categorizedData.length,
     getScrollElement: () => scrollRef.current,
@@ -11991,10 +11948,7 @@ function useEmojiScroll({
         align: "start",
         behavior: "auto"
       });
-      if (scrollingTimeoutRef.current) {
-        clearTimeout(scrollingTimeoutRef.current);
-      }
-      scrollingTimeoutRef.current = setTimeout(() => {
+      setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
@@ -12007,33 +11961,17 @@ function useEmojiScroll({
         align: "center",
         behavior: "auto"
       });
-      if (scrollingTimeoutRef.current) {
-        clearTimeout(scrollingTimeoutRef.current);
-      }
-      scrollingTimeoutRef.current = setTimeout(() => {
+      setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
   });
   const markInternalUpdate = useEventCallback(() => {
     isInternalUpdate.current = true;
-    if (internalUpdateTimeoutRef.current) {
-      clearTimeout(internalUpdateTimeoutRef.current);
-    }
-    internalUpdateTimeoutRef.current = setTimeout(() => {
+    setTimeout(() => {
       isInternalUpdate.current = false;
     }, 50);
   });
-  useEffect(() => {
-    return () => {
-      if (scrollingTimeoutRef.current) {
-        clearTimeout(scrollingTimeoutRef.current);
-      }
-      if (internalUpdateTimeoutRef.current) {
-        clearTimeout(internalUpdateTimeoutRef.current);
-      }
-    };
-  }, []);
   useEffect(() => {
     if (value && !searchQuery.trim() && !isInternalUpdate.current) {
       scrollToEmoji(value);
@@ -12058,6 +11996,17 @@ function useEmojiScroll({
     PADDING
   };
 }
+var categoriesWithIcons = [
+  { id: "frequently_used", name: "Frequently used", icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {}) },
+  { id: "smileys_people", name: "Smileys & People", icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
+  { id: "animals_nature", name: "Animals & Nature", icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
+  { id: "food_drink", name: "Food & Drink", icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
+  { id: "travel_places", name: "Travel & Places", icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
+  { id: "activities", name: "Activities", icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
+  { id: "objects", name: "Objects", icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
+  { id: "symbols", name: "Symbols", icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
+  { id: "flags", name: "Flags", icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
+];
 var EmojiPicker = memo(function EmojiPicker2({
   value,
   onChange,
@@ -12070,49 +12019,11 @@ var EmojiPicker = memo(function EmojiPicker2({
   showSearch = true,
   showFooter = true,
   children,
-  variant = "dark",
-  i18n = {
-    noEmojisFoundTitle: "No emoji found",
-    noEmojisFoundDescription: "You can search for an emoji by name or use the search bar to find it.",
-    footerPickAnEmoji: "Pick an emoji...",
-    categories: {
-      frequentlyUsed: "Frequently used",
-      smileysPeople: "Smileys & People",
-      animalsNature: "Animals & Nature",
-      foodDrink: "Food & Drink",
-      travelPlaces: "Travel & Places",
-      activities: "Activities",
-      objects: "Objects",
-      symbols: "Symbols",
-      flags: "Flags"
-    }
-  }
+  variant = "dark"
 }) {
   const [searchQuery, setSearchQuery] = useState("");
   const [hoveredEmoji, setHoveredEmoji] = useState(null);
-  const safeColumns = Math.max(1, columns);
   const tv = emojiTv({ variant });
-  const categoriesWithIcons = useMemo(
-    () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-      return [
-        {
-          id: "frequently_used",
-          name: (_a = i18n.categories) == null ? void 0 : _a.frequentlyUsed,
-          icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {})
-        },
-        { id: "smileys_people", name: (_b = i18n.categories) == null ? void 0 : _b.smileysPeople, icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
-        { id: "animals_nature", name: (_c = i18n.categories) == null ? void 0 : _c.animalsNature, icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
-        { id: "food_drink", name: (_d = i18n.categories) == null ? void 0 : _d.foodDrink, icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
-        { id: "travel_places", name: (_e = i18n.categories) == null ? void 0 : _e.travelPlaces, icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
-        { id: "activities", name: (_f = i18n.categories) == null ? void 0 : _f.activities, icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
-        { id: "objects", name: (_g = i18n.categories) == null ? void 0 : _g.objects, icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
-        { id: "symbols", name: (_h = i18n.categories) == null ? void 0 : _h.symbols, icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
-        { id: "flags", name: (_i = i18n.categories) == null ? void 0 : _i.flags, icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
-      ];
-    },
-    [i18n.categories]
-  );
   const {
     categorizedData,
     categoryIndexMap,
@@ -12120,9 +12031,8 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition
   } = useEmojiData({
     searchQuery,
-    columns: safeColumns,
-    showFrequentlyUsed,
-    categoryNames: i18n.categories
+    columns,
+    showFrequentlyUsed
   });
   const {
     scrollRef,
@@ -12138,7 +12048,7 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition,
     searchQuery,
     value,
-    columns: safeColumns
+    columns
   });
   const availableCategories = useMemo(() => {
     return categoriesWithIcons.filter((category) => {
@@ -12147,7 +12057,7 @@ var EmojiPicker = memo(function EmojiPicker2({
       }
       return true;
     });
-  }, [categoriesWithIcons, showFrequentlyUsed]);
+  }, [showFrequentlyUsed]);
   const handleEmojiSelect = useEventCallback((emoji) => {
     markInternalUpdate();
     addToFrequentlyUsed(emoji.id);
@@ -12163,7 +12073,7 @@ var EmojiPicker = memo(function EmojiPicker2({
   const rootStyle = {
     "--emoji-height": `${height}px`,
     "--emoji-padding": `${PADDING2}px`,
-    "--emoji-columns": `${safeColumns}`
+    "--emoji-columns": `${columns}`
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -12266,16 +12176,7 @@ var EmojiPicker = memo(function EmojiPicker2({
                         },
                         virtualItem.key
                       );
-                    }) : /* @__PURE__ */ jsx(
-                      EmojiEmpty,
-                      {
-                        variant,
-                        i18n: {
-                          title: i18n.noEmojisFoundTitle,
-                          description: i18n.noEmojisFoundDescription
-                        }
-                      }
-                    )
+                    }) : /* @__PURE__ */ jsx(EmojiEmpty, { variant })
                   }
                 )
               }
@@ -12287,10 +12188,7 @@ var EmojiPicker = memo(function EmojiPicker2({
           {
             hoveredEmoji,
             selectedEmoji: value || null,
-            variant,
-            i18n: {
-              pickAnEmoji: i18n.footerPickAnEmoji
-            }
+            variant
           }
         ),
         children

package/dist/components/form/src/adapters/range-adapter.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Range as Range2 } from "../../../range/dist/index.js";
+import { Range } from "../../../range/dist/index.js";
 import { filterFormProps, BaseAdapter } from "./base-adapter.js";
 function RangeAdapter({
   className,
@@ -23,7 +23,7 @@ function RangeAdapter({
       legendMode: true,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          Range2,
+          Range,
           {
             value,
             onChange: (inputValue) => onChange(inputValue),

package/dist/components/icon-button/dist/index.d.ts

@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "as"> {
     readOnly?: boolean;
     size?: "default" | "large" | "reset";
     tooltip?: TooltipProps;
-    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "submit" | "reset";
+    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "reset";
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;