@veracity/vui 2.17.1-beta.0 → 2.17.2-beta.0

package/dist/cjs/index.d.ts

@@ -43,7 +43,7 @@ export * from './radio';
 export * from './select';
 export * from './sidemenu';
 export * from './skeleton';
-export * from './step';
+export * from './stepIndicator';
 export * from './stepperHorizontal';
 export * from './stepperVertical';
 export * from './spinner';

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/cjs/index.js

@@ -59,7 +59,7 @@ __exportStar(require("./radio"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./sidemenu"), exports);
 __exportStar(require("./skeleton"), exports);
-__exportStar(require("./step"), exports);
+__exportStar(require("./stepIndicator"), exports);
 __exportStar(require("./stepperHorizontal"), exports);
 __exportStar(require("./stepperVertical"), exports);
 __exportStar(require("./spinner"), exports);

package/dist/cjs/stepIndicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/cjs/stepIndicator/stepIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAazD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/cjs/{step → stepIndicator}/stepIndicator.js

@@ -29,7 +29,7 @@ const Content = ({ number, variant, size }) => {
         return (0, jsx_runtime_1.jsx)(icon_1.default, { name: "falCheck", size: size });
     if (variant === 'error')
         return (0, jsx_runtime_1.jsx)(icon_1.default, { name: "falTimes", size: size });
-    return (0, jsx_runtime_1.jsx)(t_1.default, { fontWeight: 600, children: number });
+    return ((0, jsx_runtime_1.jsx)(t_1.default, { fontSize: size === 'md' ? 16 : 14, fontWeight: 600, children: number }));
 };
 /**
  * Implements stepper indicator **
@@ -37,7 +37,7 @@ const Content = ({ number, variant, size }) => {
 exports.StepIndicator = (0, core_1.vui)((props, ref) => {
     const { icon, number, className, size, variant } = props, rest = __rest(props, ["icon", "number", "className", "size", "variant"]);
     const styles = (0, core_1.useStyleConfig)('StepIndicator', props);
-    return icon ? ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', className), icon: icon, ref: ref }, styles.icon, rest, { isRound: true, minW: "auto", pointerEvents: "none", size: size }))) : ((0, jsx_runtime_1.jsxs)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', className), ref: ref }, styles.button, rest, { isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [(0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "relative" }), (0, jsx_runtime_1.jsx)(box_1.default, { fontSize: `${size === 'md' ? 16 : 13}px`, mx: 0.5, position: "absolute", children: (0, jsx_runtime_1.jsx)(Content, { number: number, size: size, variant: variant }) })] })));
+    return icon ? ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', 'vui-stepIndicatorIcon', className), icon: icon, ref: ref }, styles.icon, rest, { isRound: true, minW: "auto", pointerEvents: "none", size: size }))) : ((0, jsx_runtime_1.jsxs)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', 'vui-stepIndicatorNumber', className), ref: ref }, styles.button, rest, { isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [(0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "relative" }), (0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "absolute", children: (0, jsx_runtime_1.jsx)(Content, { number: number, size: String(size), variant: String(variant) }) })] })));
 });
 exports.StepIndicator.displayName = 'StepIndicator';
 exports.default = exports.StepIndicator;

package/dist/cjs/stepIndicator/stepIndicatorTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/cjs/stepIndicator/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}

package/dist/cjs/stepperHorizontal/consts.d.ts

@@ -1,10 +1,4 @@
-export declare const variantColor: {
-    active: string;
-    completed: string;
-    optional: string;
-    pending: string;
-    error: string;
-};
+export declare const variantColor: Record<string, string>;
 export declare const titleColor: {
     active: string;
     completed: string;
@@ -15,4 +9,6 @@ export declare const titleColor: {
 export declare const boldTitles: string[];
 export declare const stepClassName = "vui-stepHorizontal";
 export declare const tailClassName: string;
+export declare const tailClassNameLeft: string;
+export declare const tailClassNameRight: string;
 //# sourceMappingURL=consts.d.ts.map

package/dist/cjs/stepperHorizontal/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA;AAEnD,eAAO,MAAM,iBAAiB,QAAyB,CAAA;AAEvD,eAAO,MAAM,kBAAkB,QAA0B,CAAA"}

package/dist/cjs/stepperHorizontal/consts.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tailClassName = exports.stepClassName = exports.boldTitles = exports.titleColor = exports.variantColor = void 0;
+exports.tailClassNameRight = exports.tailClassNameLeft = exports.tailClassName = exports.stepClassName = exports.boldTitles = exports.titleColor = exports.variantColor = void 0;
 exports.variantColor = {
     active: 'seaBlue.main',
     completed: 'landGreen.41',
@@ -18,3 +18,5 @@ exports.titleColor = {
 exports.boldTitles = ['active', 'error'];
 exports.stepClassName = 'vui-stepHorizontal';
 exports.tailClassName = exports.stepClassName + 'Tail';
+exports.tailClassNameLeft = exports.tailClassName + 'Left';
+exports.tailClassNameRight = exports.tailClassName + 'Right';

package/dist/cjs/stepperHorizontal/stepHorizontal.js

@@ -7,7 +7,7 @@ exports.StepHorizontal = exports.StepHorizontalBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const box_1 = require("../box");
 const core_1 = require("../core");
-const step_1 = require("../step");
+const stepIndicator_1 = require("../stepIndicator");
 const utils_1 = require("../utils");
 const consts_1 = require("./consts");
 const context_1 = require("./context");
@@ -25,7 +25,7 @@ exports.StepHorizontalBase = core_1.styled.divBox `
 exports.StepHorizontal = (0, core_1.vui)(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
     const context = (0, context_1.useStepperHorizontalContext)();
     const size = (context === null || context === void 0 ? void 0 : context.size) || propSize;
-    return ((0, jsx_runtime_1.jsxs)(exports.StepHorizontalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepHorizontalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", textAlign: "center", children: (0, jsx_runtime_1.jsx)(step_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { display: "block", textAlign: "center", children: [!!title && ((0, jsx_runtime_1.jsx)(stepHorizontalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", children: children })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.StepHorizontalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, consts_1.stepClassName + variant, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepHorizontalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", textAlign: "center", children: (0, jsx_runtime_1.jsx)(stepIndicator_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { display: "block", textAlign: "center", children: [!!title && ((0, jsx_runtime_1.jsx)(stepHorizontalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", children: children })] })] }));
 });
 exports.StepHorizontal.displayName = 'StepHorizontal';
 exports.default = exports.StepHorizontal;

package/dist/cjs/stepperHorizontal/stepHorizontalTail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/cjs/stepperHorizontal/stepHorizontalTail.js

@@ -22,7 +22,7 @@ const consts_1 = require("./consts");
  */
 exports.StepHorizontalTail = (0, core_1.vui)((props, ref) => {
     const { children, className, variant = 'active' } = props, rest = __rest(props, ["children", "className", "variant"]);
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ className: (0, utils_1.cs)(consts_1.tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { borderBottom: `1px solid ${consts_1.variantColor[variant]}`, className: `${consts_1.tailClassName}Left`, w: "50%" }), (0, jsx_runtime_1.jsx)(box_1.Box, { borderBottom: `1px solid ${consts_1.variantColor[variant]}`, className: `${consts_1.tailClassName}Right`, w: "50%" })] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ className: (0, utils_1.cs)(consts_1.tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, utils_1.cs)(consts_1.tailClassName, consts_1.tailClassNameLeft, consts_1.tailClassNameLeft + variant) }), (0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, utils_1.cs)(consts_1.tailClassName, consts_1.tailClassNameRight, consts_1.tailClassNameLeft + variant) })] })));
 });
 exports.StepHorizontalTail.displayName = 'StepHorizontalTail';
 exports.default = exports.StepHorizontalTail;

