@redis-ui/components 42.8.0 → 43.2.1

package/dist/Overflow/Overflow.utils.js

@@ -14,7 +14,9 @@ const calcVisibleCount = ({
     let indexInRow = 0;
     itemKeys.some((key, index) => {
       const size = itemSizes.get(key);
-      if (size === void 0) return true;
+      if (size === void 0) {
+        return true;
+      }
       const calcOverflow = () => {
         const isLastRow = row === maxRows - 1;
         const isFirstInRow = indexInRow === 0;
@@ -24,8 +26,9 @@ const calcVisibleCount = ({
         summarySize += itemSize;
         indexInRow += 1;
         const isOverflow2 = summarySize + expectedExtraSize > containerSize;
-        if (!isOverflow2) visibleCount += 1;
-        else if (isFirstInRow && itemSize >= containerSize && (!isLastRow || isLastItem)) {
+        if (!isOverflow2) {
+          visibleCount += 1;
+        } else if (isFirstInRow && itemSize >= containerSize && (!isLastRow || isLastItem)) {
           visibleCount += 1;
           return false;
         }
@@ -33,7 +36,9 @@ const calcVisibleCount = ({
       };
       const isOverflow = calcOverflow();
       if (isOverflow) {
-        if (row === maxRows - 1) return true;
+        if (row === maxRows - 1) {
+          return true;
+        }
         row += 1;
         indexInRow = 0;
         summarySize = 0;
@@ -47,8 +52,12 @@ const calcVisibleCount = ({
 const verifyChildren = (children) => {
   const keysCheck = /* @__PURE__ */ new Set();
   return Children.toArray(children).filter((child) => {
-    if (typeof child !== "object") throw new Error("Child must be ReactElement");
-    if (!("key" in child) || !child.key || keysCheck.has(child.key)) throw new Error("Each child element must have unique key");
+    if (typeof child !== "object") {
+      throw new Error("Child must be ReactElement");
+    }
+    if (!("key" in child) || !child.key || keysCheck.has(child.key)) {
+      throw new Error("Each child element must have unique key");
+    }
     keysCheck.add(child.key);
     return true;
   });

package/dist/Overflow/components/OverflowContainer/OverflowContainer.cjs

@@ -26,7 +26,9 @@ const OverflowContainer = ({
   useResize.useResizeWidth((newSize = 0) => {
     if (ref.current && newSize && onGapChange) {
       const gap = Number.parseFloat(window.getComputedStyle(ref.current).columnGap);
-      if (!Number.isNaN(gap)) onGapChange(gap);
+      if (!Number.isNaN(gap)) {
+        onGapChange(gap);
+      }
     }
     if (size === void 0) {
       onSizeChange(newSize);

package/dist/Overflow/components/OverflowContainer/OverflowContainer.js

@@ -24,7 +24,9 @@ const OverflowContainer = ({
   useResizeWidth((newSize = 0) => {
     if (ref.current && newSize && onGapChange) {
       const gap = Number.parseFloat(window.getComputedStyle(ref.current).columnGap);
-      if (!Number.isNaN(gap)) onGapChange(gap);
+      if (!Number.isNaN(gap)) {
+        onGapChange(gap);
+      }
     }
     if (size === void 0) {
       onSizeChange(newSize);

package/dist/Pagination/components/PageSizeSelect.cjs

@@ -39,7 +39,9 @@ const PageSizeSelectLabel = ({
     pageSizeSelectorId,
     onPageSizeChange
   } = Pagination_context.usePaginationContext();
-  if (!onPageSizeChange) return null;
+  if (!onPageSizeChange) {
+    return null;
+  }
   return jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
     component: "span",
     size: "auto",

package/dist/Pagination/components/PageSizeSelect.js

@@ -37,7 +37,9 @@ const PageSizeSelectLabel = ({
     pageSizeSelectorId,
     onPageSizeChange
   } = usePaginationContext();
-  if (!onPageSizeChange) return null;
+  if (!onPageSizeChange) {
+    return null;
+  }
   return jsxRuntimeExports.jsx(Typography.Body, {
     component: "span",
     size: "auto",

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

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

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);
     })
   });
 };