@infomaximum/ui-kit 0.11.1 → 0.12.0

package/dist/components/BaseTooltip/BaseTooltip.js

@@ -67,7 +67,7 @@ const BaseTooltip = memo(({
   });
   const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement, context);
   const renderFloatingElement = () => {
-    return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: getBaseTooltipFloatingWrapperStyle(floatingPlacement), style: {
+    return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: getBaseTooltipFloatingWrapperStyle(floatingPlacement, withArrow), style: {
       ...floatingStyles,
       zIndex
     }, className, children: [

package/dist/components/BaseTooltip/BaseTooltip.styles.d.ts

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-export declare const getBaseTooltipFloatingWrapperStyle: (placement: Placement) => {};
+export declare const getBaseTooltipFloatingWrapperStyle: (placement: Placement, withArrow: boolean) => {};
 export declare const baseTooltipReferenceWrapperStyle: {
     display: string;
     width: string;

package/dist/components/BaseTooltip/BaseTooltip.styles.js

@@ -1,29 +1,31 @@
-import { isTopSide, FLOATING_OFFSET_WITH_ARROW_HEIGHT, isBottomSide, isLeftSide, isRightSide } from "./BaseTooltip.utils.js";
-const getPadding = (placement) => {
+import { FLOATING_OFFSET } from "../../utils/consts.js";
+import { isTopSide, isBottomSide, isLeftSide, isRightSide, FLOATING_OFFSET_WITH_ARROW_HEIGHT } from "./BaseTooltip.utils.js";
+const getPadding = (placement, withArrow) => {
+  const padding = withArrow ? FLOATING_OFFSET_WITH_ARROW_HEIGHT : FLOATING_OFFSET;
   if (isTopSide(placement)) {
     return {
-      paddingBottom: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+      paddingBottom: padding
     };
   }
   if (isBottomSide(placement)) {
     return {
-      paddingTop: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+      paddingTop: padding
     };
   }
   if (isLeftSide(placement)) {
     return {
-      paddingRight: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+      paddingRight: padding
     };
   }
   if (isRightSide(placement)) {
     return {
-      paddingLeft: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+      paddingLeft: padding
     };
   }
 };
-const getBaseTooltipFloatingWrapperStyle = (placement) => {
+const getBaseTooltipFloatingWrapperStyle = (placement, withArrow) => {
   return {
-    ...getPadding(placement)
+    ...getPadding(placement, withArrow)
   };
 };
 const baseTooltipReferenceWrapperStyle = {

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: FC<import('react').PropsWithChildren<BreadcrumbProps>>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,20 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { withThemeProvider } from "../../hocs/withThemeProvider.js";
+import { getBreadcrumbDefaultStyle } from "./Breadcrumb.styles.js";
+import { BreadcrumbBlock } from "./components/BreadcrumbBlock/BreadcrumbBlock.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const BreadcrumbComponent = memo(({
+  items = [],
+  size = "middle",
+  params = {},
+  itemRender
+}) => {
+  const theme = useTheme();
+  const breadcrumbDefaultStyle = getBreadcrumbDefaultStyle();
+  return /* @__PURE__ */ jsx("nav", { css: breadcrumbDefaultStyle.wrapper(theme), children: /* @__PURE__ */ jsx("ol", { css: breadcrumbDefaultStyle.list(), children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbBlock, { index, item, size, params, isLastItem: items.length - 1 === index, items, itemRender }, index.toString())) }) });
+});
+const Breadcrumb = withThemeProvider(BreadcrumbComponent);
+export {
+  Breadcrumb
+};

package/dist/components/Breadcrumb/Breadcrumb.styles.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from 'themes';
+export declare const getBreadcrumbDefaultStyle: () => {
+    wrapper: (theme: Theme) => {
+        readonly boxSizing: "border-box";
+        readonly margin: `0 -${number}px`;
+        readonly padding: 0;
+    };
+    list: () => {
+        readonly display: "flex";
+        readonly flexWrap: "wrap";
+        readonly listStyle: "none";
+        readonly padding: 0;
+        readonly margin: 0;
+    };
+};

package/dist/components/Breadcrumb/Breadcrumb.styles.js

@@ -0,0 +1,21 @@
+import { getBreadcrumbTokens } from "./Breadcrumb.tokens.js";
+const getBreadcrumbDefaultStyle = () => ({
+  wrapper: (theme) => {
+    const breadcrumbTokens = getBreadcrumbTokens(theme);
+    return {
+      boxSizing: "border-box",
+      margin: `0 -${breadcrumbTokens.breadcrumbItemPaddingHorizontal}px`,
+      padding: 0
+    };
+  },
+  list: () => ({
+    display: "flex",
+    flexWrap: "wrap",
+    listStyle: "none",
+    padding: 0,
+    margin: 0
+  })
+});
+export {
+  getBreadcrumbDefaultStyle
+};

package/dist/components/Breadcrumb/Breadcrumb.tokens.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from 'themes';
+export declare const getBreadcrumbTokens: (theme: Theme) => {
+    breadcrumbItem: "#8C8C8C";
+    breadcrumbItemHover: "#595959";
+    breadcrumbItemBgHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    breadcrumbLastItem: "#262626";
+    breadcrumbSeparator: "#BFBFBF";
+    breadcrumbItemHeight: number;
+    breadcrumbItemPaddingHorizontal: number;
+    breadcrumbSeparatorMarginHorizontal: number;
+};
+export type BreadcrumbTokensType = ReturnType<typeof getBreadcrumbTokens>;

package/dist/components/Breadcrumb/Breadcrumb.tokens.js

@@ -0,0 +1,13 @@
+const getBreadcrumbTokens = (theme) => ({
+  breadcrumbItem: theme.textSecondary,
+  breadcrumbItemHover: theme.textComplimentary,
+  breadcrumbItemBgHover: theme.bgIconHover,
+  breadcrumbLastItem: theme.textPrimary,
+  breadcrumbSeparator: theme.textHint,
+  breadcrumbItemHeight: 24,
+  breadcrumbItemPaddingHorizontal: 4,
+  breadcrumbSeparatorMarginHorizontal: 4
+});
+export {
+  getBreadcrumbTokens
+};

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

@@ -0,0 +1,20 @@
+import { DropdownMenu, DropdownProps } from 'components/Dropdown';
+import { MouseEvent, ReactNode } from 'react';
+export interface RouteItem {
+    title?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    dropdownProps?: DropdownProps;
+    menu?: DropdownMenu;
+    href?: string;
+    path?: string;
+    onClick?: (e: MouseEvent) => void;
+}
+export type BreadcrumbSizeType = "middle" | "small";
+export type BreadcrumbParamsType = Record<string, string | number>;
+export interface BreadcrumbProps {
+    params?: BreadcrumbParamsType;
+    items?: RouteItem[];
+    size?: BreadcrumbSizeType;
+    itemRender?: (route: RouteItem, params: BreadcrumbParamsType, routes: RouteItem[], paths: string[]) => React.ReactNode;
+}

package/dist/components/Breadcrumb/components/BreadcrumbBlock/BreadcrumbBlock.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbBlockProps } from './BreadcrumbBlock.types';
+export declare const BreadcrumbBlock: FC<BreadcrumbBlockProps>;

package/dist/components/Breadcrumb/components/BreadcrumbBlock/BreadcrumbBlock.js

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { isFunction } from "lodash-es";
+import { BreadcrumbItem } from "../BreadcrumbItem/BreadcrumbItem.js";
+import { getBreadcrumbBlockStyle } from "./BreadcrumbBlock.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const BreadcrumbBlock = memo(({
+  item,
+  isLastItem,
+  size,
+  params,
+  index,
+  items,
+  itemRender
+}) => {
+  const theme = useTheme();
+  const breadcrumbBlockStyle = getBreadcrumbBlockStyle(size);
+  const renderItem = () => {
+    if (isFunction(itemRender)) {
+      return itemRender(item, params, items, items.map((item2) => item2.path ?? ""));
+    }
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BreadcrumbItem, { routeItem: item, isLastItem, size, params, items }) }, `item${index}`);
+  };
+  const renderSeparator = () => {
+    return index < items.length - 1 ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { css: breadcrumbBlockStyle.separator(theme), children: "/" }) }, `separator${index}`) : null;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderItem(),
+    renderSeparator()
+  ] });
+});
+export {
+  BreadcrumbBlock
+};

