@quen-ui/components 1.1.0 → 1.2.0

package/dist/Stepper/StepLabel.es.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { StepLabelContainerStyled } from "./styles.es.js";
+import { useStepperContext } from "./StepperContext.es.js";
+import Text from "../typography/Text/Text.es.js";
+const StepLabel = ({
+  children,
+  optional,
+  error,
+  className
+}) => {
+  const context = useStepperContext();
+  return /* @__PURE__ */ jsxs(
+    StepLabelContainerStyled,
+    {
+      className,
+      orientation: context.orientation,
+      active: context.__stepActive,
+      completed: context.__stepCompleted,
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "l", className: "step-label-text", type: error ? "danger" : void 0, children }),
+        optional && /* @__PURE__ */ jsx(Text, { size: "s", type: "secondary", children: optional })
+      ]
+    }
+  );
+};
+export {
+  StepLabel
+};

package/dist/Stepper/Stepper.cjs.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const StepperContext = require("./StepperContext.cjs.js");
+const Step = require("./Step.cjs.js");
+const DefaultConnector = ({ orientation, completed, active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  styles.DefaultConnectorLineStyled,
+  {
+    orientation,
+    completed,
+    active
+  }
+);
+const Stepper = ({
+  children,
+  activeStep = 0,
+  orientation = "horizontal",
+  connector = /* @__PURE__ */ jsxRuntime.jsx(DefaultConnector, { orientation }),
+  className,
+  style
+}) => {
+  const steps = React.useMemo(() => {
+    return React.Children.toArray(children).filter(
+      (child) => React.isValidElement(child) && child.type === Step.Step
+    );
+  }, [children]);
+  const contextValue = React.useMemo(
+    () => ({
+      activeStep,
+      orientation,
+      connector
+    }),
+    [activeStep, orientation, connector]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    styles.StepperContainerStyled,
+    {
+      className,
+      style,
+      orientation,
+      children: steps.map((step, index) => {
+        const additionalProps = {
+          index,
+          last: index === steps.length - 1,
+          active: activeStep === index
+        };
+        return React.cloneElement(step, additionalProps);
+      })
+    }
+  ) });
+};
+exports.Stepper = Stepper;

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,2 @@
+import { IStepperProps } from './types';
+export declare const Stepper: ({ children, activeStep, orientation, connector, className, style, }: IStepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/Stepper.es.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement, cloneElement } from "react";
+import { StepperContainerStyled, DefaultConnectorLineStyled } from "./styles.es.js";
+import { StepperContext } from "./StepperContext.es.js";
+import { Step } from "./Step.es.js";
+const DefaultConnector = ({ orientation, completed, active }) => /* @__PURE__ */ jsx(
+  DefaultConnectorLineStyled,
+  {
+    orientation,
+    completed,
+    active
+  }
+);
+const Stepper = ({
+  children,
+  activeStep = 0,
+  orientation = "horizontal",
+  connector = /* @__PURE__ */ jsx(DefaultConnector, { orientation }),
+  className,
+  style
+}) => {
+  const steps = useMemo(() => {
+    return Children.toArray(children).filter(
+      (child) => isValidElement(child) && child.type === Step
+    );
+  }, [children]);
+  const contextValue = useMemo(
+    () => ({
+      activeStep,
+      orientation,
+      connector
+    }),
+    [activeStep, orientation, connector]
+  );
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    StepperContainerStyled,
+    {
+      className,
+      style,
+      orientation,
+      children: steps.map((step, index) => {
+        const additionalProps = {
+          index,
+          last: index === steps.length - 1,
+          active: activeStep === index
+        };
+        return cloneElement(step, additionalProps);
+      })
+    }
+  ) });
+};
+export {
+  Stepper
+};

package/dist/Stepper/StepperContext.cjs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const StepperContext = React.createContext(null);
+const useStepperContext = () => {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("StepperContext must be used within StepperContext");
+  }
+  return context;
+};
+exports.StepperContext = StepperContext;
+exports.useStepperContext = useStepperContext;

package/dist/Stepper/StepperContext.d.ts

@@ -0,0 +1,3 @@
+import { IStepperContextValue } from './types';
+export declare const StepperContext: import('react').Context<IStepperContextValue | null>;
+export declare const useStepperContext: () => IStepperContextValue;

