@onewelcome/react-lib-components 4.2.0 → 4.3.0

package/dist/esm/Stepper/Step.esm.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as r,useLayoutEffect as n}from"react";import{Icon as c,Icons as a}from"../Icon/Icon.esm.js";import i from"./Step.module.esm.js";const l=({label:l,caption:s,status:o,index:u,direction:d,disabled:m,lastStep:p,...h},g)=>{const f=null!=u?u:0,v=[i[o]],[w,E]=t(28),[b,C]=t(28);"vertical"===d&&v.push(i.vertical);const N=r(null),R=r(null),x=r(null);return n((()=>{if(N.current&&x.current&&R.current&&p){if("vertical"==d){const e=N.current.getBoundingClientRect().height,t=x.current.getBoundingClientRect().height;E(e+t)}if("horizontal"==d){const e=N.current.getBoundingClientRect().width,t=R.current.getBoundingClientRect().width;C(e>t?e+36:t+36)}}}),[]),e.createElement("button",{...h,ref:g,disabled:m,"aria-current":"current"===o?"step":void 0,className:`${i["step-wrapper"]} ${v.join(" ")}`},e.createElement("div",{style:{height:p&&"vertical"==d?`${w}px`:"auto",width:p&&"horizontal"==d?`${b}px`:"auto"}},e.createElement("div",{ref:x,className:i["step-content"]},e.createElement("div",{"aria-hidden":!0,className:i.step},((t,r)=>{switch(r){case"waiting":case"current":return String(t+1);case"done":return e.createElement(c,{icon:a.Checkmark});case"error":return"!"}})(f,o)),e.createElement("span",{ref:R,className:i.label},l,e.createElement("span",{ref:N,className:i.caption},s)))))},s=e.forwardRef(l);export{s as Step,l as StepComponent};
+//# sourceMappingURL=Step.esm.js.map

package/dist/esm/Stepper/Step.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/Stepper/Step.module.esm.js

@@ -0,0 +1,2 @@
+var containers=[],styleTags=[];const e = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var _='.Step_module_srOnly__244993cd{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Step_module_hidden__244993cd{display:none}.Step_module_slideIn__244993cd{animation:Step_module_slideIn__244993cd .5s forwards}@media (prefers-reduced-motion:reduce){.Step_module_slideIn__244993cd{animation-duration:.1ms}}.Step_module_slideOut__244993cd{animation:Step_module_slideOut__244993cd .5s forwards}@media (prefers-reduced-motion:reduce){.Step_module_slideOut__244993cd{animation-duration:.1ms}}@keyframes Step_module_slideIn__244993cd{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Step_module_slideOut__244993cd{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.Step_module_stepWrapper__244993cd{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;flex:1;flex-direction:row;justify-content:center;margin:0;padding:0}.Step_module_stepWrapper__244993cd:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.Step_module_stepWrapper__244993cd .Step_module_stepContent__244993cd{align-items:center;display:flex;justify-content:center}.Step_module_stepWrapper__244993cd:last-child{flex-basis:fit-content;flex-grow:0}.Step_module_stepWrapper__244993cd:not(:last-child):after{border-bottom:2px solid var(--stepper-line-color);content:"";flex-grow:1;margin:0 .5rem;min-width:.5rem}.Step_module_stepWrapper__244993cd.Step_module_vertical__244993cd{display:flex;flex-direction:column;flex-grow:1}.Step_module_stepWrapper__244993cd.Step_module_vertical__244993cd:last-child{flex-basis:fit-content;flex-grow:0}.Step_module_stepWrapper__244993cd.Step_module_vertical__244993cd:not(:last-child):after{border-bottom:none;border-left:2px solid var(--stepper-line-color);content:"";height:100%;margin:.5rem 0 .5rem 1.6875rem;min-height:.5rem;width:100%}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd .Step_module_stepContent__244993cd .Step_module_step__244993cd{color:var(--stepper-default-text-color);color:var(--stepper-waiting-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:hover .Step_module_stepContent__244993cd .Step_module_step__244993cd{border:2px solid var(--stepper-waiting-hover-color);color:var(--stepper-waiting-hover-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:active .Step_module_stepContent__244993cd .Step_module_step__244993cd{border:2px solid var(--stepper-waiting-active-color);color:var(--stepper-waiting-active-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:disabled{cursor:not-allowed}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_step__244993cd{border:2px solid var(--stepper-waiting-disabled-color);color:var(--stepper-waiting-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd{color:var(--stepper-label-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{color:var(--stepper-caption-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_waiting__244993cd:disabled:not(:last-child):after{border-color:var(--stepper-line-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-current-color);border-color:var(--stepper-current-color);color:var(--stepper-default-text-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:not(:last-child):after{border-color:var(--stepper-line-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:hover .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-current-hover-color);border-color:var(--stepper-current-hover-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:active .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-current-active-color);border-color:var(--stepper-current-active-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:disabled{cursor:not-allowed}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-current-disabled-color);border-color:var(--stepper-current-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd{color:var(--stepper-label-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{color:var(--stepper-caption-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd:disabled:not(:last-child):after{border-color:var(--stepper-line-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd .Step_module_stepContent__244993cd .Step_module_label__244993cd{font-weight:700}.Step_module_stepWrapper__244993cd.Step_module_current__244993cd .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{font-weight:400}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-done-color);border-color:var(--stepper-done-color);color:var(--stepper-default-text-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:not(:last-child):after{border-color:var(--stepper-line-bold-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:hover .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-done-hover-color);border-color:var(--stepper-done-hover-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:active .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-done-active-color);border-color:var(--stepper-done-active-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:disabled{cursor:not-allowed}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-done-disabled-color);border-color:var(--stepper-done-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd{color:var(--stepper-label-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{color:var(--stepper-caption-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_done__244993cd:disabled:not(:last-child):after{border-color:var(--stepper-line-bold-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-error-color);border-color:var(--stepper-error-color);color:var(--stepper-default-text-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:not(:last-child):after{border-color:var(--stepper-line-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:hover .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-error-hover-color);border-color:var(--stepper-error-hover-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:active .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-error-active-color);border-color:var(--stepper-error-active-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:disabled{cursor:not-allowed}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_step__244993cd{background-color:var(--stepper-error-disabled-color);border-color:var(--stepper-error-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd{color:var(--stepper-label-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:disabled .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{color:var(--stepper-caption-error-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd:disabled:not(:last-child):after{border-color:var(--stepper-line-disabled-color)}.Step_module_stepWrapper__244993cd.Step_module_error__244993cd .Step_module_stepContent__244993cd .Step_module_label__244993cd .Step_module_caption__244993cd{color:var(--stepper-caption-error-color)}.Step_module_step__244993cd{align-items:center;border:2px solid var(--stepper-waiting-color);border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;font-family:var(--font-family);font-size:var(--font-size-form-label);font-weight:700;height:1.75rem;justify-content:center;width:1.75rem}.Step_module_label__244993cd{color:var(--stepper-label-color);flex-shrink:0;margin-left:.5rem;position:relative}.Step_module_caption__244993cd{color:var(--stepper-caption-color);font-size:.75rem;left:0;position:absolute;top:1.25rem}',o={"sr-only":"Step_module_srOnly__244993cd",hidden:"Step_module_hidden__244993cd","slide-in":"Step_module_slideIn__244993cd","slide-out":"Step_module_slideOut__244993cd","step-wrapper":"Step_module_stepWrapper__244993cd","step-content":"Step_module_stepContent__244993cd",vertical:"Step_module_vertical__244993cd",waiting:"Step_module_waiting__244993cd",step:"Step_module_step__244993cd",label:"Step_module_label__244993cd",caption:"Step_module_caption__244993cd",current:"Step_module_current__244993cd",done:"Step_module_done__244993cd",error:"Step_module_error__244993cd"};e(_,{});export{_ as css,o as default};
+//# sourceMappingURL=Step.module.esm.js.map