package/dist/components/Breadcrumb/components/BreadcrumbBlock/BreadcrumbBlock.styles.d.ts

@@ -0,0 +1,27 @@
+import { BreadcrumbSizeType } from 'components/Breadcrumb/Breadcrumb.types';
+import { Theme } from 'themes';
+export declare const getBreadcrumbBlockStyle: (size: BreadcrumbSizeType) => {
+    separator: (theme: Theme) => {
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        display: string;
+        height: number;
+        padding: string;
+        justifyContent: string;
+        alignItems: string;
+        flexShrink: number;
+        color: "#BFBFBF";
+    } | {
+        fontFamily: "Roboto";
+        fontSize: 12;
+        lineHeight: "20px";
+        display: string;
+        height: number;
+        padding: string;
+        justifyContent: string;
+        alignItems: string;
+        flexShrink: number;
+        color: "#BFBFBF";
+    };
+};

package/dist/components/Breadcrumb/components/BreadcrumbBlock/BreadcrumbBlock.styles.js

@@ -0,0 +1,19 @@
+import { getBreadcrumbTokens } from "../../Breadcrumb.tokens.js";
+const getBreadcrumbBlockStyle = (size) => ({
+  separator: (theme) => {
+    const breadcrumbTokens = getBreadcrumbTokens(theme);
+    return {
+      display: "inline-flex",
+      height: breadcrumbTokens.breadcrumbItemHeight,
+      padding: `0 ${breadcrumbTokens.breadcrumbSeparatorMarginHorizontal}px`,
+      justifyContent: "center",
+      alignItems: "center",
+      flexShrink: 0,
+      color: breadcrumbTokens.breadcrumbSeparator,
+      ...size === "middle" ? theme.typography.body2 : theme.typography.body3
+    };
+  }
+});
+export {
+  getBreadcrumbBlockStyle
+};