package/dist/cjs/stepperHorizontal/stepperHorizontalBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAO1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAkB1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}

package/dist/cjs/stepperHorizontal/stepperHorizontalBase.js

@@ -9,5 +9,14 @@ const StepperHorizontalBase = core_1.styled.divBox `
   .${consts_1.stepClassName}:first-of-type .${consts_1.tailClassName}Left, .${consts_1.stepClassName}:last-of-type .${consts_1.tailClassName}Right {
     visibility: hidden;
   }
+
+  .${consts_1.tailClassNameLeft}, .${consts_1.tailClassNameRight} {
+    width: 50%;
+  }
+  ${Object.keys(consts_1.variantColor).map((variant) => `.${consts_1.tailClassNameLeft + variant},
+  .${consts_1.tailClassNameRight + variant},
+  .${consts_1.stepClassName + variant} + .${consts_1.stepClassName} .${consts_1.tailClassNameLeft} {
+    border-bottom: 1px solid ${consts_1.variantColor[variant]};
+  }`)}
 `;
 exports.default = StepperHorizontalBase;

package/dist/cjs/stepperHorizontal/stepperHorizontalTypes.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ChildrenProp } from '../core';
 import { IconProp } from '../icon';
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type StepHorizontalSize = 'md' | 'sm' | undefined;