package/dist/esm/Stepper/Step.module.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/Stepper/Stepper.esm.js

@@ -0,0 +1,2 @@
+import e from"react";import{Step as t}from"./Step.esm.js";import r from"./Stepper.module.esm.js";const o=({steps:o,direction:a="horizontal",...i})=>e.createElement("div",{...i,className:`${r.stepper} ${"horizontal"===a?r.horizontal:r.vertical}`},o.map(((r,i)=>e.createElement(t,{...r,key:r.label.toLowerCase().replace(/\s/,"-"),index:i,direction:a,lastStep:i+1===o.length}))));export{o as Stepper};
+//# sourceMappingURL=Stepper.esm.js.map

package/dist/esm/Stepper/Stepper.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/Stepper/Stepper.module.esm.js

@@ -0,0 +1,2 @@
+var containers=[],styleTags=[];const e = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var t=".Stepper_module_stepper__366b573e{align-items:center;display:flex;justify-content:center;width:100%}.Stepper_module_stepper__366b573e.Stepper_module_vertical__366b573e{flex-direction:column;height:100%;justify-content:flex-start;width:auto}",p={stepper:"Stepper_module_stepper__366b573e",vertical:"Stepper_module_vertical__366b573e"};e(t,{});export{t as css,p as default};
+//# sourceMappingURL=Stepper.module.esm.js.map

package/dist/esm/Stepper/Stepper.module.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/_BaseStyling_/BaseStyling.esm.js

