@redis-ui/components 37.0.0

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

@@ -0,0 +1,39 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import Skeleton from "../../../node_modules/react-loading-skeleton/dist/index.js";
+import { useShapeProps } from "../../hooks/useShapeProps.js";
+import { SquaresContainer, SquareWrapper } from "./Square.style.js";
+import { getSizeByRangeOrNumber } from "../../utils/getSizeByRangeOrNumber.js";
+const Square = ({
+  width,
+  count = 1,
+  height = 12,
+  borderRadius = 4,
+  darkShade = false
+}) => {
+  const shapeProps = useShapeProps({
+    darkShade
+  });
+  return jsxRuntimeExports.jsx(SquaresContainer, {
+    children: Array.from({
+      length: getSizeByRangeOrNumber(count)
+    }).map((_, index) => {
+      let squareWidth;
+      if (typeof width === "string") {
+        squareWidth = width;
+      } else {
+        squareWidth = `${getSizeByRangeOrNumber(width)}px`;
+      }
+      return jsxRuntimeExports.jsx(Skeleton, {
+        ...shapeProps,
+        containerTestId: `skeleton-square-${index}`,
+        width: squareWidth,
+        height,
+        borderRadius,
+        wrapper: SquareWrapper
+      });
+    })
+  });
+};
+export {
+  Square
+};

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

@@ -0,0 +1,16 @@
+"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 SquaresContainer = _styled__default.default.div.withConfig({
+  displayName: "Squarestyle__SquaresContainer",
+  componentId: "RedisUI__sc-k5and0-0"
+})(["display:flex;flex-direction:column;gap:", ";"], () => redisUiStyles.useTheme().components.skeleton.circle.gap);
+const SquareWrapper = _styled__default.default.div.withConfig({
+  displayName: "Squarestyle__SquareWrapper",
+  componentId: "RedisUI__sc-k5and0-1"
+})(["line-height:0;"]);
+exports.SquareWrapper = SquareWrapper;
+exports.SquaresContainer = SquaresContainer;

package/dist/Skeleton/components/Square/Square.style.d.ts

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

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

@@ -0,0 +1,14 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SquaresContainer = _styled.div.withConfig({
+  displayName: "Squarestyle__SquaresContainer",
+  componentId: "RedisUI__sc-k5and0-0"
+})(["display:flex;flex-direction:column;gap:", ";"], () => useTheme().components.skeleton.circle.gap);
+const SquareWrapper = _styled.div.withConfig({
+  displayName: "Squarestyle__SquareWrapper",
+  componentId: "RedisUI__sc-k5and0-1"
+})(["line-height:0;"]);
+export {
+  SquareWrapper,
+  SquaresContainer
+};

package/dist/Skeleton/hooks/useShapeProps.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const useShapeProps = ({
+  darkShade
+}) => {
+  const shade = redisUiStyles.useTheme().components.skeleton.shades[darkShade ? "dark" : "light"];
+  return {
+    duration: 2,
+    baseColor: shade.baseColor,
+    highlightColor: shade.highlightColor
+  };
+};
+exports.useShapeProps = useShapeProps;

package/dist/Skeleton/hooks/useShapeProps.d.ts

@@ -0,0 +1,6 @@
+import { SkeletonShapeProps } from '../Skeleton.types';
+export declare const useShapeProps: ({ darkShade }: Pick<SkeletonShapeProps, 'darkShade'>) => {
+    duration: number;
+    baseColor: string;
+    highlightColor: string;
+};

package/dist/Skeleton/hooks/useShapeProps.js

@@ -0,0 +1,14 @@
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const useShapeProps = ({
+  darkShade
+}) => {
+  const shade = useTheme().components.skeleton.shades[darkShade ? "dark" : "light"];
+  return {
+    duration: 2,
+    baseColor: shade.baseColor,
+    highlightColor: shade.highlightColor
+  };
+};
+export {
+  useShapeProps
+};

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton.types';

package/dist/Skeleton/utils/getSizeByRangeOrNumber.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getSizeByRangeOrNumber = (number) => {
+  if (typeof number === "number") {
+    return number;
+  }
+  return Math.floor(Math.random() * (number.max - number.min + 1) + number.min);
+};
+exports.getSizeByRangeOrNumber = getSizeByRangeOrNumber;

