@redis-ui/components 42.7.0 → 43.0.2

package/dist/Popover/components/Content/Content.js

@@ -33,7 +33,9 @@ const Content = Object.assign(({
       })
     });
   }
-  if (!content) return null;
+  if (!content) {
+    return null;
+  }
   return jsxRuntimeExports.jsx(Content.Compose, {
     ...contentOptions,
     children: typeof content === "string" ? jsxRuntimeExports.jsx(Content.Text, {

package/dist/Popover/components/Content/components/Footer/Footer.cjs

@@ -11,7 +11,9 @@ const Footer = Object.assign(({
   linkText,
   ...restProps
 }) => {
-  if (!link && !actionButtonHandler) return null;
+  if (!link && !actionButtonHandler) {
+    return null;
+  }
   return jsxRuntime.jsxRuntimeExports.jsxs(Footer.Compose, {
     ...restProps,
     children: [link ? jsxRuntime.jsxRuntimeExports.jsx(Link.default, {

package/dist/Popover/components/Content/components/Footer/Footer.js

@@ -9,7 +9,9 @@ const Footer = Object.assign(({
   linkText,
   ...restProps
 }) => {
-  if (!link && !actionButtonHandler) return null;
+  if (!link && !actionButtonHandler) {
+    return null;
+  }
   return jsxRuntimeExports.jsxs(Footer.Compose, {
     ...restProps,
     children: [link ? jsxRuntimeExports.jsx(Link, {

package/dist/RadioGroup/components/Item/components/Label/Label.style.cjs

@@ -10,8 +10,16 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const getStateStyles = (tokens) => {
   const maps = [Button_style_utils.textColorMap];
-  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${css_utils.getRelatedStateSelector(Indicator_style.RadioGroupItemIndicator, state, Compose_style.RadioGroupItemCompose)} {
-    ${css_utils.styleFromTokens(maps, stateTokens, fallbackTokens)};
+  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${css_utils.getRelatedStateSelector({
+    inputSelector: Indicator_style.RadioGroupItemIndicator,
+    inputStateSelector: state,
+    commonContainer: Compose_style.RadioGroupItemCompose
+  })} {
+    ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateTokens,
+    fallbackTokens
+  })};
   }`;
   return _styled.css`
     ${getLabelStateSelector("", tokens.off.normal)};
@@ -23,7 +31,11 @@ const getStateStyles = (tokens) => {
     ${getLabelStateSelector(":disabled", tokens.off.disabled)};
     ${getLabelStateSelector('[data-state="checked"]:disabled', tokens.on.disabled)};
 
-    ${css_utils.getRelatedStateSelector(Indicator_style.RadioGroupItemIndicator, ":disabled", Compose_style.RadioGroupItemCompose)} {
+    ${css_utils.getRelatedStateSelector({
+    inputSelector: Indicator_style.RadioGroupItemIndicator,
+    inputStateSelector: ":disabled",
+    commonContainer: Compose_style.RadioGroupItemCompose
+  })} {
       cursor: not-allowed;
     }
   `;

package/dist/RadioGroup/components/Item/components/Label/Label.style.js

@@ -6,8 +6,16 @@ import { RadioGroupItemCompose } from "../Compose/Compose.style.js";
 import { RadioGroupItemIndicator } from "../Indicator/Indicator.style.js";
 const getStateStyles = (tokens) => {
   const maps = [textColorMap];
-  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${getRelatedStateSelector(RadioGroupItemIndicator, state, RadioGroupItemCompose)} {
-    ${styleFromTokens(maps, stateTokens, fallbackTokens)};
+  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${getRelatedStateSelector({
+    inputSelector: RadioGroupItemIndicator,
+    inputStateSelector: state,
+    commonContainer: RadioGroupItemCompose
+  })} {
+    ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateTokens,
+    fallbackTokens
+  })};
   }`;
   return css`
     ${getLabelStateSelector("", tokens.off.normal)};
@@ -19,7 +27,11 @@ const getStateStyles = (tokens) => {
     ${getLabelStateSelector(":disabled", tokens.off.disabled)};
     ${getLabelStateSelector('[data-state="checked"]:disabled', tokens.on.disabled)};
 
-    ${getRelatedStateSelector(RadioGroupItemIndicator, ":disabled", RadioGroupItemCompose)} {
+    ${getRelatedStateSelector({
+    inputSelector: RadioGroupItemIndicator,
+    inputStateSelector: ":disabled",
+    commonContainer: RadioGroupItemCompose
+  })} {
       cursor: not-allowed;
     }
   `;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.cjs

@@ -21,7 +21,9 @@ const ScreenReaderAnnounce = ({
       setEnabled(allowAnnounce);
     }
   }, [allowAnnounce, text]);
-  if (!enabled || !text) return null;
+  if (!enabled || !text) {
+    return null;
+  }
   return jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
     "aria-atomic": true,
     "aria-live": restProps.role === "alert" ? void 0 : "polite",

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.js

@@ -19,7 +19,9 @@ const ScreenReaderAnnounce = ({
       setEnabled(allowAnnounce);
     }
   }, [allowAnnounce, text]);
-  if (!enabled || !text) return null;
+  if (!enabled || !text) {
+    return null;
+  }
   return jsxRuntimeExports.jsx(VisuallyHidden, {
     "aria-atomic": true,
     "aria-live": restProps.role === "alert" ? void 0 : "polite",

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.cjs

@@ -15,7 +15,9 @@ const CollapseButton = ({
     labelId,
     open
   } = Section_context.useSectionContext();
-  if (!triggerId) return null;
+  if (!triggerId) {
+    return null;
+  }
   const trigger = jsxRuntime.jsxRuntimeExports.jsx(index.Trigger, {
     asChild: true,
     children: jsxRuntime.jsxRuntimeExports.jsx(CollapseButton_style.SectionCollapseButton, {

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.js

@@ -13,7 +13,9 @@ const CollapseButton = ({
     labelId,
     open
   } = useSectionContext();
-  if (!triggerId) return null;
+  if (!triggerId) {
+    return null;
+  }
   const trigger = jsxRuntimeExports.jsx(Trigger, {
     asChild: true,
     children: jsxRuntimeExports.jsx(SectionCollapseButton, {

package/dist/Select/components/Content/components/Option/components/Compose/Compose.style.cjs

@@ -27,21 +27,33 @@ const SelectOptionContainer = _styled__default.default(index.Item).withConfig({
           gap: ${theme.gap};
 
           & {
-            ${css_utils.styleFromTokens(maps, theme.states.normal)};
+            ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.normal
+  })};
           }
 
           &[data-highlighted] {
-            ${css_utils.styleFromTokens(maps, theme.states.highlighted)};
+            ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.highlighted
+  })};
           }
 
           &[data-state='checked'] {
-            ${css_utils.styleFromTokens(maps, theme.states.checked)};
+            ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.checked
+  })};
           }
 
           &[data-disabled] {
             &,
             & * > span {
-              ${css_utils.styleFromTokens(maps, theme.states.disabled)};
+              ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.disabled
+  })};
               cursor: not-allowed;
             }
           }

package/dist/Select/components/Content/components/Option/components/Compose/Compose.style.js

@@ -23,21 +23,33 @@ const SelectOptionContainer = _styled(Item).withConfig({
           gap: ${theme.gap};
 
           & {
-            ${styleFromTokens(maps, theme.states.normal)};
+            ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.normal
+  })};
           }
 
           &[data-highlighted] {
-            ${styleFromTokens(maps, theme.states.highlighted)};
+            ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.highlighted
+  })};
           }
 
           &[data-state='checked'] {
-            ${styleFromTokens(maps, theme.states.checked)};
+            ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.checked
+  })};
           }
 
           &[data-disabled] {
             &,
             & * > span {
-              ${styleFromTokens(maps, theme.states.disabled)};
+              ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.states.disabled
+  })};
               cursor: not-allowed;
             }
           }

package/dist/Select/components/Content/components/OptionList/OptionList.cjs

@@ -34,10 +34,12 @@ const OptionList = ({
   const validOptions = getValidOptions();
   if (isSingleSelect && hasSelection && hasSearch && !validOptions.find(isOptionSelected)) {
     const selectedOption = options.find(isOptionSelected);
-    if (selectedOption) validOptions.push({
-      ...selectedOption,
-      hidden: true
-    });
+    if (selectedOption) {
+      validOptions.push({
+        ...selectedOption,
+        hidden: true
+      });
+    }
   }
   const listItems = validOptions.map((option) => jsxRuntime.jsxRuntimeExports.jsx(OptionComponent, {
     option,

package/dist/Select/components/Content/components/OptionList/OptionList.js

@@ -32,10 +32,12 @@ const OptionList = ({
   const validOptions = getValidOptions();
   if (isSingleSelect && hasSelection && hasSearch && !validOptions.find(isOptionSelected)) {
     const selectedOption = options.find(isOptionSelected);
-    if (selectedOption) validOptions.push({
-      ...selectedOption,
-      hidden: true
-    });
+    if (selectedOption) {
+      validOptions.push({
+        ...selectedOption,
+        hidden: true
+      });
+    }
   }
   const listItems = validOptions.map((option) => jsxRuntimeExports.jsx(OptionComponent, {
     option,

package/dist/Select/components/Content/components/OptionList/Virtual.cjs

@@ -22,13 +22,17 @@ const Virtual = ({
       const scrollAndFocus = () => {
         var _a;
         const open = (viewport == null ? void 0 : viewport.closest("body")) != null;
-        if (!open || !validOptions.length) return;
+        if (!open || !validOptions.length) {
+          return;
+        }
         if (isSingleSelect && selectedIndex > -1) {
           onHideContainer(false);
-          if (selectedIndex > 0) (_a = virtualizerRef.current) == null ? void 0 : _a.scrollToIndex(selectedIndex, {
-            align: "end",
-            smooth: false
-          });
+          if (selectedIndex > 0) {
+            (_a = virtualizerRef.current) == null ? void 0 : _a.scrollToIndex(selectedIndex, {
+              align: "end",
+              smooth: false
+            });
+          }
         }
         setTimeout(() => {
           var _a2;

package/dist/Select/components/Content/components/OptionList/Virtual.js

@@ -20,13 +20,17 @@ const Virtual = ({
       const scrollAndFocus = () => {
         var _a;
         const open = (viewport == null ? void 0 : viewport.closest("body")) != null;
-        if (!open || !validOptions.length) return;
+        if (!open || !validOptions.length) {
+          return;
+        }
         if (isSingleSelect && selectedIndex > -1) {
           onHideContainer(false);
-          if (selectedIndex > 0) (_a = virtualizerRef.current) == null ? void 0 : _a.scrollToIndex(selectedIndex, {
-            align: "end",
-            smooth: false
-          });
+          if (selectedIndex > 0) {
+            (_a = virtualizerRef.current) == null ? void 0 : _a.scrollToIndex(selectedIndex, {
+              align: "end",
+              smooth: false
+            });
+          }
         }
         setTimeout(() => {
           var _a2;

package/dist/Select/components/Context/hooks/useSearch.cjs

@@ -9,7 +9,9 @@ const useSearch = ({
   compareRef.current = customCompare || defaultCompare;
   const [searchValue, setSearchValue] = React.useState("");
   const search = React.useCallback((options) => {
-    if (!searchValue) return options;
+    if (!searchValue) {
+      return options;
+    }
     const compare = compareRef.current;
     const searchValueLowerCase = searchValue.toLowerCase();
     return options.filter((option) => compare(option, searchValueLowerCase));

package/dist/Select/components/Context/hooks/useSearch.js

@@ -7,7 +7,9 @@ const useSearch = ({
   compareRef.current = customCompare || defaultCompare;
   const [searchValue, setSearchValue] = useState("");
   const search = useCallback((options) => {
-    if (!searchValue) return options;
+    if (!searchValue) {
+      return options;
+    }
     const compare = compareRef.current;
     const searchValueLowerCase = searchValue.toLowerCase();
     return options.filter((option) => compare(option, searchValueLowerCase));

package/dist/Select/components/Trigger/components/Compose/Compose.style.cjs

@@ -17,29 +17,52 @@ const getStateStyle = (theme) => {
   const maps = [bgColor, textColor, borderColor];
   return _styled.css`
     & {
-      ${css_utils.styleFromTokens(maps, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.normal
+  })};
     }
 
     &:hover,
     &:focus,
     &:active {
-      ${css_utils.styleFromTokens(maps, statesStyle.focused, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.focused,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-state='open'] {
-      ${css_utils.styleFromTokens(maps, statesStyle.opened, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.opened,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='error'] {
-      ${css_utils.styleFromTokens(maps, statesStyle.error, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.error,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='success'] {
-      ${css_utils.styleFromTokens(maps, statesStyle.success, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.success,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &:disabled {
-      ${css_utils.styleFromTokens(maps, statesStyle.disabled, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.disabled,
+    fallbackTokens: statesStyle.normal
+  })};
 
       cursor: no-drop;
       & button {
@@ -62,7 +85,10 @@ const TriggerContainer = _styled__default.default(index.Trigger).withConfig({
 })(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
   const style = redisUiStyles.useTheme().components.select;
   return _styled.css`
-      ${css_utils.styleFromTokens([css_utils.tokenMaps.borderWidth], style)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: [css_utils.tokenMaps.borderWidth],
+    tokens: style
+  })};
       height: ${style.height};
       font-family: ${style.fontFamily};
       font-size: ${style.fontSize};

package/dist/Select/components/Trigger/components/Compose/Compose.style.js

@@ -13,29 +13,52 @@ const getStateStyle = (theme) => {
   const maps = [bgColor, textColor, borderColor];
   return css`
     & {
-      ${styleFromTokens(maps, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.normal
+  })};
     }
 
     &:hover,
     &:focus,
     &:active {
-      ${styleFromTokens(maps, statesStyle.focused, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.focused,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-state='open'] {
-      ${styleFromTokens(maps, statesStyle.opened, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.opened,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='error'] {
-      ${styleFromTokens(maps, statesStyle.error, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.error,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='success'] {
-      ${styleFromTokens(maps, statesStyle.success, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.success,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &:disabled {
-      ${styleFromTokens(maps, statesStyle.disabled, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.disabled,
+    fallbackTokens: statesStyle.normal
+  })};
 
       cursor: no-drop;
       & button {
@@ -58,7 +81,10 @@ const TriggerContainer = _styled(Trigger).withConfig({
 })(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
   const style = useTheme().components.select;
   return css`
-      ${styleFromTokens([tokenMaps.borderWidth], style)};
+      ${styleFromTokens({
+    tokenMaps: [tokenMaps.borderWidth],
+    tokens: style
+  })};
       height: ${style.height};
       font-family: ${style.fontFamily};
       font-size: ${style.fontSize};

package/dist/SideBar/components/Item/Item.style.cjs

@@ -29,15 +29,26 @@ const SideBarItem = _styled__default.default.li.withConfig({
         gap: ${theme.gap};
 
         & {
-          ${css_utils.styleFromTokens(maps, states.normal)}
+          ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.normal
+    })}
         }
 
         &:hover {
-          ${css_utils.styleFromTokens(maps, states.hover, states.normal)}
+          ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.hover,
+      fallbackTokens: states.normal
+    })}
         }
 
         &[data-state='active'] {
-          ${css_utils.styleFromTokens(maps, states.active, states.normal)}
+          ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.active,
+      fallbackTokens: states.normal
+    })}
         }
       `;
   });

package/dist/SideBar/components/Item/Item.style.js

@@ -25,15 +25,26 @@ const SideBarItem = _styled.li.withConfig({
         gap: ${theme.gap};
 
         & {
-          ${styleFromTokens(maps, states.normal)}
+          ${styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.normal
+    })}
         }
 
         &:hover {
-          ${styleFromTokens(maps, states.hover, states.normal)}
+          ${styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.hover,
+      fallbackTokens: states.normal
+    })}
         }
 
         &[data-state='active'] {
-          ${styleFromTokens(maps, states.active, states.normal)}
+          ${styleFromTokens({
+      tokenMaps: maps,
+      tokens: states.active,
+      fallbackTokens: states.normal
+    })}
         }
       `;
   });

package/dist/Skeleton/components/Circle/Circle.cjs

@@ -30,7 +30,7 @@ const Circle = ({
         height: circleWidth,
         circle: true,
         wrapper: Circle_style.CircleWrapper
-      });
+      }, index$1);
     })
   });
 };

package/dist/Skeleton/components/Circle/Circle.js

@@ -28,7 +28,7 @@ const Circle = ({
         height: circleWidth,
         circle: true,
         wrapper: CircleWrapper
-      });
+      }, index);
     })
   });
 };

package/dist/Skeleton/components/Square/Square.cjs

@@ -32,7 +32,7 @@ const Square = ({
         height,
         borderRadius,
         wrapper: Square_style.SquareWrapper
-      });
+      }, index$1);
     })
   });
 };

package/dist/Skeleton/components/Square/Square.js

@@ -30,7 +30,7 @@ const Square = ({
         height,
         borderRadius,
         wrapper: SquareWrapper
-      });
+      }, index);
     })
   });
 };

