Socket
Socket
Sign inDemoInstall

@keyvaluesystems/react-stepper

Package Overview
Dependencies
Maintainers
7
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@keyvaluesystems/react-stepper - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

4

build/index.js
/*!
*
* @keyvaluesystems/react-stepper v1.0.1
* @keyvaluesystems/react-stepper v1.0.2
* git+https://github.com/KeyValueSoftwareSystems/react-stepper.git

@@ -12,3 +12,3 @@ *

*/
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports["React Stepper"]=n(require("react")):e["React Stepper"]=n(e.react)}(this,(e=>(()=>{"use strict";var n={342:(e,n,t)=>{t.d(n,{Z:()=>a});var r=t(537),o=t.n(r),i=t(645),A=t.n(i)()(o());A.push([e.id,".YQZiU8D8fXz6FUlYYoMx{border-radius:50%;height:24px;width:24px;background:#7b7b84;color:#fff;display:flex;align-items:center;justify-content:center;overflow:visible;font-weight:400;font-size:12px;line-height:16px;margin-top:7px;margin-bottom:7px;position:relative}.aTj7eBxuaoFY1kwq3ZIA{background:#312ec0}.n_oCIMCGLeYoP3UENa_J{opacity:.4}.GqQP1MOuOgqmGBuhjbaj{background:#312ec0}.nvGmBGRVgsa80Z36Vk2Q{object-fit:cover;width:10px;height:8px}.EIQieemdrNy0QU2XBXzi{cursor:pointer}.bBUeX_5x1qVwHuORwr05{position:absolute;width:max-content;height:100%;display:flex;flex-direction:column;justify-content:center}.DtXBgzEiUtykYl2V24aJ{left:44px}.DG4ZC0f4d2f0KA7wqwUk{right:44px;align-items:end}.bBUeX_5x1qVwHuORwr05 .CRepveqvz0SY44X6OzhR{color:#4f4f4f}.bBUeX_5x1qVwHuORwr05 .q0ZOanhM1JneObi6OiGy{font-weight:700}.bBUeX_5x1qVwHuORwr05 .pmHWv8WHzsLviyl6RGUN{font-weight:400;font-size:12px;line-height:21px;color:#929292}.bBUeX_5x1qVwHuORwr05 .QKD7Tj_Z6iPdwtix2AMz{color:#676767}","",{version:3,sources:["webpack://./src/node/styles.module.scss"],names:[],mappings:"AAAA,sBACI,iBAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,gBAAA,CACA,eAAA,CACA,cAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,iBAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,UAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,gBAAA,CACA,UAAA,CACA,UAAA,CAEF,sBACE,cAAA,CAGF,sBACE,iBAAA,CACA,iBAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBACE,SAAA,CAEF,sBACE,UAAA,CACA,eAAA,CAEF,4CACE,aAAA,CAEF,4CACE,eAAA,CAEF,4CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,aAAA,CAEF,4CACE,aAAA",sourcesContent:[".eachNode {\n border-radius: 50%;\n height: 24px;\n width: 24px;\n background: #7b7b84;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n margin-top: 7px;\n margin-bottom: 7px;\n position: relative;\n }\n .activeStepNode {\n background: #312ec0;\n }\n .inactiveStepNode {\n opacity: 0.4;\n }\n .completedStepNode {\n background: #312ec0;\n }\n .whiteTickImg {\n object-fit: cover;\n width: 10px;\n height: 8px;\n }\n .cursorPointer {\n cursor: pointer;\n }\n\n .labelContainer {\n position: absolute;\n width: max-content;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n &__right {\n left: 44px;\n }\n &__left {\n right: 44px;\n align-items: end;\n }\n .labelTitle {\n color: #4F4F4F;\n }\n .activeLabelTitle {\n font-weight: 700;\n }\n .labelDescription {\n font-weight: 400;\n font-size: 12px;\n line-height: 21px;\n color: #929292;\n }\n .activeLabelDescription {\n color: #676767;\n }\n }"],sourceRoot:""}]),A.locals={eachNode:"YQZiU8D8fXz6FUlYYoMx",activeStepNode:"aTj7eBxuaoFY1kwq3ZIA",inactiveStepNode:"n_oCIMCGLeYoP3UENa_J",completedStepNode:"GqQP1MOuOgqmGBuhjbaj",whiteTickImg:"nvGmBGRVgsa80Z36Vk2Q",cursorPointer:"EIQieemdrNy0QU2XBXzi",labelContainer:"bBUeX_5x1qVwHuORwr05",labelContainer__right:"DtXBgzEiUtykYl2V24aJ",labelContainer__left:"DG4ZC0f4d2f0KA7wqwUk",labelTitle:"CRepveqvz0SY44X6OzhR",activeLabelTitle:"q0ZOanhM1JneObi6OiGy",labelDescription:"pmHWv8WHzsLviyl6RGUN",activeLabelDescription:"QKD7Tj_Z6iPdwtix2AMz"};const a=A},766:(e,n,t)=>{t.d(n,{Z:()=>a});var r=t(537),o=t.n(r),i=t(645),A=t.n(i)()(o());A.push([e.id,".stepper{margin:0;padding:1em;display:flex;font-family:inherit;list-style:none}.horizontalStepperWrapper{display:flex;flex-direction:column}.verticalStepperWrapper{display:flex;flex-direction:row;align-items:center}.labelLeft{justify-content:flex-end}.horizontalStepper{flex-flow:row nowrap;width:100%;height:fit-content;justify-content:center}.horizontalStepper .stepContainer{display:flex;flex-direction:row;height:auto;width:100%;flex-wrap:wrap;align-items:center;justify-content:center}.horizontalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;width:100px;min-width:0;height:2px}.horizontalStepper .activeConnector{background-color:#312ec0}.horizontalStepper .descriptionContainer{display:flex;justify-content:center}.verticalStepper{flex-flow:column nowrap;width:fit-content;height:100%}.verticalStepper .stepContainer{display:flex;flex-direction:column;height:100%;width:auto;flex-wrap:wrap;align-items:center;justify-content:center}.verticalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .middleStepConnector{margin:0;display:flex;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .activeConnector{background-color:#312ec0}.verticalStepper .descriptionContainer{display:flex}.hiddenConnector{visibility:hidden}.node{display:flex;justify-content:center;align-items:center;order:2;padding:3px}.leftConnector{order:1}.rightConnector{order:4}.labelContainer{display:flex;word-wrap:break-word;justify-content:center;order:3}.label{font-size:.9em;white-space:pre-wrap;word-wrap:break-word;padding:3px;text-align:center;font-weight:bold;display:flex;max-width:400px}.verticalStepperInlineLabel{display:flex;width:100px;justify-content:center}.reversedLabelContainer{order:2}.reversedNode{order:3}.leftDescription{flex-direction:row-reverse}.verticalTextLeftContainer{display:flex;flex-direction:column;align-items:flex-end;width:100%}.horizontalLabelTop{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:2 100%}.horizontalLabelBottom{display:flex;justify-content:center;order:1}.verticalLabelRight{order:1}.description{color:#4e4b4b;padding-bottom:5px}.middleConnectorWrapper{display:flex;justify-content:flex-end}.leftContentMiddleConnectorWrapper{display:flex;justify-content:flex-start}.verticalContentWrapper{padding-left:10px;padding-right:10px}.horizontalStepperDescription{display:flex;justify-content:center}","",{version:3,sources:["webpack://./src/stepper/styles.scss"],names:[],mappings:"AAIA,SACE,QAAA,CACA,WAAA,CACA,YAAA,CACA,mBAAA,CACA,eAAA,CAGF,0BACE,YAAA,CACA,qBAAA,CAGF,wBACE,YAAA,CACA,kBAAA,CACA,kBAAA,CAGF,WACE,wBAAA,CAGF,mBACE,oBAAA,CACA,UAAA,CACA,kBAAA,CACA,sBAAA,CACA,kCACE,YAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,kCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA7CS,CA8CT,eAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CAEF,oCACE,wBAAA,CAEF,yCACE,YAAA,CACA,sBAAA,CAKJ,iBACE,uBAAA,CACA,iBAAA,CACA,WAAA,CACA,gCACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,gCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA9ES,CA+ET,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,sCACE,QAAA,CACA,YAAA,CACA,wBAvFS,CAwFT,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,kCACE,wBAAA,CAEF,uCACE,YAAA,CAMJ,iBACE,iBAAA,CAGF,MACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,OAAA,CACA,WAAA,CAEF,eACE,OAAA,CAEF,gBACE,OAAA,CAGF,gBACE,YAAA,CACA,oBAAA,CACA,sBAAA,CACA,OAAA,CAGF,OACE,cAAA,CACA,oBAAA,CACA,oBAAA,CACA,WAAA,CACA,iBAAA,CACA,gBAAA,CACA,YAAA,CACA,eAAA,CAGF,4BACE,YAAA,CACA,WAAA,CACA,sBAAA,CAGF,wBACE,OAAA,CAGF,cACE,OAAA,CAGF,iBACE,0BAAA,CAEF,2BACE,YAAA,CACA,qBAAA,CACA,oBAAA,CACA,UAAA,CAGF,oBACE,YAAA,CACA,qBAAA,CACA,wBAAA,CACA,kBAAA,CACA,WAAA,CAGF,uBACE,YAAA,CACA,sBAAA,CACA,OAAA,CAGF,oBACE,OAAA,CAGF,aACE,aAAA,CACA,kBAAA,CAGF,wBACE,YAAA,CACA,wBAAA,CAGF,mCACE,YAAA,CACA,0BAAA,CAGF,wBACE,iBAAA,CACA,kBAAA,CAGF,8BACE,YAAA,CACA,sBAAA",sourcesContent:["$grey-color: #e1e1e1;\n$active-color: #312ec0;\n$completed-color: #47aed6;\n\n.stepper {\n margin: 0;\n padding: 1em;\n display: flex;\n font-family: inherit;\n list-style: none;\n}\n\n.horizontalStepperWrapper {\n display: flex;\n flex-direction: column;\n}\n\n.verticalStepperWrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.labelLeft {\n justify-content: flex-end;\n}\n\n.horizontalStepper {\n flex-flow: row nowrap;\n width: 100%;\n height: fit-content;\n justify-content: center;\n .stepContainer {\n display: flex;\n flex-direction: row;\n height: auto;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .stepConnector {\n margin: 0;\n display: flex;\n flex: 1;\n background-color: $grey-color;\n overflow: hidden;\n width: 100px;\n min-width: 0;\n height: 2px;\n }\n .activeConnector {\n background-color: #312ec0;\n }\n .descriptionContainer {\n display: flex;\n justify-content: center;\n }\n \n}\n\n.verticalStepper {\n flex-flow: column nowrap;\n width: fit-content;\n height: 100%;\n .stepContainer {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: auto;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .stepConnector {\n margin: 0;\n display: flex;\n flex: 1;\n background-color: $grey-color;\n overflow: hidden;\n height: auto;\n min-height: 10px;\n width: 2px;\n }\n .middleStepConnector {\n margin: 0;\n display: flex;\n background-color: $grey-color;\n overflow: hidden;\n height: auto;\n min-height: 10px;\n width: 2px;\n }\n .activeConnector {\n background-color: #312ec0;\n }\n .descriptionContainer {\n display: flex;\n }\n \n}\n\n\n.hiddenConnector {\n visibility: hidden;\n}\n\n.node {\n display: flex;\n justify-content: center;\n align-items: center;\n order: 2;\n padding: 3px;\n}\n.leftConnector {\n order: 1;\n}\n.rightConnector {\n order: 4;\n}\n\n.labelContainer {\n display: flex;\n word-wrap: break-word;\n justify-content: center;\n order: 3;\n}\n\n.label {\n font-size: 0.9em;\n white-space: pre-wrap;\n word-wrap: break-word;\n padding: 3px;\n text-align: center;\n font-weight: bold;\n display: flex;\n max-width: 400px;\n}\n\n.verticalStepperInlineLabel {\n display: flex;\n width: 100px;\n justify-content: center;\n}\n\n.reversedLabelContainer {\n order: 2;\n}\n\n.reversedNode {\n order: 3;\n}\n\n.leftDescription {\n flex-direction: row-reverse;\n}\n.verticalTextLeftContainer {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n width: 100%;\n}\n\n.horizontalLabelTop {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n flex: 2 100%;\n}\n\n.horizontalLabelBottom {\n display: flex;\n justify-content: center;\n order: 1;\n}\n\n.verticalLabelRight {\n order: 1;\n}\n\n.description {\n color: #4e4b4b;\n padding-bottom: 5px;\n}\n\n.middleConnectorWrapper {\n display: flex;\n justify-content: flex-end;;\n}\n\n.leftContentMiddleConnectorWrapper { \n display: flex;\n justify-content: flex-start;\n}\n\n.verticalContentWrapper {\n padding-left: 10px;\n padding-right: 10px;\n}\n\n.horizontalStepperDescription {\n display: flex;\n justify-content: center;;\n}\n"],sourceRoot:""}]);const a=A},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var A={};if(r)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(A[l]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&A[s[0]]||(void 0!==i&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=i),t&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=t):s[2]=t),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),n.push(s))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;if("function"==typeof btoa){var r=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),o="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(r),i="/*# ".concat(o," */");return[n].concat([i]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var i={},A=[],a=0;a<e.length;a++){var l=e[a],c=r.base?l[0]+r.base:l[0],s=i[c]||0,p="".concat(c," ").concat(s);i[c]=s+1;var d=t(p),C={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)n[d].references++,n[d].updater(C);else{var f=o(C,r);r.byIndex=a,n.splice(a,0,{identifier:p,updater:f,references:1})}A.push(p)}return A}function o(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var A=0;A<i.length;A++){var a=t(i[A]);n[a].references--}for(var l=r(e,o),c=0;c<i.length;c++){var s=t(i[c]);0===n[s].references&&(n[s].updater(),n.splice(s,1))}i=l}}},569:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={id:e,exports:{}};return n[e](i,i.exports,r),i.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>k});var e=r(156),n=r.n(e),t=r(379),i=r.n(t),A=r(795),a=r.n(A),l=r(569),c=r.n(l),s=r(565),p=r.n(s),d=r(216),C=r.n(d),f=r(589),u=r.n(f),h=r(766),m={};m.styleTagTransform=u(),m.setAttributes=p(),m.insert=c().bind(null,"head"),m.domAPI=a(),m.insertStyleElement=C();i()(h.Z,m);h.Z&&h.Z.locals&&h.Z.locals;var v,x,g;!function(e){e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(v||(v={})),function(e){e.HORIZONTAL="horizontal",e.VERTICAL="vertical"}(x||(x={})),function(e){e.LabelDescription="LabelDescription",e.LabelTitle="LabelTitle",e.ActiveLabelTitle="ActiveLabelTitle",e.ActiveLabelDescription="ActiveLabelDescription",e.LineSeparator="LineSeparator",e.InactiveLineSeparator="InactiveLineSeparator",e.Node="Node",e.ActiveNode="ActiveNode",e.InActiveNode="InActiveNode"}(g||(g={}));const y=function(e,n,t,r){var o=e[n];return o?o(t,r):{}};var b=function(){return b=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},b.apply(this,arguments)};const w=function(e){var t=e.labelPosition,r=e.isVertical,o=e.currentStepIndex,i=e.index,A=e.styles,a=e.step,l=e.showDescriptionsForAllSteps,c=e.middleConnectorClassName,s=e.stepContent,p=e.nodeWidth;return n().createElement("div",{className:"descriptionContainer ".concat("left"===t?"labelLeft leftDescription":"")},r&&n().createElement("div",{className:t===v.LEFT?"leftContentMiddleConnectorWrapper":"middleConnectorWrapper",style:{width:p/2+1}},n().createElement("div",{className:c,style:b({},o>i?y(A,g.LineSeparator,a,i)||{}:y(A,g.InactiveLineSeparator,a,i)||{})})),n().createElement("div",{className:r?"verticalContentWrapper":""},(l||i===o)&&n().createElement("div",{className:"description",id:"step-description-".concat(i),style:b({},o===i?y(A,g.ActiveLabelDescription,a,i)||{}:y(A,g.LabelDescription,a,i)||{})},a.stepDescription),r&&i===o&&s&&s(a,i)))};var E=r(342),B={};B.styleTagTransform=u(),B.setAttributes=p(),B.insert=c().bind(null,"head"),B.domAPI=a(),B.insertStyleElement=C();i()(E.Z,B);const S=E.Z&&E.Z.locals?E.Z.locals:void 0;var L=function(){return L=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},L.apply(this,arguments)};const N=function(e){var t=e.step,r=e.renderNode,o=e.index,i=e.currentStepIndex,A=e.handleStepClick,a=e.showCursor,l=e.getStyles;return n().createElement("div",{className:"".concat(S.eachNode,"\n ").concat(a&&S.cursorPointer,"\n ").concat(o===i&&S.activeStepNode,"\n ").concat(!t.completed&&i!==o&&S.inactiveStepNode,"\n ").concat(t.completed&&i!==o&&S.completedStepNode,"\n "),style:L(L(L({},l(g.Node)||{}),o===i&&l(g.ActiveNode)||{}),!t.completed&&i!==o&&l(g.InActiveNode)||{}),onClick:function(){return A&&A()},role:"presentation",id:"stepper-node"},r&&r(t,o)||n().createElement(n().Fragment,null,(null==t?void 0:t.completed)&&n().createElement("img",{src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMjMwNzdMMy44MjM1MyA3TDkgMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",className:S.whiteTickImg,alt:""})||o+1))},T=N;const I=function(e,n){if(e===x.HORIZONTAL){if(n===v.TOP)return"horizontalLabelTop";if(n===v.BOTTOM)return"horizontalLabelBottom"}else if(n===v.RIGHT)return"verticalLabelRight"};var F=function(){return F=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},F.apply(this,arguments)};const O=function(e){var t=e.orientation,r=e.labelPosition,o=e.isVertical,i=e.isInlineLabelsAndSteps,A=e.index,a=e.currentStepIndex,l=e.step,c=e.showDescriptionsForAllSteps,s=e.onStepClick,p=e.renderNode,d=e.styles,C=e.nodeRef,f=e.prevConnectorClassName,u=e.nextConnectorClassName;return n().createElement("div",{id:"stepper-step",className:o?"verticalStepperWrapper ".concat(r===v.LEFT?"labelLeft":""):"horizontalStepperWrapper"},!i&&n().createElement("div",{className:I(t,r)},n().createElement("div",{className:"label",id:"step-label-".concat(A),style:F(F({},y(d,g.LabelTitle,l,A)||{}),A===a&&(y(d,g.ActiveLabelTitle,l,A)||{}))},l.stepLabel),(c||A===a)&&t===x.HORIZONTAL&&r===v.TOP&&n().createElement("div",{className:"description",id:"step-horizontal-top-description-".concat(A),style:F({},a===A?y(d,g.ActiveLabelDescription,l,A)||{}:y(d,g.LabelDescription,l,A)||{})},l.stepDescription)),n().createElement("div",{className:"stepContainer",id:"".concat(A,"-node"),ref:C},n().createElement("div",{className:f,style:F({},a>=A?y(d,g.LineSeparator,l,A)||{}:y(d,g.InactiveLineSeparator,l,A)||{})}),n().createElement("div",{className:"node ".concat([v.TOP,v.LEFT].includes(r)?"reversedNode":"")},n().createElement(T,{step:l,index:A,currentStepIndex:a,handleStepClick:function(){return s&&s(l,A)},showCursor:!!s,renderNode:p,getStyles:function(e){return y(d,e,l,A)}})),i&&n().createElement("div",{className:"labelContainer ".concat([v.TOP,v.LEFT].includes(r)?"reversedLabelContainer":"")},n().createElement("div",{className:"label ".concat(o&&"verticalStepperInlineLabel"),id:"step-inline-label-".concat(A),style:F(F({},y(d,g.LabelTitle,l,A)||{}),A===a&&(y(d,g.ActiveLabelTitle,l,A)||{}))},l.stepLabel)),n().createElement("div",{className:u,style:F({},a>A?y(d,g.LineSeparator,l,A)||{}:y(d,g.InactiveLineSeparator,l,A)||{})})))};const j=function(t){var r=t.stepperProps,o=t.step,i=t.index,A=r.steps,a=r.currentStepIndex,l=void 0===a?0:a,c=r.styles,s=void 0===c?{}:c,p=r.labelPosition,d=void 0===p?v.RIGHT:p,C=r.orientation,f=void 0===C?x.VERTICAL:C,u=r.showDescriptionsForAllSteps,h=void 0!==u&&u,m=r.stepContent,g=r.onStepClick,y=r.renderNode,b=(0,e.useState)(0),E=b[0],B=b[1],S=f===x.VERTICAL,L=S&&[v.TOP,v.BOTTOM].includes(d)||!S&&[v.LEFT,v.RIGHT].includes(d),N=(0,e.useRef)(null);(0,e.useEffect)((function(){var e=N.current;if(e){var n=e.getBoundingClientRect().width;B(n)}}),[A]);var T="stepConnector leftConnector ".concat(l>=i?"activeConnector":""," ").concat(0===i?"hiddenConnector":""),I="stepConnector rightConnector ".concat(l>i?"activeConnector":""," ").concat(i===A.length-1?"hiddenConnector":""),F="middleStepConnector ".concat(l>i?"activeConnector":""," ").concat(i===A.length-1?"hiddenConnector":"");return f===x.HORIZONTAL&&d===v.TOP?n().createElement(O,{orientation:f,labelPosition:d,isVertical:S,isInlineLabelsAndSteps:L,index:i,currentStepIndex:l,step:o,showDescriptionsForAllSteps:h,onStepClick:g,renderNode:y,styles:s,nodeRef:N,prevConnectorClassName:T,nextConnectorClassName:I}):n().createElement("div",{className:f===x.VERTICAL&&d===v.LEFT?"verticalTextLeftContainer":""},n().createElement(O,{orientation:f,labelPosition:d,isVertical:S,isInlineLabelsAndSteps:L,index:i,currentStepIndex:l,step:o,showDescriptionsForAllSteps:h,onStepClick:g,renderNode:y,styles:s,nodeRef:N,prevConnectorClassName:T,nextConnectorClassName:I}),n().createElement(w,{labelPosition:d,isVertical:S,currentStepIndex:l,index:i,styles:s,step:o,showDescriptionsForAllSteps:h,middleConnectorClassName:F,stepContent:m,nodeWidth:E}))};const k=function(e){var t=e.steps,r=e.currentStepIndex,o=void 0===r?0:r,i=e.orientation,A=void 0===i?x.VERTICAL:i,a=e.stepContent,l=A===x.VERTICAL;return n().createElement(n().Fragment,null,n().createElement("ul",{className:"stepper ".concat(l?"verticalStepper":"horizontalStepper")},t.map((function(n,t){return j({stepperProps:e,step:n,index:t})}))),!l&&a&&a(t[o],o))}})(),o})()));
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports["React Stepper"]=n(require("react")):e["React Stepper"]=n(e.react)}(this,(e=>(()=>{"use strict";var n={342:(e,n,t)=>{t.d(n,{Z:()=>a});var o=t(537),r=t.n(o),i=t(645),A=t.n(i)()(r());A.push([e.id,".YQZiU8D8fXz6FUlYYoMx{border-radius:50%;height:24px;width:24px;background:#7b7b84;color:#fff;display:flex;align-items:center;justify-content:center;overflow:visible;font-weight:400;font-size:12px;line-height:16px;margin-top:7px;margin-bottom:7px;position:relative}.aTj7eBxuaoFY1kwq3ZIA{background:#312ec0}.n_oCIMCGLeYoP3UENa_J{opacity:.4}.GqQP1MOuOgqmGBuhjbaj{background:#312ec0}.nvGmBGRVgsa80Z36Vk2Q{object-fit:cover;width:10px;height:8px}.EIQieemdrNy0QU2XBXzi{cursor:pointer}.bBUeX_5x1qVwHuORwr05{position:absolute;width:max-content;height:100%;display:flex;flex-direction:column;justify-content:center}.DtXBgzEiUtykYl2V24aJ{left:44px}.DG4ZC0f4d2f0KA7wqwUk{right:44px;align-items:end}.bBUeX_5x1qVwHuORwr05 .CRepveqvz0SY44X6OzhR{color:#4f4f4f}.bBUeX_5x1qVwHuORwr05 .q0ZOanhM1JneObi6OiGy{font-weight:700}.bBUeX_5x1qVwHuORwr05 .pmHWv8WHzsLviyl6RGUN{font-weight:400;font-size:12px;line-height:21px;color:#929292}.bBUeX_5x1qVwHuORwr05 .QKD7Tj_Z6iPdwtix2AMz{color:#676767}","",{version:3,sources:["webpack://./src/node/styles.module.scss"],names:[],mappings:"AAAA,sBACI,iBAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,gBAAA,CACA,eAAA,CACA,cAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,iBAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,UAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,gBAAA,CACA,UAAA,CACA,UAAA,CAEF,sBACE,cAAA,CAGF,sBACE,iBAAA,CACA,iBAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBACE,SAAA,CAEF,sBACE,UAAA,CACA,eAAA,CAEF,4CACE,aAAA,CAEF,4CACE,eAAA,CAEF,4CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,aAAA,CAEF,4CACE,aAAA",sourcesContent:[".eachNode {\n border-radius: 50%;\n height: 24px;\n width: 24px;\n background: #7b7b84;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n margin-top: 7px;\n margin-bottom: 7px;\n position: relative;\n }\n .activeStepNode {\n background: #312ec0;\n }\n .inactiveStepNode {\n opacity: 0.4;\n }\n .completedStepNode {\n background: #312ec0;\n }\n .whiteTickImg {\n object-fit: cover;\n width: 10px;\n height: 8px;\n }\n .cursorPointer {\n cursor: pointer;\n }\n\n .labelContainer {\n position: absolute;\n width: max-content;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n &__right {\n left: 44px;\n }\n &__left {\n right: 44px;\n align-items: end;\n }\n .labelTitle {\n color: #4F4F4F;\n }\n .activeLabelTitle {\n font-weight: 700;\n }\n .labelDescription {\n font-weight: 400;\n font-size: 12px;\n line-height: 21px;\n color: #929292;\n }\n .activeLabelDescription {\n color: #676767;\n }\n }"],sourceRoot:""}]),A.locals={eachNode:"YQZiU8D8fXz6FUlYYoMx",activeStepNode:"aTj7eBxuaoFY1kwq3ZIA",inactiveStepNode:"n_oCIMCGLeYoP3UENa_J",completedStepNode:"GqQP1MOuOgqmGBuhjbaj",whiteTickImg:"nvGmBGRVgsa80Z36Vk2Q",cursorPointer:"EIQieemdrNy0QU2XBXzi",labelContainer:"bBUeX_5x1qVwHuORwr05",labelContainer__right:"DtXBgzEiUtykYl2V24aJ",labelContainer__left:"DG4ZC0f4d2f0KA7wqwUk",labelTitle:"CRepveqvz0SY44X6OzhR",activeLabelTitle:"q0ZOanhM1JneObi6OiGy",labelDescription:"pmHWv8WHzsLviyl6RGUN",activeLabelDescription:"QKD7Tj_Z6iPdwtix2AMz"};const a=A},766:(e,n,t)=>{t.d(n,{Z:()=>a});var o=t(537),r=t.n(o),i=t(645),A=t.n(i)()(r());A.push([e.id,".stepper{margin:0;padding:1em;display:flex;font-family:inherit;list-style:none}.horizontalStepperWrapper{display:flex;flex-direction:column}.verticalStepperWrapper{display:flex;flex-direction:row;align-items:center}.labelLeft{justify-content:flex-end}.horizontalStepper{flex-flow:row nowrap;width:100%;height:fit-content;justify-content:center}.horizontalStepper .stepContainer{display:flex;flex-direction:row;height:auto;width:100%;flex-wrap:wrap;align-items:center;justify-content:center}.horizontalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;width:100px;min-width:0;height:2px}.horizontalStepper .activeConnector{background-color:#312ec0}.horizontalStepper .descriptionContainer{display:flex;justify-content:center}.verticalStepper{flex-flow:column nowrap;width:fit-content;height:100%}.verticalStepper .stepContainer{display:flex;flex-direction:column;height:100%;width:auto;flex-wrap:wrap;align-items:center;justify-content:center}.verticalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .middleStepConnector{margin:0;display:flex;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .activeConnector{background-color:#312ec0}.verticalStepper .descriptionContainer{display:flex}.hiddenConnector{visibility:hidden}.node{display:flex;justify-content:center;align-items:center;order:2;padding:3px}.leftConnector{order:1}.rightConnector{order:4}.labelContainer{display:flex;word-wrap:break-word;justify-content:center;order:3}.label{font-size:.9em;white-space:pre-wrap;word-wrap:break-word;padding:3px;text-align:center;font-weight:bold;display:flex;max-width:400px}.verticalStepperInlineLabel{display:flex;width:100px;justify-content:center}.reversedLabelContainer{order:2}.reversedNode{order:3}.leftDescription{flex-direction:row-reverse}.verticalTextLeftContainer{display:flex;flex-direction:column;align-items:flex-end;width:100%}.horizontalLabelTop{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:2 100%}.horizontalLabelBottom{display:flex;justify-content:center;order:1}.verticalLabelRight{order:1}.description{color:#4e4b4b;padding-bottom:5px}.middleConnectorWrapper{display:flex;justify-content:flex-end}.leftContentMiddleConnectorWrapper{display:flex;justify-content:flex-start}.verticalContentWrapper{padding-left:10px;padding-right:10px}.horizontalStepperDescription{display:flex;justify-content:center}","",{version:3,sources:["webpack://./src/stepper/styles.scss"],names:[],mappings:"AAIA,SACE,QAAA,CACA,WAAA,CACA,YAAA,CACA,mBAAA,CACA,eAAA,CAGF,0BACE,YAAA,CACA,qBAAA,CAGF,wBACE,YAAA,CACA,kBAAA,CACA,kBAAA,CAGF,WACE,wBAAA,CAGF,mBACE,oBAAA,CACA,UAAA,CACA,kBAAA,CACA,sBAAA,CACA,kCACE,YAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,kCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA7CS,CA8CT,eAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CAEF,oCACE,wBAAA,CAEF,yCACE,YAAA,CACA,sBAAA,CAKJ,iBACE,uBAAA,CACA,iBAAA,CACA,WAAA,CACA,gCACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,gCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA9ES,CA+ET,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,sCACE,QAAA,CACA,YAAA,CACA,wBAvFS,CAwFT,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,kCACE,wBAAA,CAEF,uCACE,YAAA,CAMJ,iBACE,iBAAA,CAGF,MACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,OAAA,CACA,WAAA,CAEF,eACE,OAAA,CAEF,gBACE,OAAA,CAGF,gBACE,YAAA,CACA,oBAAA,CACA,sBAAA,CACA,OAAA,CAGF,OACE,cAAA,CACA,oBAAA,CACA,oBAAA,CACA,WAAA,CACA,iBAAA,CACA,gBAAA,CACA,YAAA,CACA,eAAA,CAGF,4BACE,YAAA,CACA,WAAA,CACA,sBAAA,CAGF,wBACE,OAAA,CAGF,cACE,OAAA,CAGF,iBACE,0BAAA,CAEF,2BACE,YAAA,CACA,qBAAA,CACA,oBAAA,CACA,UAAA,CAGF,oBACE,YAAA,CACA,qBAAA,CACA,wBAAA,CACA,kBAAA,CACA,WAAA,CAGF,uBACE,YAAA,CACA,sBAAA,CACA,OAAA,CAGF,oBACE,OAAA,CAGF,aACE,aAAA,CACA,kBAAA,CAGF,wBACE,YAAA,CACA,wBAAA,CAGF,mCACE,YAAA,CACA,0BAAA,CAGF,wBACE,iBAAA,CACA,kBAAA,CAGF,8BACE,YAAA,CACA,sBAAA",sourcesContent:["$grey-color: #e1e1e1;\n$active-color: #312ec0;\n$completed-color: #47aed6;\n\n.stepper {\n margin: 0;\n padding: 1em;\n display: flex;\n font-family: inherit;\n list-style: none;\n}\n\n.horizontalStepperWrapper {\n display: flex;\n flex-direction: column;\n}\n\n.verticalStepperWrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.labelLeft {\n justify-content: flex-end;\n}\n\n.horizontalStepper {\n flex-flow: row nowrap;\n width: 100%;\n height: fit-content;\n justify-content: center;\n .stepContainer {\n display: flex;\n flex-direction: row;\n height: auto;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .stepConnector {\n margin: 0;\n display: flex;\n flex: 1;\n background-color: $grey-color;\n overflow: hidden;\n width: 100px;\n min-width: 0;\n height: 2px;\n }\n .activeConnector {\n background-color: #312ec0;\n }\n .descriptionContainer {\n display: flex;\n justify-content: center;\n }\n \n}\n\n.verticalStepper {\n flex-flow: column nowrap;\n width: fit-content;\n height: 100%;\n .stepContainer {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: auto;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .stepConnector {\n margin: 0;\n display: flex;\n flex: 1;\n background-color: $grey-color;\n overflow: hidden;\n height: auto;\n min-height: 10px;\n width: 2px;\n }\n .middleStepConnector {\n margin: 0;\n display: flex;\n background-color: $grey-color;\n overflow: hidden;\n height: auto;\n min-height: 10px;\n width: 2px;\n }\n .activeConnector {\n background-color: #312ec0;\n }\n .descriptionContainer {\n display: flex;\n }\n \n}\n\n\n.hiddenConnector {\n visibility: hidden;\n}\n\n.node {\n display: flex;\n justify-content: center;\n align-items: center;\n order: 2;\n padding: 3px;\n}\n.leftConnector {\n order: 1;\n}\n.rightConnector {\n order: 4;\n}\n\n.labelContainer {\n display: flex;\n word-wrap: break-word;\n justify-content: center;\n order: 3;\n}\n\n.label {\n font-size: 0.9em;\n white-space: pre-wrap;\n word-wrap: break-word;\n padding: 3px;\n text-align: center;\n font-weight: bold;\n display: flex;\n max-width: 400px;\n}\n\n.verticalStepperInlineLabel {\n display: flex;\n width: 100px;\n justify-content: center;\n}\n\n.reversedLabelContainer {\n order: 2;\n}\n\n.reversedNode {\n order: 3;\n}\n\n.leftDescription {\n flex-direction: row-reverse;\n}\n.verticalTextLeftContainer {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n width: 100%;\n}\n\n.horizontalLabelTop {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n flex: 2 100%;\n}\n\n.horizontalLabelBottom {\n display: flex;\n justify-content: center;\n order: 1;\n}\n\n.verticalLabelRight {\n order: 1;\n}\n\n.description {\n color: #4e4b4b;\n padding-bottom: 5px;\n}\n\n.middleConnectorWrapper {\n display: flex;\n justify-content: flex-end;;\n}\n\n.leftContentMiddleConnectorWrapper { \n display: flex;\n justify-content: flex-start;\n}\n\n.verticalContentWrapper {\n padding-left: 10px;\n padding-right: 10px;\n}\n\n.horizontalStepperDescription {\n display: flex;\n justify-content: center;;\n}\n"],sourceRoot:""}]);const a=A},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var A={};if(o)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(A[l]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);o&&A[s[0]]||(void 0!==i&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=i),t&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=t):s[2]=t),r&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=r):s[4]="".concat(r)),n.push(s))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;if("function"==typeof btoa){var o=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),i="/*# ".concat(r," */");return[n].concat([i]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},A=[],a=0;a<e.length;a++){var l=e[a],c=o.base?l[0]+o.base:l[0],s=i[c]||0,p="".concat(c," ").concat(s);i[c]=s+1;var d=t(p),C={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)n[d].references++,n[d].updater(C);else{var f=r(C,o);o.byIndex=a,n.splice(a,0,{identifier:p,updater:f,references:1})}A.push(p)}return A}function r(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var A=0;A<i.length;A++){var a=t(i[A]);n[a].references--}for(var l=o(e,r),c=0;c<i.length;c++){var s=t(i[c]);0===n[s].references&&(n[s].updater(),n.splice(s,1))}i=l}}},569:e=>{var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function o(e){var r=t[e];if(void 0!==r)return r.exports;var i=t[e]={id:e,exports:{}};return n[e](i,i.exports,o),i.exports}o.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return o.d(n,{a:n}),n},o.d=(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nc=void 0;var r={};return(()=>{o.r(r),o.d(r,{default:()=>O});var e=o(156),n=o.n(e),t=o(379),i=o.n(t),A=o(795),a=o.n(A),l=o(569),c=o.n(l),s=o(565),p=o.n(s),d=o(216),C=o.n(d),f=o(589),u=o.n(f),m=o(766),h={};h.styleTagTransform=u(),h.setAttributes=p(),h.insert=c().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=C();i()(m.Z,h);m.Z&&m.Z.locals&&m.Z.locals;var v,x,g;!function(e){e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(v||(v={})),function(e){e.HORIZONTAL="horizontal",e.VERTICAL="vertical"}(x||(x={})),function(e){e.LabelDescription="LabelDescription",e.LabelTitle="LabelTitle",e.ActiveLabelTitle="ActiveLabelTitle",e.ActiveLabelDescription="ActiveLabelDescription",e.LineSeparator="LineSeparator",e.InactiveLineSeparator="InactiveLineSeparator",e.Node="Node",e.ActiveNode="ActiveNode",e.InActiveNode="InActiveNode",e.CompletedNode="CompletedNode"}(g||(g={}));const y=function(e,n,t,o){var r=e[n];return r?r(t,o):{}};var b=function(){return b=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},b.apply(this,arguments)};const w=function(e){var t=e.labelPosition,o=e.isVertical,r=e.currentStepIndex,i=e.index,A=e.styles,a=e.step,l=e.showDescriptionsForAllSteps,c=e.middleConnectorClassName,s=e.stepContent,p=e.nodeWidth;return n().createElement("div",{className:"descriptionContainer ".concat("left"===t?"labelLeft leftDescription":"")},o&&n().createElement("div",{className:t===v.LEFT?"leftContentMiddleConnectorWrapper":"middleConnectorWrapper",style:{width:p/2+1}},n().createElement("div",{className:c,style:b({},a.completed?y(A,g.LineSeparator,a,i)||{}:y(A,g.InactiveLineSeparator,a,i)||{})})),n().createElement("div",{className:o?"verticalContentWrapper":""},a.stepDescription&&(l||i===r)&&n().createElement("div",{className:"description",id:"step-description-".concat(i),style:b({},r===i?y(A,g.ActiveLabelDescription,a,i)||{}:y(A,g.LabelDescription,a,i)||{})},a.stepDescription),o&&i===r&&s&&s(a,i)))};var E=o(342),B={};B.styleTagTransform=u(),B.setAttributes=p(),B.insert=c().bind(null,"head"),B.domAPI=a(),B.insertStyleElement=C();i()(E.Z,B);const S=E.Z&&E.Z.locals?E.Z.locals:void 0;var L=function(){return L=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},L.apply(this,arguments)};const N=function(e){var t=e.step,o=e.renderNode,r=e.index,i=e.currentStepIndex,A=e.handleStepClick,a=e.showCursor,l=e.getStyles;return n().createElement("div",{className:"".concat(S.eachNode,"\n ").concat(a&&S.cursorPointer,"\n ").concat(r===i&&S.activeStepNode,"\n ").concat(!t.completed&&i!==r&&S.inactiveStepNode,"\n ").concat(t.completed&&i!==r&&S.completedStepNode,"\n "),style:L(L(L(L({},l(g.Node)||{}),r===i&&l(g.ActiveNode)||{}),t.completed&&l(g.CompletedNode)||{}),!t.completed&&i!==r&&l(g.InActiveNode)||{}),onClick:function(){return A&&A()},role:"presentation",id:"stepper-node"},o&&o(t,r)||n().createElement(n().Fragment,null,(null==t?void 0:t.completed)&&n().createElement("img",{src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMjMwNzdMMy44MjM1MyA3TDkgMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",className:S.whiteTickImg,alt:""})||r+1))},T=N;const I=function(e,n){return e!==x.VERTICAL?n===v.TOP?"horizontalLabelTop":n===v.LEFT||n===v.RIGHT?"":"horizontalLabelBottom":n===v.RIGHT?"verticalLabelRight":void 0};var F=function(){return F=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},F.apply(this,arguments)};const k=function(e){var t,o=e.orientation,r=e.labelPosition,i=e.isVertical,A=e.isInlineLabelsAndSteps,a=e.index,l=e.currentStepIndex,c=e.step,s=e.showDescriptionsForAllSteps,p=e.onStepClick,d=e.renderNode,C=e.styles,f=e.nodeRef,u=e.prevConnectorClassName,m=e.nextConnectorClassName,h=e.steps;return n().createElement("div",{id:"stepper-step",className:i?"verticalStepperWrapper ".concat(r===v.LEFT?"labelLeft":""):"horizontalStepperWrapper"},!A&&n().createElement("div",{className:I(o,r),onClick:function(){return p&&p(c,a)}},n().createElement("div",{className:"label",id:"step-label-".concat(a),style:F(F({},y(C,g.LabelTitle,c,a)||{}),a===l&&(y(C,g.ActiveLabelTitle,c,a)||{}))},c.stepLabel),c.stepDescription&&(s||a===l)&&o!==x.VERTICAL&&r===v.TOP&&n().createElement("div",{className:"description",id:"step-horizontal-top-description-".concat(a),style:F({},l===a?y(C,g.ActiveLabelDescription,c,a)||{}:y(C,g.LabelDescription,c,a)||{})},c.stepDescription)),n().createElement("div",{className:"stepContainer",id:"".concat(a,"-node"),ref:f},n().createElement("div",{className:u,style:F({},(null===(t=h[a-1])||void 0===t?void 0:t.completed)?y(C,g.LineSeparator,c,a)||{}:y(C,g.InactiveLineSeparator,c,a)||{})}),n().createElement("div",{className:"node ".concat([v.TOP,v.LEFT].includes(r)?"reversedNode":"")},n().createElement(T,{step:c,index:a,currentStepIndex:l,handleStepClick:function(){return p&&p(c,a)},showCursor:!!p,renderNode:d,getStyles:function(e){return y(C,e,c,a)}})),A&&n().createElement("div",{className:"labelContainer ".concat([v.TOP,v.LEFT].includes(r)?"reversedLabelContainer":"")},n().createElement("div",{className:"label ".concat(i&&"verticalStepperInlineLabel"),id:"step-inline-label-".concat(a),style:F(F({},y(C,g.LabelTitle,c,a)||{}),a===l&&(y(C,g.ActiveLabelTitle,c,a)||{})),onClick:function(){return p&&p(c,a)}},c.stepLabel)),n().createElement("div",{className:m,style:F({},c.completed?y(C,g.LineSeparator,c,a)||{}:y(C,g.InactiveLineSeparator,c,a)||{})})))};const j=function(t){var o,r,i=t.stepperProps,A=t.step,a=t.index,l=i.steps,c=i.currentStepIndex,s=void 0===c?0:c,p=i.styles,d=void 0===p?{}:p,C=i.labelPosition,f=void 0===C?v.RIGHT:C,u=i.orientation,m=void 0===u?x.VERTICAL:u,h=i.showDescriptionsForAllSteps,g=void 0!==h&&h,y=i.stepContent,b=i.onStepClick,E=i.renderNode,B=(0,e.useState)(0),S=B[0],L=B[1],N=m===x.VERTICAL,T=N&&![v.LEFT,v.RIGHT].includes(f)||!N&&[v.LEFT,v.RIGHT].includes(f),I=(0,e.useRef)(null);(0,e.useEffect)((function(){var e=I.current;if(e){var n=e.getBoundingClientRect().width;L(n)}}),[l,f,m]);var F="stepConnector leftConnector ".concat((null===(o=l[a-1])||void 0===o?void 0:o.completed)?"activeConnector":""," ").concat(0===a?"hiddenConnector":""),j="stepConnector rightConnector ".concat((null===(r=l[a])||void 0===r?void 0:r.completed)?"activeConnector":""," ").concat(a===l.length-1?"hiddenConnector":""),O="middleStepConnector ".concat(s>a?"activeConnector":""," ").concat(a===l.length-1?"hiddenConnector":"");return m!==x.VERTICAL&&f===v.TOP?n().createElement(k,{orientation:m,labelPosition:f,isVertical:N,isInlineLabelsAndSteps:T,index:a,currentStepIndex:s,step:A,showDescriptionsForAllSteps:g,onStepClick:b,renderNode:E,styles:d,nodeRef:I,prevConnectorClassName:F,nextConnectorClassName:j,steps:l}):n().createElement("div",{className:m===x.VERTICAL&&f===v.LEFT?"verticalTextLeftContainer":""},n().createElement(k,{orientation:m,labelPosition:f,isVertical:N,isInlineLabelsAndSteps:T,index:a,currentStepIndex:s,step:A,showDescriptionsForAllSteps:g,onStepClick:b,renderNode:E,styles:d,nodeRef:I,prevConnectorClassName:F,nextConnectorClassName:j,steps:l}),n().createElement(w,{labelPosition:f,isVertical:N,currentStepIndex:s,index:a,styles:d,step:A,showDescriptionsForAllSteps:g,middleConnectorClassName:O,stepContent:y,nodeWidth:S}))};const O=function(e){var t=e.steps,o=e.currentStepIndex,r=void 0===o?0:o,i=e.orientation,A=void 0===i?x.VERTICAL:i,a=e.stepContent,l=A===x.VERTICAL;return n().createElement(n().Fragment,null,n().createElement("ul",{className:"stepper ".concat(l?"verticalStepper":"horizontalStepper")},t.map((function(t,o){return n().createElement(j,{key:"".concat(t.stepLabel,"-").concat(t.stepDescription),stepperProps:e,step:t,index:o})}))),!l&&a&&a(t[r],r))}})(),r})()));
//# sourceMappingURL=index.js.map

3

build/types/constants.d.ts

@@ -20,3 +20,4 @@ export declare enum LABEL_POSITION {

ActiveNode = "ActiveNode",
InActiveNode = "InActiveNode"
InActiveNode = "InActiveNode",
CompletedNode = "CompletedNode"
}

1

build/types/constants.js

@@ -24,3 +24,4 @@ export var LABEL_POSITION;

Elements["InActiveNode"] = "InActiveNode";
Elements["CompletedNode"] = "CompletedNode";
})(Elements || (Elements = {}));
//# sourceMappingURL=constants.js.map

2

build/types/node/node.js

@@ -18,3 +18,3 @@ var __assign = (this && this.__assign) || function () {

var step = props.step, renderNode = props.renderNode, index = props.index, currentStepIndex = props.currentStepIndex, handleStepClick = props.handleStepClick, showCursor = props.showCursor, getStyles = props.getStyles;
return (React.createElement("div", { className: "".concat(styles.eachNode, "\n ").concat(showCursor && styles.cursorPointer, "\n ").concat(index === currentStepIndex && styles.activeStepNode, "\n ").concat(!step.completed && currentStepIndex !== index && styles.inactiveStepNode, "\n ").concat(step.completed && currentStepIndex !== index && styles.completedStepNode, "\n "), style: __assign(__assign(__assign({}, ((getStyles(Elements.Node)) || {})), ((index === currentStepIndex && getStyles(Elements.ActiveNode)) || {})), ((!step.completed && currentStepIndex !== index
return (React.createElement("div", { className: "".concat(styles.eachNode, "\n ").concat(showCursor && styles.cursorPointer, "\n ").concat(index === currentStepIndex && styles.activeStepNode, "\n ").concat(!step.completed && currentStepIndex !== index && styles.inactiveStepNode, "\n ").concat(step.completed && currentStepIndex !== index && styles.completedStepNode, "\n "), style: __assign(__assign(__assign(__assign({}, ((getStyles(Elements.Node)) || {})), ((index === currentStepIndex && getStyles(Elements.ActiveNode)) || {})), ((step.completed && getStyles(Elements.CompletedNode)) || {})), ((!step.completed && currentStepIndex !== index
&& getStyles(Elements.InActiveNode)) || {})), onClick: function () { return handleStepClick && handleStepClick(); }, role: "presentation", id: "stepper-node" }, (renderNode && renderNode(step, index))

@@ -21,0 +21,0 @@ || (React.createElement(React.Fragment, null, (step === null || step === void 0 ? void 0 : step.completed) && (React.createElement("img", { src: whiteTick, className: styles.whiteTickImg, alt: "" }))

19

build/types/stepper/step.js

@@ -8,5 +8,6 @@ import React, { useRef, useEffect, useState } from "react";

var Step = function (_a) {
var _b, _c;
var stepperProps = _a.stepperProps, step = _a.step, index = _a.index;
var steps = stepperProps.steps, _b = stepperProps.currentStepIndex, currentStepIndex = _b === void 0 ? 0 : _b, _c = stepperProps.styles, styles = _c === void 0 ? {} : _c, _d = stepperProps.labelPosition, labelPosition = _d === void 0 ? LABEL_POSITION.RIGHT : _d, _e = stepperProps.orientation, orientation = _e === void 0 ? ORIENTATION.VERTICAL : _e, _f = stepperProps.showDescriptionsForAllSteps, showDescriptionsForAllSteps = _f === void 0 ? false : _f, stepContent = stepperProps.stepContent, onStepClick = stepperProps.onStepClick, renderNode = stepperProps.renderNode;
var _g = useState(0), nodeWidth = _g[0], setNodeWidth = _g[1];
var steps = stepperProps.steps, _d = stepperProps.currentStepIndex, currentStepIndex = _d === void 0 ? 0 : _d, _e = stepperProps.styles, styles = _e === void 0 ? {} : _e, _f = stepperProps.labelPosition, labelPosition = _f === void 0 ? LABEL_POSITION.RIGHT : _f, _g = stepperProps.orientation, orientation = _g === void 0 ? ORIENTATION.VERTICAL : _g, _h = stepperProps.showDescriptionsForAllSteps, showDescriptionsForAllSteps = _h === void 0 ? false : _h, stepContent = stepperProps.stepContent, onStepClick = stepperProps.onStepClick, renderNode = stepperProps.renderNode;
var _j = useState(0), nodeWidth = _j[0], setNodeWidth = _j[1];
var isVertical = orientation === ORIENTATION.VERTICAL;

@@ -16,3 +17,3 @@ /* isInlineLabelsAndSteps = true means label and steps are in the same axis (eg: Horizontal stepper with label direction left/right and

var isInlineLabelsAndSteps = (isVertical &&
[LABEL_POSITION.TOP, LABEL_POSITION.BOTTOM].includes(labelPosition)) ||
![LABEL_POSITION.LEFT, LABEL_POSITION.RIGHT].includes(labelPosition)) ||
(!isVertical &&

@@ -27,16 +28,16 @@ [LABEL_POSITION.LEFT, LABEL_POSITION.RIGHT].includes(labelPosition));

}
}, [steps]);
}, [steps, labelPosition, orientation]);
// prevConnector represents the connector line from the current step's node (nth node) to the preceding step's node (n-1 th node).
var prevConnectorClassName = "stepConnector leftConnector ".concat(currentStepIndex >= index ? "activeConnector" : "", " ").concat(index === 0 ? "hiddenConnector" : "");
var prevConnectorClassName = "stepConnector leftConnector ".concat(((_b = steps[index - 1]) === null || _b === void 0 ? void 0 : _b.completed) ? "activeConnector" : "", " ").concat(index === 0 ? "hiddenConnector" : "");
// nextConnector represents the connector line from the current step's node (nth node) to the preceding step's node (n-1 th node).
var nextConnectorClassName = "stepConnector rightConnector ".concat(currentStepIndex > index ? "activeConnector" : "", " ").concat(index === steps.length - 1 ? "hiddenConnector" : "");
var nextConnectorClassName = "stepConnector rightConnector ".concat(((_c = steps[index]) === null || _c === void 0 ? void 0 : _c.completed) ? "activeConnector" : "", " ").concat(index === steps.length - 1 ? "hiddenConnector" : "");
/* middleConnector connects the current step nextConnector to (n+1th) step prevConnector,
allowing the display of descriptions or content between the two steps when necessary. */
var middleConnectorClassName = "middleStepConnector ".concat(currentStepIndex > index ? "activeConnector" : "", " ").concat(index === steps.length - 1 ? "hiddenConnector" : "");
return orientation === ORIENTATION.HORIZONTAL &&
labelPosition === LABEL_POSITION.TOP ? (React.createElement(StepInfo, { orientation: orientation, labelPosition: labelPosition, isVertical: isVertical, isInlineLabelsAndSteps: isInlineLabelsAndSteps, index: index, currentStepIndex: currentStepIndex, step: step, showDescriptionsForAllSteps: showDescriptionsForAllSteps, onStepClick: onStepClick, renderNode: renderNode, styles: styles, nodeRef: nodeRef, prevConnectorClassName: prevConnectorClassName, nextConnectorClassName: nextConnectorClassName })) : (React.createElement("div", { className: orientation === ORIENTATION.VERTICAL &&
return orientation !== ORIENTATION.VERTICAL &&
labelPosition === LABEL_POSITION.TOP ? (React.createElement(StepInfo, { orientation: orientation, labelPosition: labelPosition, isVertical: isVertical, isInlineLabelsAndSteps: isInlineLabelsAndSteps, index: index, currentStepIndex: currentStepIndex, step: step, showDescriptionsForAllSteps: showDescriptionsForAllSteps, onStepClick: onStepClick, renderNode: renderNode, styles: styles, nodeRef: nodeRef, prevConnectorClassName: prevConnectorClassName, nextConnectorClassName: nextConnectorClassName, steps: steps })) : (React.createElement("div", { className: orientation === ORIENTATION.VERTICAL &&
labelPosition === LABEL_POSITION.LEFT
? "verticalTextLeftContainer"
: "" },
React.createElement(StepInfo, { orientation: orientation, labelPosition: labelPosition, isVertical: isVertical, isInlineLabelsAndSteps: isInlineLabelsAndSteps, index: index, currentStepIndex: currentStepIndex, step: step, showDescriptionsForAllSteps: showDescriptionsForAllSteps, onStepClick: onStepClick, renderNode: renderNode, styles: styles, nodeRef: nodeRef, prevConnectorClassName: prevConnectorClassName, nextConnectorClassName: nextConnectorClassName }),
React.createElement(StepInfo, { orientation: orientation, labelPosition: labelPosition, isVertical: isVertical, isInlineLabelsAndSteps: isInlineLabelsAndSteps, index: index, currentStepIndex: currentStepIndex, step: step, showDescriptionsForAllSteps: showDescriptionsForAllSteps, onStepClick: onStepClick, renderNode: renderNode, styles: styles, nodeRef: nodeRef, prevConnectorClassName: prevConnectorClassName, nextConnectorClassName: nextConnectorClassName, steps: steps }),
React.createElement(StepContent, { labelPosition: labelPosition, isVertical: isVertical, currentStepIndex: currentStepIndex, index: index, styles: styles, step: step, showDescriptionsForAllSteps: showDescriptionsForAllSteps, middleConnectorClassName: middleConnectorClassName, stepContent: stepContent, nodeWidth: nodeWidth })));

@@ -43,0 +44,0 @@ };

4

build/types/stepper/stepContent.js

@@ -27,7 +27,7 @@ var __assign = (this && this.__assign) || function () {

} },
React.createElement("div", { className: middleConnectorClassName, style: __assign({}, (currentStepIndex > index
React.createElement("div", { className: middleConnectorClassName, style: __assign({}, (step.completed
? getStyles(styles, Elements.LineSeparator, step, index) || {}
: getStyles(styles, Elements.InactiveLineSeparator, step, index) || {})) }))),
React.createElement("div", { className: isVertical ? "verticalContentWrapper" : "" },
(showDescriptionsForAllSteps || index === currentStepIndex) && (React.createElement("div", { className: "description", id: "step-description-".concat(index), style: __assign({}, (currentStepIndex === index
step.stepDescription && (showDescriptionsForAllSteps || index === currentStepIndex) && (React.createElement("div", { className: "description", id: "step-description-".concat(index), style: __assign({}, (currentStepIndex === index
? getStyles(styles, Elements.ActiveLabelDescription, step, index) || {}

@@ -34,0 +34,0 @@ : getStyles(styles, Elements.LabelDescription, step, index) ||

35

build/types/stepper/stepInfo.js

@@ -19,25 +19,26 @@ var __assign = (this && this.__assign) || function () {

var StepInfo = function (_a) {
var orientation = _a.orientation, labelPosition = _a.labelPosition, isVertical = _a.isVertical, isInlineLabelsAndSteps = _a.isInlineLabelsAndSteps, index = _a.index, currentStepIndex = _a.currentStepIndex, step = _a.step, showDescriptionsForAllSteps = _a.showDescriptionsForAllSteps, onStepClick = _a.onStepClick, renderNode = _a.renderNode, styles = _a.styles, nodeRef = _a.nodeRef, prevConnectorClassName = _a.prevConnectorClassName, nextConnectorClassName = _a.nextConnectorClassName;
var _b;
var orientation = _a.orientation, labelPosition = _a.labelPosition, isVertical = _a.isVertical, isInlineLabelsAndSteps = _a.isInlineLabelsAndSteps, index = _a.index, currentStepIndex = _a.currentStepIndex, step = _a.step, showDescriptionsForAllSteps = _a.showDescriptionsForAllSteps, onStepClick = _a.onStepClick, renderNode = _a.renderNode, styles = _a.styles, nodeRef = _a.nodeRef, prevConnectorClassName = _a.prevConnectorClassName, nextConnectorClassName = _a.nextConnectorClassName, steps = _a.steps;
return (React.createElement("div", { id: "stepper-step", className: isVertical
? "verticalStepperWrapper ".concat(labelPosition === LABEL_POSITION.LEFT ? "labelLeft" : "")
: "horizontalStepperWrapper" },
!isInlineLabelsAndSteps && (React.createElement("div", { className: getLabelStyle(orientation, labelPosition) },
!isInlineLabelsAndSteps && (React.createElement("div", { className: getLabelStyle(orientation, labelPosition), onClick: function () { return onStepClick && onStepClick(step, index); } },
React.createElement("div", { className: "label", id: "step-label-".concat(index), style: __assign(__assign({}, (getStyles(styles, Elements.LabelTitle, step, index) || {})), (index === currentStepIndex &&
(getStyles(styles, Elements.ActiveLabelTitle, step, index) || {}))) }, step.stepLabel),
(showDescriptionsForAllSteps || index === currentStepIndex) &&
orientation === ORIENTATION.HORIZONTAL &&
(getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
{}))) }, step.stepLabel),
step.stepDescription && (showDescriptionsForAllSteps || index === currentStepIndex) &&
orientation !== ORIENTATION.VERTICAL &&
labelPosition === LABEL_POSITION.TOP && (React.createElement("div", { className: "description", id: "step-horizontal-top-description-".concat(index), style: __assign({}, (currentStepIndex === index
? getStyles(styles, Elements.ActiveLabelDescription, step, index) ||
{}
: getStyles(styles, Elements.LabelDescription, step, index) || {})) }, step.stepDescription)))),
? getStyles(styles, Elements.ActiveLabelDescription, step, index) || {}
: getStyles(styles, Elements.LabelDescription, step, index) ||
{})) }, step.stepDescription)))),
React.createElement("div", { className: "stepContainer", id: "".concat(index, "-node"), ref: nodeRef },
React.createElement("div", { className: prevConnectorClassName, style: __assign({}, (currentStepIndex >= index
React.createElement("div", { className: prevConnectorClassName, style: __assign({}, (((_b = steps[index - 1]) === null || _b === void 0 ? void 0 : _b.completed)
? getStyles(styles, Elements.LineSeparator, step, index) || {}
: getStyles(styles, Elements.InactiveLineSeparator, step, index) || {})) }),
: getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
{})) }),
React.createElement("div", { className: "node ".concat([LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
? "reversedNode"
: "") },
React.createElement(Node, { step: step, index: index, currentStepIndex: currentStepIndex, handleStepClick: function () {
return onStepClick && onStepClick(step, index);
}, showCursor: !!onStepClick, renderNode: renderNode, getStyles: function (element) {
React.createElement(Node, { step: step, index: index, currentStepIndex: currentStepIndex, handleStepClick: function () { return onStepClick && onStepClick(step, index); }, showCursor: !!onStepClick, renderNode: renderNode, getStyles: function (element) {
return getStyles(styles, element, step, index);

@@ -49,8 +50,10 @@ } })),

React.createElement("div", { className: "label ".concat(isVertical && "verticalStepperInlineLabel"), id: "step-inline-label-".concat(index), style: __assign(__assign({}, (getStyles(styles, Elements.LabelTitle, step, index) || {})), (index === currentStepIndex &&
(getStyles(styles, Elements.ActiveLabelTitle, step, index) || {}))) }, step.stepLabel))),
React.createElement("div", { className: nextConnectorClassName, style: __assign({}, (currentStepIndex > index
(getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
{}))), onClick: function () { return onStepClick && onStepClick(step, index); } }, step.stepLabel))),
React.createElement("div", { className: nextConnectorClassName, style: __assign({}, (step.completed
? getStyles(styles, Elements.LineSeparator, step, index) || {}
: getStyles(styles, Elements.InactiveLineSeparator, step, index) || {})) }))));
: getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
{})) }))));
};
export default StepInfo;
//# sourceMappingURL=stepInfo.js.map

2

build/types/stepper/stepperComponent.js

@@ -9,3 +9,3 @@ import React from "react";

return (React.createElement(React.Fragment, null,
React.createElement("ul", { className: "stepper ".concat(isVertical ? "verticalStepper" : "horizontalStepper") }, steps.map(function (step, index) { return Step({ stepperProps: props, step: step, index: index }); })),
React.createElement("ul", { className: "stepper ".concat(isVertical ? "verticalStepper" : "horizontalStepper") }, steps.map(function (step, index) { return React.createElement(Step, { key: "".concat(step.stepLabel, "-").concat(step.stepDescription), stepperProps: props, step: step, index: index }); })),
!isVertical && // For horizontal stepper, the content is displayed below the stepper with full width

@@ -12,0 +12,0 @@ stepContent &&

6

build/types/utils/getLabelStyle.js
import { LABEL_POSITION, ORIENTATION } from "../constants";
var getLabelStyle = function (orientation, labelPosition) {
if (orientation === ORIENTATION.HORIZONTAL) {
if (orientation !== ORIENTATION.VERTICAL) {
if (labelPosition === LABEL_POSITION.TOP)
return "horizontalLabelTop";
else if (labelPosition === LABEL_POSITION.BOTTOM)
else if (labelPosition === LABEL_POSITION.LEFT || labelPosition === LABEL_POSITION.RIGHT)
return "";
else
return "horizontalLabelBottom";

@@ -8,0 +10,0 @@ }

1

build/types/utils/getStyles.d.ts

@@ -13,3 +13,4 @@ import { Elements } from "../constants";

InActiveNode?: IStyleFunction | undefined;
CompletedNode?: IStyleFunction | undefined;
}, element: Elements, step: IStep, index: number) => object;
export default getStyles;

2

package.json
{
"name": "@keyvaluesystems/react-stepper",
"version": "1.0.1",
"version": "1.0.2",
"description": "A fully customizable stepper component",

@@ -5,0 +5,0 @@ "main": "build/index.js",

68

README.md

@@ -5,10 +5,17 @@ # React Stepper

<div style="display: flex; align-items: center;">
<div>
<img src="./src/assets/vertical-stepper-example.png" alt="" width="155" height="252"/>
</div>
<div>
<img src="./src/assets/horizontal-stepper-example.png" alt="" width="518" height="118"/>
</div>
</div>
<table>
<tr>
<td style="text-align: center; border: 0;">
<img src="./src/assets/vertical-stepper-example.png" alt="" width="155" height="252" />
<br />
Vertical Stepper
</td>
<td style="text-align: center; border: 0;">
<img src="./src/assets/horizontal-stepper-example.png" alt="" width="518" height="118" />
<br />
Horizontal Stepper
</td>
</tr>
</table>
A fully customizable ready to use stepper UI package for React.

@@ -151,4 +158,4 @@ Try tweaking a stepper using this codesandbox link <a href="https://codesandbox.io/p/sandbox/react-stepper-zp2jrs?file=%2Fsrc%2FApp.js" >here</a>

All the default styles provided by this package can be overridden using the `style` prop
the below code shows all the styles that can be overridden:
All the default styles provided by this package can be overridden using the `styles` prop
Below code shows how to override the default styles of completed steps, connector lines and current active step

@@ -160,13 +167,14 @@ ```jsx

function App() {
const stylesOverride = {
LabelTitle: (step, stepIndex) => ({ ...styles }),
ActiveLabelTitle: (step, stepIndex) => ({ ...styles }),
LabelDescription: (step, stepIndex) => ({ ...styles }),
ActiveLabelDescription: (step, stepIndex) => ({ ...styles }),
LineSeparator: (step, stepIndex) => ({ ...styles }),
InactiveLineSeparator: (step, stepIndex) => ({ ...styles }),
Node: (step, stepIndex) => ({ ...styles }),
ActiveNode: (step, stepIndex) => ({ ...styles }),
InActiveNode: (step, stepIndex) => ({ ...styles }),
const styles = {
LineSeparator: () => ({
backgroundColor: "#028A0F",
}),
ActiveNode: () => ({
backgroundColor: "#028A0F",
}),
CompletedNode: () => ({
backgroundColor: "#028A0F",
};
return (

@@ -176,3 +184,3 @@ <Stepper

currentStepIndex={currentStepIndex}
styles={stylesOverride}
styles={styles}
/>

@@ -184,3 +192,18 @@ );

```
Additional customizations can be made by overriding the customizable styles listed below:
```jsx
const stylesOverride = {
LabelTitle: (step, stepIndex) => ({ ...styles }),
ActiveLabelTitle: (step, stepIndex) => ({ ...styles }),
LabelDescription: (step, stepIndex) => ({ ...styles }),
ActiveLabelDescription: (step, stepIndex) => ({ ...styles }),
LineSeparator: (step, stepIndex) => ({ ...styles }),
InactiveLineSeparator: (step, stepIndex) => ({ ...styles }),
Node: (step, stepIndex) => ({ ...styles }),
ActiveNode: (step, stepIndex) => ({ ...styles }),
InActiveNode: (step, stepIndex) => ({ ...styles }),
};
```
- `LabelTitle` - overrides the step label style

@@ -190,3 +213,3 @@ - `ActiveLabelTitle` - overrides the step label style of current active step

- `ActiveLabelDescription` - overrides the step description style of current active step
- `LineSeparator` - overrides default step connector line styles
- `LineSeparator` - overrides default completed step connector line styles
- `InactiveLineSeparator` - overrides styles of step connector line after current active step

@@ -196,1 +219,2 @@ - `Node` - overrides default styles of step indicator

- `InActiveNode` - overrides default styles of step indicator that is not completed and not active
- `CompletedNode` - overrides default styles of completed step indicator
build/index.js.map

Sorry, the diff of this file is not supported yet

build/types/constants.js.map

Sorry, the diff of this file is not supported yet

build/types/node/node.js.map

Sorry, the diff of this file is not supported yet

build/types/stepper/step.js.map

Sorry, the diff of this file is not supported yet

build/types/stepper/stepContent.js.map

Sorry, the diff of this file is not supported yet

build/types/stepper/stepInfo.js.map

Sorry, the diff of this file is not supported yet

build/types/stepper/stepperComponent.js.map

Sorry, the diff of this file is not supported yet

build/types/utils/getLabelStyle.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc