@kommo-crm/crm-react-ui-kit 1.1.1-beta.1 → 1.1.1-beta.3

package/dist/components/RadioGroup/RadioGroup.themes.js

@@ -1,6 +1,3 @@
-const o = {
-  "--crm-ui-kit-radio-group-spacing": "8px"
-};
-export {
-  o as RadioGroupTheme
+export const RadioGroupTheme = {
+    '--crm-ui-kit-radio-group-spacing': '8px',
 };

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.context.d.ts

@@ -1,5 +1,5 @@
-import { RadioItemContextProps } from './ItemRoot.props';
+import { type RadioItemContextProps } from './ItemRoot.props';
 declare const DISPLAY_NAME = "RadioGroup.ItemRoot";
-declare const RadioItemRootProvider: import('../../../../lib/react/createComponentContext').ContextProps<RadioItemContextProps>, useRadioItemRootContext: (consumerName: string) => RadioItemContextProps;
+declare const RadioItemRootProvider: import("../../../../lib/react/createComponentContext").ContextProps<RadioItemContextProps>, useRadioItemRootContext: (consumerName: string) => RadioItemContextProps;
 export { RadioItemRootProvider, useRadioItemRootContext, DISPLAY_NAME };
 //# sourceMappingURL=ItemRoot.context.d.ts.map

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.context.js

@@ -1,7 +1,4 @@
-import { createComponentContext as o } from "../../../../lib/react/createComponentContext/createComponentContext.js";
-const t = "RadioGroup.ItemRoot", [r, m] = o(t);
-export {
-  t as DISPLAY_NAME,
-  r as RadioItemRootProvider,
-  m as useRadioItemRootContext
-};
+import { createComponentContext } from 'src/lib/react';
+const DISPLAY_NAME = 'RadioGroup.ItemRoot';
+const [RadioItemRootProvider, useRadioItemRootContext] = createComponentContext(DISPLAY_NAME);
+export { RadioItemRootProvider, useRadioItemRootContext, DISPLAY_NAME };

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { ItemRootProps } from './ItemRoot.props';
+import React from 'react';
+import { type ItemRootProps } from './ItemRoot.props';
 export declare const ItemRoot: React.FC<ItemRootProps>;
 //# sourceMappingURL=ItemRoot.d.ts.map

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.js

@@ -1,34 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as d } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as l } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { useRadioGroupContext as n } from "../../RadioGroup.context.js";
-import { DISPLAY_NAME as s, RadioItemRootProvider as _ } from "./ItemRoot.context.js";
-import '../../../../assets/ItemRoot3.css';const c = "_item_root_jon4b_1", b = "_disabled_jon4b_7", e = {
-  item_root: c,
-  disabled: b
-}, p = ({
-  children: i,
-  theme: m,
-  ...o
-}) => {
-  const r = l(m), { isDisabled: a } = n(s);
-  return /* @__PURE__ */ t(_, { ...o, children: /* @__PURE__ */ t(
-    "div",
-    {
-      className: d(e.item_root, r, {
-        /**
-         * If `isDisabled` was passed directly to the component
-         * Blocking a specific Radio button.
-         * If passed to the RadioGroup component
-         * We block all Radio buttons.
-         */
-        [e.disabled]: a || o.isDisabled
-      }),
-      children: i
-    }
-  ) });
-};
-p.displayName = s;
-export {
-  p as ItemRoot
+import React from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { useRadioGroupContext } from '../../RadioGroup.context';
+import { RadioItemRootProvider, DISPLAY_NAME } from './ItemRoot.context';
+import s from './ItemRoot.module.css';
+export const ItemRoot = ({ children, theme, ...rest }) => {
+    const themeClassName = useThemeClassName(theme);
+    const { isDisabled } = useRadioGroupContext(DISPLAY_NAME);
+    return (React.createElement(RadioItemRootProvider, { ...rest },
+        React.createElement("div", { className: cx(s.item_root, themeClassName, {
+                /**
+                 * If `isDisabled` was passed directly to the component
+                 * Blocking a specific Radio button.
+                 * If passed to the RadioGroup component
+                 * We block all Radio buttons.
+                 */
+                [s.disabled]: isDisabled || rest.isDisabled,
+            }) }, children)));
 };
+ItemRoot.displayName = DISPLAY_NAME;

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.props.d.ts

@@ -1,5 +1,5 @@
-import { VisuallyHiddenInputProps } from '../../../VisuallyHiddenInput';
-import { RadioProps } from '../../';
+import { VisuallyHiddenInputProps } from 'src/components/VisuallyHiddenInput';
+import { type RadioProps } from '../../';
 import { ItemRootThemeType } from './ItemRoot.themes';
 export type ItemRootProps = Omit<VisuallyHiddenInputProps<RadioProps>, 'theme' | 'isDefaultChecked' | 'isChecked' | 'name' | 'onChange'> & {
     /**

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/RadioGroup/components/ItemRoot/ItemRoot.themes.js

@@ -1,6 +1,3 @@
-const o = {
-  "--crm-ui-kit-radio-group-item-root-disabled-opacity": "var(--crm-ui-kit-disabled-opacity)"
-};
-export {
-  o as RadioGroupItemRootTheme
+export const RadioGroupItemRootTheme = {
+    '--crm-ui-kit-radio-group-item-root-disabled-opacity': 'var(--crm-ui-kit-disabled-opacity)',
 };

package/dist/components/RadioGroup/components/ItemRoot/index.js

@@ -1,6 +1,2 @@
-import { ItemRoot as t } from "./ItemRoot.js";
-import { RadioGroupItemRootTheme as r } from "./ItemRoot.themes.js";
-export {
-  t as ItemRoot,
-  r as RadioGroupItemRootTheme
-};
+export { ItemRoot } from './ItemRoot';
+export { RadioGroupItemRootTheme, } from './ItemRoot.themes';

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { RadioProps } from './Radio.props';
+import React from 'react';
+import { type RadioProps } from './Radio.props';
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/RadioGroup/components/Radio/Radio.js

@@ -1,49 +1,30 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { c as s } from "../../../../index-L8X2o7IH.mjs";
-import { VisuallyHiddenInput as h } from "../../../VisuallyHiddenInput/VisuallyHiddenInput.js";
-import { useThemeClassName as D } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { useRadioGroupContext as w } from "../../RadioGroup.context.js";
-import { useRadioItemRootContext as b } from "../ItemRoot/ItemRoot.context.js";
-import '../../../../assets/Radio.css';const y = "_wrapper_142z1_1", I = "_radio_142z1_6", v = "_input_142z1_28", o = {
-  wrapper: y,
-  radio: I,
-  input: v
-}, a = "RadioGroup.Radio", z = x((m, p) => {
-  const { theme: n, className: d } = m, c = D(n), {
-    value: l,
-    defaultValue: t,
-    isDisabled: u,
-    ...r
-  } = w(a), {
-    value: e,
-    isDisabled: f,
-    className: N,
-    ...R
-  } = b(a), _ = () => t ? {
-    isDefaultChecked: t === e,
-    ...r
-  } : {
-    isChecked: l === e,
-    ...r
-  };
-  return /* @__PURE__ */ C("div", { className: s(o.wrapper, c, N), children: [
-    /* @__PURE__ */ i(
-      h,
-      {
-        ref: p,
-        className: s(o.input, d),
-        type: "radio",
-        value: e,
-        isDisabled: u || f,
-        ..._(),
-        ...R
-      }
-    ),
-    /* @__PURE__ */ i("span", { className: s(o.radio) })
-  ] });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { VisuallyHiddenInput } from 'src/components/VisuallyHiddenInput';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { useRadioGroupContext } from '../../RadioGroup.context';
+import { useRadioItemRootContext } from '../ItemRoot/ItemRoot.context';
+import s from './Radio.module.css';
+const DISPLAY_NAME = 'RadioGroup.Radio';
+export const Radio = forwardRef((props, ref) => {
+    const { theme, className } = props;
+    const themeClassName = useThemeClassName(theme);
+    const { value: currentValue, defaultValue, isDisabled, ...restRadioGroupContext } = useRadioGroupContext(DISPLAY_NAME);
+    const { value, isDisabled: itemRootIsDisabled, className: itemRootClassName, ...rest } = useRadioItemRootContext(DISPLAY_NAME);
+    const getPropsBasedOnType = () => {
+        if (defaultValue) {
+            return {
+                isDefaultChecked: defaultValue === value,
+                ...restRadioGroupContext,
+            };
+        }
+        return {
+            isChecked: currentValue === value,
+            ...restRadioGroupContext,
+        };
+    };
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, itemRootClassName) },
+        React.createElement(VisuallyHiddenInput, { ref: ref, className: cx(s.input, className), type: "radio", value: value, isDisabled: isDisabled || itemRootIsDisabled, ...getPropsBasedOnType(), ...rest }),
+        React.createElement("span", { className: cx(s.radio) })));
 });