package/dist/Slider/components/Label/Compose/Compose.cjs

@@ -15,7 +15,9 @@ const Compose = ({
     setValue,
     disabled
   } = Slider_context.useSliderContext();
-  if (offset === void 0) return null;
+  if (offset === void 0) {
+    return null;
+  }
   const handleClick = () => {
     if (clickable && !disabled) {
       setValue([value]);

package/dist/Slider/components/Label/Compose/Compose.js

@@ -13,7 +13,9 @@ const Compose = ({
     setValue,
     disabled
   } = useSliderContext();
-  if (offset === void 0) return null;
+  if (offset === void 0) {
+    return null;
+  }
   const handleClick = () => {
     if (clickable && !disabled) {
       setValue([value]);

package/dist/Slider/components/Mark/Compose/Compose.cjs

@@ -14,7 +14,9 @@ const Compose = ({
     disabled
   } = Slider_context.useSliderContext();
   const offset = useOffset.useOffset(value);
-  if (offset === void 0) return null;
+  if (offset === void 0) {
+    return null;
+  }
   const isInRange = sliderValue[0] >= value;
   return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SliderMarkCompose, {
     "$offset": offset,

package/dist/Slider/components/Mark/Compose/Compose.js

@@ -12,7 +12,9 @@ const Compose = ({
     disabled
   } = useSliderContext();
   const offset = useOffset(value);
-  if (offset === void 0) return null;
+  if (offset === void 0) {
+    return null;
+  }
   const isInRange = sliderValue[0] >= value;
   return jsxRuntimeExports.jsx(SliderMarkCompose, {
     "$offset": offset,

package/dist/Slider/hooks/useOffset.cjs

@@ -6,7 +6,9 @@ const useOffset = (value) => {
     min,
     max
   } = Slider_context.useSliderContext();
-  if (min > value || value > max) return void 0;
+  if (min > value || value > max) {
+    return void 0;
+  }
   const range = max - min;
   return range > 0 ? (value - min) / range * 100 : 0;
 };

package/dist/Slider/hooks/useOffset.js

@@ -4,7 +4,9 @@ const useOffset = (value) => {
     min,
     max
   } = useSliderContext();
-  if (min > value || value > max) return void 0;
+  if (min > value || value > max) {
+    return void 0;
+  }
   const range = max - min;
   return range > 0 ? (value - min) / range * 100 : 0;
 };

package/dist/Stepper/components/Step/components/Compose/Compose.cjs

@@ -32,7 +32,9 @@ const Compose = ({
     state,
     index: stepIndex
   }), [state, stepIndex]);
-  if (stepIndex < 0) return null;
+  if (stepIndex < 0) {
+    return null;
+  }
   const interactiveProps = useStepperInteractive.getInteractiveStepProps({
     onStepChange,
     getIsStepInteractive,