@@ -1,2 +1,2 @@
-import r,{useState as o,useRef as e,useEffect as l}from"react";const a=({children:a,properties:t={}})=>{const c={colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorBlueGrey25:"#F7F7F9",colorBlueGrey25Transparent:"rgba(247, 247, 249, .8)",colorBlueGrey50:"#EEEFF3",colorBlueGrey100:"#DEDEE6",colorBlueGrey200:"#BCBECE",colorBlueGrey400:"#797D9C",colorBlueGrey500:"#5D607E",colorBlueGrey700:"#383A4B",colorBlueGrey800:"#252733",colorBlueGrey900:"#131319",colorGreen100:"#D1E6DA",colorGreen500:"#178244",colorGreen600:"#126836",colorGreen700:"#0E4E29",colorLightBlue500:"#00BCDD",colorLightBlue600:"#0096B1",colorOrange500:"#E07900",colorOrange600:"#B36100",colorOrange700:"#864900",colorRed500:"#E01E00",colorRed600:"#B31800",colorRed700:"#861200",colorBlack100:"#000000",colorBlack20:"rgba(0, 0, 0, 0.2)",colorBlack10:"rgba(0, 0, 0, 0.1)",colorShadowBlue:"#7078C3",colorWhite:"#FFFFFF",colorFocus:"var(--color-primary300)",colorPrimary:"var(--color-primary500)",colorSecondary:"var(--color-green500)",colorTertiary:"var(--color-light-blue600)",defaultPressedColor:"var(--color-blue-grey100)",defaultHoverColor:"var(--color-blue-grey25)",defaultLineHeight:"1.5",defaultBorderRadius:"0.25rem",focusBorderRadius:"0.125rem",buttonBorderRadius:"var(--default-border-radius)",buttonBorderWidth:"2px",buttonFontSize:"1rem",buttonBorderStyle:"solid",buttonFillTextColor:"var(--light)",buttonPrimaryDefaultColor:"var(--color-primary500)",buttonPrimaryHoverColor:"var(--color-primary600)",buttonPrimaryFocusedColor:"var(--color-primary500)",buttonPrimaryPressedColor:"var(--color-primary700)",buttonSecondaryDefaultColor:"var(--color-green500)",buttonSecondaryHoverColor:"var(--color-green600)",buttonSecondaryFocusedColor:"var(--color-green500)",buttonSecondaryPressedColor:"var(--color-green700)",buttonWarningDefaultColor:"var(--color-orange500)",buttonWarningHoverColor:"var(--color-orange600)",buttonWarningFocusedColor:"var(--color-orange500)",buttonWarningPressedColor:"var(--color-orange700)",buttonDangerDefaultColor:"var(--color-red500)",buttonDangerHoverColor:"var(--color-red600)",buttonDangerFocusedColor:"var(--color-red500)",buttonDangerPressedColor:"var(--color-red700)",buttonDefaultColor:"var(--color-blue-grey700)",buttonDefaultHoverColor:"var(--color-blue-grey800)",buttonDefaultFocusedColor:"var(--color-blue-grey700)",buttonDefaultPressedColor:"var(--color-blue-grey800)",buttonOutlineHoverTextColor:"var(--color-primary600)",checkboxUncheckedHoverColor:"var(--color-blue-grey50)",checkboxUncheckedPressedColor:"var(--default-pressed-color)",checkboxCheckedHoverColor:"var(--color-primary600)",checkboxCheckedPressedColor:"var(--color-primary700)",radioHoverBackgroundColor:"var(--color-blue-grey50)",radioPressedBackgroundColor:"var(--default-pressed-color)",radioHoverColor:"var(--color-primary600)",radioPressedColor:"var(--color-primary700)",inputBorderRadius:"2px",inputBorderWidth:"1px",inputBorderWidthFocus:"1px",inputBorderStyle:"solid",inputBorderColor:"var(--color-blue-grey500)",inputBackgroundColor:"var(--light)",inputHelperTextColor:"var(--color-blue-grey500)",inputHoverBackgroundColor:"var(--default-hover-color)",inputDisabledBackgroundColor:"var(--input-hover-background-color)",dragBackgroundColor:"var(--color-blue-grey25-transparent)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",skeletonBackgroundColor:"var(--disabled)",skeletonAnimationColorRgb:"255, 255, 255",snackbarTextColor:"var(--light)",snackbarInfoBackgroundColor:"var(--color-primary500)",snackbarSuccessBackgroundColor:"var(--color-green500)",snackbarErrorBackgroundColor:"var(--color-red500)",snackbarWarningBackgroundColor:"var(--color-orange500)",snackbarBorderRadius:"2px",bannerBorderRadius:"2px",bannerBorderWidth:"0 0 0 4px",dataGridRowBackgroundColor:"transparent",dataGridRowHoverBackgroundColor:"var(--default-hover-color)",progressBarBackgroundColor:"var(--disabled)",tabsBackgroundColor:"var(--light)",tabActiveBorderHeight:"0.25rem",tabActiveBorderColor:"var(--color-primary)",tabActiveTextColor:"var(--color-primary)",tablistBorderWidth:"0.0625rem",tablistBorderStyle:"solid",tablistBorderColor:"var(--color-blue-grey100)",tabTextColor:"var(--color-blue-grey900)",tabHoverColor:"var(--default-hover-color)",tabPressedColor:"var(--default-pressed-color)",toggleBackgroundColor:"var(--color-blue-grey100)",tooltipBackgroundColor:"var(--default)",wizardStepIndicatorFutureColor:"var(--color-blue-grey200)",contextMenuHoverColor:"var(--default-hover-color)",contextMenuPressedColor:"var(--default-pressed-color)",default:"var(--color-blue-grey900)",success:"var(--color-green500)",error:"var(--color-red500)",info:"var(--color-primary500)",disabled:"var(--color-blue-grey100)",greyedOut:"var(--color-blue-grey400)",lightGreyBorder:"var(--color-blue-grey100)",warning:"var(--color-orange500)",light:"var(--color-white)",fontFamily:"Roboto, sans-serif",fontFamilyCode:"'Roboto Mono', monospace",fontSizeFormLabel:"0.875rem",fontSize:"1rem",fontSizeH1:"2.5rem",fontSizeH2:"1.625rem",fontSizeH3:"1.5rem",fontSizeH4:"1.25rem",fontSizeSub:".75rem",fontSizeCode:"1rem",formControlFontSize:"0.875rem"},[n,u]=o(!0),d=e(null),i=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));d.current.style.setProperty(`--${r}`,e)}};return l((()=>{if(0!==Object.keys(t).length&&d.current){const r={...c,...t};i(r)}else d.current&&i(c);u(!1)}),[t,d.current]),r.createElement("div",{className:"basestyling-wrapper",ref:d},n?null:a)};export{a as BaseStyling};
+import r,{useState as o,useRef as e,useEffect as l}from"react";const a=({children:a,properties:t={}})=>{const c={colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorBlueGrey25:"#F7F7F9",colorBlueGrey25Transparent:"rgba(247, 247, 249, .8)",colorBlueGrey50:"#EEEFF3",colorBlueGrey100:"#DEDEE6",colorBlueGrey200:"#BCBECE",colorBlueGrey300:"#9A9DB5",colorBlueGrey400:"#797D9C",colorBlueGrey500:"#5D607E",colorBlueGrey700:"#383A4B",colorBlueGrey800:"#252733",colorBlueGrey900:"#131319",colorGreen100:"#D1E6DA",colorGreen200:"#A2CDB4",colorGreen500:"#178244",colorGreen600:"#126836",colorGreen700:"#0E4E29",colorLightBlue500:"#00BCDD",colorLightBlue600:"#0096B1",colorOrange500:"#E07900",colorOrange600:"#B36100",colorOrange700:"#864900",colorRed200:"#F3A599",colorRed500:"#E01E00",colorRed600:"#B31800",colorRed700:"#861200",colorBlack100:"#000000",colorBlack20:"rgba(0, 0, 0, 0.2)",colorBlack10:"rgba(0, 0, 0, 0.1)",colorShadowBlue:"#7078C3",colorWhite:"#FFFFFF",colorFocus:"var(--color-primary300)",colorPrimary:"var(--color-primary500)",colorSecondary:"var(--color-green500)",colorTertiary:"var(--color-light-blue600)",defaultPressedColor:"var(--color-blue-grey100)",defaultHoverColor:"var(--color-blue-grey25)",defaultLineHeight:"1.5",defaultBorderRadius:"0.25rem",focusBorderRadius:"0.125rem",buttonBorderRadius:"var(--default-border-radius)",buttonBorderWidth:"2px",buttonFontSize:"1rem",buttonBorderStyle:"solid",buttonFillTextColor:"var(--light)",buttonPrimaryDefaultColor:"var(--color-primary500)",buttonPrimaryHoverColor:"var(--color-primary600)",buttonPrimaryFocusedColor:"var(--color-primary500)",buttonPrimaryPressedColor:"var(--color-primary700)",buttonSecondaryDefaultColor:"var(--color-green500)",buttonSecondaryHoverColor:"var(--color-green600)",buttonSecondaryFocusedColor:"var(--color-green500)",buttonSecondaryPressedColor:"var(--color-green700)",buttonWarningDefaultColor:"var(--color-orange500)",buttonWarningHoverColor:"var(--color-orange600)",buttonWarningFocusedColor:"var(--color-orange500)",buttonWarningPressedColor:"var(--color-orange700)",buttonDangerDefaultColor:"var(--color-red500)",buttonDangerHoverColor:"var(--color-red600)",buttonDangerFocusedColor:"var(--color-red500)",buttonDangerPressedColor:"var(--color-red700)",buttonDefaultColor:"var(--color-blue-grey700)",buttonDefaultHoverColor:"var(--color-blue-grey800)",buttonDefaultFocusedColor:"var(--color-blue-grey700)",buttonDefaultPressedColor:"var(--color-blue-grey800)",buttonOutlineHoverTextColor:"var(--color-primary600)",checkboxUncheckedHoverColor:"var(--color-blue-grey50)",checkboxUncheckedPressedColor:"var(--default-pressed-color)",checkboxCheckedHoverColor:"var(--color-primary600)",checkboxCheckedPressedColor:"var(--color-primary700)",radioHoverBackgroundColor:"var(--color-blue-grey50)",radioPressedBackgroundColor:"var(--default-pressed-color)",radioHoverColor:"var(--color-primary600)",radioPressedColor:"var(--color-primary700)",inputBorderRadius:"2px",inputBorderWidth:"1px",inputBorderWidthFocus:"1px",inputBorderStyle:"solid",inputBorderColor:"var(--color-blue-grey500)",inputBackgroundColor:"var(--light)",inputHelperTextColor:"var(--color-blue-grey500)",inputHoverBackgroundColor:"var(--default-hover-color)",inputDisabledBackgroundColor:"var(--input-hover-background-color)",dragBackgroundColor:"var(--color-blue-grey25-transparent)",dragBorderStyle:"solid",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",skeletonBackgroundColor:"var(--disabled)",skeletonAnimationColorRgb:"255, 255, 255",snackbarTextColor:"var(--light)",snackbarInfoBackgroundColor:"var(--color-primary500)",snackbarSuccessBackgroundColor:"var(--color-green500)",snackbarErrorBackgroundColor:"var(--color-red500)",snackbarWarningBackgroundColor:"var(--color-orange500)",snackbarBorderRadius:"2px",stepperWaitingColor:"var(--color-blue-grey200)",stepperWaitingHoverColor:"var(--color-blue-grey300)",stepperWaitingActiveColor:"var(--color-blue-grey400)",stepperWaitingDisabledColor:"var(--color-blue-grey100)",stepperCurrentColor:"var(--color-primary500)",stepperCurrentHoverColor:"var(--color-primary600)",stepperCurrentActiveColor:"var(--color-primary700)",stepperCurrentDisabledColor:"var(--color-primary100)",stepperDoneColor:"var(--color-green500)",stepperDoneHoverColor:"var(--color-green600)",stepperDoneActiveColor:"var(--color-green700)",stepperDoneDisabledColor:"var(--color-green200)",stepperErrorColor:"var(--color-red500)",stepperErrorHoverColor:"var(--color-red600)",stepperErrorActiveColor:"var(--color-red700)",stepperErrorDisabledColor:"var(--color-red200)",stepperDefaultTextColor:"var(--color-white)",stepperLineColor:"var(--color-blue-grey300)",stepperLineBoldColor:"var(--color-blue-grey700)",stepperLineDisabledColor:"var(--color-blue-grey100)",stepperLineBoldDisabledColor:"var(--color-blue-grey300)",stepperLabelColor:"var(--color-blue-grey900)",stepperCaptionColor:"var(--color-blue-grey500)",stepperCaptionErrorColor:"var(--color-red500)",stepperLabelDisabledColor:"var(--color-blue-grey400)",stepperCaptionDisabledColor:"var(--color-blue-grey400)",stepperCaptionErrorDisabledColor:"var(--color-red200)",bannerBorderRadius:"2px",bannerBorderWidth:"0 0 0 4px",dataGridRowBackgroundColor:"transparent",dataGridRowHoverBackgroundColor:"var(--default-hover-color)",progressBarBackgroundColor:"var(--disabled)",tabsBackgroundColor:"var(--light)",tabActiveBorderHeight:"0.25rem",tabActiveBorderColor:"var(--color-primary)",tabActiveTextColor:"var(--color-primary)",tablistBorderWidth:"0.0625rem",tablistBorderStyle:"solid",tablistBorderColor:"var(--color-blue-grey100)",tabTextColor:"var(--color-blue-grey900)",tabHoverColor:"var(--default-hover-color)",tabPressedColor:"var(--default-pressed-color)",toggleBackgroundColor:"var(--color-blue-grey100)",tooltipBackgroundColor:"var(--default)",wizardStepIndicatorFutureColor:"var(--color-blue-grey200)",contextMenuHoverColor:"var(--default-hover-color)",contextMenuPressedColor:"var(--default-pressed-color)",default:"var(--color-blue-grey900)",success:"var(--color-green500)",error:"var(--color-red500)",info:"var(--color-primary500)",disabled:"var(--color-blue-grey100)",greyedOut:"var(--color-blue-grey400)",lightGreyBorder:"var(--color-blue-grey100)",warning:"var(--color-orange500)",light:"var(--color-white)",fontFamily:"Roboto, sans-serif",fontFamilyCode:"'Roboto Mono', monospace",fontSizeFormLabel:"0.875rem",fontSize:"1rem",fontSizeH1:"2.5rem",fontSizeH2:"1.625rem",fontSizeH3:"1.5rem",fontSizeH4:"1.25rem",fontSizeSub:".75rem",fontSizeCode:"1rem",formControlFontSize:"0.875rem"},[n,u]=o(!0),d=e(null),i=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));d.current.style.setProperty(`--${r}`,e)}};return l((()=>{if(0!==Object.keys(t).length&&d.current){const r={...c,...t};i(r)}else d.current&&i(c);u(!1)}),[t,d.current]),r.createElement("div",{className:"basestyling-wrapper",ref:d},n?null:a)};export{a as BaseStyling};
 //# sourceMappingURL=BaseStyling.esm.js.map

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

@@ -0,0 +1,13 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+export type StepStatus = "waiting" | "current" | "done" | "error";
+export interface Props extends ComponentPropsWithRef<"button"> {
+    status: StepStatus;
+    label: string;
+    caption?: string;
+    index?: number;
+    lastStep?: boolean;
+    disabled?: boolean;
+    direction?: "horizontal" | "vertical";
+}
+export declare const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props>;
+export declare const Step: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/src/components/Stepper/Stepper.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentPropsWithRef } from "react";
+import { Props as StepProps } from "./Step";
+export interface Props extends ComponentPropsWithRef<"div"> {
+    steps: StepProps[];
+    direction: "horizontal" | "vertical";
+}
+export declare const Stepper: ({ steps, direction, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/components/Stepper/Stepper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -8,6 +8,7 @@ interface CSSProperties {
     colorPrimary?: string;
     colorSecondary?: string;
     colorTertiary?: string;
+    colorPrimary100?: string;
     colorPrimary300?: string;
     colorPrimary500?: string;
     colorPrimary600?: string;
@@ -15,6 +16,7 @@ interface CSSProperties {
     colorPrimary900?: string;
     colorBlueGrey100?: string;
     colorBlueGrey200?: string;
+    colorBlueGrey300?: string;
     colorBlueGrey400?: string;
     colorBlueGrey25?: string;
     colorBlueGrey25Transparent?: string;
@@ -24,6 +26,7 @@ interface CSSProperties {
     colorBlueGrey800?: string;
     colorBlueGrey900?: string;
     colorGreen100?: string;
+    colorGreen200?: string;
     colorGreen500?: string;
     colorGreen600?: string;
     colorGreen700?: string;
@@ -33,10 +36,11 @@ interface CSSProperties {
     colorOrange500?: string;
     colorOrange600?: string;
     colorOrange700?: string;
+    colorRed200?: string;
     colorRed500?: string;
-    colorWhite?: string;
     colorRed600?: string;
     colorRed700?: string;
+    colorWhite?: string;
     colorBlack100?: string;
     colorBlack20?: string;
     colorBlack10?: string;
@@ -102,6 +106,33 @@ interface CSSProperties {
     snackbarErrorBackgroundColor?: string;
     snackbarWarningBackgroundColor?: string;
     snackbarBorderRadius?: string;
+    stepperWaitingColor?: string;
+    stepperWaitingHoverColor?: string;
+    stepperWaitingActiveColor?: string;
+    stepperWaitingDisabledColor?: string;
+    stepperCurrentColor?: string;
+    stepperCurrentHoverColor?: string;
+    stepperCurrentActiveColor?: string;
+    stepperCurrentDisabledColor?: string;
+    stepperDoneColor?: string;
+    stepperDoneHoverColor?: string;
+    stepperDoneActiveColor?: string;
+    stepperDoneDisabledColor?: string;
+    stepperErrorColor?: string;
+    stepperErrorHoverColor?: string;
+    stepperErrorActiveColor?: string;
+    stepperErrorDisabledColor?: string;
+    stepperDefaultTextColor?: string;
+    stepperLineColor?: string;
+    stepperLineBoldColor?: string;
+    stepperLineDisabledColor?: string;
+    stepperLineBoldDisabledColor?: string;
+    stepperLabelColor?: string;
+    stepperCaptionColor?: string;
+    stepperCaptionErrorColor?: string;
+    stepperLabelDisabledColor?: string;
+    stepperCaptionDisabledColor?: string;
+    stepperCaptionErrorDisabledColor?: string;
     bannerBorderRadius?: string;
     bannerBorderWidth?: string;
     dataGridRowBackgroundColor?: string;

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

@@ -35,6 +35,8 @@ export { Skeleton } from "./components/Skeleton/Skeleton";
 export type { Props as SkeletonProps } from "./components/Skeleton/Skeleton";
 export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";
 export type { Props as StatusIndicatorProps } from "./components/StatusIndicator/StatusIndicator";
+export { Stepper } from "./components/Stepper/Stepper";
+export type { Props as StepperProps } from "./components/Stepper/Stepper";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";

package/dist/esm/src/index.esm.js

@@ -1,2 +1,2 @@
-export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Stepper}from"../Stepper/Stepper.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/esm/src/index.esm.js",

package/src/components/Stepper/Step.module.scss

@@ -0,0 +1,231 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+@mixin stepState($status: "waiting") {
+  & .step-content .step {
+    color: var(--stepper-default-text-color);
+
+    @if $status == "current" {
+      background-color: var(--stepper-current-color);
+      border-color: var(--stepper-current-color);
+    } @else if $status == "done" {
+      background-color: var(--stepper-done-color);
+      border-color: var(--stepper-done-color);
+    } @else if $status == "error" {
+      background-color: var(--stepper-error-color);
+      border-color: var(--stepper-error-color);
+    } @else if $status == "waiting" {
+      color: var(--stepper-waiting-color);
+    }
+  }
+
+  &:not(:last-child)::after {
+    @if $status == "current" or $status == "error" {
+      border-color: var(--stepper-line-color);
+    } @else if $status == "done" {
+      border-color: var(--stepper-line-bold-color);
+    }
+  }
+
+  &:hover {
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-hover-color);
+        background-color: var(--stepper-current-hover-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-hover-color);
+        background-color: var(--stepper-done-hover-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-hover-color);
+        background-color: var(--stepper-error-hover-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-hover-color);
+        color: var(--stepper-waiting-hover-color);
+      }
+    }
+  }
+
+  &:active {
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-active-color);
+        background-color: var(--stepper-current-active-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-active-color);
+        background-color: var(--stepper-done-active-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-active-color);
+        background-color: var(--stepper-error-active-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-active-color);
+        color: var(--stepper-waiting-active-color);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-disabled-color);
+        background-color: var(--stepper-current-disabled-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-disabled-color);
+        background-color: var(--stepper-done-disabled-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-disabled-color);
+        background-color: var(--stepper-error-disabled-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-disabled-color);
+        color: var(--stepper-waiting-disabled-color);
+      }
+    }
+
+    & .step-content .label {
+      color: var(--stepper-label-disabled-color);
+
+      & .caption {
+        color: if(
+          $status == "error",
+          var(--stepper-caption-error-disabled-color),
+          var(--stepper-caption-disabled-color)
+        );
+      }
+    }
+    &:not(:last-child)::after {
+      border-color: if(
+        $status == "done",
+        var(--stepper-line-bold-disabled-color),
+        var(--stepper-line-disabled-color)
+      );
+    }
+  }
+}
+
+.step-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+
+  @include mixins.focusVisibleOutline($outlineOffset: 0px);
+
+  .step-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+    flex-basis: fit-content;
+  }
+
+  &:not(:last-child)::after {
+    content: "";
+    margin: 0 0.5rem;
+    flex-grow: 1;
+    min-width: 0.5rem;
+    border-bottom: 2px solid var(--stepper-line-color);
+  }
+
+  &.vertical {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &:last-child {
+      flex-grow: 0;
+      flex-basis: fit-content;
+    }
+
+    &:not(:last-child)::after {
+      content: "";
+      border-bottom: none;
+      margin: 0.5rem 0 0.5rem 1.6875rem;
+      border-left: 2px solid var(--stepper-line-color);
+      min-height: 0.5rem;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &.waiting {
+    @include stepState($status: "waiting");
+  }
+
+  &.current {
+    @include stepState($status: "current");
+
+    & .step-content .label {
+      font-weight: 700;
+      & .caption {
+        font-weight: 400;
+      }
+    }
+  }
+
+  &.done {
+    @include stepState($status: "done");
+  }
+
+  &.error {
+    @include stepState($status: "error");
+
+    & .step-content .label .caption {
+      color: var(--stepper-caption-error-color);
+    }
+  }
+}
+
+.step {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 2px solid var(--stepper-waiting-color);
+  border-radius: 50%;
+  font-size: var(--font-size-form-label);
+  font-family: var(--font-family);
+  font-weight: 700;
+}
+
+.label {
+  flex-shrink: 0;
+  position: relative;
+  margin-left: 0.5rem;
+  color: var(--stepper-label-color);
+}
+
+.caption {
+  position: absolute;
+  top: 1.25rem;
+  left: 0;
+  color: var(--stepper-caption-color);
+  font-size: 0.75rem;
+}

package/src/components/Stepper/Step.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Step.module.scss";
+
+export type StepStatus = "waiting" | "current" | "done" | "error";
+
+export interface Props extends ComponentPropsWithRef<"button"> {
+  status: StepStatus;
+  label: string;
+  caption?: string;
+  index?: number;
+  lastStep?: boolean;
+  disabled?: boolean;
+  direction?: "horizontal" | "vertical";
+}
+
+const getStepContent = (index: number, status: StepStatus) => {
+  switch (status) {
+    case "waiting":
+      return String(index + 1);
+    case "current":
+      return String(index + 1);
+    case "done":
+      return <Icon icon={Icons.Checkmark} />;
+    case "error":
+      return "!";
+  }
+};
+
+export const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { label, caption, status, index, direction, disabled, lastStep, ...rest }: Props,
+  ref
+) => {
+  const stepIndex = index ?? 0;
+  const additionalClasses = [classes[status]];
+  const [stepContentHeight, setStepContentHeight] = useState<number>(28);
+  const [stepContentWidth, setStepContentWidth] = useState<number>(28);
+  direction === "vertical" && additionalClasses.push(classes["vertical"]);
+
+  const captionRef = useRef<HTMLSpanElement>(null);
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const stepContentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (captionRef.current && stepContentRef.current && labelRef.current && lastStep) {
+      if (direction == "vertical") {
+        const capionHeight = captionRef.current.getBoundingClientRect().height;
+        const stepContentHeight = stepContentRef.current.getBoundingClientRect().height;
+        setStepContentHeight(capionHeight + stepContentHeight);
+      }
+
+      if (direction == "horizontal") {
+        const captionWidth = captionRef.current.getBoundingClientRect().width;
+        const labelWidth = labelRef.current.getBoundingClientRect().width;
+        setStepContentWidth(captionWidth > labelWidth ? captionWidth + 36 : labelWidth + 36);
+      }
+    }
+  }, []);
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      aria-current={status === "current" ? "step" : undefined}
+      className={`${classes["step-wrapper"]} ${additionalClasses.join(" ")}`}
+    >
+      <div
+        style={{
+          height: lastStep && direction == "vertical" ? `${stepContentHeight}px` : "auto",
+          width: lastStep && direction == "horizontal" ? `${stepContentWidth}px` : "auto"
+        }}
+      >
+        <div ref={stepContentRef} className={classes["step-content"]}>
+          <div aria-hidden className={classes["step"]}>
+            {getStepContent(stepIndex, status)}
+          </div>
+          <span ref={labelRef} className={classes["label"]}>
+            {label}
+            <span ref={captionRef} className={classes["caption"]}>
+              {caption}
+            </span>
+          </span>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export const Step = React.forwardRef(StepComponent);

