@applique-ui/stepper - npm Package Compare versions

Comparing version 0.0.4 to 0.0.7

dist/stepper.cjs.js

@@ -5,16 +5,12 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var React = require('react');
+var React__default = _interopDefault(React);
 var uikitUtils = require('@applique-ui/uikit-utils');
-var Text = require('@applique-ui/text');
-var Layout = require('@applique-ui/layout');
-var Icon = require('@applique-ui/icon');
+var Text = _interopDefault(require('@applique-ui/text'));
+var Layout = _interopDefault(require('@applique-ui/layout'));
+var Icon = _interopDefault(require('@applique-ui/icon'));
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
-var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
-var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
-
-function styleInject$3(css) {
+function styleInject(css) {
   if (!css || typeof document === 'undefined') return
@@ -35,11 +31,11 @@
 
-styleInject$3(".u-stepper-stepper{height:100%}.u-stepper-stepper__pane{display:flex;padding:24px}.u-stepper-stepper__pane--horizontal{flex-direction:row}.u-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
+styleInject(".u-stepper-stepper{height:100%}.u-stepper-stepper__pane{display:flex;padding:24px}.u-stepper-stepper__pane--horizontal{flex-direction:row}.u-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
 
-const locals$3 = {"stepper":"u-stepper-stepper","stepper__pane":"u-stepper-stepper__pane","stepper__pane--horizontal":"u-stepper-stepper__pane--horizontal","stepper__pane--vertical":"u-stepper-stepper__pane--vertical"};
+const locals = {"stepper":"u-stepper-stepper","stepper__pane":"u-stepper-stepper__pane","stepper__pane--horizontal":"u-stepper-stepper__pane--horizontal","stepper__pane--vertical":"u-stepper-stepper__pane--vertical"};
 
-function classnames$3() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals$3)
+function classnames() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals)
 }
 
-function styleInject$2(css) {
+function styleInject$1(css) {
   if (!css || typeof document === 'undefined') return
@@ -60,11 +56,11 @@
 
-styleInject$2(".u-stepper-step{position:relative;flex:1 1 0}.u-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.u-stepper-step__indicator:before{background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.u-stepper-step__indicator:after,.u-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\"}.u-stepper-step__indicator:after{position:absolute;top:0;left:0;background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.u-stepper-step__indicator:hover{transform:scale(1.2)}.u-stepper-step__label{position:absolute}.u-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.u-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.u-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.u-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.u-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.u-stepper-step__item--horizontal{flex-direction:row}.u-stepper-step__item--vertical{flex-direction:column;height:100%}.u-stepper-step__item--vertical .u-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.u-stepper-step__item--active .u-stepper-step__indicator:after,.u-stepper-step__item--active .u-stepper-step__indicator:before{border-color:#4f46c8}.u-stepper-step__item--active .u-stepper-step__indicator:after{background:#4f46c8}.u-stepper-step__item--completed .u-stepper-step__indicator:after,.u-stepper-step__item--completed .u-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.u-stepper-step__item--error .u-stepper-step__indicator:after,.u-stepper-step__item--error .u-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.u-stepper-step--vertical:last-child{flex:0}");
+styleInject$1(".u-stepper-step{position:relative;flex:1 1 0}.u-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.u-stepper-step__indicator:before{background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.u-stepper-step__indicator:after,.u-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\"}.u-stepper-step__indicator:after{position:absolute;top:0;left:0;background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.u-stepper-step__indicator:hover{transform:scale(1.2)}.u-stepper-step__label{position:absolute}.u-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.u-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.u-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.u-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.u-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.u-stepper-step__item--horizontal{flex-direction:row}.u-stepper-step__item--vertical{flex-direction:column;height:100%}.u-stepper-step__item--vertical .u-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.u-stepper-step__item--active .u-stepper-step__indicator:after,.u-stepper-step__item--active .u-stepper-step__indicator:before{border-color:#4f46c8}.u-stepper-step__item--active .u-stepper-step__indicator:after{background:#4f46c8}.u-stepper-step__item--completed .u-stepper-step__indicator:after,.u-stepper-step__item--completed .u-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.u-stepper-step__item--error .u-stepper-step__indicator:after,.u-stepper-step__item--error .u-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.u-stepper-step--vertical:last-child{flex:0}");
 
-const locals$2 = {"step":"u-stepper-step","step__indicator":"u-stepper-step__indicator","step__label":"u-stepper-step__label","step__label--horizontal":"u-stepper-step__label--horizontal","step__label--vertical":"u-stepper-step__label--vertical","step__icon":"u-stepper-step__icon","step__half-complete":"u-stepper-step__half-complete","step__item":"u-stepper-step__item","step__item--horizontal":"u-stepper-step__item--horizontal","step__item--vertical":"u-stepper-step__item--vertical","step__item--active":"u-stepper-step__item--active","step__item--completed":"u-stepper-step__item--completed","step__item--error":"u-stepper-step__item--error","step--vertical":"u-stepper-step--vertical"};
+const locals$1 = {"step":"u-stepper-step","step__indicator":"u-stepper-step__indicator","step__label":"u-stepper-step__label","step__label--horizontal":"u-stepper-step__label--horizontal","step__label--vertical":"u-stepper-step__label--vertical","step__icon":"u-stepper-step__icon","step__half-complete":"u-stepper-step__half-complete","step__item":"u-stepper-step__item","step__item--horizontal":"u-stepper-step__item--horizontal","step__item--vertical":"u-stepper-step__item--vertical","step__item--active":"u-stepper-step__item--active","step__item--completed":"u-stepper-step__item--completed","step__item--error":"u-stepper-step__item--error","step--vertical":"u-stepper-step--vertical"};
 
-function classnames$2() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals$2)
+function classnames$1() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals$1)
 }
 