package/dist/Stepper/StepperContext.es.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const StepperContext = createContext(null);
+const useStepperContext = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("StepperContext must be used within StepperContext");
+  }
+  return context;
+};
+export {
+  StepperContext,
+  useStepperContext
+};

package/dist/Stepper/index.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+const Stepper$1 = require("./Stepper.cjs.js");
+const Step = require("./Step.cjs.js");
+const StepLabel = require("./StepLabel.cjs.js");
+const StepContent = require("./StepContent.cjs.js");
+const Stepper = Stepper$1.Stepper;
+Stepper.Step = Step.Step;
+Stepper.Label = StepLabel.StepLabel;
+Stepper.Content = StepContent.StepContent;
+module.exports = Stepper;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,12 @@
+import { Stepper as StepperComponent } from './Stepper';
+import { Step } from './Step';
+import { StepLabel } from './StepLabel';
+import { StepContent } from './StepContent';
+type TStepper = typeof StepperComponent & {
+    Step: typeof Step;
+    Label: typeof StepLabel;
+    Content: typeof StepContent;
+};
+declare const Stepper: TStepper;
+export type { IStepProps, IStepLabelProps, IStepperProps } from './types';
+export default Stepper;

package/dist/Stepper/index.es.js

@@ -0,0 +1,11 @@
+import { Stepper as Stepper$1 } from "./Stepper.es.js";
+import { Step } from "./Step.es.js";
+import { StepLabel } from "./StepLabel.es.js";
+import { StepContent } from "./StepContent.es.js";
+const Stepper = Stepper$1;
+Stepper.Step = Step;
+Stepper.Label = StepLabel;
+Stepper.Content = StepContent;
+export {
+  Stepper as default
+};