package/dist/components/Breadcrumb/components/BreadcrumbBlock/BreadcrumbBlock.types.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbParamsType, BreadcrumbSizeType, RouteItem } from 'components/Breadcrumb/Breadcrumb.types';
+export interface BreadcrumbBlockProps {
+    item: RouteItem;
+    isLastItem: boolean;
+    size: BreadcrumbSizeType;
+    params: BreadcrumbParamsType;
+    items: RouteItem[];
+    index: number;
+    itemRender?: (route: RouteItem, params: BreadcrumbParamsType, routes: RouteItem[], paths: string[]) => React.ReactNode;
+}

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbItemProps } from './BreadcrumbItem.types';
+export declare const BreadcrumbItem: FC<BreadcrumbItemProps>;

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { isUndefined, isNil } from "lodash-es";
+import { getCurrentTitle, getHrefByPath } from "./BreadcrumbItem.utils.js";
+import { DownOutlined } from "@infomaximum/icons";
+import { getBreadcrumbItemStyle } from "./BreadcrumbItem.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+import { Dropdown } from "../../../Dropdown/Dropdown.js";
+const BreadcrumbItem = memo(({
+  routeItem,
+  isLastItem,
+  items,
+  size,
+  params
+}) => {
+  const {
+    className,
+    dropdownProps,
+    menu,
+    icon,
+    title,
+    path,
+    href,
+    onClick
+  } = routeItem;
+  const theme = useTheme();
+  const currentTitle = getCurrentTitle(title, params);
+  const isDropdown = !isUndefined(dropdownProps) || !isUndefined(menu);
+  const usingHref = isLastItem ? void 0 : href ?? (path ? getHrefByPath(path, items) : void 0);
+  const breadcrumbItemStyle = getBreadcrumbItemStyle(size, !isNil(usingHref));
+  const renderItemContent = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { css: breadcrumbItemStyle.icon(theme), children: icon }),
+      currentTitle && /* @__PURE__ */ jsx("span", { css: breadcrumbItemStyle.title(theme), children: currentTitle }),
+      isDropdown && /* @__PURE__ */ jsx("span", { css: breadcrumbItemStyle.dropdownSuffix(theme), children: /* @__PURE__ */ jsx(DownOutlined, {}) })
+    ] });
+  };
+  const renderWithLink = () => {
+    if (isUndefined(usingHref)) {
+      return renderItemContent();
+    }
+    return /* @__PURE__ */ jsx("a", { href: usingHref, css: breadcrumbItemStyle.link(theme), children: renderItemContent() });
+  };
+  const renderItem = () => /* @__PURE__ */ jsx("span", { css: breadcrumbItemStyle.itemWrapper(theme), className, onClick, children: renderWithLink() });
+  if (isDropdown) {
+    const props = isUndefined(dropdownProps) ? {
+      menu
+    } : menu ? {
+      ...dropdownProps,
+      menu
+    } : dropdownProps;
+    return /* @__PURE__ */ jsx(Dropdown, { trigger: ["hover"], ...props, children: renderItem() });
+  }
+  return renderItem();
+});
+export {
+  BreadcrumbItem
+};

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.styles.d.ts

@@ -0,0 +1,66 @@
+import { BreadcrumbSizeType } from 'components/Breadcrumb/Breadcrumb.types';
+import { Theme } from 'themes';
+export declare const getBreadcrumbItemStyle: (size: BreadcrumbSizeType, withLink: boolean) => {
+    link: (theme: Theme) => {
+        display: string;
+        width: string;
+        height: string;
+        gap: 4;
+        alignItems: string;
+        textDecoration: string;
+        color: string;
+        ":hover": {
+            color: "#595959";
+            textDecoration: string;
+        };
+        ":visited": {
+            color: string;
+        };
+    };
+    itemWrapper: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        gap: 4;
+        borderRadius: 4;
+        height: number;
+        padding: string;
+        color: "#262626" | "#8C8C8C";
+        cursor: string;
+        ":hover": {
+            color: "#262626" | "#595959";
+            background: string;
+        };
+    };
+    icon: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        fontSize: 16;
+    };
+    title: (theme: Theme) => {
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+    } | {
+        fontFamily: "Roboto";
+        fontSize: 12;
+        lineHeight: "20px";
+    };
+    dropdownContent: (theme: Theme) => {
+        display: string;
+        gap: 4;
+        borderRadius: 4;
+        color: "#262626" | "#8C8C8C";
+        cursor: string;
+        ":hover": {
+            color: "#262626";
+            background: string;
+        };
+    };
+    dropdownSuffix: (theme: Theme) => {
+        readonly fontSize: 12 | 16;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+    };
+};

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.styles.js