package/src/components/Stepper/Stepper.module.scss

@@ -0,0 +1,13 @@
+.stepper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.vertical {
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 100%;
+    width: auto;
+  }
+}

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Stepper, Props } from "./Stepper";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  steps: [],
+  direction: "horizontal"
+};
+
+const createStepper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Stepper {...parameters} data-testid="Stepper" />);
+  const StepperComponent = queries.getByTestId("Stepper");
+
+  return {
+    ...queries,
+    StepperComponent
+  };
+};
+
+describe("<Stepper/> should render", () => {
+  it("should render without crashing", () => {
+    const { StepperComponent } = createStepper();
+
+    expect(StepperComponent).toBeDefined();
+  });
+
+  it("should render given steps", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      steps: [
+        {
+          label: "Step 1",
+          status: "waiting",
+          caption: "Caption"
+        },
+        {
+          label: "Step 2",
+          status: "current",
+          caption: "Caption"
+        },
+        {
+          label: "Step 3",
+          status: "done",
+          caption: "Caption"
+        },
+        {
+          label: "Step 4",
+          status: "error",
+          caption: "Caption"
+        }
+      ]
+    }));
+
+    expect(StepperComponent).toBeDefined();
+
+    expect(getAllByText(/Step/i)).toHaveLength(4);
+    expect(getAllByText(/Caption/i)).toHaveLength(4);
+  });
+
+  it("should render the horizontal stepper", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      direction: "horizontal"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("horizontal")).toBe(true);
+  });
+
+  it("should render the vertical stepper", () => {
+    const { StepperComponent } = createStepper(params => ({
+      ...params,
+      direction: "vertical"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("vertical")).toBe(true);
+  });
+});

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ComponentPropsWithRef } from "react";
+import { Step, Props as StepProps } from "./Step";
+import classes from "./Stepper.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  steps: StepProps[];
+  direction: "horizontal" | "vertical";
+}
+
+export const Stepper = ({ steps, direction = "horizontal", ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      className={`${classes["stepper"]} ${
+        direction === "horizontal" ? classes["horizontal"] : classes["vertical"]
+      }`}
+    >
+      {steps.map((step, index) => (
+        <Step
+          {...step}
+          key={step.label.toLowerCase().replace(/\s/, "-")}
+          index={index}
+          direction={direction}
+          lastStep={index + 1 === steps.length}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,7 @@ interface CSSProperties {
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
+  colorPrimary100?: string;
   colorPrimary300?: string;
   colorPrimary500?: string;
   colorPrimary600?: string;
@@ -33,6 +34,7 @@ interface CSSProperties {
   colorPrimary900?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
+  colorBlueGrey300?: string;
   colorBlueGrey400?: string;
   colorBlueGrey25?: string;
   colorBlueGrey25Transparent?: string;
@@ -42,6 +44,7 @@ interface CSSProperties {
   colorBlueGrey800?: string;
   colorBlueGrey900?: string;
   colorGreen100?: string;
+  colorGreen200?: string;
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
@@ -51,10 +54,11 @@ interface CSSProperties {
   colorOrange500?: string;
   colorOrange600?: string;
   colorOrange700?: string;
+  colorRed200?: string;
   colorRed500?: string;
-  colorWhite?: string;
   colorRed600?: string;
   colorRed700?: string;
+  colorWhite?: string;
   colorBlack100?: string;
   colorBlack20?: string;
   colorBlack10?: string;
@@ -120,6 +124,33 @@ interface CSSProperties {
   snackbarErrorBackgroundColor?: string;
   snackbarWarningBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  stepperWaitingColor?: string;
+  stepperWaitingHoverColor?: string;
+  stepperWaitingActiveColor?: string;
+  stepperWaitingDisabledColor?: string;
+  stepperCurrentColor?: string;
+  stepperCurrentHoverColor?: string;
+  stepperCurrentActiveColor?: string;
+  stepperCurrentDisabledColor?: string;
+  stepperDoneColor?: string;
+  stepperDoneHoverColor?: string;
+  stepperDoneActiveColor?: string;
+  stepperDoneDisabledColor?: string;
+  stepperErrorColor?: string;
+  stepperErrorHoverColor?: string;
+  stepperErrorActiveColor?: string;
+  stepperErrorDisabledColor?: string;
+  stepperDefaultTextColor?: string;
+  stepperLineColor?: string;
+  stepperLineBoldColor?: string;
+  stepperLineDisabledColor?: string;
+  stepperLineBoldDisabledColor?: string;
+  stepperLabelColor?: string;
+  stepperCaptionColor?: string;
+  stepperCaptionErrorColor?: string;
+  stepperLabelDisabledColor?: string;
+  stepperCaptionDisabledColor?: string;
+  stepperCaptionErrorDisabledColor?: string;
   bannerBorderRadius?: string;
   bannerBorderWidth?: string;
   dataGridRowBackgroundColor?: string;
@@ -169,6 +200,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorPrimary100: "#CDD0EA",
     colorPrimary300: "#6871BF",
     colorPrimary500: "#041295",
     colorPrimary600: "#030F77",
@@ -179,12 +211,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlueGrey50: "#EEEFF3",
     colorBlueGrey100: "#DEDEE6",
     colorBlueGrey200: "#BCBECE",
+    colorBlueGrey300: "#9A9DB5",
     colorBlueGrey400: "#797D9C",
     colorBlueGrey500: "#5D607E",
     colorBlueGrey700: "#383A4B",
     colorBlueGrey800: "#252733",
     colorBlueGrey900: "#131319",
     colorGreen100: "#D1E6DA",
+    colorGreen200: "#A2CDB4",
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
@@ -193,6 +227,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
+    colorRed200: "#F3A599",
     colorRed500: "#E01E00",
     colorRed600: "#B31800",
     colorRed700: "#861200",
@@ -266,6 +301,33 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarErrorBackgroundColor: "var(--color-red500)",
     snackbarWarningBackgroundColor: "var(--color-orange500)",
     snackbarBorderRadius: "2px",
+    stepperWaitingColor: "var(--color-blue-grey200)",
+    stepperWaitingHoverColor: "var(--color-blue-grey300)",
+    stepperWaitingActiveColor: "var(--color-blue-grey400)",
+    stepperWaitingDisabledColor: "var(--color-blue-grey100)",
+    stepperCurrentColor: "var(--color-primary500)",
+    stepperCurrentHoverColor: "var(--color-primary600)",
+    stepperCurrentActiveColor: "var(--color-primary700)",
+    stepperCurrentDisabledColor: "var(--color-primary100)",
+    stepperDoneColor: "var(--color-green500)",
+    stepperDoneHoverColor: "var(--color-green600)",
+    stepperDoneActiveColor: "var(--color-green700)",
+    stepperDoneDisabledColor: "var(--color-green200)",
+    stepperErrorColor: "var(--color-red500)",
+    stepperErrorHoverColor: "var(--color-red600)",
+    stepperErrorActiveColor: "var(--color-red700)",
+    stepperErrorDisabledColor: "var(--color-red200)",
+    stepperDefaultTextColor: "var(--color-white)",
+    stepperLineColor: "var(--color-blue-grey300)",
+    stepperLineBoldColor: "var(--color-blue-grey700)",
+    stepperLineDisabledColor: "var(--color-blue-grey100)",
+    stepperLineBoldDisabledColor: "var(--color-blue-grey300)",
+    stepperLabelColor: "var(--color-blue-grey900)",
+    stepperCaptionColor: "var(--color-blue-grey500)",
+    stepperCaptionErrorColor: "var(--color-red500)",
+    stepperLabelDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionErrorDisabledColor: "var(--color-red200)",
     bannerBorderRadius: "2px",
     bannerBorderWidth: "0 0 0 4px",
     dataGridRowBackgroundColor: "transparent",

package/src/index.ts

@@ -52,6 +52,8 @@ export { Skeleton } from "./components/Skeleton/Skeleton";
 export type { Props as SkeletonProps } from "./components/Skeleton/Skeleton";
 export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";
 export type { Props as StatusIndicatorProps } from "./components/StatusIndicator/StatusIndicator";
+export { Stepper } from "./components/Stepper/Stepper";
+export type { Props as StepperProps } from "./components/Stepper/Stepper";
 export { Pagination } from "./components/Pagination/Pagination";
 export type {
   Props as PaginationProps,