package/dist/Skeleton/utils/getSizeByRangeOrNumber.d.ts

@@ -0,0 +1,2 @@
+import { NumberRange } from '../Skeleton.types';
+export declare const getSizeByRangeOrNumber: (number: NumberRange | number) => number;

package/dist/Skeleton/utils/getSizeByRangeOrNumber.js

@@ -0,0 +1,9 @@
+const getSizeByRangeOrNumber = (number) => {
+  if (typeof number === "number") {
+    return number;
+  }
+  return Math.floor(Math.random() * (number.max - number.min + 1) + number.min);
+};
+export {
+  getSizeByRangeOrNumber
+};

package/dist/Stepper/Stepper.cjs

@@ -0,0 +1,40 @@
+"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 Step_types = require("./components/Step/Step.types.cjs");
+const Stepper_style = require("./Stepper.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const Stepper = Object.assign(({
+  children,
+  className,
+  currentStep = -1,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_style.Container, {
+    className,
+    ...restProps,
+    children: React__default.default.Children.map(children, (child, index) => {
+      if (React__default.default.isValidElement(child)) {
+        let state = Step_types.StepState.IDLE;
+        if (index < currentStep) {
+          state = Step_types.StepState.COMPLETED;
+        } else if (index === currentStep) {
+          state = Step_types.StepState.FOCUSED;
+        }
+        return React__default.default.cloneElement(child, {
+          state,
+          index: index + 1,
+          "data-state": state
+        });
+      }
+      return child;
+    })
+  });
+}, {
+  Step: Step.default
+});
+const Stepper$1 = Stepper;
+exports.default = Stepper$1;

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,9 @@
+import { StepperProps } from './Stepper.types';
+declare const Stepper: (({ children, className, currentStep, ...restProps }: StepperProps) => import("react/jsx-runtime").JSX.Element) & {
+    Step: (({ children, className, index, state }: import("./components/Step/Step.types").StepProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ state, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Icon: ({ children, className }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, className }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default Stepper;

package/dist/Stepper/Stepper.js

@@ -0,0 +1,38 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import React__default from "react";
+import Step from "./components/Step/Step.js";
+import { StepState } from "./components/Step/Step.types.js";
+import { Container } from "./Stepper.style.js";
+const Stepper = Object.assign(({
+  children,
+  className,
+  currentStep = -1,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsx(Container, {
+    className,
+    ...restProps,
+    children: React__default.Children.map(children, (child, index) => {
+      if (React__default.isValidElement(child)) {
+        let state = StepState.IDLE;
+        if (index < currentStep) {
+          state = StepState.COMPLETED;
+        } else if (index === currentStep) {
+          state = StepState.FOCUSED;
+        }
+        return React__default.cloneElement(child, {
+          state,
+          index: index + 1,
+          "data-state": state
+        });
+      }
+      return child;
+    })
+  });
+}, {
+  Step
+});
+const Stepper$1 = Stepper;
+export {
+  Stepper$1 as default
+};

package/dist/Stepper/Stepper.style.cjs

@@ -0,0 +1,11 @@
+"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 Container = _styled__default.default.div.withConfig({
+  displayName: "Stepperstyle__Container",
+  componentId: "RedisUI__sc-c4ery4-0"
+})(["display:flex;gap:", ";align-items:center;"], () => redisUiStyles.useTheme().components.stepper.gap);
+exports.Container = Container;

package/dist/Stepper/Stepper.style.d.ts

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

package/dist/Stepper/Stepper.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const Container = _styled.div.withConfig({
+  displayName: "Stepperstyle__Container",
+  componentId: "RedisUI__sc-c4ery4-0"
+})(["display:flex;gap:", ";align-items:center;"], () => useTheme().components.stepper.gap);
+export {
+  Container
+};

package/dist/Stepper/Stepper.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+    currentStep?: number;
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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 Step_types = require("./Step.types.cjs");
+const Step = Object.assign(({
+  children,
+  className,
+  index = "",
+  state = Step_types.StepState.IDLE
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Step.Compose, {
+    className,
+    state,
+    "data-state": state,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Step.Icon, {
+      children: index
+    }), jsxRuntime.jsxRuntimeExports.jsx(Step.Label, {
+      children
+    })]
+  });
+}, {
+  Compose: Compose.default,
+  Icon: Icon.default,
+  Label: Label.default
+});
+exports.default = Step;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const StepContext = React.createContext(null);
+function useStepContext() {
+  const context = React.useContext(StepContext);
+  if (!context) {
+    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
+  }
+  return context;
+}
+exports.StepContext = StepContext;
+exports.useStepContext = useStepContext;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { StepContextType } from './Step.types';
+export declare const StepContext: import("react").Context<StepContextType | null>;
+export declare function useStepContext(): StepContextType;

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const StepContext = createContext(null);
+function useStepContext() {
+  const context = useContext(StepContext);
+  if (!context) {
+    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
+  }
+  return context;
+}
+export {
+  StepContext,
+  useStepContext
+};

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

