@redis-ui/components 42.8.0 → 43.2.1

package/dist/Checkbox/components/Label/Label.style.js

@@ -7,8 +7,16 @@ import { CheckboxIndicator } from "../Indicator/Indicator.style.js";
 import Typography from "../../../Typography/Typography.js";
 const maps = [textColorMap];
 const getStateStyles = (tokens) => {
-  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${getRelatedStateSelector(CheckboxIndicator, state, CheckboxCompose)} {
-    ${styleFromTokens(maps, stateTokens, fallbackTokens)};
+  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${getRelatedStateSelector({
+    inputSelector: CheckboxIndicator,
+    inputStateSelector: state,
+    commonContainer: CheckboxCompose
+  })} {
+    ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateTokens,
+    fallbackTokens
+  })};
   }`;
   return css`
     ${getLabelStateSelector("", tokens.normal)};
@@ -16,7 +24,11 @@ const getStateStyles = (tokens) => {
     ${getLabelStateSelector(":active", tokens.active, tokens.normal)};
     ${getLabelStateSelector(":disabled", tokens.disabled)};
 
-    ${getRelatedStateSelector(CheckboxIndicator, ":disabled", CheckboxCompose)} {
+    ${getRelatedStateSelector({
+    inputSelector: CheckboxIndicator,
+    inputStateSelector: ":disabled",
+    commonContainer: CheckboxCompose
+  })} {
       pointer-events: none;
     }
   `;

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -19,7 +19,9 @@ const CloseButton = ({
     variant,
     disabled
   } = Chip_context.useChipContext();
-  if (!onClose || disabled) return null;
+  if (!onClose || disabled) {
+    return null;
+  }
   const handleRemoveChip = (e) => {
     e.stopPropagation();
     onClose();

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -17,7 +17,9 @@ const CloseButton = ({
     variant,
     disabled
   } = useChipContext();
-  if (!onClose || disabled) return null;
+  if (!onClose || disabled) {
+    return null;
+  }
   const handleRemoveChip = (e) => {
     e.stopPropagation();
     onClose();

package/dist/Chip/components/Compose/Compose.style.cjs

@@ -14,7 +14,10 @@ const ChipContainer = _styled__default.default.span.withConfig({
   $disabled
 }) => {
   const variantStyle = redisUiStyles.useTheme().components.chip.variant[$variant][$disabled ? "disabled" : "normal"];
-  return css_utils.styleFromTokens([Button_style_utils.bgColorMap, Button_style_utils.textColorMap], variantStyle);
+  return css_utils.styleFromTokens({
+    tokenMaps: [Button_style_utils.bgColorMap, Button_style_utils.textColorMap],
+    tokens: variantStyle
+  });
 }, ({
   $size
 }) => {

package/dist/Chip/components/Compose/Compose.style.js

@@ -10,7 +10,10 @@ const ChipContainer = _styled.span.withConfig({
   $disabled
 }) => {
   const variantStyle = useTheme().components.chip.variant[$variant][$disabled ? "disabled" : "normal"];
-  return styleFromTokens([bgColorMap, textColorMap], variantStyle);
+  return styleFromTokens({
+    tokenMaps: [bgColorMap, textColorMap],
+    tokens: variantStyle
+  });
 }, ({
   $size
 }) => {

package/dist/Drawer/components/Description/Description.cjs

@@ -13,7 +13,9 @@ const Description = Object.assign(({
 }) => {
   var _a;
   const emptyContent = !((_a = react_utils.childrenToString(children)) == null ? void 0 : _a.trim());
-  if (emptyContent) return null;
+  if (emptyContent) {
+    return null;
+  }
   const mainElement = jsxRuntime.jsxRuntimeExports.jsx(index.Description, {
     asChild: true,
     children: jsxRuntime.jsxRuntimeExports.jsx(Description_style.DescriptionContainer, {

package/dist/Drawer/components/Description/Description.js

@@ -11,7 +11,9 @@ const Description = Object.assign(({
 }) => {
   var _a;
   const emptyContent = !((_a = childrenToString(children)) == null ? void 0 : _a.trim());
-  if (emptyContent) return null;
+  if (emptyContent) {
+    return null;
+  }
   const mainElement = jsxRuntimeExports.jsx(Description$1, {
     asChild: true,
     children: jsxRuntimeExports.jsx(DescriptionContainer, {

package/dist/Helpers/contexts/Popper/PopperCollisionBoundaryManager.cjs

@@ -12,7 +12,9 @@ const PopperCollisionBoundaryManager = ({
   const [resetBoundary, setResetBoundary] = React.useState(false);
   React.useEffect(() => {
     function doesBoundaryContainTrigger() {
-      if (!triggerRef.current) return false;
+      if (!triggerRef.current) {
+        return false;
+      }
       const boundaries = Array.isArray(popperContext.collisionBoundary) ? popperContext.collisionBoundary : [popperContext.collisionBoundary];
       return boundaries.some((boundary) => boundary == null ? void 0 : boundary.contains(triggerRef.current));
     }

package/dist/Helpers/contexts/Popper/PopperCollisionBoundaryManager.js

@@ -10,7 +10,9 @@ const PopperCollisionBoundaryManager = ({
   const [resetBoundary, setResetBoundary] = useState(false);
   useEffect(() => {
     function doesBoundaryContainTrigger() {
-      if (!triggerRef.current) return false;
+      if (!triggerRef.current) {
+        return false;
+      }
       const boundaries = Array.isArray(popperContext.collisionBoundary) ? popperContext.collisionBoundary : [popperContext.collisionBoundary];
       return boundaries.some((boundary) => boundary == null ? void 0 : boundary.contains(triggerRef.current));
     }

package/dist/Helpers/contexts/PrimitiveContextState.cjs

@@ -14,7 +14,9 @@ const createPrimitiveContextState = () => {
       setState
     }), [state]);
     React.useLayoutEffect(() => {
-      if (value !== void 0) setState(value);
+      if (value !== void 0) {
+        setState(value);
+      }
     }, [value]);
     return jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
       value: context,
@@ -27,7 +29,9 @@ const createPrimitiveContextState = () => {
       setState
     } = React.useContext(Context) ?? {};
     React.useLayoutEffect(() => {
-      if (value !== void 0) setState == null ? void 0 : setState(value);
+      if (value !== void 0) {
+        setState == null ? void 0 : setState(value);
+      }
     }, [setState, value]);
     return state ?? value;
   };
@@ -48,7 +52,9 @@ const createPrimitiveContextState = () => {
     var _a;
     const [state, setState] = React.useState(value);
     React.useLayoutEffect(() => {
-      if (value !== void 0) setState(value);
+      if (value !== void 0) {
+        setState(value);
+      }
     }, [value]);
     const contextState = (_a = React.useContext(Context)) == null ? void 0 : _a.state;
     const mergedState = contextState !== void 0 && (passOnlyStateDown === contextState || typeof passOnlyStateDown === "function" && passOnlyStateDown(contextState)) ? contextState : state;
@@ -67,19 +73,25 @@ const createPrimitiveContextState = () => {
     children
   }) => {
     const context = React.useContext(Context);
-    if (!context) return jsxRuntime.jsxRuntimeExports.jsx(StateProvider, {
-      value,
-      children
-    });
-    if (passOnlyStateDown !== void 0) return jsxRuntime.jsxRuntimeExports.jsx(OverridingStateProvider, {
-      passOnlyStateDown,
-      value,
-      children
-    });
-    if (value !== void 0) return jsxRuntime.jsxRuntimeExports.jsx(ValueUpdater, {
-      value,
-      children
-    });
+    if (!context) {
+      return jsxRuntime.jsxRuntimeExports.jsx(StateProvider, {
+        value,
+        children
+      });
+    }
+    if (passOnlyStateDown !== void 0) {
+      return jsxRuntime.jsxRuntimeExports.jsx(OverridingStateProvider, {
+        passOnlyStateDown,
+        value,
+        children
+      });
+    }
+    if (value !== void 0) {
+      return jsxRuntime.jsxRuntimeExports.jsx(ValueUpdater, {
+        value,
+        children
+      });
+    }
     return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
       children
     });

package/dist/Helpers/contexts/PrimitiveContextState.js

@@ -12,7 +12,9 @@ const createPrimitiveContextState = () => {
       setState
     }), [state]);
     useLayoutEffect(() => {
-      if (value !== void 0) setState(value);
+      if (value !== void 0) {
+        setState(value);
+      }
     }, [value]);
     return jsxRuntimeExports.jsx(Context.Provider, {
       value: context,
@@ -25,7 +27,9 @@ const createPrimitiveContextState = () => {
       setState
     } = useContext(Context) ?? {};
     useLayoutEffect(() => {
-      if (value !== void 0) setState == null ? void 0 : setState(value);
+      if (value !== void 0) {
+        setState == null ? void 0 : setState(value);
+      }
     }, [setState, value]);
     return state ?? value;
   };
@@ -46,7 +50,9 @@ const createPrimitiveContextState = () => {
     var _a;
     const [state, setState] = useState(value);
     useLayoutEffect(() => {
-      if (value !== void 0) setState(value);
+      if (value !== void 0) {
+        setState(value);
+      }
     }, [value]);
     const contextState = (_a = useContext(Context)) == null ? void 0 : _a.state;
     const mergedState = contextState !== void 0 && (passOnlyStateDown === contextState || typeof passOnlyStateDown === "function" && passOnlyStateDown(contextState)) ? contextState : state;
@@ -65,19 +71,25 @@ const createPrimitiveContextState = () => {
     children
   }) => {
     const context = useContext(Context);
-    if (!context) return jsxRuntimeExports.jsx(StateProvider, {
-      value,
-      children
-    });
-    if (passOnlyStateDown !== void 0) return jsxRuntimeExports.jsx(OverridingStateProvider, {
-      passOnlyStateDown,
-      value,
-      children
-    });
-    if (value !== void 0) return jsxRuntimeExports.jsx(ValueUpdater, {
-      value,
-      children
-    });
+    if (!context) {
+      return jsxRuntimeExports.jsx(StateProvider, {
+        value,
+        children
+      });
+    }
+    if (passOnlyStateDown !== void 0) {
+      return jsxRuntimeExports.jsx(OverridingStateProvider, {
+        passOnlyStateDown,
+        value,
+        children
+      });
+    }
+    if (value !== void 0) {
+      return jsxRuntimeExports.jsx(ValueUpdater, {
+        value,
+        children
+      });
+    }
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
       children
     });

package/dist/Helpers/contexts/SharedId.context.cjs

@@ -28,7 +28,9 @@ const useSharedId = (customId) => {
     setId
   } = React.useContext(Context) || {};
   React.useLayoutEffect(() => {
-    if (customId) setId == null ? void 0 : setId((origId) => origId ?? customId);
+    if (customId) {
+      setId == null ? void 0 : setId((origId) => origId ?? customId);
+    }
   }, [setId, customId]);
   return id || customId;
 };
@@ -43,10 +45,12 @@ const Updater = ({
 };
 const SharedIdTransProvider = (props) => {
   const context = React.useContext(Context);
-  if (!context) return jsxRuntime.jsxRuntimeExports.jsx(SharedIdProvider, {
-    ...props,
-    noDefaultId: true
-  });
+  if (!context) {
+    return jsxRuntime.jsxRuntimeExports.jsx(SharedIdProvider, {
+      ...props,
+      noDefaultId: true
+    });
+  }
   const {
     customId,
     children

package/dist/Helpers/contexts/SharedId.context.js

@@ -26,7 +26,9 @@ const useSharedId = (customId) => {
     setId
   } = useContext(Context) || {};
   useLayoutEffect(() => {
-    if (customId) setId == null ? void 0 : setId((origId) => origId ?? customId);
+    if (customId) {
+      setId == null ? void 0 : setId((origId) => origId ?? customId);
+    }
   }, [setId, customId]);
   return id || customId;
 };
@@ -41,10 +43,12 @@ const Updater = ({
 };
 const SharedIdTransProvider = (props) => {
   const context = useContext(Context);
-  if (!context) return jsxRuntimeExports.jsx(SharedIdProvider, {
-    ...props,
-    noDefaultId: true
-  });
+  if (!context) {
+    return jsxRuntimeExports.jsx(SharedIdProvider, {
+      ...props,
+      noDefaultId: true
+    });
+  }
   const {
     customId,
     children

package/dist/Helpers/css.utils.cjs

@@ -5,7 +5,12 @@ const numToUnit = (value = 0, toRem = false) => toRem ? `${pxToRem(value)}rem` :
 const calcSize = (size, defaultSize = "", toRem = false) => {
   return typeof size === "number" ? numToUnit(size, toRem) : size || (typeof defaultSize === "number" ? numToUnit(defaultSize, toRem) : defaultSize);
 };
-const styleFromTokens = (tokenMaps2, tokens, fallbackTokens, customData) => tokenMaps2.map(({
+const styleFromTokens = ({
+  tokenMaps: tokenMaps2,
+  tokens,
+  fallbackTokens,
+  customData
+}) => tokenMaps2.map(({
   cssProp,
   token,
   transformValue,
@@ -110,10 +115,17 @@ const tokenMapMod = (tokenMap, token) => ({
   ...tokenMap,
   token
 });
-const getRelatedStateSelector = (inputSelector, inputStateSelector, commonContainer, ownSelectorInContainer = ":where(&&)") => `${commonContainer}:has(:where(${inputSelector})${inputStateSelector}) ${ownSelectorInContainer}`;
+const getRelatedStateSelector = ({
+  inputSelector,
+  inputStateSelector,
+  commonContainer,
+  ownSelectorInContainer = ":where(&&)"
+}) => `${commonContainer}:has(:where(${inputSelector})${inputStateSelector}) ${ownSelectorInContainer}`;
 const splitDimensionsX2 = (dimensions) => {
   const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
-  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (!(split == null ? void 0 : split.length) || !split[0]) {
+    return {};
+  }
   if (split.length > 2) {
     console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 2, received', split.length);
     return {};
@@ -125,7 +137,9 @@ const splitDimensionsX2 = (dimensions) => {
 };
 const splitDimensionsX4 = (dimensions) => {
   const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
-  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (!(split == null ? void 0 : split.length) || !split[0]) {
+    return {};
+  }
   if (split.length > 4) {
     console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 1-4, received', split.length);
     return {};

package/dist/Helpers/css.utils.d.ts

@@ -24,6 +24,12 @@ export type TokenMap<T extends string = string> = {
     attendantCss?: string;
 };
 export type ThemeTokens<T extends string> = Partial<Record<T, unknown>>;
+interface StyleFromTokensParams<T extends string> {
+    tokenMaps: TokenMap<T>[];
+    tokens: ThemeTokens<T> | undefined;
+    fallbackTokens?: ThemeTokens<T> | undefined;
+    customData?: unknown;
+}
 /**
  * generates style entries, using tokens and token-to-css map
  * @param tokenMaps - token-to-css map defines token, css property and optional transform function
@@ -31,7 +37,7 @@ export type ThemeTokens<T extends string> = Partial<Record<T, unknown>>;
  * @param fallbackTokens - optional list of fallback tokens. I will be used, if main tokens have falsy value
  * @param customData - optional data, that will be passed to token value transform functions
  */
-export declare const styleFromTokens: <T extends string>(tokenMaps: TokenMap<T>[], tokens: ThemeTokens<T> | undefined, fallbackTokens?: ThemeTokens<T> | undefined, customData?: unknown) => string[];
+export declare const styleFromTokens: <T extends string>({ tokenMaps, tokens, fallbackTokens, customData }: StyleFromTokensParams<T>) => string[];
 export declare const tokenMaps: Record<string, TokenMap>;
 export declare const tokenMapMod: <T extends string>(tokenMap: TokenMap, token: T) => TokenMap<T>;
 /**
@@ -39,6 +45,12 @@ export declare const tokenMapMod: <T extends string>(tokenMap: TokenMap, token:
  * @param id - original id - any valid unescaped html id
  */
 export declare const getIdSelector: (id: string) => string;
+interface GetRelatedStateSelectorParams {
+    inputSelector: string;
+    inputStateSelector: string;
+    commonContainer: StyledComponent<never, never> | string;
+    ownSelectorInContainer?: string;
+}
 /**
  * create selector, using state of associated input.
  *
@@ -51,13 +63,13 @@ export declare const getIdSelector: (id: string) => string;
  *        | Note: we use double && to allow styled-components use unique component class instead of common one
  * @example
  *     styled.label`
- *       ${() => getRelatedStateSelector(CheckIndicator, ':disabled', CheckboxWrapper)} {
+ *       ${() => getRelatedStateSelector({ inputSelector: CheckIndicator, inputStateSelector: ':disabled', commonContainer: CheckboxWrapper })} {
  *         pointer-events: none;
  *       }
  *     ....
  *     `
  */
-export declare const getRelatedStateSelector: (inputSelector: string, inputStateSelector: string, commonContainer: StyledComponent<never, never> | string, ownSelectorInContainer?: string) => string;
+export declare const getRelatedStateSelector: ({ inputSelector, inputStateSelector, commonContainer, ownSelectorInContainer }: GetRelatedStateSelectorParams) => string;
 type DimensionsX2 = {
     start?: string;
     end?: string;

package/dist/Helpers/css.utils.js

@@ -3,7 +3,12 @@ const numToUnit = (value = 0, toRem = false) => toRem ? `${pxToRem(value)}rem` :
 const calcSize = (size, defaultSize = "", toRem = false) => {
   return typeof size === "number" ? numToUnit(size, toRem) : size || (typeof defaultSize === "number" ? numToUnit(defaultSize, toRem) : defaultSize);
 };
-const styleFromTokens = (tokenMaps2, tokens, fallbackTokens, customData) => tokenMaps2.map(({
+const styleFromTokens = ({
+  tokenMaps: tokenMaps2,
+  tokens,
+  fallbackTokens,
+  customData
+}) => tokenMaps2.map(({
   cssProp,
   token,
   transformValue,
@@ -108,10 +113,17 @@ const tokenMapMod = (tokenMap, token) => ({
   ...tokenMap,
   token
 });
-const getRelatedStateSelector = (inputSelector, inputStateSelector, commonContainer, ownSelectorInContainer = ":where(&&)") => `${commonContainer}:has(:where(${inputSelector})${inputStateSelector}) ${ownSelectorInContainer}`;
+const getRelatedStateSelector = ({
+  inputSelector,
+  inputStateSelector,
+  commonContainer,
+  ownSelectorInContainer = ":where(&&)"
+}) => `${commonContainer}:has(:where(${inputSelector})${inputStateSelector}) ${ownSelectorInContainer}`;
 const splitDimensionsX2 = (dimensions) => {
   const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
-  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (!(split == null ? void 0 : split.length) || !split[0]) {
+    return {};
+  }
   if (split.length > 2) {
     console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 2, received', split.length);
     return {};
@@ -123,7 +135,9 @@ const splitDimensionsX2 = (dimensions) => {
 };
 const splitDimensionsX4 = (dimensions) => {
   const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
-  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (!(split == null ? void 0 : split.length) || !split[0]) {
+    return {};
+  }
   if (split.length > 4) {
     console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 1-4, received', split.length);
     return {};

package/dist/Helpers/hooks/useScrollable.cjs

@@ -8,7 +8,9 @@ const useScrollable = (ref) => {
   const [scrollable, setScrollable] = React.useState(false);
   React.useEffect(() => {
     const el = ref.current;
-    if (!el) return void 0;
+    if (!el) {
+      return void 0;
+    }
     const update = () => setScrollable(isScrollable(el));
     const resizeObserver = new ResizeObserver(update);
     resizeObserver.observe(el);

package/dist/Helpers/hooks/useScrollable.js

@@ -6,7 +6,9 @@ const useScrollable = (ref) => {
   const [scrollable, setScrollable] = useState(false);
   useEffect(() => {
     const el = ref.current;
-    if (!el) return void 0;
+    if (!el) {
+      return void 0;
+    }
     const update = () => setScrollable(isScrollable(el));
     const resizeObserver = new ResizeObserver(update);
     resizeObserver.observe(el);

package/dist/Helpers/react.utils.cjs

@@ -8,8 +8,12 @@ const handleStopPropagation = (e) => e.stopPropagation();
 const childrenToString = onlyText.default;
 const combineHandlers = (...handlers) => {
   const validHandlers = handlers.filter((handler) => typeof handler === "function");
-  if (!validHandlers.length) return void 0;
-  if (validHandlers.length === 1) return validHandlers[0];
+  if (!validHandlers.length) {
+    return void 0;
+  }
+  if (validHandlers.length === 1) {
+    return validHandlers[0];
+  }
   return (...params) => validHandlers.forEach((handler) => handler(...params));
 };
 const isFragmentElement = (el) => el.type === React.Fragment;

package/dist/Helpers/react.utils.js

@@ -6,8 +6,12 @@ const handleStopPropagation = (e) => e.stopPropagation();
 const childrenToString = onlyText;
 const combineHandlers = (...handlers) => {
   const validHandlers = handlers.filter((handler) => typeof handler === "function");
-  if (!validHandlers.length) return void 0;
-  if (validHandlers.length === 1) return validHandlers[0];
+  if (!validHandlers.length) {
+    return void 0;
+  }
+  if (validHandlers.length === 1) {
+    return validHandlers[0];
+  }
   return (...params) => validHandlers.forEach((handler) => handler(...params));
 };
 const isFragmentElement = (el) => el.type === Fragment;

package/dist/HighlightedIcon/HighlightedIcon.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  type = "primary",
+  ...restProps
+}) => {
+  const theme = redisUiStyles.useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntime.jsxRuntimeExports.jsx(HighlightedIcon_style.HighlightedIconContainer, {
+    "$size": size,
+    "$type": type,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+exports.default = HighlightedIcon$1;

package/dist/HighlightedIcon/HighlightedIcon.d.ts

@@ -0,0 +1,3 @@
+import { HighlightedIconProps } from './HighlightedIcon.types';
+declare const HighlightedIcon: ({ icon: IconComponent, size, type, ...restProps }: HighlightedIconProps) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedIcon;

package/dist/HighlightedIcon/HighlightedIcon.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { HighlightedIconContainer } from "./HighlightedIcon.style.js";
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  type = "primary",
+  ...restProps
+}) => {
+  const theme = useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntimeExports.jsx(HighlightedIconContainer, {
+    "$size": size,
+    "$type": type,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+export {
+  HighlightedIcon$1 as default
+};

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (type) => {
+  const theme = redisUiStyles.useTheme();
+  return theme.components.highlightedIcon.variants[type];
+};
+const HighlightedIconContainer = _styled__default.default.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
+  $size
+}) => SIZE_MAP[$size].size, ({
+  $type
+}) => getColors($type).background, ({
+  $type
+}) => getColors($type).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+exports.HighlightedIconContainer = HighlightedIconContainer;

package/dist/HighlightedIcon/HighlightedIcon.style.d.ts

@@ -0,0 +1,5 @@
+import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+export declare const HighlightedIconContainer: import("styled-components").StyledComponent<"div", any, {
+    $size: IconSizeType;
+    $type: HighlightedIconType;
+}, never>;