package/dist/cjs/stepperHorizontal/stepperHorizontalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
+{"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}

package/dist/cjs/stepperVertical/stepVertical.js

@@ -7,7 +7,7 @@ exports.StepVertical = exports.StepVerticalBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const box_1 = require("../box");
 const core_1 = require("../core");
-const step_1 = require("../step");
+const stepIndicator_1 = require("../stepIndicator");
 const utils_1 = require("../utils");
 const consts_1 = require("./consts");
 const context_1 = require("./context");
@@ -24,7 +24,7 @@ exports.StepVerticalBase = core_1.styled.divBox `
 exports.StepVertical = (0, core_1.vui)(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
     const context = (0, context_1.useStepperVerticalContext)();
     const size = (context === null || context === void 0 ? void 0 : context.size) || propSize;
-    return ((0, jsx_runtime_1.jsxs)(exports.StepVerticalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepVerticalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: (0, jsx_runtime_1.jsx)(step_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { flex: "1", flexDirection: "column", children: [!!title && ((0, jsx_runtime_1.jsx)(stepVerticalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { children: children })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.StepVerticalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepVerticalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: (0, jsx_runtime_1.jsx)(stepIndicator_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { flex: "1", flexDirection: "column", children: [!!title && ((0, jsx_runtime_1.jsx)(stepVerticalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { children: children })] })] }));
 });
 exports.StepVertical.displayName = 'StepVertical';
 exports.default = exports.StepVertical;

package/dist/cjs/stepperVertical/stepperVerticalTypes.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ChildrenProp } from '../core';
 import { IconProp } from '../icon';
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type StepVerticalSize = 'md' | 'sm' | undefined;

package/dist/cjs/stepperVertical/stepperVerticalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
+{"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}

package/dist/cjs/tabs/tabs.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 import { TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & import("../core").ChildrenProp & {
+    actions?: React.ReactNode;
     activeTabId?: number | undefined;
     showBorder?: boolean | undefined;
     onTabClick?: ((id: number) => void) | undefined;

package/dist/cjs/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA+Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAgEf,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist/cjs/tabs/tabs.js

@@ -30,7 +30,7 @@ exports.TabsBase = core_1.styled.divBox `
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 exports.Tabs = (0, core_1.vui)((props, ref) => {
-    const { activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["activeTabId", "showBorder", "children", "className", "size", "onTabClick"]);
+    const { actions, activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["actions", "activeTabId", "showBorder", "children", "className", "size", "onTabClick"]);
     const styles = (0, core_1.useStyleConfig)('Tabs', props);
     const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', activeTabId);
     (0, react_1.useEffect)(() => {
@@ -67,7 +67,7 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
         (_a = tab === null || tab === void 0 ? void 0 : tab.onClick) === null || _a === void 0 ? void 0 : _a.call(tab, e);
     };
     const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
-    return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
 });
 exports.Tabs.displayName = 'Tabs';
 exports.default = exports.Tabs;

package/dist/cjs/tabs/tabs.types.d.ts

@@ -7,6 +7,7 @@ export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
 export type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
+    actions?: ReactNode;
     activeTabId?: number;
     showBorder?: boolean;
     onTabClick?: (id: number) => void;
@@ -22,6 +23,7 @@ export type TabProps = SystemProps & ChildrenProp & {
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 export type TabNavBarProps = {
+    actions?: ReactNode;
     tabs: TabProps[];
     onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
     activeNavItem?: number;

package/dist/cjs/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/cjs/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA0ErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -16,7 +16,7 @@ const theme_1 = __importDefault(require("./theme"));
 const { activeBg, border, color, hover, main } = consts_1.colors;
 exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     var _a, _b;
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
+    const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
     const iconSize = (consts_1.iconSizeMapper === null || consts_1.iconSizeMapper === void 0 ? void 0 : consts_1.iconSizeMapper[size]) || 'md';
     const { sizes } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
     const fontSize = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.fontSize;
@@ -25,7 +25,7 @@ exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
     const iconMarginRight = size === 'xxl' ? '16px' : '8px';
     const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
-    return ((0, jsx_runtime_1.jsx)(list_1.List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: (_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))) }));
+    return ((0, jsx_runtime_1.jsxs)(list_1.List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [(_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))), !!actions && ((0, jsx_runtime_1.jsx)(box_1.default, { ml: "auto", pb: 0.5, pr: 0.5, children: actions }))] }));
 });
 exports.TabsNavBar.displayName = 'TabsNavBar';
 exports.default = exports.TabsNavBar;