-function styleInject$1(css) {
+function styleInject$2(css) {
   if (!css || typeof document === 'undefined') return
@@ -85,8 +81,8 @@
 
-styleInject$1(".u-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.u-stepper-step-separator--horizontal{width:100%}.u-stepper-step-separator--vertical{flex-direction:column;height:100%}.u-stepper-step-separator--completed{border-color:#4f46c8}.u-stepper-step-separator--has-small-steps{border:none}.u-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
+styleInject$2(".u-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.u-stepper-step-separator--horizontal{width:100%}.u-stepper-step-separator--vertical{flex-direction:column;height:100%}.u-stepper-step-separator--completed{border-color:#4f46c8}.u-stepper-step-separator--has-small-steps{border:none}.u-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
 
-const locals$1 = {"step-separator":"u-stepper-step-separator","step-separator--horizontal":"u-stepper-step-separator--horizontal","step-separator--vertical":"u-stepper-step-separator--vertical","step-separator--completed":"u-stepper-step-separator--completed","step-separator--has-small-steps":"u-stepper-step-separator--has-small-steps","step-separator__half-complete":"u-stepper-step-separator__half-complete"};
+const locals$2 = {"step-separator":"u-stepper-step-separator","step-separator--horizontal":"u-stepper-step-separator--horizontal","step-separator--vertical":"u-stepper-step-separator--vertical","step-separator--completed":"u-stepper-step-separator--completed","step-separator--has-small-steps":"u-stepper-step-separator--has-small-steps","step-separator__half-complete":"u-stepper-step-separator__half-complete"};
 
-function classnames$1() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals$1)
+function classnames$2() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals$2)
 }
@@ -105,3 +101,3 @@
         const { orientation, children, hasSmallSteps, completed, className, } = this.props;
-        return (React__default["default"].createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, {
+        return (React__default.createElement("div", { className: classnames$2(className, 'step-separator', `step-separator--${orientation}`, {
                 'step-separator--has-small-steps': hasSmallSteps,
@@ -114,3 +110,3 @@ 'step-separator--completed': completed,
 const TimesSolid = () =>
-  React__default["default"].createElement(
+  React__default.createElement(
     'svg',
@@ -126,3 +122,3 @@ {
     },
-    React__default["default"].createElement('path', {
+    React__default.createElement('path', {
       fill: 'currentColor',
@@ -135,3 +131,3 @@ d:
 const CheckSolid = () =>
-  React__default["default"].createElement(
+  React__default.createElement(
     'svg',
@@ -147,3 +143,3 @@ {
     },
-    React__default["default"].createElement('path', {
+    React__default.createElement('path', {
       fill: 'currentColor',
@@ -167,4 +163,4 @@ d:
         const { label, description, completed, error, className, orientation, hasSeparator, active, ...props } = this.props;
-        return (React__default["default"].createElement("div", { className: classnames$2('step', `step--${orientation}`) },
-            React__default["default"].createElement("div", { className: classnames$2('step__item', `step__item--${orientation}`, {
+        return (React__default.createElement("div", { className: classnames$1('step', `step--${orientation}`) },
+            React__default.createElement("div", { className: classnames$1('step__item', `step__item--${orientation}`, {
                     'step__item--completed': completed,
@@ -175,6 +171,6 @@ 'step__item--has-small-step': !!children.length,
                 }) },
-                React__default["default"].createElement("div", { className: classnames$2('step__indicator') },
-                    completed && (React__default["default"].createElement(Icon__default["default"], { name: CheckSolid, color: "light", className: classnames$2('step__icon') })),
-                    error && (React__default["default"].createElement(Icon__default["default"], { name: TimesSolid, color: "light", className: classnames$2('step__icon') }))),
-                hasSeparator && (React__default["default"].createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, React.Children.map(children, (child, index) => React.cloneElement(child, {
+                React__default.createElement("div", { className: classnames$1('step__indicator') },
+                    completed && (React__default.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$1('step__icon') })),
+                    error && (React__default.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$1('step__icon') }))),
+                hasSeparator && (React__default.createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, React.Children.map(children, (child, index) => React.cloneElement(child, {
                     'data-index': `step.${this.props['data-index']}.${index}`,
@@ -187,6 +183,6 @@ orientation,
                 })))),
-                !!children.length && completed && (React__default["default"].createElement("div", { className: classnames$2('step__half-complete') }))),
-            React__default["default"].createElement(Layout__default["default"], { type: "row", gutter: "none", className: classnames$2('step__label', `step__label--${orientation}`) },
-                React__default["default"].createElement(Text__default["default"], { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label),
-                description && (React__default["default"].createElement(Text__default["default"].p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)))));
+                !!children.length && completed && (React__default.createElement("div", { className: classnames$1('step__half-complete') }))),
+            React__default.createElement(Layout, { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) },
+                React__default.createElement(Text, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label),
+                description && (React__default.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)))));
     }
@@ -199,3 +195,3 @@ }
 
-function styleInject(css) {
+function styleInject$3(css) {
   if (!css || typeof document === 'undefined') return
@@ -216,8 +212,8 @@
 
-styleInject(".u-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.u-stepper-small-step:first-child .u-stepper-small-step__left-separator,.u-stepper-small-step:last-child .u-stepper-small-step__right-separator{flex:1 1 100%}.u-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__label{display:flex}.u-stepper-small-step__left-separator,.u-stepper-small-step__right-separator{flex:1 2 100%}.u-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.u-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.u-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.u-stepper-small-step__label--always-open{display:flex}.u-stepper-small-step--vertical{flex-direction:column}.u-stepper-small-step--vertical .u-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.u-stepper-small-step--vertical .u-stepper-small-step__label:after{content:none}.u-stepper-small-step--completed .u-stepper-small-step__indicator{background:#4f46c8}.u-stepper-small-step--error .u-stepper-small-step__indicator{background:#c84646}");
+styleInject$3(".u-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.u-stepper-small-step:first-child .u-stepper-small-step__left-separator,.u-stepper-small-step:last-child .u-stepper-small-step__right-separator{flex:1 1 100%}.u-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__label{display:flex}.u-stepper-small-step__left-separator,.u-stepper-small-step__right-separator{flex:1 2 100%}.u-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.u-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.u-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.u-stepper-small-step__label--always-open{display:flex}.u-stepper-small-step--vertical{flex-direction:column}.u-stepper-small-step--vertical .u-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.u-stepper-small-step--vertical .u-stepper-small-step__label:after{content:none}.u-stepper-small-step--completed .u-stepper-small-step__indicator{background:#4f46c8}.u-stepper-small-step--error .u-stepper-small-step__indicator{background:#c84646}");
 
-const locals = {"small-step":"u-stepper-small-step","small-step__left-separator":"u-stepper-small-step__left-separator","small-step__right-separator":"u-stepper-small-step__right-separator","small-step__tooltip":"u-stepper-small-step__tooltip","small-step__indicator":"u-stepper-small-step__indicator","small-step__label":"u-stepper-small-step__label","small-step__label--always-open":"u-stepper-small-step__label--always-open","small-step--vertical":"u-stepper-small-step--vertical","small-step--completed":"u-stepper-small-step--completed","small-step--error":"u-stepper-small-step--error"};
+const locals$3 = {"small-step":"u-stepper-small-step","small-step__left-separator":"u-stepper-small-step__left-separator","small-step__right-separator":"u-stepper-small-step__right-separator","small-step__tooltip":"u-stepper-small-step__tooltip","small-step__indicator":"u-stepper-small-step__indicator","small-step__label":"u-stepper-small-step__label","small-step__label--always-open":"u-stepper-small-step__label--always-open","small-step--vertical":"u-stepper-small-step--vertical","small-step--completed":"u-stepper-small-step--completed","small-step--error":"u-stepper-small-step--error"};
 
-function classnames() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals)
+function classnames$3() {
+  return uikitUtils.classnames.apply(null, arguments).use(locals$3)
 }
@@ -236,15 +232,15 @@
         const { label, description, completed, error, orientation, showLabel, active, ...props } = this.props;
-        return (React__default["default"].createElement("div", { className: classnames('small-step', `small-step--${orientation}`, {
+        return (React__default.createElement("div", { className: classnames$3('small-step', `small-step--${orientation}`, {
                 'small-step--completed': completed,
                 'small-step--error': error,
             }) },
-            React__default["default"].createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__left-separator'), completed: completed }),
-            React__default["default"].createElement("div", { className: classnames('small-step__tooltip') },
-                React__default["default"].createElement("div", { className: classnames('small-step__indicator') }),
-                React__default["default"].createElement(Layout__default["default"], { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, {
+            React__default.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__left-separator'), completed: completed }),
+            React__default.createElement("div", { className: classnames$3('small-step__tooltip') },
+                React__default.createElement("div", { className: classnames$3('small-step__indicator') }),
+                React__default.createElement(Layout, { type: "row", gutter: "none", className: classnames$3('small-step__label', `small-step__label--${orientation}`, {
                         'small-step__label--always-open': showLabel,
                     }) },
-                    React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, label),
-                    description && (React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))),
-            React__default["default"].createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__right-separator'), completed: completed })));
+                    React__default.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, label),
+                    description && (React__default.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))),
+            React__default.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__right-separator'), completed: completed })));
     }
@@ -293,4 +289,4 @@ }
         const { activeStep } = this.state;
-        return (React__default["default"].createElement("div", Object.assign({ className: classnames$3('stepper', className) }, props),
-            React__default["default"].createElement("div", { className: classnames$3('stepper__pane', `stepper__pane--${orientation}`) }, React.Children.map(children, (child, index) => React.cloneElement(child, {
+        return (React__default.createElement("div", Object.assign({ className: classnames('stepper', className) }, props),
+            React__default.createElement("div", { className: classnames('stepper__pane', `stepper__pane--${orientation}`) }, React.Children.map(children, (child, index) => React.cloneElement(child, {
                 'data-index': index,
@@ -316,2 +312,2 @@ hasSeparator: !(index === children.length - 1),
 
-exports["default"] = Stepper;
+exports.default = Stepper;

dist/stepper.esm.js

@@ -7,3 +7,3 @@ import React, { PureComponent, Children, isValidElement, cloneElement } from 'react';
 
-function styleInject$3(css) {
+function styleInject(css) {
   if (!css || typeof document === 'undefined') return
@@ -24,11 +24,11 @@
 
-styleInject$3(".u-stepper-stepper{height:100%}.u-stepper-stepper__pane{display:flex;padding:24px}.u-stepper-stepper__pane--horizontal{flex-direction:row}.u-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
+styleInject(".u-stepper-stepper{height:100%}.u-stepper-stepper__pane{display:flex;padding:24px}.u-stepper-stepper__pane--horizontal{flex-direction:row}.u-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
 
-const locals$3 = {"stepper":"u-stepper-stepper","stepper__pane":"u-stepper-stepper__pane","stepper__pane--horizontal":"u-stepper-stepper__pane--horizontal","stepper__pane--vertical":"u-stepper-stepper__pane--vertical"};
+const locals = {"stepper":"u-stepper-stepper","stepper__pane":"u-stepper-stepper__pane","stepper__pane--horizontal":"u-stepper-stepper__pane--horizontal","stepper__pane--vertical":"u-stepper-stepper__pane--vertical"};
 
-function classnames$3() {
-  return classnames$4.apply(null, arguments).use(locals$3)
+function classnames() {
+  return classnames$4.apply(null, arguments).use(locals)
 }
 
-function styleInject$2(css) {
+function styleInject$1(css) {
   if (!css || typeof document === 'undefined') return
@@ -49,11 +49,11 @@
 
-styleInject$2(".u-stepper-step{position:relative;flex:1 1 0}.u-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.u-stepper-step__indicator:before{background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.u-stepper-step__indicator:after,.u-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\"}.u-stepper-step__indicator:after{position:absolute;top:0;left:0;background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.u-stepper-step__indicator:hover{transform:scale(1.2)}.u-stepper-step__label{position:absolute}.u-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.u-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.u-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.u-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.u-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.u-stepper-step__item--horizontal{flex-direction:row}.u-stepper-step__item--vertical{flex-direction:column;height:100%}.u-stepper-step__item--vertical .u-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.u-stepper-step__item--active .u-stepper-step__indicator:after,.u-stepper-step__item--active .u-stepper-step__indicator:before{border-color:#4f46c8}.u-stepper-step__item--active .u-stepper-step__indicator:after{background:#4f46c8}.u-stepper-step__item--completed .u-stepper-step__indicator:after,.u-stepper-step__item--completed .u-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.u-stepper-step__item--error .u-stepper-step__indicator:after,.u-stepper-step__item--error .u-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.u-stepper-step--vertical:last-child{flex:0}");
+styleInject$1(".u-stepper-step{position:relative;flex:1 1 0}.u-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.u-stepper-step__indicator:before{background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.u-stepper-step__indicator:after,.u-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\"}.u-stepper-step__indicator:after{position:absolute;top:0;left:0;background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.u-stepper-step__indicator:hover{transform:scale(1.2)}.u-stepper-step__label{position:absolute}.u-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.u-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.u-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.u-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.u-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.u-stepper-step__item--horizontal{flex-direction:row}.u-stepper-step__item--vertical{flex-direction:column;height:100%}.u-stepper-step__item--vertical .u-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.u-stepper-step__item--active .u-stepper-step__indicator:after,.u-stepper-step__item--active .u-stepper-step__indicator:before{border-color:#4f46c8}.u-stepper-step__item--active .u-stepper-step__indicator:after{background:#4f46c8}.u-stepper-step__item--completed .u-stepper-step__indicator:after,.u-stepper-step__item--completed .u-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.u-stepper-step__item--error .u-stepper-step__indicator:after,.u-stepper-step__item--error .u-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.u-stepper-step--vertical:last-child{flex:0}");
 
-const locals$2 = {"step":"u-stepper-step","step__indicator":"u-stepper-step__indicator","step__label":"u-stepper-step__label","step__label--horizontal":"u-stepper-step__label--horizontal","step__label--vertical":"u-stepper-step__label--vertical","step__icon":"u-stepper-step__icon","step__half-complete":"u-stepper-step__half-complete","step__item":"u-stepper-step__item","step__item--horizontal":"u-stepper-step__item--horizontal","step__item--vertical":"u-stepper-step__item--vertical","step__item--active":"u-stepper-step__item--active","step__item--completed":"u-stepper-step__item--completed","step__item--error":"u-stepper-step__item--error","step--vertical":"u-stepper-step--vertical"};
+const locals$1 = {"step":"u-stepper-step","step__indicator":"u-stepper-step__indicator","step__label":"u-stepper-step__label","step__label--horizontal":"u-stepper-step__label--horizontal","step__label--vertical":"u-stepper-step__label--vertical","step__icon":"u-stepper-step__icon","step__half-complete":"u-stepper-step__half-complete","step__item":"u-stepper-step__item","step__item--horizontal":"u-stepper-step__item--horizontal","step__item--vertical":"u-stepper-step__item--vertical","step__item--active":"u-stepper-step__item--active","step__item--completed":"u-stepper-step__item--completed","step__item--error":"u-stepper-step__item--error","step--vertical":"u-stepper-step--vertical"};
 
-function classnames$2() {
-  return classnames$4.apply(null, arguments).use(locals$2)
+function classnames$1() {
+  return classnames$4.apply(null, arguments).use(locals$1)
 }
 
-function styleInject$1(css) {
+function styleInject$2(css) {
   if (!css || typeof document === 'undefined') return
@@ -74,8 +74,8 @@
 
-styleInject$1(".u-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.u-stepper-step-separator--horizontal{width:100%}.u-stepper-step-separator--vertical{flex-direction:column;height:100%}.u-stepper-step-separator--completed{border-color:#4f46c8}.u-stepper-step-separator--has-small-steps{border:none}.u-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
+styleInject$2(".u-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.u-stepper-step-separator--horizontal{width:100%}.u-stepper-step-separator--vertical{flex-direction:column;height:100%}.u-stepper-step-separator--completed{border-color:#4f46c8}.u-stepper-step-separator--has-small-steps{border:none}.u-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
 
-const locals$1 = {"step-separator":"u-stepper-step-separator","step-separator--horizontal":"u-stepper-step-separator--horizontal","step-separator--vertical":"u-stepper-step-separator--vertical","step-separator--completed":"u-stepper-step-separator--completed","step-separator--has-small-steps":"u-stepper-step-separator--has-small-steps","step-separator__half-complete":"u-stepper-step-separator__half-complete"};
+const locals$2 = {"step-separator":"u-stepper-step-separator","step-separator--horizontal":"u-stepper-step-separator--horizontal","step-separator--vertical":"u-stepper-step-separator--vertical","step-separator--completed":"u-stepper-step-separator--completed","step-separator--has-small-steps":"u-stepper-step-separator--has-small-steps","step-separator__half-complete":"u-stepper-step-separator__half-complete"};
 
-function classnames$1() {
-  return classnames$4.apply(null, arguments).use(locals$1)
+function classnames$2() {
+  return classnames$4.apply(null, arguments).use(locals$2)
 }
@@ -94,3 +94,3 @@
         const { orientation, children, hasSmallSteps, completed, className, } = this.props;
-        return (React.createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, {
+        return (React.createElement("div", { className: classnames$2(className, 'step-separator', `step-separator--${orientation}`, {
                 'step-separator--has-small-steps': hasSmallSteps,
@@ -152,4 +152,4 @@ 'step-separator--completed': completed,
         const { label, description, completed, error, className, orientation, hasSeparator, active, ...props } = this.props;
-        return (React.createElement("div", { className: classnames$2('step', `step--${orientation}`) },
-            React.createElement("div", { className: classnames$2('step__item', `step__item--${orientation}`, {
+        return (React.createElement("div", { className: classnames$1('step', `step--${orientation}`) },
+            React.createElement("div", { className: classnames$1('step__item', `step__item--${orientation}`, {
                     'step__item--completed': completed,
@@ -160,5 +160,5 @@ 'step__item--has-small-step': !!children.length,
                 }) },
-                React.createElement("div", { className: classnames$2('step__indicator') },
-                    completed && (React.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$2('step__icon') })),
-                    error && (React.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$2('step__icon') }))),
+                React.createElement("div", { className: classnames$1('step__indicator') },
+                    completed && (React.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$1('step__icon') })),
+                    error && (React.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$1('step__icon') }))),
                 hasSeparator && (React.createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, Children.map(children, (child, index) => cloneElement(child, {
@@ -172,4 +172,4 @@ 'data-index': `step.${this.props['data-index']}.${index}`,
                 })))),
-                !!children.length && completed && (React.createElement("div", { className: classnames$2('step__half-complete') }))),
-            React.createElement(Layout, { type: "row", gutter: "none", className: classnames$2('step__label', `step__label--${orientation}`) },
+                !!children.length && completed && (React.createElement("div", { className: classnames$1('step__half-complete') }))),
+            React.createElement(Layout, { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) },
                 React.createElement(Text, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label),
@@ -184,3 +184,3 @@ description && (React.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)))));
 
-function styleInject(css) {
+function styleInject$3(css) {
   if (!css || typeof document === 'undefined') return
@@ -201,8 +201,8 @@
 
-styleInject(".u-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.u-stepper-small-step:first-child .u-stepper-small-step__left-separator,.u-stepper-small-step:last-child .u-stepper-small-step__right-separator{flex:1 1 100%}.u-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__label{display:flex}.u-stepper-small-step__left-separator,.u-stepper-small-step__right-separator{flex:1 2 100%}.u-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.u-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.u-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.u-stepper-small-step__label--always-open{display:flex}.u-stepper-small-step--vertical{flex-direction:column}.u-stepper-small-step--vertical .u-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.u-stepper-small-step--vertical .u-stepper-small-step__label:after{content:none}.u-stepper-small-step--completed .u-stepper-small-step__indicator{background:#4f46c8}.u-stepper-small-step--error .u-stepper-small-step__indicator{background:#c84646}");
+styleInject$3(".u-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.u-stepper-small-step:first-child .u-stepper-small-step__left-separator,.u-stepper-small-step:last-child .u-stepper-small-step__right-separator{flex:1 1 100%}.u-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.u-stepper-small-step__tooltip:hover .u-stepper-small-step__label{display:flex}.u-stepper-small-step__left-separator,.u-stepper-small-step__right-separator{flex:1 2 100%}.u-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.u-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.u-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.u-stepper-small-step__label--always-open{display:flex}.u-stepper-small-step--vertical{flex-direction:column}.u-stepper-small-step--vertical .u-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.u-stepper-small-step--vertical .u-stepper-small-step__label:after{content:none}.u-stepper-small-step--completed .u-stepper-small-step__indicator{background:#4f46c8}.u-stepper-small-step--error .u-stepper-small-step__indicator{background:#c84646}");
 
-const locals = {"small-step":"u-stepper-small-step","small-step__left-separator":"u-stepper-small-step__left-separator","small-step__right-separator":"u-stepper-small-step__right-separator","small-step__tooltip":"u-stepper-small-step__tooltip","small-step__indicator":"u-stepper-small-step__indicator","small-step__label":"u-stepper-small-step__label","small-step__label--always-open":"u-stepper-small-step__label--always-open","small-step--vertical":"u-stepper-small-step--vertical","small-step--completed":"u-stepper-small-step--completed","small-step--error":"u-stepper-small-step--error"};
+const locals$3 = {"small-step":"u-stepper-small-step","small-step__left-separator":"u-stepper-small-step__left-separator","small-step__right-separator":"u-stepper-small-step__right-separator","small-step__tooltip":"u-stepper-small-step__tooltip","small-step__indicator":"u-stepper-small-step__indicator","small-step__label":"u-stepper-small-step__label","small-step__label--always-open":"u-stepper-small-step__label--always-open","small-step--vertical":"u-stepper-small-step--vertical","small-step--completed":"u-stepper-small-step--completed","small-step--error":"u-stepper-small-step--error"};
 
-function classnames() {
-  return classnames$4.apply(null, arguments).use(locals)
+function classnames$3() {
+  return classnames$4.apply(null, arguments).use(locals$3)
 }
@@ -221,10 +221,10 @@
         const { label, description, completed, error, orientation, showLabel, active, ...props } = this.props;
-        return (React.createElement("div", { className: classnames('small-step', `small-step--${orientation}`, {
+        return (React.createElement("div", { className: classnames$3('small-step', `small-step--${orientation}`, {
                 'small-step--completed': completed,
                 'small-step--error': error,
             }) },
-            React.createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__left-separator'), completed: completed }),
-            React.createElement("div", { className: classnames('small-step__tooltip') },
-                React.createElement("div", { className: classnames('small-step__indicator') }),
-                React.createElement(Layout, { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, {
+            React.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__left-separator'), completed: completed }),
+            React.createElement("div", { className: classnames$3('small-step__tooltip') },
+                React.createElement("div", { className: classnames$3('small-step__indicator') }),
+                React.createElement(Layout, { type: "row", gutter: "none", className: classnames$3('small-step__label', `small-step__label--${orientation}`, {
                         'small-step__label--always-open': showLabel,
@@ -234,3 +234,3 @@ }) },
                     description && (React.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))),
-            React.createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__right-separator'), completed: completed })));
+            React.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__right-separator'), completed: completed })));
     }
@@ -279,4 +279,4 @@ }
         const { activeStep } = this.state;
-        return (React.createElement("div", Object.assign({ className: classnames$3('stepper', className) }, props),
-            React.createElement("div", { className: classnames$3('stepper__pane', `stepper__pane--${orientation}`) }, Children.map(children, (child, index) => cloneElement(child, {
+        return (React.createElement("div", Object.assign({ className: classnames('stepper', className) }, props),
+            React.createElement("div", { className: classnames('stepper__pane', `stepper__pane--${orientation}`) }, Children.map(children, (child, index) => cloneElement(child, {
                 'data-index': index,
@@ -302,2 +302,2 @@ hasSeparator: !(index === children.length - 1),
 
-export { Stepper as default };
+export default Stepper;

package.json

 {
   "name": "@applique-ui/stepper",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "main": "dist/stepper.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/stepper.esm.js",

README.md

@@ -1,1 +0,1 @@
-# @applique/uikit-component-stepper
+# @applique-ui/uikit-component-stepper

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

54011

decreased by-1.07%

Lines of code

1024

decreased by-0.29%

No dependency changes