@@ -0,0 +1,74 @@
+import { getBreadcrumbTokens } from "../../Breadcrumb.tokens.js";
+const getBreadcrumbItemStyle = (size, withLink) => {
+  const isMiddle = size === "middle";
+  return {
+    link: (theme) => {
+      const breadcrumbTokens = getBreadcrumbTokens(theme);
+      return {
+        display: "inline-flex",
+        width: "100%",
+        height: "100%",
+        gap: theme.marginXS,
+        alignItems: "center",
+        textDecoration: "none",
+        color: "unset",
+        ":hover": {
+          color: breadcrumbTokens.breadcrumbItemHover,
+          textDecoration: "none"
+        },
+        ":visited": {
+          color: "unset"
+        }
+      };
+    },
+    itemWrapper: (theme) => {
+      const breadcrumbTokens = getBreadcrumbTokens(theme);
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: theme.marginXS,
+        borderRadius: theme.borderRadiusM,
+        height: breadcrumbTokens.breadcrumbItemHeight,
+        padding: `0 ${breadcrumbTokens.breadcrumbItemPaddingHorizontal}px`,
+        color: withLink ? breadcrumbTokens.breadcrumbItem : breadcrumbTokens.breadcrumbLastItem,
+        cursor: withLink ? "pointer" : "default",
+        ":hover": {
+          color: withLink ? breadcrumbTokens.breadcrumbItemHover : breadcrumbTokens.breadcrumbLastItem,
+          background: withLink ? breadcrumbTokens.breadcrumbItemBgHover : "none"
+        }
+      };
+    },
+    icon: (theme) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: theme.iconM
+    }),
+    title: (theme) => ({
+      ...isMiddle ? theme.typography.body2 : theme.typography.body3
+    }),
+    dropdownContent: (theme) => {
+      const breadcrumbTokens = getBreadcrumbTokens(theme);
+      return {
+        display: "flex",
+        gap: theme.marginXS,
+        borderRadius: theme.borderRadiusM,
+        color: withLink ? breadcrumbTokens.breadcrumbItem : breadcrumbTokens.breadcrumbLastItem,
+        cursor: withLink ? "pointer" : "default",
+        ":hover": {
+          color: breadcrumbTokens.breadcrumbLastItem,
+          background: withLink ? breadcrumbTokens.breadcrumbItemBgHover : "none"
+        }
+      };
+    },
+    dropdownSuffix: (theme) => ({
+      fontSize: isMiddle ? theme.iconM : theme.iconS,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    })
+  };
+};
+export {
+  getBreadcrumbItemStyle
+};

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.types.d.ts

@@ -0,0 +1,8 @@
+import { BreadcrumbParamsType, BreadcrumbSizeType, RouteItem } from 'components/Breadcrumb/Breadcrumb.types';
+export interface BreadcrumbItemProps {
+    routeItem: RouteItem;
+    isLastItem: boolean;
+    size: BreadcrumbSizeType;
+    params: BreadcrumbParamsType;
+    items: RouteItem[];
+}

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.utils.d.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbParamsType, RouteItem } from 'components/Breadcrumb/Breadcrumb.types';
+import { ReactNode } from 'react';
+export declare const getHrefByPath: (path: string, items: RouteItem[]) => string | undefined;
+export declare const getCurrentTitle: (title: ReactNode | undefined, params: BreadcrumbParamsType) => string | number | boolean | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;

package/dist/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.utils.js

@@ -0,0 +1,27 @@
+import { isUndefined, isString } from "lodash-es";
+const getHrefByPath = (path, items) => {
+  const paths = items.map((item) => item.path);
+  const index = paths.findIndex((item) => item === path);
+  const parentPaths = paths.splice(0, index);
+  if (parentPaths.some((item) => isUndefined(item))) {
+    return void 0;
+  }
+  if (paths.length === 1) {
+    return "/";
+  }
+  const joinedPaths = parentPaths.join("/").replace("//", "/");
+  return `/${joinedPaths}/${path}`;
+};
+const getCurrentTitle = (title, params) => {
+  if (!isString(title)) {
+    return title;
+  }
+  const isParameter = title[0] === ":";
+  const parameterName = isParameter ? title.slice(1) : "";
+  const hasParameter = isParameter && Object.keys(params).includes(parameterName);
+  return hasParameter ? params[parameterName] : title;
+};
+export {
+  getCurrentTitle,
+  getHrefByPath
+};

package/dist/components/Breadcrumb/forStories/items.d.ts

@@ -0,0 +1,76 @@
+import { RouteItem } from '../Breadcrumb.types';
+export declare const breadcrumbItems: RouteItem[];
+export declare const baseItems: {
+    title: string;
+    href: string;
+}[];
+export declare const baseItemsWithClassName: ({
+    title: string;
+    href: string;
+    className: string;
+} | {
+    title: string;
+    href: string;
+    className?: undefined;
+})[];
+export declare const iconItems: ({
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    href: string;
+    title?: undefined;
+} | {
+    title: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    href: string;
+} | {
+    title: string;
+    href: string;
+    icon?: undefined;
+})[];
+export declare const pathItems: {
+    title: string;
+    path: string;
+}[];
+export declare const dropdownItems: ({
+    title: string;
+    path: string;
+    menu?: undefined;
+} | {
+    title: string;
+    path: string;
+    menu: {
+        items: {
+            key: string;
+            label: string;
+        }[];
+    };
+})[];
+export declare const paramsItems: {
+    title: string;
+    href: string;
+}[];
+export declare const sizeItems: ({
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    href: string;
+    title?: undefined;
+    menu?: undefined;
+} | {
+    title: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    href: string;
+    menu?: undefined;
+} | {
+    title: string;
+    href: string;
+    menu: {
+        items: {
+            key: string;
+            label: string;
+        }[];
+    };
+    icon?: undefined;
+} | {
+    title: string;
+    href: string;
+    icon?: undefined;
+    menu?: undefined;
+})[];

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb.types';

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