package/dist/cjs/theme/components.js

@@ -42,7 +42,7 @@ const theme_35 = __importDefault(require("../select/theme"));
 const theme_36 = __importDefault(require("../sidemenu/theme"));
 const theme_37 = __importDefault(require("../skeleton/theme"));
 const theme_38 = __importDefault(require("../spinner/theme"));
-const theme_39 = __importDefault(require("../step/theme"));
+const theme_39 = __importDefault(require("../stepIndicator/theme"));
 const theme_40 = __importDefault(require("../stepperHorizontal/theme"));
 const theme_41 = __importDefault(require("../stepperVertical/theme"));
 const theme_42 = __importDefault(require("../switch/theme"));

package/dist/esm/index.d.ts

@@ -43,7 +43,7 @@ export * from './radio';
 export * from './select';
 export * from './sidemenu';
 export * from './skeleton';
-export * from './step';
+export * from './stepIndicator';
 export * from './stepperHorizontal';
 export * from './stepperVertical';
 export * from './spinner';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -43,7 +43,7 @@ export * from './radio';
 export * from './select';
 export * from './sidemenu';
 export * from './skeleton';
-export * from './step';
+export * from './stepIndicator';
 export * from './stepperHorizontal';
 export * from './stepperVertical';
 export * from './spinner';

package/dist/esm/stepIndicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/esm/stepIndicator/stepIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAazD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/{step → stepIndicator}/stepIndicator.js