@@ -0,0 +1,7 @@
+import { StepProps } from './Step.types';
+declare const Step: (({ children, className, index, state }: StepProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ state, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, className }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Step;

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

@@ -0,0 +1,29 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import Compose from "./components/Compose/Compose.js";
+import Icon from "./components/Icon/Icon.js";
+import Label from "./components/Label/Label.js";
+import { StepState } from "./Step.types.js";
+const Step = Object.assign(({
+  children,
+  className,
+  index = "",
+  state = StepState.IDLE
+}) => {
+  return jsxRuntimeExports.jsxs(Step.Compose, {
+    className,
+    state,
+    "data-state": state,
+    children: [jsxRuntimeExports.jsx(Step.Icon, {
+      children: index
+    }), jsxRuntimeExports.jsx(Step.Label, {
+      children
+    })]
+  });
+}, {
+  Compose,
+  Icon,
+  Label
+});
+export {
+  Step as default
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const StepState = {
+  IDLE: "idle",
+  FOCUSED: "focused",
+  COMPLETED: "completed"
+};
+exports.StepState = StepState;

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export interface StepProps extends HTMLAttributes<HTMLDivElement> {
+    state?: StepStateType;
+    index?: string;
+}
+export declare const StepState: {
+    readonly IDLE: "idle";
+    readonly FOCUSED: "focused";
+    readonly COMPLETED: "completed";
+};
+export type StepStateType = (typeof StepState)[keyof typeof StepState];
+export interface StepContextType {
+    state: StepStateType;
+}

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

@@ -0,0 +1,8 @@
+const StepState = {
+  IDLE: "idle",
+  FOCUSED: "focused",
+  COMPLETED: "completed"
+};
+export {
+  StepState
+};

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

@@ -0,0 +1,22 @@
+"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 Compose_style = require("./Compose.style.cjs");
+const Step_context = require("../../Step.context.cjs");
+const Step_types = require("../../Step.types.cjs");
+const Compose = ({
+  state = Step_types.StepState.IDLE,
+  ...restProps
+}) => {
+  const contextValue = React.useMemo(() => ({
+    state
+  }), [state]);
+  return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContext.Provider, {
+    value: contextValue,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
+      ...restProps
+    })
+  });
+};
+exports.default = Compose;

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

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

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

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useMemo } from "react";
+import { Container } from "./Compose.style.js";
+import { StepContext } from "../../Step.context.js";
+import { StepState } from "../../Step.types.js";
+const Compose = ({
+  state = StepState.IDLE,
+  ...restProps
+}) => {
+  const contextValue = useMemo(() => ({
+    state
+  }), [state]);
+  return jsxRuntimeExports.jsx(StepContext.Provider, {
+    value: contextValue,
+    children: jsxRuntimeExports.jsx(Container, {
+      ...restProps
+    })
+  });
+};
+export {
+  Compose as default
+};

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