-z.displayName = a;
-export {
-  z as Radio
-};
+Radio.displayName = DISPLAY_NAME;

package/dist/components/RadioGroup/components/Radio/Radio.props.d.ts

@@ -1,4 +1,4 @@
-import { RadioThemeType } from './Radio.themes';
+import { type RadioThemeType } from './Radio.themes';
 export type RadioProps = {
     /**
      * `class` attribute for `Radio`.

package/dist/components/RadioGroup/components/Radio/Radio.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/RadioGroup/components/Radio/Radio.themes.js

@@ -1,19 +1,16 @@
-const i = {
-  "--crm-ui-kit-radio-size": "20px",
-  "--crm-ui-kit-radio-z-index": "3",
-  "--crm-ui-kit-radio-checked-circle-size": "8px",
-  "--crm-ui-kit-radio-checked-circle-color": "var(--crm-ui-kit-color-blueberry)",
-  "--crm-ui-kit-radio-border-width": "1px",
-  "--crm-ui-kit-radio-border-radius": "50%",
-  "--crm-ui-kit-radio-border-style": "solid",
-  "--crm-ui-kit-radio-border-color": "var(--crm-ui-kit-palette-border-primary)",
-  "--crm-ui-kit-radio-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-radio-focus-visible-outline-color": "var(--crm-ui-kit-palette-focus-visible-color)",
-  "--crm-ui-kit-radio-focus-visible-outline-width": "var(--crm-ui-kit-palette-focus-visible-outline-width)",
-  "--crm-ui-kit-radio-focus-visible-outline-style": "var(--crm-ui-kit-palette-focus-visible-outline-style)",
-  "--crm-ui-kit-radio-focus-visible-outline-offset": "var(--crm-ui-kit-palette-focus-visible-outline-offset)",
-  "--crm-ui-kit-radio-focus-visible-border-radius": "50%"
-};
-export {
-  i as RadioPrimaryTheme
+export const RadioPrimaryTheme = {
+    '--crm-ui-kit-radio-size': '20px',
+    '--crm-ui-kit-radio-z-index': '3',
+    '--crm-ui-kit-radio-checked-circle-size': '8px',
+    '--crm-ui-kit-radio-checked-circle-color': 'var(--crm-ui-kit-color-blueberry)',
+    '--crm-ui-kit-radio-border-width': '1px',
+    '--crm-ui-kit-radio-border-radius': '50%',
+    '--crm-ui-kit-radio-border-style': 'solid',
+    '--crm-ui-kit-radio-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+    '--crm-ui-kit-radio-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-radio-focus-visible-outline-color': 'var(--crm-ui-kit-palette-focus-visible-color)',
+    '--crm-ui-kit-radio-focus-visible-outline-width': 'var(--crm-ui-kit-palette-focus-visible-outline-width)',
+    '--crm-ui-kit-radio-focus-visible-outline-style': 'var(--crm-ui-kit-palette-focus-visible-outline-style)',
+    '--crm-ui-kit-radio-focus-visible-outline-offset': 'var(--crm-ui-kit-palette-focus-visible-outline-offset)',
+    '--crm-ui-kit-radio-focus-visible-border-radius': '50%',
 };

package/dist/components/RadioGroup/components/Radio/index.js

@@ -1,6 +1,2 @@
-import { Radio as e } from "./Radio.js";
-import { RadioPrimaryTheme as a } from "./Radio.themes.js";
-export {
-  e as Radio,
-  a as RadioPrimaryTheme
-};
+export { Radio } from './Radio';
+export { RadioPrimaryTheme } from './Radio.themes';

package/dist/components/RadioGroup/index.js

@@ -1,14 +1,4 @@
-import { RadioGroup as e } from "./RadioGroup.js";
-import { RadioGroupTheme as t } from "./RadioGroup.themes.js";
-import { ItemRoot as R } from "./components/ItemRoot/ItemRoot.js";
-import { RadioGroupItemRootTheme as f } from "./components/ItemRoot/ItemRoot.themes.js";
-import { Radio as x } from "./components/Radio/Radio.js";
-import { RadioPrimaryTheme as h } from "./components/Radio/Radio.themes.js";
-export {
-  R as ItemRoot,
-  x as Radio,
-  e as RadioGroup,
-  f as RadioGroupItemRootTheme,
-  t as RadioGroupTheme,
-  h as RadioPrimaryTheme
-};
+export { RadioGroup } from './RadioGroup';
+export { RadioGroupTheme } from './RadioGroup.themes';
+export { ItemRoot, RadioGroupItemRootTheme, } from './components/ItemRoot';
+export { Radio, RadioPrimaryTheme, } from './components/Radio';

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

@@ -1,5 +1,5 @@
 import { SelectContextProps } from './Select.props';
 declare const DISPLAY_NAME = "Select";
-declare const SelectProvider: import('../../lib/react/createComponentContext').ContextProps<SelectContextProps>, useSelectContext: (consumerName: string) => NonNullable<SelectContextProps>;
+declare const SelectProvider: import("../../lib/react/createComponentContext").ContextProps<SelectContextProps>, useSelectContext: (consumerName: string) => NonNullable<SelectContextProps>;
 export { SelectProvider, useSelectContext, DISPLAY_NAME };
 //# sourceMappingURL=Select.context.d.ts.map

package/dist/components/Select/Select.context.js

@@ -1,7 +1,4 @@
-import { createComponentContext as e } from "../../lib/react/createComponentContext/createComponentContext.js";
-const t = "Select", [c, n] = e(t);
-export {
-  t as DISPLAY_NAME,
-  c as SelectProvider,
-  n as useSelectContext
-};
+import { createComponentContext } from 'src/lib/react';
+const DISPLAY_NAME = 'Select';
+const [SelectProvider, useSelectContext] = createComponentContext(DISPLAY_NAME);
+export { SelectProvider, useSelectContext, DISPLAY_NAME };

package/dist/components/Select/Select.js

@@ -1,79 +1,54 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as R, useState as a, useCallback as r } from "react";
-import { c as b } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as z } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as u } from "../../utils/noop/noop.js";
-import { SelectProvider as j, DISPLAY_NAME as k } from "./Select.context.js";
-import { Button as y } from "./components/Button/Button.js";
-import { Item as M } from "./components/Item/Item.js";
-import { List as T } from "./components/List/List.js";
-import { Value as X } from "./components/Value/Value.js";
-import { Arrow as Y } from "./components/Arrow/Arrow.js";
-import { Icon as q } from "./components/Icon/Icon.js";
-import F from "./components/Option/Option.js";
-import '../../assets/Select.css';const G = "_select_11uzo_1", J = "_opened_11uzo_6", h = {
-  select: G,
-  opened: J
-}, K = -1, e = R((n, O) => {
-  const {
-    theme: I,
-    value: v,
-    defaultValue: C,
-    onChange: l = u,
-    onOpenChange: i = u,
-    className: _,
-    children: x,
-    isDisabled: t = !1,
-    isOpen: N = !1,
-    isDefaultOpen: V = !1,
-    isInvalid: g = !1
-  } = n, s = "value" in n, m = "isOpen" in n, A = z(I), [D, c] = a(V), [P, S] = a(K), [d, E] = a(C), H = s ? v : d, p = m ? N : D, w = r(
-    (o) => {
-      !t && !m && (c(o), i(o));
-    },
-    [t, i]
-  ), B = r(
-    (o) => {
-      s || E(o), l(o), c(!1);
-    },
-    [s, l]
-  ), L = r((o) => {
-    S(o);
-  }, []);
-  return /* @__PURE__ */ f(
-    j,
-    {
-      hoveredIndex: P,
-      onHoveredIndexChange: L,
-      onChange: B,
-      isOpened: p,
-      onOpen: w,
-      isDisabled: t,
-      isInvalid: g,
-      value: H,
-      defaultValue: d,
-      children: /* @__PURE__ */ f(
-        "div",
-        {
-          className: b(h.select, A, _, {
-            [h.opened]: p
-          }),
-          ref: O,
-          children: x
+import React, { forwardRef, useCallback, useState } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { noop } from 'src/utils';
+import { DISPLAY_NAME, SelectProvider } from './Select.context';
+import { Button } from './components/Button';
+import { Item } from './components/Item';
+import { List } from './components/List';
+import { Value } from './components/Value/Value';
+import { Arrow } from './components/Arrow/Arrow';
+import { Icon } from './components/Icon/Icon';
+import Option from './components/Option/Option';
+import s from './Select.module.css';
+const BASE_HOVER_INDEX = -1;
+export const Select = forwardRef((props, ref) => {
+    const { theme, value: valueProp, defaultValue: defaultValueProp, onChange = noop, onOpenChange = noop, className, children, isDisabled = false, isOpen: isOpenProp = false, isDefaultOpen = false, isInvalid = false, } = props;
+    const isControlled = 'value' in props;
+    const isOpenControlled = 'isOpen' in props;
+    const themeClassName = useThemeClassName(theme);
+    const [isOpened, setIsOpened] = useState(isDefaultOpen);
+    const [hoveredIndex, setHoveredIndex] = useState(BASE_HOVER_INDEX);
+    const [defaultValue, setDefaultValue] = useState(defaultValueProp);
+    const selected = isControlled ? valueProp : defaultValue;
+    const isOpen = isOpenControlled ? isOpenProp : isOpened;
+    const handleOpen = useCallback((open) => {
+        if (!isDisabled && !isOpenControlled) {
+            setIsOpened(open);
+            onOpenChange(open);
         }
-      )
-    }
-  );
+    }, [isDisabled, onOpenChange]);
+    const handleChange = useCallback((item) => {
+        if (!isControlled) {
+            setDefaultValue(item);
+        }
+        onChange(item);
+        setIsOpened(false);
+    }, [isControlled, onChange]);
+    const handleHoveredIndexChange = useCallback((index) => {
+        setHoveredIndex(index);
+    }, []);
+    return (React.createElement(SelectProvider, { hoveredIndex: hoveredIndex, onHoveredIndexChange: handleHoveredIndexChange, onChange: handleChange, isOpened: isOpen, onOpen: handleOpen, isDisabled: isDisabled, isInvalid: isInvalid, value: selected, defaultValue: defaultValue },
+        React.createElement("div", { className: cx(s.select, themeClassName, className, {
+                [s.opened]: isOpen,
+            }), ref: ref }, children)));
 });
-e.displayName = k;
-e.Root = e;
-e.List = T;
-e.Item = M;
-e.Button = y;
-e.Value = X;
-e.Arrow = Y;
-e.Icon = q;
-e.Option = F;
-export {
-  e as Select
-};
+Select.displayName = DISPLAY_NAME;
+Select.Root = Select;
+Select.List = List;
+Select.Item = Item;
+Select.Button = Button;
+Select.Value = Value;
+Select.Arrow = Arrow;
+Select.Icon = Icon;
+Select.Option = Option;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { ItemProps } from './components/Item/Item.props';
 import { ListProps } from './components/List/List.props';
 import { SelectItem } from './Select.types';

package/dist/components/Select/Select.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/Select/Select.theme.js

@@ -1,7 +1,4 @@
-const e = {
-  "--crm-ui-kit-select-z-index": "auto",
-  "--crm-ui-kit-select-opened-z-index": "60"
-};
-export {
-  e as SelectRootTheme
+export const SelectRootTheme = {
+    '--crm-ui-kit-select-z-index': 'auto',
+    '--crm-ui-kit-select-opened-z-index': '60',
 };

package/dist/components/Select/Select.types.js

@@ -1 +1 @@
-
+export {};

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { ArrowProps } from './Arrow.props';
 export declare const Arrow: React.ForwardRefExoticComponent<ArrowProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Arrow.d.ts.map

package/dist/components/Select/components/Arrow/Arrow.js

@@ -1,19 +1,14 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as o from "react";
-import { forwardRef as c } from "react";
-import { c as l } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as p } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import '../../../../assets/Arrow2.css';const i = (e) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 21, height: 21, fill: "none", ...e }, /* @__PURE__ */ o.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "m5.25 8.826 1-1 4.5 4.4 4.5-4.4 1 1-5.5 5.5-5.5-5.5Z", clipRule: "evenodd" })), w = "_wrapper_hk1oh_1", h = {
-  wrapper: w
-}, d = "Select.Arrow", f = 20, A = 20, g = c((e, t) => {
-  const {
-    theme: s,
-    children: a = /* @__PURE__ */ r(i, { width: f, height: A }),
-    className: m
-  } = e, n = p(s);
-  return /* @__PURE__ */ r("span", { className: l(h.wrapper, m, n), ref: t, children: a });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import DropdownArrowIcon from 'src/icons/dropdownArrow.svg';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import s from './Arrow.module.css';
+const DISPLAY_NAME = 'Select.Arrow';
+const BASE_WIDTH = 20;
+const BASE_HEIGHT = 20;
+export const Arrow = forwardRef((props, ref) => {
+    const { theme, children = React.createElement(DropdownArrowIcon, { width: BASE_WIDTH, height: BASE_HEIGHT }), className, } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("span", { className: cx(s.wrapper, className, themeClassName), ref: ref }, children));
 });
-g.displayName = d;
-export {
-  g as Arrow
-};
+Arrow.displayName = DISPLAY_NAME;

package/dist/components/Select/components/Arrow/Arrow.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/Select/components/Arrow/Arrow.theme.js

@@ -1,8 +1,5 @@
-const e = {
-  "--crm-ui-kit-select-arrow-width": "20px",
-  "--crm-ui-kit-select-arrow-height": "20px",
-  "--crm-ui-kit-select-margin": "0 0 0 auto"
-};
-export {
-  e as SelectArrowTheme
+export const SelectArrowTheme = {
+    '--crm-ui-kit-select-arrow-width': '20px',
+    '--crm-ui-kit-select-arrow-height': '20px',
+    '--crm-ui-kit-select-margin': '0 0 0 auto',
 };

package/dist/components/Select/components/Arrow/index.js

@@ -1,4 +1 @@
-import { SelectArrowTheme as o } from "./Arrow.theme.js";
-export {
-  o as SelectArrowTheme
-};
+export { SelectArrowTheme } from './Arrow.theme';

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

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { SelectButtonProps } from '../../../SelectButton';
+import React from 'react';
+import { SelectButtonProps } from 'src/components/SelectButton';
 export type ButtonProps = SelectButtonProps;
 export declare const Button: React.ForwardRefExoticComponent<SelectButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Select/components/Button/Button.js

@@ -1,28 +1,26 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as a, useRef as d, useCallback as g, useEffect as B } from "react";
-import { SelectButton as R } from "../../../SelectButton/SelectButton.js";
-import { mergeRefs as S } from "../../../../lib/utils.js";
-import { useSelectContext as x } from "../../Select.context.js";
-const n = "Select.Button", b = a((s, f) => {
-  const { theme: c, ...l } = s, { isDisabled: m, onOpen: t, isOpened: e, isInvalid: u } = x(n), o = d(null), i = g(() => {
-    t(!e);
-  }, [t]);
-  return B(() => () => {
-    var r;
-    e && ((r = o.current) == null || r.focus());
-  }, [e]), /* @__PURE__ */ p(
-    R,
-    {
-      ref: S(o, f),
-      onToggle: i,
-      theme: c,
-      isDisabled: m,
-      isInvalid: u,
-      ...l
-    }
-  );
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { SelectButton } from 'src/components/SelectButton';
+import { mergeRefs } from 'src/lib/utils';
+import { useSelectContext } from '../../Select.context';
+const DISPLAY_NAME = 'Select.Button';
+export const Button = forwardRef((props, ref) => {
+    const { theme, ...rest } = props;
+    const { isDisabled, onOpen, isOpened, isInvalid } = useSelectContext(DISPLAY_NAME);
+    const selectButtonRef = useRef(null);
+    const handleToggle = useCallback(() => {
+        onOpen(!isOpened);
+    }, [onOpen]);
+    useEffect(() => {
+        return () => {
+            /**
+             * This is necessary so that after closing the list,
+             * the focus remains on the button.
+             */
+            if (isOpened) {
+                selectButtonRef.current?.focus();
+            }
+        };
+    }, [isOpened]);
+    return (React.createElement(SelectButton, { ref: mergeRefs(selectButtonRef, ref), onToggle: handleToggle, theme: theme, isDisabled: isDisabled, isInvalid: isInvalid, ...rest }));
 });
-b.displayName = n;
-export {
-  b as Button
-};
+Button.displayName = DISPLAY_NAME;