@@ -12,7 +12,7 @@ const Content = ({ number, variant, size }) => {
         return _jsx(Icon, { name: "falCheck", size: size });
     if (variant === 'error')
         return _jsx(Icon, { name: "falTimes", size: size });
-    return _jsx(T, { fontWeight: 600, children: number });
+    return (_jsx(T, { fontSize: size === 'md' ? 16 : 14, fontWeight: 600, children: number }));
 };
 /**
  * Implements stepper indicator **
@@ -20,7 +20,7 @@ const Content = ({ number, variant, size }) => {
 export const StepIndicator = vui((props, ref) => {
     const { icon, number, className, size, variant, ...rest } = props;
     const styles = useStyleConfig('StepIndicator', props);
-    return icon ? (_jsx(Button, { className: cs('vui-stepIndicator', className), icon: icon, ref: ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size: size })) : (_jsxs(Button, { className: cs('vui-stepIndicator', className), ref: ref, ...styles.button, ...rest, isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [_jsx(Box, { mx: 0.5, position: "relative" }), _jsx(Box, { fontSize: `${size === 'md' ? 16 : 13}px`, mx: 0.5, position: "absolute", children: _jsx(Content, { number: number, size: size, variant: variant }) })] }));
+    return icon ? (_jsx(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className), icon: icon, ref: ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size: size })) : (_jsxs(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className), ref: ref, ...styles.button, ...rest, isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [_jsx(Box, { mx: 0.5, position: "relative" }), _jsx(Box, { mx: 0.5, position: "absolute", children: _jsx(Content, { number: number, size: String(size), variant: String(variant) }) })] }));
 });
 StepIndicator.displayName = 'StepIndicator';
 export default StepIndicator;

package/dist/esm/stepIndicator/stepIndicatorTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/esm/stepIndicator/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}

package/dist/esm/stepperHorizontal/consts.d.ts

@@ -1,10 +1,4 @@
-export declare const variantColor: {
-    active: string;
-    completed: string;
-    optional: string;
-    pending: string;
-    error: string;
-};
+export declare const variantColor: Record<string, string>;
 export declare const titleColor: {
     active: string;
     completed: string;
@@ -15,4 +9,6 @@ export declare const titleColor: {
 export declare const boldTitles: string[];
 export declare const stepClassName = "vui-stepHorizontal";
 export declare const tailClassName: string;
+export declare const tailClassNameLeft: string;
+export declare const tailClassNameRight: string;
 //# sourceMappingURL=consts.d.ts.map

package/dist/esm/stepperHorizontal/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA;AAEnD,eAAO,MAAM,iBAAiB,QAAyB,CAAA;AAEvD,eAAO,MAAM,kBAAkB,QAA0B,CAAA"}

package/dist/esm/stepperHorizontal/consts.js

@@ -15,3 +15,5 @@ export const titleColor = {
 export const boldTitles = ['active', 'error'];
 export const stepClassName = 'vui-stepHorizontal';
 export const tailClassName = stepClassName + 'Tail';
+export const tailClassNameLeft = tailClassName + 'Left';
+export const tailClassNameRight = tailClassName + 'Right';

package/dist/esm/stepperHorizontal/stepHorizontal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../box';
 import { styled, vui } from '../core';
-import { StepIndicator } from '../step';
+import { StepIndicator } from '../stepIndicator';
 import { cs } from '../utils';
 import { stepClassName } from './consts';
 import { useStepperHorizontalContext } from './context';
@@ -19,7 +19,7 @@ export const StepHorizontalBase = styled.divBox `
 export const StepHorizontal = vui(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
     const context = useStepperHorizontalContext();
     const size = context?.size || propSize;
-    return (_jsxs(StepHorizontalBase, { className: cs(stepClassName, className), ref: ref, children: [_jsx(StepHorizontalTail, { size: size, variant: variant }), _jsx(Box, { display: "block", textAlign: "center", children: _jsx(StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), _jsxs(Box, { display: "block", textAlign: "center", children: [!!title && (_jsx(StepHorizontalTitle, { size: size, variant: variant, children: title })), !!description && (_jsx(Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), _jsx(Box, { display: "block", children: children })] })] }));
+    return (_jsxs(StepHorizontalBase, { className: cs(stepClassName, stepClassName + variant, className), ref: ref, children: [_jsx(StepHorizontalTail, { size: size, variant: variant }), _jsx(Box, { display: "block", textAlign: "center", children: _jsx(StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), _jsxs(Box, { display: "block", textAlign: "center", children: [!!title && (_jsx(StepHorizontalTitle, { size: size, variant: variant, children: title })), !!description && (_jsx(Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), _jsx(Box, { display: "block", children: children })] })] }));
 });
 StepHorizontal.displayName = 'StepHorizontal';
 export default StepHorizontal;

package/dist/esm/stepperHorizontal/stepHorizontalTail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/stepperHorizontal/stepHorizontalTail.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../box';
 import { vui } from '../core';
 import { cs } from '../utils';
-import { tailClassName, variantColor } from './consts';
+import { tailClassName, tailClassNameLeft, tailClassNameRight } from './consts';
 /**
  * Implements Horizontal stepper tail (the Horizontal line) **
  */
 export const StepHorizontalTail = vui((props, ref) => {
     const { children, className, variant = 'active', ...rest } = props;
-    return (_jsxs(Box, { className: cs(tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%", ...rest, children: [_jsx(Box, { borderBottom: `1px solid ${variantColor[variant]}`, className: `${tailClassName}Left`, w: "50%" }), _jsx(Box, { borderBottom: `1px solid ${variantColor[variant]}`, className: `${tailClassName}Right`, w: "50%" })] }));
+    return (_jsxs(Box, { className: cs(tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%", ...rest, children: [_jsx(Box, { className: cs(tailClassName, tailClassNameLeft, tailClassNameLeft + variant) }), _jsx(Box, { className: cs(tailClassName, tailClassNameRight, tailClassNameLeft + variant) })] }));
 });
 StepHorizontalTail.displayName = 'StepHorizontalTail';
 export default StepHorizontalTail;

package/dist/esm/stepperHorizontal/stepperHorizontalBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAO1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAkB1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}

package/dist/esm/stepperHorizontal/stepperHorizontalBase.js

@@ -1,5 +1,5 @@
 import { styled } from '../core';
-import { stepClassName, tailClassName } from './consts';
+import { stepClassName, tailClassName, tailClassNameLeft, tailClassNameRight, variantColor } from './consts';
 const StepperHorizontalBase = styled.divBox `
   display: flex;
   width: 100%;
@@ -7,5 +7,14 @@ const StepperHorizontalBase = styled.divBox `
   .${stepClassName}:first-of-type .${tailClassName}Left, .${stepClassName}:last-of-type .${tailClassName}Right {
     visibility: hidden;
   }
+
+  .${tailClassNameLeft}, .${tailClassNameRight} {
+    width: 50%;
+  }
+  ${Object.keys(variantColor).map((variant) => `.${tailClassNameLeft + variant},
+  .${tailClassNameRight + variant},
+  .${stepClassName + variant} + .${stepClassName} .${tailClassNameLeft} {
+    border-bottom: 1px solid ${variantColor[variant]};
+  }`)}
 `;
 export default StepperHorizontalBase;

package/dist/esm/stepperHorizontal/stepperHorizontalTypes.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ChildrenProp } from '../core';
 import { IconProp } from '../icon';
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type StepHorizontalSize = 'md' | 'sm' | undefined;

package/dist/esm/stepperHorizontal/stepperHorizontalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
+{"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}

package/dist/esm/stepperVertical/stepVertical.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../box';
 import { styled, vui } from '../core';
-import { StepIndicator } from '../step';
+import { StepIndicator } from '../stepIndicator';
 import { cs } from '../utils';
 import { stepClassName } from './consts';
 import { useStepperVerticalContext } from './context';

package/dist/esm/stepperVertical/stepperVerticalTypes.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { ChildrenProp } from '../core';
 import { IconProp } from '../icon';
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type StepVerticalSize = 'md' | 'sm' | undefined;

package/dist/esm/stepperVertical/stepperVerticalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
+{"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}

package/dist/esm/tabs/tabs.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 import { TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & import("../core").ChildrenProp & {
+    actions?: React.ReactNode;
     activeTabId?: number | undefined;
     showBorder?: boolean | undefined;
     onTabClick?: ((id: number) => void) | undefined;

package/dist/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA+Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAgEf,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist/esm/tabs/tabs.js

@@ -13,7 +13,7 @@ export const TabsBase = styled.divBox `
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 export const Tabs = vui((props, ref) => {
-    const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props;
+    const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props;
     const styles = useStyleConfig('Tabs', props);
     const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', activeTabId);
     useEffect(() => {
@@ -48,7 +48,7 @@ export const Tabs = vui((props, ref) => {
         tab?.onClick?.(e);
     };
     const activeTab = tabs?.[activeTabIndex];
-    return (_jsxs(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest, children: [!!tabs?.length && (_jsx(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), tabs?.length ? (_jsx(Tab, { onClick: activeTab?.onClick, title: activeTab?.title, children: !activeTab?.disabled && activeTab?.children })) : (_jsx(P, { p: 2, children: "Please specify Tabs." }))] }));
+    return (_jsxs(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest, children: [!!tabs?.length && (_jsx(TabsNavBar, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), tabs?.length ? (_jsx(Tab, { onClick: activeTab?.onClick, title: activeTab?.title, children: !activeTab?.disabled && activeTab?.children })) : (_jsx(P, { p: 2, children: "Please specify Tabs." }))] }));
 });
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/dist/esm/tabs/tabs.types.d.ts

@@ -7,6 +7,7 @@ export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
 export type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
+    actions?: ReactNode;
     activeTabId?: number;
     showBorder?: boolean;
     onTabClick?: (id: number) => void;
@@ -22,6 +23,7 @@ export type TabProps = SystemProps & ChildrenProp & {
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 export type TabNavBarProps = {
+    actions?: ReactNode;
     tabs: TabProps[];
     onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
     activeNavItem?: number;

package/dist/esm/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/esm/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA0ErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/tabs/tabsNavBar.js

@@ -9,7 +9,7 @@ import { colors, iconSizeMapper } from './consts';
 import theme from './theme';
 const { activeBg, border, color, hover, main } = colors;
 export const TabsNavBar = vui((props, ref) => {
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
+    const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
     const iconSize = iconSizeMapper?.[size] || 'md';
     const { sizes } = theme ?? {};
     const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize;
@@ -18,7 +18,7 @@ export const TabsNavBar = vui((props, ref) => {
     const py = sizes[size ?? 'md'].tabsNavBar.py;
     const iconMarginRight = size === 'xxl' ? '16px' : '8px';
     const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
-    return (_jsx(List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: tabs?.map?.(tab => (_jsxs(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick?.(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [_jsxs(Box, { alignItems: "center", children: [!!tab.icon && _jsx(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && (_jsx(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e), title: "Delete" })), isActive(tab) && (_jsx(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))) }));
+    return (_jsxs(List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [tabs?.map?.(tab => (_jsxs(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick?.(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [_jsxs(Box, { alignItems: "center", children: [!!tab.icon && _jsx(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && (_jsx(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e), title: "Delete" })), isActive(tab) && (_jsx(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))), !!actions && (_jsx(Box, { ml: "auto", pb: 0.5, pr: 0.5, children: actions }))] }));
 });
 TabsNavBar.displayName = 'TabsNavBar';
 export default TabsNavBar;

package/dist/esm/theme/components.js

@@ -37,7 +37,7 @@ import Select from '../select/theme';
 import Sidemenu from '../sidemenu/theme';
 import Skeleton from '../skeleton/theme';
 import Spinner from '../spinner/theme';
-import StepIndicator from '../step/theme';
+import StepIndicator from '../stepIndicator/theme';
 import StepperHorizontal from '../stepperHorizontal/theme';
 import StepperVertical from '../stepperVertical/theme';
 import Switch from '../switch/theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.17.1-beta.0",
+  "version": "2.17.2-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/index.ts

@@ -43,7 +43,7 @@ export * from './radio'
 export * from './select'
 export * from './sidemenu'
 export * from './skeleton'
-export * from './step'
+export * from './stepIndicator'
 export * from './stepperHorizontal'
 export * from './stepperVertical'
 export * from './spinner'

package/src/{step → stepIndicator}/stepIndicator.tsx

@@ -6,11 +6,15 @@ import T from '../t'
 import { cs } from '../utils'
 import { StepIndicatorProps } from './stepIndicatorTypes'
 
-const Content = ({ number, variant, size }: any) => {
+const Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {
   if (typeof number === 'undefined') return null
-  if (variant === 'completed') return <Icon name="falCheck" size={size} />
-  if (variant === 'error') return <Icon name="falTimes" size={size} />
-  return <T fontWeight={600}>{number}</T>
+  if (variant === 'completed') return <Icon name="falCheck" size={size as any} />
+  if (variant === 'error') return <Icon name="falTimes" size={size as any} />
+  return (
+    <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>
+      {number}
+    </T>
+  )
 }
 
 /**
@@ -22,7 +26,7 @@ export const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {
 
   return icon ? (
     <Button
-      className={cs('vui-stepIndicator', className)}
+      className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}
       icon={icon}
       ref={ref}
       {...styles.icon}
@@ -34,7 +38,7 @@ export const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {
     />
   ) : (
     <Button
-      className={cs('vui-stepIndicator', className)}
+      className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}
       ref={ref}
       {...styles.button}
       {...rest}
@@ -46,8 +50,8 @@ export const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {
       size={size}
     >
       <Box mx={0.5} position="relative" />
-      <Box fontSize={`${size === 'md' ? 16 : 13}px`} mx={0.5} position="absolute">
-        <Content number={number} size={size} variant={variant} />
+      <Box mx={0.5} position="absolute">
+        <Content number={number} size={String(size)} variant={String(variant)} />
       </Box>
     </Button>
   )

package/src/stepperHorizontal/consts.ts

@@ -1,4 +1,4 @@
-export const variantColor = {
+export const variantColor: Record<string, string> = {
   active: 'seaBlue.main',
   completed: 'landGreen.41',
   optional: 'seaBlue.45',
@@ -19,3 +19,7 @@ export const boldTitles = ['active', 'error']
 export const stepClassName = 'vui-stepHorizontal'
 
 export const tailClassName = stepClassName + 'Tail'
+
+export const tailClassNameLeft = tailClassName + 'Left'
+
+export const tailClassNameRight = tailClassName + 'Right'

package/src/stepperHorizontal/stepHorizontal.tsx

@@ -1,6 +1,6 @@
 import { Box } from '../box'
 import { styled, vui } from '../core'
-import { StepIndicator } from '../step'
+import { StepIndicator } from '../stepIndicator'
 import { cs } from '../utils'
 import { stepClassName } from './consts'
 import { useStepperHorizontalContext } from './context'
@@ -23,7 +23,7 @@ export const StepHorizontal = vui<'div', StepHorizontalProps>(
     const context = useStepperHorizontalContext()
     const size = context?.size || propSize
     return (
-      <StepHorizontalBase className={cs(stepClassName, className)} ref={ref}>
+      <StepHorizontalBase className={cs(stepClassName, stepClassName + variant, className)} ref={ref}>
         <StepHorizontalTail size={size} variant={variant as any} />
         <Box display="block" textAlign="center">
           <StepIndicator icon={icon} number={number} size={size} variant={variant} />

package/src/stepperHorizontal/stepHorizontalTail.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { vui } from '../core'
 import { cs } from '../utils'
-import { tailClassName, variantColor } from './consts'
+import { tailClassName, tailClassNameLeft, tailClassNameRight } from './consts'
 import { StepHorizontalTailProps } from './stepperHorizontalTypes'
 
 /**
@@ -21,8 +19,8 @@ export const StepHorizontalTail = vui<'div', StepHorizontalTailProps>((props, re
       w="100%"
       {...rest}
     >
-      <Box borderBottom={`1px solid ${variantColor[variant]}`} className={`${tailClassName}Left`} w="50%" />
-      <Box borderBottom={`1px solid ${variantColor[variant]}`} className={`${tailClassName}Right`} w="50%" />
+      <Box className={cs(tailClassName, tailClassNameLeft, tailClassNameLeft + variant)} />
+      <Box className={cs(tailClassName, tailClassNameRight, tailClassNameLeft + variant)} />
     </Box>
   )
 })

package/src/stepperHorizontal/stepperHorizontalBase.ts

@@ -1,5 +1,5 @@
 import { styled } from '../core'
-import { stepClassName, tailClassName } from './consts'
+import { stepClassName, tailClassName, tailClassNameLeft, tailClassNameRight, variantColor } from './consts'
 import { StepperHorizontalProps } from './stepperHorizontalTypes'
 
 const StepperHorizontalBase = styled.divBox<StepperHorizontalProps>`
@@ -9,5 +9,16 @@ const StepperHorizontalBase = styled.divBox<StepperHorizontalProps>`
   .${stepClassName}:first-of-type .${tailClassName}Left, .${stepClassName}:last-of-type .${tailClassName}Right {
     visibility: hidden;
   }
+
+  .${tailClassNameLeft}, .${tailClassNameRight} {
+    width: 50%;
+  }
+  ${Object.keys(variantColor).map(
+    (variant: string) => `.${tailClassNameLeft + variant},
+  .${tailClassNameRight + variant},
+  .${stepClassName + variant} + .${stepClassName} .${tailClassNameLeft} {
+    border-bottom: 1px solid ${variantColor[variant]};
+  }`
+  )}
 `
 export default StepperHorizontalBase

package/src/stepperHorizontal/stepperHorizontalTypes.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { BoxProps } from '../box'
 import { ChildrenProp } from '../core'
 import { IconProp } from '../icon'
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes'
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 

package/src/stepperVertical/stepVertical.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Box } from '../box'
 import { styled, vui } from '../core'
-import { StepIndicator } from '../step'
+import { StepIndicator } from '../stepIndicator'
 import { cs } from '../utils'
 import { stepClassName } from './consts'
 import { useStepperVerticalContext } from './context'

package/src/stepperVertical/stepperVerticalTypes.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { BoxProps } from '../box'
 import { ChildrenProp } from '../core'
 import { IconProp } from '../icon'
-import { StepIndicatorVariant } from '../step/stepIndicatorTypes'
+import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 

package/src/tabs/tabs.tsx

@@ -16,7 +16,7 @@ export const TabsBase = styled.divBox<TabsProps>`
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
-  const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
+  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
@@ -61,6 +61,7 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
     <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>
       {!!tabs?.length && (
         <TabsNavBar
+          actions={actions}
           activeNavItem={activeTabIndex}
           animationDirection={animationDirection}
           onNavItemClick={(id, e) => onNavItemClick(id, e)}

package/src/tabs/tabs.types.ts

@@ -13,6 +13,7 @@ export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined
 export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> &
   ChildrenProp & {
+    actions?: ReactNode
     activeTabId?: number
     showBorder?: boolean
     onTabClick?: (id: number) => void
@@ -31,6 +32,7 @@ export type TabProps = SystemProps &
   }
 
 export type TabNavBarProps = {
+  actions?: ReactNode
   tabs: TabProps[]
   onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
   activeNavItem?: number

package/src/tabs/tabsNavBar.tsx

@@ -13,7 +13,7 @@ import theme from './theme'
 const { activeBg, border, color, hover, main } = colors
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
-  const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
+  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
   const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'
 
   const { sizes } = (theme as Dict) ?? {}
@@ -28,6 +28,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
 
   return (
     <List
+      alignItems="end"
       borderBottom={showBorder ? `1px solid ${border}` : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
@@ -84,6 +85,11 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           )}
         </ListItem>
       ))}
+      {!!actions && (
+        <Box ml="auto" pb={0.5} pr={0.5}>
+          {actions}
+        </Box>
+      )}
     </List>
   )
 })

package/src/theme/components.ts

@@ -37,7 +37,7 @@ import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
 import Skeleton from '../skeleton/theme'
 import Spinner from '../spinner/theme'
-import StepIndicator from '../step/theme'
+import StepIndicator from '../stepIndicator/theme'
 import StepperHorizontal from '../stepperHorizontal/theme'
 import StepperVertical from '../stepperVertical/theme'
 import Switch from '../switch/theme'

package/dist/cjs/step/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/cjs/step/stepIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AASzD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/cjs/step/stepIndicatorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/cjs/step/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/step/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}

package/dist/esm/step/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/esm/step/stepIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AASzD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/step/stepIndicatorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/esm/step/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/step/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}