@@ -0,0 +1,11 @@
+"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 Container = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__Container",
+  componentId: "RedisUI__sc-1t34ip6-0"
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;"], () => redisUiStyles.useTheme().components.stepper.step.gap);
+exports.Container = Container;

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

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

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

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const Container = _styled.div.withConfig({
+  displayName: "Composestyle__Container",
+  componentId: "RedisUI__sc-1t34ip6-0"
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;"], () => useTheme().components.stepper.step.gap);
+export {
+  Container
+};

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Step_context = require("../../Step.context.cjs");
+const Step_types = require("../../Step.types.cjs");
+const Icon_style = require("./Icon.style.cjs");
+const Typography = require("../../../../../Typography/Typography.cjs");
+const Icon = ({
+  children,
+  className
+}) => {
+  const context = Step_context.useStepContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Icon_style.Container, {
+    className,
+    "data-state": context.state,
+    children: context.state === Step_types.StepState.COMPLETED ? jsxRuntime.jsxRuntimeExports.jsx(Icon_style.IconCheck, {}) : jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+      size: "S",
+      children
+    })
+  });
+};
+exports.default = Icon;

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

@@ -0,0 +1,3 @@
+import { IconProps } from './Icon.types';
+declare const Icon: ({ children, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default Icon;

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

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useStepContext } from "../../Step.context.js";
+import { StepState } from "../../Step.types.js";
+import { Container, IconCheck } from "./Icon.style.js";
+import Typography from "../../../../../Typography/Typography.js";
+const Icon = ({
+  children,
+  className
+}) => {
+  const context = useStepContext();
+  return jsxRuntimeExports.jsx(Container, {
+    className,
+    "data-state": context.state,
+    children: context.state === StepState.COMPLETED ? jsxRuntimeExports.jsx(IconCheck, {}) : jsxRuntimeExports.jsx(Typography.Body, {
+      size: "S",
+      children
+    })
+  });
+};
+export {
+  Icon as default
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const Step_types = require("../../Step.types.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Container = _styled__default.default.div.withConfig({
+  displayName: "Iconstyle__Container",
+  componentId: "RedisUI__sc-1ojkwgp-0"
+})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;width:", ";height:", ";", ""], () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => {
+  const {
+    states
+  } = redisUiStyles.useTheme().components.stepper.step;
+  return Object.values(Step_types.StepState).map((state) => {
+    const theme = states[state].indicator;
+    return _styled.css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+          color: ${theme.iconColor};
+          border-radius: ${theme.borderRadius};
+          padding: ${theme.padding};
+        }
+      `;
+  });
+});
+const IconCheck = _styled__default.default(redisUiIcons.CheckBoldIcon).withConfig({
+  displayName: "Iconstyle__IconCheck",
+  componentId: "RedisUI__sc-1ojkwgp-1"
+})(["&,> *{fill:currentColor;}"]);
+exports.Container = Container;
+exports.IconCheck = IconCheck;

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

@@ -0,0 +1,2 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconCheck: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -0,0 +1,31 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { CheckBoldIcon } from "@redislabsdev/redis-ui-icons";
+import { StepState } from "../../Step.types.js";
+const Container = _styled.div.withConfig({
+  displayName: "Iconstyle__Container",
+  componentId: "RedisUI__sc-1ojkwgp-0"
+})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;width:", ";height:", ";", ""], () => useTheme().components.stepper.step.indicator.size, () => useTheme().components.stepper.step.indicator.size, () => {
+  const {
+    states
+  } = useTheme().components.stepper.step;
+  return Object.values(StepState).map((state) => {
+    const theme = states[state].indicator;
+    return css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+          color: ${theme.iconColor};
+          border-radius: ${theme.borderRadius};
+          padding: ${theme.padding};
+        }
+      `;
+  });
+});
+const IconCheck = _styled(CheckBoldIcon).withConfig({
+  displayName: "Iconstyle__IconCheck",
+  componentId: "RedisUI__sc-1ojkwgp-1"
+})(["&,> *{fill:currentColor;}"]);
+export {
+  Container,
+  IconCheck
+};

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type IconProps = HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Step_context = require("../../Step.context.cjs");
+const Label_style = require("./Label.style.cjs");
+const Step_types = require("../../Step.types.cjs");
+const Typography = require("../../../../../Typography/Typography.cjs");
+const Label = ({
+  children,
+  className
+}) => {
+  const context = Step_context.useStepContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Label_style.Container, {
+    className,
+    "data-state": context.state,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+      size: "M",
+      variant: context.state === Step_types.StepState.FOCUSED ? "semiBold" : "regular",
+      children
+    })
+  });
+};
+exports.default = Label;