package/dist/Stepper/styles.cjs.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const StepIconWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["active", "completed", "error"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ theme }) => theme.components.Stepper.iconSize};
+  width: ${({ theme }) => theme.components.Stepper.iconSize};
+  height: ${({ theme }) => theme.components.Stepper.iconSize};
+  border-radius: ${({ theme }) => theme.components.Stepper.iconRadius};
+  flex-shrink: 0;
+  background-color: ${({ active, completed, error, theme }) => {
+  if (error) return theme.components.Stepper.iconBackground.error;
+  if (completed) return theme.components.Stepper.iconBackground.completed;
+  if (active) return theme.components.Stepper.iconBackground.active;
+  return theme.components.Stepper.iconBackground.default;
+}};
+  color: ${({ active, completed, error, theme }) => active || completed || error ? theme.components.Stepper.iconColor.active : theme.components.Stepper.iconColor.default};
+  transition: background-color 0.2s;
+`;
+const StepMiddleBlock = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  flex: ${({ orientation }) => orientation === "horizontal" ? "0 1 auto" : 1};
+  min-width: 0;
+
+  margin-left: ${({ orientation, theme }) => orientation === "horizontal" ? theme.space.s : theme.space.m};
+  margin-right: ${({ orientation, theme }) => orientation === "horizontal" ? theme.space.s : theme.space.s};
+`;
+const StepLabelContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "active", "completed"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  text-align: ${({ orientation }) => orientation === "horizontal" ? "left" : "left"};
+  align-items: flex-start;
+
+  .step-label-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+`;
+const DefaultConnectorLineStyled = styled.span.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "completed", "active"].includes(prop)
+})`
+  display: block;
+  ${({ orientation, theme, completed, active }) => {
+  const lineColor = completed || active ? theme.components.Stepper.connectorColor.active : theme.components.Stepper.connectorColor.default;
+  return orientation === "horizontal" ? styled.css`
+          width: 100%;
+          height: ${theme.components.Stepper.connectorThickness};
+          background-color: ${lineColor};
+        ` : styled.css`
+          width: ${theme.components.Stepper.connectorThickness};
+          height: 100%;
+          min-height: 24px;
+          background-color: ${lineColor};
+        `;
+}}
+`;
+const ConnectorContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  ${({ orientation, theme }) => orientation === "horizontal" ? styled.css`
+          flex: 1;
+          min-width: ${theme.components.Stepper.connectorMinWidth};
+          align-self: flex-start;
+          margin-top: calc(
+            (${theme.components.Stepper.iconSize} / 2) -
+              (${theme.components.Stepper.connectorThickness} / 2)
+          );
+          margin-right: ${theme.space.s};
+        ` : styled.css`
+          flex: 1;
+          align-self: stretch;
+          min-height: ${theme.components.Stepper.connectorMinWidth};
+          margin-top: ${theme.space.s};
+          justify-content: center;
+          display: flex;
+          margin-bottom: ${theme.space.s};
+        `}
+`;
+const StepContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "alternativeLabel", "clickable", "disabled"].includes(prop)
+})`
+  display: flex;
+  flex: ${({ orientation }) => orientation === "horizontal" ? 1 : "0 1 auto"};
+  flex-direction: row;
+  align-items: ${({ orientation }) => orientation === "vertical" ? "stretch" : "flex-start"};
+  position: relative;
+  min-width: ${({ orientation }) => orientation === "horizontal" ? "100px" : "auto"};
+
+  ${({ clickable, disabled, theme }) => clickable && !disabled && styled.css`
+      cursor: pointer;
+      &:hover ${StepIconWrapper} {
+        background-color: ${theme.components.Stepper.iconBackground.hover};
+      }
+    `}
+
+  ${({ disabled, theme }) => disabled && styled.css`
+      opacity: ${theme.components.Stepper.disabledOpacity};
+      pointer-events: none;
+    `}
+`;
+const StepperContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  display: flex;
+  ${({ orientation }) => orientation === "horizontal" ? styled.css`
+          flex-direction: row;
+          justify-content: space-between;
+        ` : styled.css`
+          flex-direction: column;
+          align-items: flex-start;
+        `}
+  width: 100%;
+  padding: ${({ theme }) => theme.components.Stepper.padding};
+`;
+const StepContentContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  width: 100%;
+  padding-top: 8px;
+`;
+const LeftColumnStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: ${({ theme }) => theme.components.Stepper.iconSize};
+`;
+exports.ConnectorContainerStyled = ConnectorContainerStyled;
+exports.DefaultConnectorLineStyled = DefaultConnectorLineStyled;
+exports.LeftColumnStyled = LeftColumnStyled;
+exports.StepContainerStyled = StepContainerStyled;
+exports.StepContentContainerStyled = StepContentContainerStyled;
+exports.StepIconWrapper = StepIconWrapper;
+exports.StepLabelContainerStyled = StepLabelContainerStyled;
+exports.StepMiddleBlock = StepMiddleBlock;
+exports.StepperContainerStyled = StepperContainerStyled;

package/dist/Stepper/styles.d.ts

@@ -0,0 +1,44 @@
+import { TStepperOrientation } from './types';
+interface IStepperContainerProps {
+    orientation: TStepperOrientation;
+}
+interface IStepContainerProps {
+    orientation: TStepperOrientation;
+    active?: boolean;
+    completed?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+}
+interface IStepIconWrapperProps {
+    active?: boolean;
+    completed?: boolean;
+    error?: boolean;
+}
+interface IStepLabelContainerProps {
+    orientation: TStepperOrientation;
+    active?: boolean;
+    completed?: boolean;
+    error?: boolean;
+}
+interface IConnectorContainerProps {
+    orientation: TStepperOrientation;
+}
+interface IDefaultConnectorLineProps {
+    orientation: TStepperOrientation;
+    completed?: boolean;
+    active?: boolean;
+}
+export declare const StepIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepIconWrapperProps>> & string;
+export declare const StepMiddleBlock: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    orientation: TStepperOrientation;
+}>> & string;
+export declare const StepLabelContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepLabelContainerProps>> & string;
+export declare const DefaultConnectorLineStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IDefaultConnectorLineProps>> & string;
+export declare const ConnectorContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IConnectorContainerProps>> & string;
+export declare const StepContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepContainerProps>> & string;
+export declare const StepperContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepperContainerProps>> & string;
+export declare const StepContentContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    orientation: TStepperOrientation;
+}>> & string;
+export declare const LeftColumnStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/Stepper/styles.es.js

@@ -0,0 +1,149 @@
+import styled, { css } from "styled-components";
+const StepIconWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["active", "completed", "error"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ theme }) => theme.components.Stepper.iconSize};
+  width: ${({ theme }) => theme.components.Stepper.iconSize};
+  height: ${({ theme }) => theme.components.Stepper.iconSize};
+  border-radius: ${({ theme }) => theme.components.Stepper.iconRadius};
+  flex-shrink: 0;
+  background-color: ${({ active, completed, error, theme }) => {
+  if (error) return theme.components.Stepper.iconBackground.error;
+  if (completed) return theme.components.Stepper.iconBackground.completed;
+  if (active) return theme.components.Stepper.iconBackground.active;
+  return theme.components.Stepper.iconBackground.default;
+}};
+  color: ${({ active, completed, error, theme }) => active || completed || error ? theme.components.Stepper.iconColor.active : theme.components.Stepper.iconColor.default};
+  transition: background-color 0.2s;
+`;
+const StepMiddleBlock = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  flex: ${({ orientation }) => orientation === "horizontal" ? "0 1 auto" : 1};
+  min-width: 0;
+
+  margin-left: ${({ orientation, theme }) => orientation === "horizontal" ? theme.space.s : theme.space.m};
+  margin-right: ${({ orientation, theme }) => orientation === "horizontal" ? theme.space.s : theme.space.s};
+`;
+const StepLabelContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "active", "completed"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  text-align: ${({ orientation }) => orientation === "horizontal" ? "left" : "left"};
+  align-items: flex-start;
+
+  .step-label-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+`;
+const DefaultConnectorLineStyled = styled.span.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "completed", "active"].includes(prop)
+})`
+  display: block;
+  ${({ orientation, theme, completed, active }) => {
+  const lineColor = completed || active ? theme.components.Stepper.connectorColor.active : theme.components.Stepper.connectorColor.default;
+  return orientation === "horizontal" ? css`
+          width: 100%;
+          height: ${theme.components.Stepper.connectorThickness};
+          background-color: ${lineColor};
+        ` : css`
+          width: ${theme.components.Stepper.connectorThickness};
+          height: 100%;
+          min-height: 24px;
+          background-color: ${lineColor};
+        `;
+}}
+`;
+const ConnectorContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  ${({ orientation, theme }) => orientation === "horizontal" ? css`
+          flex: 1;
+          min-width: ${theme.components.Stepper.connectorMinWidth};
+          align-self: flex-start;
+          margin-top: calc(
+            (${theme.components.Stepper.iconSize} / 2) -
+              (${theme.components.Stepper.connectorThickness} / 2)
+          );
+          margin-right: ${theme.space.s};
+        ` : css`
+          flex: 1;
+          align-self: stretch;
+          min-height: ${theme.components.Stepper.connectorMinWidth};
+          margin-top: ${theme.space.s};
+          justify-content: center;
+          display: flex;
+          margin-bottom: ${theme.space.s};
+        `}
+`;
+const StepContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation", "alternativeLabel", "clickable", "disabled"].includes(prop)
+})`
+  display: flex;
+  flex: ${({ orientation }) => orientation === "horizontal" ? 1 : "0 1 auto"};
+  flex-direction: row;
+  align-items: ${({ orientation }) => orientation === "vertical" ? "stretch" : "flex-start"};
+  position: relative;
+  min-width: ${({ orientation }) => orientation === "horizontal" ? "100px" : "auto"};
+
+  ${({ clickable, disabled, theme }) => clickable && !disabled && css`
+      cursor: pointer;
+      &:hover ${StepIconWrapper} {
+        background-color: ${theme.components.Stepper.iconBackground.hover};
+      }
+    `}
+
+  ${({ disabled, theme }) => disabled && css`
+      opacity: ${theme.components.Stepper.disabledOpacity};
+      pointer-events: none;
+    `}
+`;
+const StepperContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  display: flex;
+  ${({ orientation }) => orientation === "horizontal" ? css`
+          flex-direction: row;
+          justify-content: space-between;
+        ` : css`
+          flex-direction: column;
+          align-items: flex-start;
+        `}
+  width: 100%;
+  padding: ${({ theme }) => theme.components.Stepper.padding};
+`;
+const StepContentContainerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["orientation"].includes(prop)
+})`
+  width: 100%;
+  padding-top: 8px;
+`;
+const LeftColumnStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: ${({ theme }) => theme.components.Stepper.iconSize};
+`;
+export {
+  ConnectorContainerStyled,
+  DefaultConnectorLineStyled,
+  LeftColumnStyled,
+  StepContainerStyled,
+  StepContentContainerStyled,
+  StepIconWrapper,
+  StepLabelContainerStyled,
+  StepMiddleBlock,
+  StepperContainerStyled
+};

package/dist/Stepper/types.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode, ReactElement, MouseEvent, CSSProperties } from 'react';
+export type TStepperOrientation = "horizontal" | "vertical";
+export interface IStepIconProps {
+    /** Step index */
+    index?: number;
+    /** Is the step active */
+    active?: boolean;
+    /** Is the step complete */
+    completed?: boolean;
+    /** Is there an error */
+    error?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+}
+export interface IStepLabelProps {
+    /** Label text */
+    children?: ReactNode;
+    /** Optional text (displayed in small font) */
+    optional?: ReactNode;
+    /** Is there an error */
+    error?: boolean;
+    /** Additional class */
+    className?: string;
+}
+export interface IStepProps {
+    /** The content of the step (usually Stepper.Label) */
+    children?: ReactNode;
+    /** Step index (automatic if Stepper is used) */
+    index?: number;
+    /** Whether the step is manually completed (overrides logic based on activeStep) */
+    completed?: boolean;
+    /** Is the step disabled */
+    disabled?: boolean;
+    /** Error flag */
+    error?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Is the step active (automatic) */
+    active?: boolean;
+    /** The last step (to hide the connector) */
+    last?: boolean;
+    /** Orientation */
+    orientation?: TStepperOrientation;
+    /** Connector component*/
+    connector?: ReactElement;
+    /** Click handler */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** Additional class */
+    className?: string;
+}
+export interface IStepperProps {
+    /** Child Elements of Step*/
+    children?: ReactNode;
+    /** Active step index (starting from 0) */
+    activeStep?: number;
+    /** Orientation */
+    orientation?: TStepperOrientation;
+    /** Connector component */
+    connector?: ReactElement;
+    /** Additional class */
+    className?: string;
+    /** Container styles */
+    style?: CSSProperties;
+}
+export interface IStepperContextValue {
+    activeStep: number;
+    orientation: TStepperOrientation;
+    connector: ReactElement;
+    onStepClick?: (step: number) => void;
+}

package/dist/TextField/TextField.cjs.js

@@ -26,6 +26,8 @@ const TextField = ({
   classNameInput,
   type,
   style,
+  leftContentVariant,
+  rightContentVariant,
   ...props
 }) => {
   const [focus, setFocus] = React.useState(false);
@@ -62,6 +64,8 @@ const TextField = ({
       id,
       style,
       label,
+      leftContentVariant,
+      rightContentVariant,
       required,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/TextField/TextField.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ITextFieldProps } from './types';
-declare const TextField: ({ value, onBlur, onFocus, onChange, onClear, leftContent, rightContent, id, name, className, label, size, disabled, required, error, placeholder, clearable, classNameInput, type, style, ...props }: ITextFieldProps) => React.ReactElement;
+declare const TextField: ({ value, onBlur, onFocus, onChange, onClear, leftContent, rightContent, id, name, className, label, size, disabled, required, error, placeholder, clearable, classNameInput, type, style, leftContentVariant, rightContentVariant, ...props }: ITextFieldProps) => React.ReactElement;
 export default TextField;

package/dist/TextField/TextField.es.js

@@ -25,6 +25,8 @@ const TextField = ({
   classNameInput,
   type,
   style,
+  leftContentVariant,
+  rightContentVariant,
   ...props
 }) => {
   const [focus, setFocus] = useState(false);
@@ -61,6 +63,8 @@ const TextField = ({
       id,
       style,
       label,
+      leftContentVariant,
+      rightContentVariant,
       required,
       children: [
         /* @__PURE__ */ jsx(