@@ -31,6 +31,7 @@ export declare const getRadioButtonWrapperStyle: (theme: Theme, radioTokens: Rad
     };
     readonly ":not(:first-of-type)::before": {
         readonly content: "''";
+        readonly boxSizing: "content-box";
         readonly position: "absolute";
         readonly width: 1;
         readonly height: "100%";

package/dist/components/Radio/Radio.styles.js

@@ -27,6 +27,7 @@ const getRadioButtonWrapperStyle = (theme, radioTokens, isRenderIcon, checked, d
   },
   ":not(:first-of-type)::before": {
     content: "''",
+    boxSizing: "content-box",
     position: "absolute",
     width: 1,
     height: "100%",

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

@@ -16,7 +16,8 @@ const RadioGroupComponent = (props) => {
     buttonType = "text",
     options,
     onChange,
-    children
+    children,
+    ...restProps
   } = props;
   const theme = useTheme();
   const isButtonType = optionType === "button";
@@ -50,7 +51,7 @@ const RadioGroupComponent = (props) => {
       return /* @__PURE__ */ jsx(Radio, { disabled: option.disabled || disabled, value: option.value, checked: value === option.value, icon: option.icon, children: option.label }, `radio-group-value-options-${option.value}`);
     });
   }
-  return /* @__PURE__ */ jsx("div", { css: getRadioGroupStyle(theme, isButtonType), children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: childrenToRender }) });
+  return /* @__PURE__ */ jsx("div", { css: getRadioGroupStyle(theme, isButtonType), ...restProps, children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: childrenToRender }) });
 };
 const RadioGroup = RadioGroupComponent;
 export {

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

@@ -3,7 +3,7 @@ import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 interface RadioOptionType extends Pick<RadioProps, "value" | "disabled" | "icon"> {
     label?: ReactNode;
 }
-export interface RadioGroupProps extends PropsWithChildren, Pick<RadioProps, "disabled" | "name" | "value" | "onChange">, Pick<HTMLAttributes<HTMLElement>, "defaultValue"> {
+export interface RadioGroupProps extends PropsWithChildren, Pick<RadioProps, "disabled" | "name" | "value" | "onChange">, Pick<HTMLAttributes<HTMLElement>, "defaultValue" | "className" | "id"> {
     options?: (string | number | RadioOptionType)[];
     optionType?: "default" | "button";
     buttonType?: "text" | "icon";

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

@@ -1,2 +1,4 @@
 export { Radio } from './Radio';
 export type { RadioProps } from './Radio.types';
+export type { RadioChangeEvent } from './components/RadioInternal/RadioInternal.types';
+export type { RadioGroupProps } from './components/RadioGroup/RadioGroup.types';

package/dist/components/Tag/Tag.js

@@ -19,7 +19,8 @@ const TagComponent = memo(({
   const [isClosed, setIsClosed] = useState(false);
   const tagDefaultStyle = getTagDefaultStyle({
     color,
-    type
+    type,
+    closable
   });
   const handleClick = useCallback((e) => {
     onClose == null ? void 0 : onClose(e);
@@ -28,9 +29,9 @@ const TagComponent = memo(({
   if (isClosed) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("span", { ...spanProps, css: [tagDefaultStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TagComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIE1vdXNlRXZlbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBUYWdGdWxsVHlwZSwgVGFnUHJvcHMgfSBmcm9tIFwiLi9UYWcudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRUYWdEZWZhdWx0U3R5bGUgfSBmcm9tIFwiLi9UYWcuc3R5bGVzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgQ2hlY2thYmxlIH0gZnJvbSBcIi4vY29tcG9uZW50cy9DaGVja2FibGUvQ2hlY2thYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWdDb21wb25lbnQ6IEZDPFRhZ1Byb3BzPiA9IG1lbW8oXG4gICh7XG4gICAgY29sb3IgPSBcIm5ldXRyYWxcIixcbiAgICB0eXBlID0gXCJvdXRsaW5lZFwiLFxuICAgIGNsb3NhYmxlID0gZmFsc2UsXG4gICAgb25DbG9zZSxcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2xhc3NOYW1lLFxuICAgIC4uLnNwYW5Qcm9wc1xuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IFtpc0Nsb3NlZCwgc2V0SXNDbG9zZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgY29uc3QgdGFnRGVmYXVsdFN0eWxlID0gZ2V0VGFnRGVmYXVsdFN0eWxlKHsgY29sb3IsIHR5cGUgfSk7XG5cbiAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKFxuICAgICAgKGU6IE1vdXNlRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIG9uQ2xvc2U/LihlKTtcbiAgICAgICAgc2V0SXNDbG9zZWQodHJ1ZSk7XG4gICAgICB9LFxuICAgICAgW29uQ2xvc2VdXG4gICAgKTtcblxuICAgIGlmIChpc0Nsb3NlZCkge1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDxzcGFuXG4gICAgICAgIHsuLi5zcGFuUHJvcHN9XG4gICAgICAgIGNzcz17W3RhZ0RlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgICAgICBjc3M9e1t0YWdEZWZhdWx0U3R5bGUuY2xvc2VJY29uKHRoZW1lKSwgc3R5bGVzPy5jbG9zZUljb24/Lih0aGVtZSldfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxDbG9zZU91dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9zcGFuPlxuICAgICk7XG4gIH1cbik7XG5cbmNvbnN0IFRhZ1dpdGhDaGVja2FibGUgPSBUYWdDb21wb25lbnQgYXMgVGFnRnVsbFR5cGU7XG5UYWdXaXRoQ2hlY2thYmxlLkNoZWNrYWJsZSA9IENoZWNrYWJsZTtcblxuZXhwb3J0IGNvbnN0IFRhZyA9IFRhZ1dpdGhDaGVja2FibGU7XG4iXX0= */"], className, children: [
+  return /* @__PURE__ */ jsxs("span", { ...spanProps, css: [tagDefaultStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TagComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIE1vdXNlRXZlbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBUYWdGdWxsVHlwZSwgVGFnUHJvcHMgfSBmcm9tIFwiLi9UYWcudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRUYWdEZWZhdWx0U3R5bGUgfSBmcm9tIFwiLi9UYWcuc3R5bGVzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgQ2hlY2thYmxlIH0gZnJvbSBcIi4vY29tcG9uZW50cy9DaGVja2FibGUvQ2hlY2thYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWdDb21wb25lbnQ6IEZDPFRhZ1Byb3BzPiA9IG1lbW8oXG4gICh7XG4gICAgY29sb3IgPSBcIm5ldXRyYWxcIixcbiAgICB0eXBlID0gXCJvdXRsaW5lZFwiLFxuICAgIGNsb3NhYmxlID0gZmFsc2UsXG4gICAgb25DbG9zZSxcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2xhc3NOYW1lLFxuICAgIC4uLnNwYW5Qcm9wc1xuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IFtpc0Nsb3NlZCwgc2V0SXNDbG9zZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgY29uc3QgdGFnRGVmYXVsdFN0eWxlID0gZ2V0VGFnRGVmYXVsdFN0eWxlKHsgY29sb3IsIHR5cGUsIGNsb3NhYmxlIH0pO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAgIChlOiBNb3VzZUV2ZW50PEhUTUxFbGVtZW50PikgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oZSk7XG4gICAgICAgIHNldElzQ2xvc2VkKHRydWUpO1xuICAgICAgfSxcbiAgICAgIFtvbkNsb3NlXVxuICAgICk7XG5cbiAgICBpZiAoaXNDbG9zZWQpIHtcbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8c3BhblxuICAgICAgICB7Li4uc3BhblByb3BzfVxuICAgICAgICBjc3M9e1t0YWdEZWZhdWx0U3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIHtjbG9zYWJsZSAmJiAoXG4gICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgY3NzPXtbdGFnRGVmYXVsdFN0eWxlLmNsb3NlSWNvbih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uPy4odGhlbWUpXX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgIDwvc3Bhbj5cbiAgICApO1xuICB9XG4pO1xuXG5jb25zdCBUYWdXaXRoQ2hlY2thYmxlID0gVGFnQ29tcG9uZW50IGFzIFRhZ0Z1bGxUeXBlO1xuVGFnV2l0aENoZWNrYWJsZS5DaGVja2FibGUgPSBDaGVja2FibGU7XG5cbmV4cG9ydCBjb25zdCBUYWcgPSBUYWdXaXRoQ2hlY2thYmxlO1xuIl19 */"], className, children: [
     children,
-    closable && /* @__PURE__ */ jsx("span", { onClick: handleClick, css: [tagDefaultStyle.closeIcon(theme), (_b = styles == null ? void 0 : styles.closeIcon) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TagComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIE1vdXNlRXZlbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBUYWdGdWxsVHlwZSwgVGFnUHJvcHMgfSBmcm9tIFwiLi9UYWcudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRUYWdEZWZhdWx0U3R5bGUgfSBmcm9tIFwiLi9UYWcuc3R5bGVzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgQ2hlY2thYmxlIH0gZnJvbSBcIi4vY29tcG9uZW50cy9DaGVja2FibGUvQ2hlY2thYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWdDb21wb25lbnQ6IEZDPFRhZ1Byb3BzPiA9IG1lbW8oXG4gICh7XG4gICAgY29sb3IgPSBcIm5ldXRyYWxcIixcbiAgICB0eXBlID0gXCJvdXRsaW5lZFwiLFxuICAgIGNsb3NhYmxlID0gZmFsc2UsXG4gICAgb25DbG9zZSxcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2xhc3NOYW1lLFxuICAgIC4uLnNwYW5Qcm9wc1xuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IFtpc0Nsb3NlZCwgc2V0SXNDbG9zZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgY29uc3QgdGFnRGVmYXVsdFN0eWxlID0gZ2V0VGFnRGVmYXVsdFN0eWxlKHsgY29sb3IsIHR5cGUgfSk7XG5cbiAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKFxuICAgICAgKGU6IE1vdXNlRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIG9uQ2xvc2U/LihlKTtcbiAgICAgICAgc2V0SXNDbG9zZWQodHJ1ZSk7XG4gICAgICB9LFxuICAgICAgW29uQ2xvc2VdXG4gICAgKTtcblxuICAgIGlmIChpc0Nsb3NlZCkge1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDxzcGFuXG4gICAgICAgIHsuLi5zcGFuUHJvcHN9XG4gICAgICAgIGNzcz17W3RhZ0RlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgICAgICBjc3M9e1t0YWdEZWZhdWx0U3R5bGUuY2xvc2VJY29uKHRoZW1lKSwgc3R5bGVzPy5jbG9zZUljb24/Lih0aGVtZSldfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxDbG9zZU91dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9zcGFuPlxuICAgICk7XG4gIH1cbik7XG5cbmNvbnN0IFRhZ1dpdGhDaGVja2FibGUgPSBUYWdDb21wb25lbnQgYXMgVGFnRnVsbFR5cGU7XG5UYWdXaXRoQ2hlY2thYmxlLkNoZWNrYWJsZSA9IENoZWNrYWJsZTtcblxuZXhwb3J0IGNvbnN0IFRhZyA9IFRhZ1dpdGhDaGVja2FibGU7XG4iXX0= */"], children: /* @__PURE__ */ jsx(CloseOutlined, {}) })
+    closable && /* @__PURE__ */ jsx("span", { onClick: handleClick, css: [tagDefaultStyle.closeIcon(theme), (_b = styles == null ? void 0 : styles.closeIcon) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TagComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIE1vdXNlRXZlbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBUYWdGdWxsVHlwZSwgVGFnUHJvcHMgfSBmcm9tIFwiLi9UYWcudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRUYWdEZWZhdWx0U3R5bGUgfSBmcm9tIFwiLi9UYWcuc3R5bGVzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgQ2hlY2thYmxlIH0gZnJvbSBcIi4vY29tcG9uZW50cy9DaGVja2FibGUvQ2hlY2thYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWdDb21wb25lbnQ6IEZDPFRhZ1Byb3BzPiA9IG1lbW8oXG4gICh7XG4gICAgY29sb3IgPSBcIm5ldXRyYWxcIixcbiAgICB0eXBlID0gXCJvdXRsaW5lZFwiLFxuICAgIGNsb3NhYmxlID0gZmFsc2UsXG4gICAgb25DbG9zZSxcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2xhc3NOYW1lLFxuICAgIC4uLnNwYW5Qcm9wc1xuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IFtpc0Nsb3NlZCwgc2V0SXNDbG9zZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgY29uc3QgdGFnRGVmYXVsdFN0eWxlID0gZ2V0VGFnRGVmYXVsdFN0eWxlKHsgY29sb3IsIHR5cGUsIGNsb3NhYmxlIH0pO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAgIChlOiBNb3VzZUV2ZW50PEhUTUxFbGVtZW50PikgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oZSk7XG4gICAgICAgIHNldElzQ2xvc2VkKHRydWUpO1xuICAgICAgfSxcbiAgICAgIFtvbkNsb3NlXVxuICAgICk7XG5cbiAgICBpZiAoaXNDbG9zZWQpIHtcbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8c3BhblxuICAgICAgICB7Li4uc3BhblByb3BzfVxuICAgICAgICBjc3M9e1t0YWdEZWZhdWx0U3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIHtjbG9zYWJsZSAmJiAoXG4gICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgY3NzPXtbdGFnRGVmYXVsdFN0eWxlLmNsb3NlSWNvbih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uPy4odGhlbWUpXX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgIDwvc3Bhbj5cbiAgICApO1xuICB9XG4pO1xuXG5jb25zdCBUYWdXaXRoQ2hlY2thYmxlID0gVGFnQ29tcG9uZW50IGFzIFRhZ0Z1bGxUeXBlO1xuVGFnV2l0aENoZWNrYWJsZS5DaGVja2FibGUgPSBDaGVja2FibGU7XG5cbmV4cG9ydCBjb25zdCBUYWcgPSBUYWdXaXRoQ2hlY2thYmxlO1xuIl19 */"], children: /* @__PURE__ */ jsx(CloseOutlined, {}) })
   ] });
 });
 const TagWithCheckable = TagComponent;

package/dist/components/Tag/Tag.styles.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from 'themes';
 import { TagDefaultStylesProps } from './Tag.types';
-export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps) => {
+export declare const getTagDefaultStyle: ({ color, type, closable }: TagDefaultStylesProps) => {
     wrapper: (theme: Theme) => {
         readonly background: "#F5F5F5";
         readonly color: "#262626";
@@ -13,8 +13,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -29,8 +28,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -45,8 +43,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -61,8 +58,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -77,8 +73,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -93,8 +88,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -109,8 +103,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -125,8 +118,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -141,8 +133,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -157,8 +148,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -173,8 +163,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -189,8 +178,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -205,8 +193,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -221,8 +208,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -237,8 +223,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -253,8 +238,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -269,8 +253,7 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     } | {
@@ -285,17 +268,19 @@ export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps
         readonly display: "inline-flex";
         readonly justifyContent: "center";
         readonly alignItems: "center";
-        readonly gap: 4;
-        readonly padding: "0px 8px";
+        readonly padding: `0px ${number}px 0px ${number}px`;
         readonly borderRadius: 4;
         readonly boxSizing: "border-box";
     };
     closeIcon: (theme: Theme) => {
         color: `rgba(${number}, ${number}, ${number}, 0.8)` | `rgba(${number}, ${number}, ${number}, 0.3)`;
         cursor: string;
+        width: number;
+        aspectRatio: string;
         display: string;
         alignItems: string;
         justifyContent: string;
+        fontSize: 12;
         ":hover": {
             color: "#FFFFFF" | `rgba(${number}, ${number}, ${number}, 0.7)`;
         };

package/dist/components/Tag/Tag.styles.js

@@ -12,19 +12,22 @@ const getFilledFeaturesByColor = (theme, color) => {
 };
 const getTagDefaultStyle = ({
   color,
-  type
+  type,
+  closable
 }) => {
   const isOutlined = type === "outlined";
   return {
     wrapper: (theme) => {
+      const rightPadding = closable ? theme.paddingXS : theme.paddingM;
+      const correctedRightPadding = isOutlined ? rightPadding - 1 : rightPadding;
+      const correctedLeftPadding = isOutlined ? theme.paddingM - 1 : theme.paddingM;
       const generalStyles = {
         height: theme.x5,
         maxWidth: "100%",
         display: "inline-flex",
         justifyContent: "center",
         alignItems: "center",
-        gap: theme.marginXS,
-        padding: `0px ${theme.paddingM}px`,
+        padding: `0px ${correctedRightPadding}px 0px ${correctedLeftPadding}px`,
         borderRadius: theme.borderRadiusM,
         boxSizing: "border-box",
         ...theme.typography.body3
@@ -38,9 +41,12 @@ const getTagDefaultStyle = ({
     closeIcon: (theme) => ({
       color: isOutlined ? theme.textIcon : theme.textIconContrast,
       cursor: "pointer",
+      width: 20,
+      aspectRatio: "1/1",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      fontSize: theme.iconS,
       ":hover": {
         color: isOutlined ? theme.textIconHover : theme.textIconContrastHover
       }

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

@@ -17,7 +17,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     onClose?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     children?: ReactNode | string;
 }
-export type TagDefaultStylesProps = Required<Pick<TagProps, "color" | "type">>;
+export type TagDefaultStylesProps = Required<Pick<TagProps, "color" | "type" | "closable">>;
 export type TagFullType = typeof TagComponent & {
     Checkable: typeof Checkable;
 };

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { Select } from './components/Select';
 export type { SelectProps } from './components/Select';
 export { type InputProps, Input } from './components/Input';
 export { type InputNumberProps, InputNumber } from './components/InputNumber';
-export { type RadioProps, Radio } from './components/Radio';
+export { type RadioChangeEvent, type RadioGroupProps, type RadioProps, Radio, } from './components/Radio';
 export { Alert } from './components/Alert';
 export type { AlertProps } from './components/Alert';
 export { Tooltip } from './components/Tooltip';
@@ -36,6 +36,8 @@ export { Avatar, avatarColors } from './components/Avatar';
 export type { AvatarProps, AvatarColorType } from './components/Avatar';
 export { Tabs } from './components/Tabs';
 export type { TabsProps } from './components/Tabs';
+export { Breadcrumb } from './components/Breadcrumb';
+export type { BreadcrumbProps } from './components/Breadcrumb';
 export { Tag } from './components/Tag';
 export type { TagProps, CheckableProps } from './components/Tag';
 export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvider';

package/dist/index.js

@@ -23,6 +23,7 @@ import { Progress } from "./components/Progress/Progress.js";
 import { Avatar } from "./components/Avatar/Avatar.js";
 import { avatarColors } from "./components/Avatar/Avatar.utils.js";
 import { Tabs } from "./components/Tabs/Tabs.js";
+import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
 import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
@@ -31,6 +32,7 @@ import { Popconfirm } from "./components/Popconfirm/Popconfirm.js";
 export {
   Alert,
   Avatar,
+  Breadcrumb,
   Button,
   Checkbox,
   ConfigProvider,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,8 +34,8 @@
     "update-icons": "node scripts/updateIcons/updateIcons.js"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/core": "6.0.5",
+    "@dnd-kit/sortable": "7.0.1",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.0.0",
     "@floating-ui/react": "^0.27.6",
@@ -54,7 +54,7 @@
     "react": "^18",
     "react-dom": "^18",
     "@dnd-kit/core": "^6",
-    "@dnd-kit/sortable": "^10",
+    "@dnd-kit/sortable": "^7",
     "@dnd-kit/utilities": "^3"
   },
   "devDependencies": {