@redis-ui/components 42.8.0 → 43.2.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/Stepper.cjs

@@ -1,21 +1,30 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
 const Step = require("./components/Step/Step.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
+const Stepper_utils = require("./Stepper.utils.cjs");
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntime.jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
-          children: step.icon
-        }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
-          children: step.label
+      jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+        children: [idx > 0 && jsxRuntime.jsxRuntimeExports.jsx(Step.default.Separator, {
+          state: Stepper_utils.getStepState(idx, currentStep)
+        }), jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
+            children: step.icon
+          }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.d.ts

@@ -4,6 +4,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
         Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import(".").StepperStepContextType;
     };
     Compose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
@@ -11,6 +12,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
             Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
             Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
             Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+            Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
             useStepContext: () => import(".").StepperStepContextType;
         };
     };

package/dist/Stepper/Stepper.js

@@ -1,19 +1,28 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
 import Step from "./components/Step/Step.js";
 import StepperCompose from "./components/Compose/Compose.js";
+import { getStepState } from "./Stepper.utils.js";
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntimeExports.jsxs(Step.Compose, {
-        children: [jsxRuntimeExports.jsx(Step.Icon, {
-          children: step.icon
-        }), jsxRuntimeExports.jsx(Step.Label, {
-          children: step.label
+      jsxRuntimeExports.jsxs(Fragment, {
+        children: [idx > 0 && jsxRuntimeExports.jsx(Step.Separator, {
+          state: getStepState(idx, currentStep)
+        }), jsxRuntimeExports.jsxs(Step.Compose, {
+          children: [jsxRuntimeExports.jsx(Step.Icon, {
+            children: step.icon
+          }), jsxRuntimeExports.jsx(Step.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+exports.getStepState = getStepState;

package/dist/Stepper/Stepper.utils.d.ts

@@ -0,0 +1,2 @@
+import { StepperStepStateType } from './components/Step/Step.types';
+export declare const getStepState: (idx: number, currentStep: number) => StepperStepStateType;

package/dist/Stepper/Stepper.utils.js

@@ -0,0 +1,12 @@
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+export {
+  getStepState
+};

package/dist/Stepper/components/Compose/Compose.d.ts

@@ -4,6 +4,7 @@ declare const StepperCompose: (({ currentStep, getIsStepInteractive, onStepChang
         Compose: ({ onClick, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("../Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("../Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("../Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import("../..").StepperStepContextType;
     };
 };

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

@@ -4,6 +4,7 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Icon = require("./components/Icon/Icon.cjs");
 const Label = require("./components/Label/Label.cjs");
+const Separator = require("./components/Separator/Separator.cjs");
 const Step_context = require("./Step.context.cjs");
 const Step = Object.assign(({
   children,
@@ -17,6 +18,7 @@ const Step = Object.assign(({
   Compose: Compose.default,
   Icon: Icon.default,
   Label: Label.default,
+  Separator: Separator.default,
   useStepContext: Step_context.useStepContext
 });
 exports.default = Step;

package/dist/Stepper/components/Step/Step.d.ts

@@ -3,6 +3,7 @@ declare const Step: (({ children, ...restProps }: StepperStepProps) => import("r
     Compose: ({ onClick, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
     Icon: ({ children, ...restProps }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+    Separator: ({ state, ...restProps }: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     useStepContext: () => import("./Step.types").StepperStepContextType;
 };
 export default Step;

package/dist/Stepper/components/Step/Step.js

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import Compose from "./components/Compose/Compose.js";
 import Icon from "./components/Icon/Icon.js";
 import Label from "./components/Label/Label.js";
+import Separator from "./components/Separator/Separator.js";
 import { useStepContext } from "./Step.context.js";
 const Step = Object.assign(({
   children,
@@ -15,6 +16,7 @@ const Step = Object.assign(({
   Compose,
   Icon,
   Label,
+  Separator,
   useStepContext
 });
 export {

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

@@ -3,11 +3,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const Step_context = require("../../Step.context.cjs");
-const Step_types = require("../../Step.types.cjs");
 const useStepRegistration = require("../../../../hooks/useStepRegistration.cjs");
 const Stepper_context = require("../../../../Stepper.context.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
+const Stepper_utils = require("../../../../Stepper.utils.cjs");
 const Compose = ({
   onClick,
   ...restProps
@@ -20,19 +20,14 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration.useStepRegistration();
-  let state = Step_types.StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = Step_types.StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = Step_types.StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? Stepper_utils.getStepState(stepIndex, currentStep) : "idle";
   const contextValue = React.useMemo(() => ({
     state,
     index: stepIndex
   }), [state, stepIndex]);
-  if (stepIndex < 0) return null;
+  if (stepIndex < 0) {
+    return null;
+  }
   const interactiveProps = useStepperInteractive.getInteractiveStepProps({
     onStepChange,
     getIsStepInteractive,

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

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
 import { StepContextProvider } from "../../Step.context.js";
-import { StepperStepState } from "../../Step.types.js";
 import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
 import { useStepperContext } from "../../../../Stepper.context.js";
 import { StepCompose } from "./Compose.style.js";
 import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
+import { getStepState } from "../../../../Stepper.utils.js";
 const Compose = ({
   onClick,
   ...restProps
@@ -18,19 +18,14 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration();
-  let state = StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? getStepState(stepIndex, currentStep) : "idle";
   const contextValue = useMemo(() => ({
     state,
     index: stepIndex
   }), [state, stepIndex]);
-  if (stepIndex < 0) return null;
+  if (stepIndex < 0) {
+    return null;
+  }
   const interactiveProps = getInteractiveStepProps({
     onStepChange,
     getIsStepInteractive,

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Separator_style = require("./Separator.style.cjs");
+const Separator = ({
+  state,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsx(Separator_style.Separator, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true
+  });
+};
+exports.default = Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.d.ts

@@ -0,0 +1,3 @@
+import { SeparatorProps } from './Separator.types';
+declare const Separator: ({ state, ...restProps }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.js

@@ -0,0 +1,15 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Separator as Separator$1 } from "./Separator.style.js";
+const Separator = ({
+  state,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsx(Separator$1, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true
+  });
+};
+export {
+  Separator as default
+};

package/dist/Stepper/components/Step/components/Separator/Separator.style.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Step_types = require("../../Step.types.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Separator = _styled__default.default.div.withConfig({
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-89iwun-0"
+})(["width:1.6rem;height:", ";transition:background-color 0.3s ease;", ""], () => redisUiStyles.useTheme().components.stepper.step.separator.height, () => {
+  const {
+    states
+  } = redisUiStyles.useTheme().components.stepper.step;
+  return Object.values(Step_types.StepperStepState).map((state) => {
+    const theme = states[state].separator;
+    return _styled.css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+        }
+      `;
+  });
+});
+exports.Separator = Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.style.d.ts

@@ -0,0 +1 @@
+export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Stepper/components/Step/components/Separator/Separator.style.js

@@ -0,0 +1,22 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { StepperStepState } from "../../Step.types.js";
+const Separator = _styled.div.withConfig({
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-89iwun-0"
+})(["width:1.6rem;height:", ";transition:background-color 0.3s ease;", ""], () => useTheme().components.stepper.step.separator.height, () => {
+  const {
+    states
+  } = useTheme().components.stepper.step;
+  return Object.values(StepperStepState).map((state) => {
+    const theme = states[state].separator;
+    return css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+        }
+      `;
+  });
+});
+export {
+  Separator
+};

package/dist/Stepper/components/Step/components/Separator/Separator.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { StepperStepStateType } from '../../Step.types';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    state?: StepperStepStateType;
+}

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -12,7 +12,9 @@ function useStepperInteractive({
 }) {
   const isInteractive = !!onStepChange;
   const isStepInteractive = React.useCallback((stepIndex) => {
-    if (!isInteractive) return false;
+    if (!isInteractive) {
+      return false;
+    }
     if (typeof getIsStepInteractive === "function") {
       return getIsStepInteractive(stepIndex);
     }
@@ -21,19 +23,25 @@ function useStepperInteractive({
   const handleKeyDown = isInteractive ? (event) => {
     const findNextInteractive = (from, to = totalSteps || 0) => {
       for (let i = from; i < to; i += 1) {
-        if (isStepInteractive(i)) return i;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const findPrevInteractive = (from, to = 0) => {
       for (let i = from; i >= to; i -= 1) {
-        if (isStepInteractive(i)) return i;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const handleChange = (next) => {
       event.preventDefault();
-      if (next !== void 0) onStepChange(next);
+      if (next !== void 0) {
+        onStepChange(next);
+      }
     };
     const {
       key

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -10,7 +10,9 @@ function useStepperInteractive({
 }) {
   const isInteractive = !!onStepChange;
   const isStepInteractive = useCallback((stepIndex) => {
-    if (!isInteractive) return false;
+    if (!isInteractive) {
+      return false;
+    }
     if (typeof getIsStepInteractive === "function") {
       return getIsStepInteractive(stepIndex);
     }
@@ -19,19 +21,25 @@ function useStepperInteractive({
   const handleKeyDown = isInteractive ? (event) => {
     const findNextInteractive = (from, to = totalSteps || 0) => {
       for (let i = from; i < to; i += 1) {
-        if (isStepInteractive(i)) return i;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const findPrevInteractive = (from, to = 0) => {
       for (let i = from; i >= to; i -= 1) {
-        if (isStepInteractive(i)) return i;
+        if (isStepInteractive(i)) {
+          return i;
+        }
       }
       return void 0;
     };
     const handleChange = (next) => {
       event.preventDefault();
-      if (next !== void 0) onStepChange(next);
+      if (next !== void 0) {
+        onStepChange(next);
+      }
     };
     const {
       key

package/dist/Switch/components/Switcher/Switcher.cjs

@@ -48,7 +48,9 @@ const Switcher = Object.assign(({
       userCanChangeRef.current = false;
     };
     handleKeyDown = (e) => {
-      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) userCanChangeRef.current = true;
+      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        userCanChangeRef.current = true;
+      }
     };
   }
   return jsxRuntime.jsxRuntimeExports.jsx(Switcher.Compose, {

package/dist/Switch/components/Switcher/Switcher.js

@@ -46,7 +46,9 @@ const Switcher = Object.assign(({
       userCanChangeRef.current = false;
     };
     handleKeyDown = (e) => {
-      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) userCanChangeRef.current = true;
+      if ((e.code === "Space" || e.code === "Enter") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        userCanChangeRef.current = true;
+      }
     };
   }
   return jsxRuntimeExports.jsx(Switcher.Compose, {

package/dist/Switch/components/Switcher/Switcher.style.cjs

@@ -16,30 +16,53 @@ const getSwitchStatesStyle = (theme, maps, {
   withCursor,
   selectorSuffix = ""
 }) => {
-  if (!theme) return null;
-  if (disabled) return _styled.css`
+  if (!theme) {
+    return null;
+  }
+  if (disabled) {
+    return _styled.css`
       &&${selectorSuffix} {
-        ${css_utils.styleFromTokens(maps, theme.disabled)};
+        ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.disabled
+    })};
         ${withCursor && `cursor: not-allowed`};
       }
     `;
-  if (readOnly) return _styled.css`
+  }
+  if (readOnly) {
+    return _styled.css`
       &${selectorSuffix}, &:hover${selectorSuffix}, &:active${selectorSuffix} {
-        ${css_utils.styleFromTokens(maps, theme.readonly)};
+        ${css_utils.styleFromTokens({
+      tokenMaps: maps,
+      tokens: theme.readonly
+    })};
         ${withCursor && `cursor: default`};
       }
     `;
+  }
   return _styled.css`
     &${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.normal
+  })};
     }
 
     &:hover${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.hover, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.hover,
+    fallbackTokens: theme.normal
+  })};
     }
 
     &:active${selectorSuffix} {
-      ${css_utils.styleFromTokens(maps, theme.active, theme.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: theme.active,
+    fallbackTokens: theme.normal
+  })};
     }
   `;
 };