New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@leafygreen-ui/stepper

Package Overview
Dependencies
Maintainers
0
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/stepper - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

16

CHANGELOG.md
# @leafygreen-ui/stepper
## 5.0.0
### Major Changes
- 274d7e1a7: Removes prop-types from LeafyGreen UI
### Patch Changes
- Updated dependencies [274d7e1a7]
- @leafygreen-ui/leafygreen-provider@4.0.0
- @leafygreen-ui/typography@20.0.0
- @leafygreen-ui/tooltip@13.0.0
- @leafygreen-ui/icon@13.0.0
- @leafygreen-ui/lib@14.0.0
- @leafygreen-ui/tokens@2.11.1
## 4.0.0

@@ -4,0 +20,0 @@

2

dist/esm/index.js

@@ -1,2 +0,2 @@

import e,{useState as t}from"react";import n from"prop-types";import{css as r,cx as a}from"@leafygreen-ui/emotion";import i,{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import l,{Align as c,Justify as s,RenderMode as u}from"@leafygreen-ui/tooltip";import{createUniqueClassName as p,Theme as d}from"@leafygreen-ui/lib";import{palette as m}from"@leafygreen-ui/palette";import{spacing as g,transitionDuration as f,fontWeights as h}from"@leafygreen-ui/tokens";import y from"@leafygreen-ui/icon/dist/Checkmark";import b from"@leafygreen-ui/icon/dist/Ellipsis";import{Overline as x,Body as v}from"@leafygreen-ui/typography";var k=e.Fragment,w="completed-multiple",S="completed",E="current",O="upcoming",M="upcoming-multiple";function j(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function D(e,t,n){return(t=j(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function L(){return L=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},L.apply(this,arguments)}function N(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function C(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t);else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw a}}return l}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return I(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return I(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(e,t){t>e.length&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var A,P,T,U,F,$,q,B,G,H,J,K,Q=p(),R=p(),V=r(A||(A=C(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),g[1],f.slower),W=D(D({},d.Dark,D(D(D(D(D({},w,m.black),S,m.black),E,m.green.base),O,m.gray.light1),M,m.gray.light1)),d.Light,D(D(D(D(D({},w,m.white),S,m.white),E,m.green.dark2),O,m.gray.dark1),M,m.gray.dark1)),X=D(D({},d.Dark,D(D(D(D(D({},w,m.green.base),S,m.green.base),E,m.black),O,m.black),M,m.black)),d.Light,D(D(D(D(D({},w,m.green.dark1),S,m.green.dark1),E,m.white),O,m.white),M,m.white)),Y=D(D({},d.Dark,D(D(D(D(D({},w,m.green.base),S,m.green.base),E,m.green.base),O,m.gray.light1),M,m.gray.light1)),d.Light,D(D(D(D(D({},w,m.green.dark1),S,m.green.dark1),E,m.green.dark1),O,m.gray.dark1),M,m.gray.dark1)),Z=function(e,t){return r(P||(P=C(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),W[e][t],X[e][t],Y[e][t])},_=function(t){var n=t.state,a=t.children;return n===S?e.createElement(y,null):n===M||n===w?e.createElement(b,null):e.createElement(x,{className:r(T||(T=C(["\n font-weight: ",";\n color: inherit;\n "])),h.medium)},a)},ee=["state","size","className"],te=function(t){var n=t.state,i=t.size,l=t.className,c=N(t,ee),s=o().theme;return e.createElement("div",{className:a(R,V,r(U||(U=C(["\n width: ","px;\n height: ","px;\n "])),i,i),Z(s,n),l)},e.createElement(_,L({state:n},c)))},ne=D(D({},d.Dark,D(D(D(D(D({},w,m.green.base),S,m.green.base),E,m.gray.light2),O,m.gray.light1),M,m.gray.light1)),d.Light,D(D(D(D(D({},w,m.green.dark2),S,m.green.dark2),E,m.green.dark3),O,m.gray.dark1),M,m.gray.dark1)),re=function(e,t){return r(F||(F=C(["\n color: ",";\n"])),ne[e][t])},ae=r($||($=C(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),ie=function(t){var n=t.children,r=t.state,i=r===E,l=o().theme;return e.createElement(v,{className:a(re(l,r),D({},ae,r===w||r===M),Q),weight:i?"medium":"regular",as:"div"},n)},oe=r(q||(q=C(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),g[1]);D(D({},d.Dark,r(B||(B=C(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),R,m.black,m.blue.light1)),d.Light,r(G||(G=C(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),R,m.white,m.blue.light1));var le,ce,se,ue=function(e,t){return r(H||(H=C(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?m.gray.light1:m.gray.base)},pe=D(D({},d.Dark,r(J||(J=C(["\n &:after {\n background-color: ",";\n }\n "])),m.green.base)),d.Light,r(K||(K=C(["\n &:after {\n background-color: ",";\n }\n "])),m.green.dark1)),de=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],me=function(t){var n=t.children,r=t.index,i=t.state,l=t.ariaLabel,c=void 0===l?"step".concat(r||""):l,s=t.shouldDisplayLine,u=void 0===s||s,p=t.iconSize,d=void 0===p?20:p,m=t.className,g=N(t,de),f=o(),h=f.darkMode,y=f.theme,b=i===E,x=i===S||i===w;return e.createElement("div",L({className:a(oe,D(D({},ue(d,h),u),pe[y],x&&u),m),"aria-label":c,"aria-current":b&&"step"},g),e.createElement(te,{state:i,size:d},r),e.createElement(ie,{state:i},n))},ge={CompletedMultiple:w,UpcomingMultiple:M},fe=r(le||(le=C(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),g[4]),he=D(D({},d.Dark,D(D({},ge.CompletedMultiple,m.green.dark1),ge.UpcomingMultiple,m.gray.dark2)),d.Light,D(D({},ge.CompletedMultiple,m.green.light2),ge.UpcomingMultiple,m.gray.light2)),ye=function(e,t){return r(ce||(ce=C(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),R,he[e][t])},be=["state","children","tooltipContent","startingStepIndex"],xe=function(n){var r=n.state,a=n.children,i=n.tooltipContent,p=n.startingStepIndex,d=N(n,be),m=o(),g=m.darkMode,f=m.theme,h=z(t(!1),2),y=h[0],b=h[1];return e.createElement(l,{align:c.Top,darkMode:g,justify:s.Middle,open:y,renderMode:u.TopLayer,setOpen:b,trigger:e.createElement("li",{onMouseEnter:function(){b(!0)}},e.createElement(me,L({className:ye(f,r),state:r,tabIndex:0},d),a))},e.createElement("div",null,e.createElement("ol",{className:fe},e.Children.map(i,(function(t,n){return e.createElement("li",{value:p+n},t)})))))},ve=r(se||(se=C(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),ke=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],we=function(t){var n=t.children,r=t.currentStep,l=t.maxDisplayedSteps,c=void 0===l?Array.isArray(n)?n.length:1:l,s=t.completedStepsShown,u=void 0===s?1:s,p=t.darkMode,d=t.className,m=N(t,ke),g=o(p).darkMode,f=e.Children.count(n);c=Math.min(c,f);var h=e.Children.toArray(n),y=Math.min(Math.max(r-u,0),f-c),b=y+c,x=y>0,v=b<f;x&&y++,v&&b--;var k=function(e){return e+1===f},j=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return e.createElement(i,{darkMode:g},e.createElement("ol",L({className:a(ve,d),"aria-label":"progress"},m),x&&e.createElement(xe,{state:w,startingStepIndex:1,shouldDisplayLine:c>1,tooltipContent:h.slice(0,y)},j(1,y)),e.Children.map(h.slice(y,b),(function(t,n){return e.createElement("li",null,e.createElement(me,{state:(a=y+n,a<r?S:a===r?E:O),shouldDisplayLine:!k(y+n),index:y+n+1},t));var a})),v&&e.createElement(xe,{state:M,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:h.slice(b,f)},j(b+1,f))))};we.displayName="Stepper",we.propTypes={currentStep:n.number,maxDisplayedSteps:n.number,completedStepsShown:n.number};export{k as Step,we as default};
import e,{useState as t}from"react";import{css as n,cx as r}from"@leafygreen-ui/emotion";import a,{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import o,{Align as l,Justify as c,RenderMode as s}from"@leafygreen-ui/tooltip";import{createUniqueClassName as u,Theme as d}from"@leafygreen-ui/lib";import{palette as p}from"@leafygreen-ui/palette";import{spacing as g,transitionDuration as m,fontWeights as f}from"@leafygreen-ui/tokens";import h from"@leafygreen-ui/icon/dist/Checkmark";import y from"@leafygreen-ui/icon/dist/Ellipsis";import{Overline as b,Body as x}from"@leafygreen-ui/typography";var v=e.Fragment,k="completed-multiple",w="completed",E="current",S="upcoming",O="upcoming-multiple";function M(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function j(e,t,n){return(t=M(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(){return D=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},D.apply(this,arguments)}function L(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function N(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function C(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t);else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw a}}return l}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return z(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return z(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function z(e,t){t>e.length&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var I,A,P,T,U,F,$,q,B,G,H,J,K=u(),Q=u(),R=n(I||(I=N(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),g[1],m.slower),V=j(j({},d.Dark,j(j(j(j(j({},k,p.black),w,p.black),E,p.green.base),S,p.gray.light1),O,p.gray.light1)),d.Light,j(j(j(j(j({},k,p.white),w,p.white),E,p.green.dark2),S,p.gray.dark1),O,p.gray.dark1)),W=j(j({},d.Dark,j(j(j(j(j({},k,p.green.base),w,p.green.base),E,p.black),S,p.black),O,p.black)),d.Light,j(j(j(j(j({},k,p.green.dark1),w,p.green.dark1),E,p.white),S,p.white),O,p.white)),X=j(j({},d.Dark,j(j(j(j(j({},k,p.green.base),w,p.green.base),E,p.green.base),S,p.gray.light1),O,p.gray.light1)),d.Light,j(j(j(j(j({},k,p.green.dark1),w,p.green.dark1),E,p.green.dark1),S,p.gray.dark1),O,p.gray.dark1)),Y=function(e,t){return n(A||(A=N(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),V[e][t],W[e][t],X[e][t])},Z=function(t){var r=t.state,a=t.children;return r===w?e.createElement(h,null):r===O||r===k?e.createElement(y,null):e.createElement(b,{className:n(P||(P=N(["\n font-weight: ",";\n color: inherit;\n "])),f.medium)},a)},_=["state","size","className"],ee=function(t){var a=t.state,o=t.size,l=t.className,c=L(t,_),s=i().theme;return e.createElement("div",{className:r(Q,R,n(T||(T=N(["\n width: ","px;\n height: ","px;\n "])),o,o),Y(s,a),l)},e.createElement(Z,D({state:a},c)))},te=j(j({},d.Dark,j(j(j(j(j({},k,p.green.base),w,p.green.base),E,p.gray.light2),S,p.gray.light1),O,p.gray.light1)),d.Light,j(j(j(j(j({},k,p.green.dark2),w,p.green.dark2),E,p.green.dark3),S,p.gray.dark1),O,p.gray.dark1)),ne=function(e,t){return n(U||(U=N(["\n color: ",";\n"])),te[e][t])},re=n(F||(F=N(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),ae=function(t){var n=t.children,a=t.state,o=a===E,l=i().theme;return e.createElement(x,{className:r(ne(l,a),j({},re,a===k||a===O),K),weight:o?"medium":"regular",as:"div"},n)},ie=n($||($=N(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),g[1]);j(j({},d.Dark,n(q||(q=N(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),Q,p.black,p.blue.light1)),d.Light,n(B||(B=N(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),Q,p.white,p.blue.light1));var oe,le,ce,se=function(e,t){return n(G||(G=N(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?p.gray.light1:p.gray.base)},ue=j(j({},d.Dark,n(H||(H=N(["\n &:after {\n background-color: ",";\n }\n "])),p.green.base)),d.Light,n(J||(J=N(["\n &:after {\n background-color: ",";\n }\n "])),p.green.dark1)),de=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],pe=function(t){var n=t.children,a=t.index,o=t.state,l=t.ariaLabel,c=void 0===l?"step".concat(a||""):l,s=t.shouldDisplayLine,u=void 0===s||s,d=t.iconSize,p=void 0===d?20:d,g=t.className,m=L(t,de),f=i(),h=f.darkMode,y=f.theme,b=o===E,x=o===w||o===k;return e.createElement("div",D({className:r(ie,j(j({},se(p,h),u),ue[y],x&&u),g),"aria-label":c,"aria-current":b&&"step"},m),e.createElement(ee,{state:o,size:p},a),e.createElement(ae,{state:o},n))},ge={CompletedMultiple:k,UpcomingMultiple:O},me=n(oe||(oe=N(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),g[4]),fe=j(j({},d.Dark,j(j({},ge.CompletedMultiple,p.green.dark1),ge.UpcomingMultiple,p.gray.dark2)),d.Light,j(j({},ge.CompletedMultiple,p.green.light2),ge.UpcomingMultiple,p.gray.light2)),he=function(e,t){return n(le||(le=N(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),Q,fe[e][t])},ye=["state","children","tooltipContent","startingStepIndex"],be=function(n){var r=n.state,a=n.children,u=n.tooltipContent,d=n.startingStepIndex,p=L(n,ye),g=i(),m=g.darkMode,f=g.theme,h=C(t(!1),2),y=h[0],b=h[1];return e.createElement(o,{align:l.Top,darkMode:m,justify:c.Middle,open:y,renderMode:s.TopLayer,setOpen:b,trigger:e.createElement("li",{onMouseEnter:function(){b(!0)}},e.createElement(pe,D({className:he(f,r),state:r,tabIndex:0},p),a))},e.createElement("div",null,e.createElement("ol",{className:me},e.Children.map(u,(function(t,n){return e.createElement("li",{value:d+n},t)})))))},xe=n(ce||(ce=N(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),ve=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],ke=function(t){var n=t.children,o=t.currentStep,l=t.maxDisplayedSteps,c=void 0===l?Array.isArray(n)?n.length:1:l,s=t.completedStepsShown,u=void 0===s?1:s,d=t.darkMode,p=t.className,g=L(t,ve),m=i(d).darkMode,f=e.Children.count(n);c=Math.min(c,f);var h=e.Children.toArray(n),y=Math.min(Math.max(o-u,0),f-c),b=y+c,x=y>0,v=b<f;x&&y++,v&&b--;var M=function(e){return e+1===f},j=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return e.createElement(a,{darkMode:m},e.createElement("ol",D({className:r(xe,p),"aria-label":"progress"},g),x&&e.createElement(be,{state:k,startingStepIndex:1,shouldDisplayLine:c>1,tooltipContent:h.slice(0,y)},j(1,y)),e.Children.map(h.slice(y,b),(function(t,n){return e.createElement("li",null,e.createElement(pe,{state:(r=y+n,r<o?w:r===o?E:S),shouldDisplayLine:!M(y+n),index:y+n+1},t));var r})),v&&e.createElement(be,{state:O,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:h.slice(b,f)},j(b+1,f))))};ke.displayName="Stepper";export{v as Step,ke as default};
//# sourceMappingURL=index.js.map

2

dist/index.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tooltip"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tooltip","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","@leafygreen-ui/typography"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tooltip"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e.Checkmark,e.Ellipsis,e["@leafygreen-ui/typography"])}(this,(function(e,t,n,r,a,l,i,o,u,s,p,c){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=d(t),g=d(n),m=d(a),y=d(l),h=d(s),b=d(p),x=f.default.Fragment,v="completed-multiple",k="completed",w="current",S="upcoming",E="upcoming-multiple";function M(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function O(e,t,n){return(t=M(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},T.apply(this,arguments)}function D(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function j(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function C(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l,i,o=[],u=!0,s=!1;try{if(l=(n=n.call(e)).next,0===t);else for(;!(u=(r=l.call(n)).done)&&(o.push(r.value),o.length!==t);u=!0);}catch(e){s=!0,a=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return o}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return N(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return N(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function N(e,t){t>e.length&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var L,q,z,A,I,P,U,R,_,B,F,J,W=i.createUniqueClassName(),$=i.createUniqueClassName(),G=r.css(L||(L=j(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),u.spacing[1],u.transitionDuration.slower),H=O(O({},i.Theme.Dark,O(O(O(O(O({},v,o.palette.black),k,o.palette.black),w,o.palette.green.base),S,o.palette.gray.light1),E,o.palette.gray.light1)),i.Theme.Light,O(O(O(O(O({},v,o.palette.white),k,o.palette.white),w,o.palette.green.dark2),S,o.palette.gray.dark1),E,o.palette.gray.dark1)),K=O(O({},i.Theme.Dark,O(O(O(O(O({},v,o.palette.green.base),k,o.palette.green.base),w,o.palette.black),S,o.palette.black),E,o.palette.black)),i.Theme.Light,O(O(O(O(O({},v,o.palette.green.dark1),k,o.palette.green.dark1),w,o.palette.white),S,o.palette.white),E,o.palette.white)),Q=O(O({},i.Theme.Dark,O(O(O(O(O({},v,o.palette.green.base),k,o.palette.green.base),w,o.palette.green.base),S,o.palette.gray.light1),E,o.palette.gray.light1)),i.Theme.Light,O(O(O(O(O({},v,o.palette.green.dark1),k,o.palette.green.dark1),w,o.palette.green.dark1),S,o.palette.gray.dark1),E,o.palette.gray.dark1)),V=function(e,t){return r.css(q||(q=j(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),H[e][t],K[e][t],Q[e][t])},X=function(e){var t=e.state,n=e.children;return t===k?f.default.createElement(h.default,null):t===E||t===v?f.default.createElement(b.default,null):f.default.createElement(c.Overline,{className:r.css(z||(z=j(["\n font-weight: ",";\n color: inherit;\n "])),u.fontWeights.medium)},n)},Y=["state","size","className"],Z=function(e){var t=e.state,n=e.size,l=e.className,i=D(e,Y),o=a.useDarkMode().theme;return f.default.createElement("div",{className:r.cx($,G,r.css(A||(A=j(["\n width: ","px;\n height: ","px;\n "])),n,n),V(o,t),l)},f.default.createElement(X,T({state:t},i)))},ee=O(O({},i.Theme.Dark,O(O(O(O(O({},v,o.palette.green.base),k,o.palette.green.base),w,o.palette.gray.light2),S,o.palette.gray.light1),E,o.palette.gray.light1)),i.Theme.Light,O(O(O(O(O({},v,o.palette.green.dark2),k,o.palette.green.dark2),w,o.palette.green.dark3),S,o.palette.gray.dark1),E,o.palette.gray.dark1)),te=function(e,t){return r.css(I||(I=j(["\n color: ",";\n"])),ee[e][t])},ne=r.css(P||(P=j(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),re=function(e){var t=e.children,n=e.state,l=n===w,i=a.useDarkMode().theme;return f.default.createElement(c.Body,{className:r.cx(te(i,n),O({},ne,n===v||n===E),W),weight:l?"medium":"regular",as:"div"},t)},ae=r.css(U||(U=j(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),u.spacing[1]);O(O({},i.Theme.Dark,r.css(R||(R=j(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),$,o.palette.black,o.palette.blue.light1)),i.Theme.Light,r.css(_||(_=j(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),$,o.palette.white,o.palette.blue.light1));var le,ie,oe,ue=function(e,t){return r.css(B||(B=j(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?o.palette.gray.light1:o.palette.gray.base)},se=O(O({},i.Theme.Dark,r.css(F||(F=j(["\n &:after {\n background-color: ",";\n }\n "])),o.palette.green.base)),i.Theme.Light,r.css(J||(J=j(["\n &:after {\n background-color: ",";\n }\n "])),o.palette.green.dark1)),pe=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],ce=function(e){var t=e.children,n=e.index,l=e.state,i=e.ariaLabel,o=void 0===i?"step".concat(n||""):i,u=e.shouldDisplayLine,s=void 0===u||u,p=e.iconSize,c=void 0===p?20:p,d=e.className,g=D(e,pe),m=a.useDarkMode(),y=m.darkMode,h=m.theme,b=l===w,x=l===k||l===v;return f.default.createElement("div",T({className:r.cx(ae,O(O({},ue(c,y),s),se[h],x&&s),d),"aria-label":o,"aria-current":b&&"step"},g),f.default.createElement(Z,{state:l,size:c},n),f.default.createElement(re,{state:l},t))},de={CompletedMultiple:v,UpcomingMultiple:E},fe=r.css(le||(le=j(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),u.spacing[4]),ge=O(O({},i.Theme.Dark,O(O({},de.CompletedMultiple,o.palette.green.dark1),de.UpcomingMultiple,o.palette.gray.dark2)),i.Theme.Light,O(O({},de.CompletedMultiple,o.palette.green.light2),de.UpcomingMultiple,o.palette.gray.light2)),me=function(e,t){return r.css(ie||(ie=j(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),$,ge[e][t])},ye=["state","children","tooltipContent","startingStepIndex"],he=function(e){var n=e.state,r=e.children,i=e.tooltipContent,o=e.startingStepIndex,u=D(e,ye),s=a.useDarkMode(),p=s.darkMode,c=s.theme,d=C(t.useState(!1),2),g=d[0],m=d[1];return f.default.createElement(y.default,{align:l.Align.Top,darkMode:p,justify:l.Justify.Middle,open:g,renderMode:l.RenderMode.TopLayer,setOpen:m,trigger:f.default.createElement("li",{onMouseEnter:function(){m(!0)}},f.default.createElement(ce,T({className:me(c,n),state:n,tabIndex:0},u),r))},f.default.createElement("div",null,f.default.createElement("ol",{className:fe},f.default.Children.map(i,(function(e,t){return f.default.createElement("li",{value:o+t},e)})))))},be=r.css(oe||(oe=j(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),xe=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],ve=function(e){var t=e.children,n=e.currentStep,l=e.maxDisplayedSteps,i=void 0===l?Array.isArray(t)?t.length:1:l,o=e.completedStepsShown,u=void 0===o?1:o,s=e.darkMode,p=e.className,c=D(e,xe),d=a.useDarkMode(s).darkMode,g=f.default.Children.count(t);i=Math.min(i,g);var y=f.default.Children.toArray(t),h=Math.min(Math.max(n-u,0),g-i),b=h+i,x=h>0,M=b<g;x&&h++,M&&b--;var O=function(e){return e+1===g},j=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return f.default.createElement(m.default,{darkMode:d},f.default.createElement("ol",T({className:r.cx(be,p),"aria-label":"progress"},c),x&&f.default.createElement(he,{state:v,startingStepIndex:1,shouldDisplayLine:i>1,tooltipContent:y.slice(0,h)},j(1,h)),f.default.Children.map(y.slice(h,b),(function(e,t){return f.default.createElement("li",null,f.default.createElement(ce,{state:(r=h+t,r<n?k:r===n?w:S),shouldDisplayLine:!O(h+t),index:h+t+1},e));var r})),M&&f.default.createElement(he,{state:E,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:y.slice(b,g)},j(b+1,g))))};ve.displayName="Stepper",ve.propTypes={currentStep:g.default.number,maxDisplayedSteps:g.default.number,completedStepsShown:g.default.number},e.Step=x,e.default=ve,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tooltip"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tooltip","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","@leafygreen-ui/typography"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tooltip"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e.Checkmark,e.Ellipsis,e["@leafygreen-ui/typography"])}(this,(function(e,t,n,r,a,l,i,o,u,s,c){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=p(t),f=p(r),g=p(a),m=p(u),h=p(s),y=d.default.Fragment,b="completed-multiple",x="completed",v="current",k="upcoming",w="upcoming-multiple";function E(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function S(e,t,n){return(t=E(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},M.apply(this,arguments)}function O(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function j(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function D(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l,i,o=[],u=!0,s=!1;try{if(l=(n=n.call(e)).next,0===t);else for(;!(u=(r=l.call(n)).done)&&(o.push(r.value),o.length!==t);u=!0);}catch(e){s=!0,a=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return o}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return T(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return T(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,t){t>e.length&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var C,N,L,q,z,A,I,P,U,R,_,B,F=l.createUniqueClassName(),J=l.createUniqueClassName(),W=n.css(C||(C=j(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),o.spacing[1],o.transitionDuration.slower),$=S(S({},l.Theme.Dark,S(S(S(S(S({},b,i.palette.black),x,i.palette.black),v,i.palette.green.base),k,i.palette.gray.light1),w,i.palette.gray.light1)),l.Theme.Light,S(S(S(S(S({},b,i.palette.white),x,i.palette.white),v,i.palette.green.dark2),k,i.palette.gray.dark1),w,i.palette.gray.dark1)),G=S(S({},l.Theme.Dark,S(S(S(S(S({},b,i.palette.green.base),x,i.palette.green.base),v,i.palette.black),k,i.palette.black),w,i.palette.black)),l.Theme.Light,S(S(S(S(S({},b,i.palette.green.dark1),x,i.palette.green.dark1),v,i.palette.white),k,i.palette.white),w,i.palette.white)),H=S(S({},l.Theme.Dark,S(S(S(S(S({},b,i.palette.green.base),x,i.palette.green.base),v,i.palette.green.base),k,i.palette.gray.light1),w,i.palette.gray.light1)),l.Theme.Light,S(S(S(S(S({},b,i.palette.green.dark1),x,i.palette.green.dark1),v,i.palette.green.dark1),k,i.palette.gray.dark1),w,i.palette.gray.dark1)),K=function(e,t){return n.css(N||(N=j(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),$[e][t],G[e][t],H[e][t])},Q=function(e){var t=e.state,r=e.children;return t===x?d.default.createElement(m.default,null):t===w||t===b?d.default.createElement(h.default,null):d.default.createElement(c.Overline,{className:n.css(L||(L=j(["\n font-weight: ",";\n color: inherit;\n "])),o.fontWeights.medium)},r)},V=["state","size","className"],X=function(e){var t=e.state,a=e.size,l=e.className,i=O(e,V),o=r.useDarkMode().theme;return d.default.createElement("div",{className:n.cx(J,W,n.css(q||(q=j(["\n width: ","px;\n height: ","px;\n "])),a,a),K(o,t),l)},d.default.createElement(Q,M({state:t},i)))},Y=S(S({},l.Theme.Dark,S(S(S(S(S({},b,i.palette.green.base),x,i.palette.green.base),v,i.palette.gray.light2),k,i.palette.gray.light1),w,i.palette.gray.light1)),l.Theme.Light,S(S(S(S(S({},b,i.palette.green.dark2),x,i.palette.green.dark2),v,i.palette.green.dark3),k,i.palette.gray.dark1),w,i.palette.gray.dark1)),Z=function(e,t){return n.css(z||(z=j(["\n color: ",";\n"])),Y[e][t])},ee=n.css(A||(A=j(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),te=function(e){var t=e.children,a=e.state,l=a===v,i=r.useDarkMode().theme;return d.default.createElement(c.Body,{className:n.cx(Z(i,a),S({},ee,a===b||a===w),F),weight:l?"medium":"regular",as:"div"},t)},ne=n.css(I||(I=j(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),o.spacing[1]);S(S({},l.Theme.Dark,n.css(P||(P=j(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),J,i.palette.black,i.palette.blue.light1)),l.Theme.Light,n.css(U||(U=j(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),J,i.palette.white,i.palette.blue.light1));var re,ae,le,ie=function(e,t){return n.css(R||(R=j(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?i.palette.gray.light1:i.palette.gray.base)},oe=S(S({},l.Theme.Dark,n.css(_||(_=j(["\n &:after {\n background-color: ",";\n }\n "])),i.palette.green.base)),l.Theme.Light,n.css(B||(B=j(["\n &:after {\n background-color: ",";\n }\n "])),i.palette.green.dark1)),ue=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],se=function(e){var t=e.children,a=e.index,l=e.state,i=e.ariaLabel,o=void 0===i?"step".concat(a||""):i,u=e.shouldDisplayLine,s=void 0===u||u,c=e.iconSize,p=void 0===c?20:c,f=e.className,g=O(e,ue),m=r.useDarkMode(),h=m.darkMode,y=m.theme,k=l===v,w=l===x||l===b;return d.default.createElement("div",M({className:n.cx(ne,S(S({},ie(p,h),s),oe[y],w&&s),f),"aria-label":o,"aria-current":k&&"step"},g),d.default.createElement(X,{state:l,size:p},a),d.default.createElement(te,{state:l},t))},ce={CompletedMultiple:b,UpcomingMultiple:w},pe=n.css(re||(re=j(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),o.spacing[4]),de=S(S({},l.Theme.Dark,S(S({},ce.CompletedMultiple,i.palette.green.dark1),ce.UpcomingMultiple,i.palette.gray.dark2)),l.Theme.Light,S(S({},ce.CompletedMultiple,i.palette.green.light2),ce.UpcomingMultiple,i.palette.gray.light2)),fe=function(e,t){return n.css(ae||(ae=j(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),J,de[e][t])},ge=["state","children","tooltipContent","startingStepIndex"],me=function(e){var n=e.state,l=e.children,i=e.tooltipContent,o=e.startingStepIndex,u=O(e,ge),s=r.useDarkMode(),c=s.darkMode,p=s.theme,f=D(t.useState(!1),2),m=f[0],h=f[1];return d.default.createElement(g.default,{align:a.Align.Top,darkMode:c,justify:a.Justify.Middle,open:m,renderMode:a.RenderMode.TopLayer,setOpen:h,trigger:d.default.createElement("li",{onMouseEnter:function(){h(!0)}},d.default.createElement(se,M({className:fe(p,n),state:n,tabIndex:0},u),l))},d.default.createElement("div",null,d.default.createElement("ol",{className:pe},d.default.Children.map(i,(function(e,t){return d.default.createElement("li",{value:o+t},e)})))))},he=n.css(le||(le=j(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),ye=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],be=function(e){var t=e.children,a=e.currentStep,l=e.maxDisplayedSteps,i=void 0===l?Array.isArray(t)?t.length:1:l,o=e.completedStepsShown,u=void 0===o?1:o,s=e.darkMode,c=e.className,p=O(e,ye),g=r.useDarkMode(s).darkMode,m=d.default.Children.count(t);i=Math.min(i,m);var h=d.default.Children.toArray(t),y=Math.min(Math.max(a-u,0),m-i),E=y+i,S=y>0,j=E<m;S&&y++,j&&E--;var D=function(e){return e+1===m},T=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return d.default.createElement(f.default,{darkMode:g},d.default.createElement("ol",M({className:n.cx(he,c),"aria-label":"progress"},p),S&&d.default.createElement(me,{state:b,startingStepIndex:1,shouldDisplayLine:i>1,tooltipContent:h.slice(0,y)},T(1,y)),d.default.Children.map(h.slice(y,E),(function(e,t){return d.default.createElement("li",null,d.default.createElement(se,{state:(n=y+t,n<a?x:n===a?v:k),shouldDisplayLine:!D(y+t),index:y+t+1},e));var n})),j&&d.default.createElement(me,{state:w,startingStepIndex:E+1,shouldDisplayLine:!1,tooltipContent:h.slice(E,m)},T(E+1,m))))};be.displayName="Stepper",e.Step=y,e.default=be,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.js.map

6

dist/Stepper/Stepper.d.ts
import React from 'react';
import PropTypes from 'prop-types';
import { StepperProps } from './Stepper.types';

@@ -7,8 +6,3 @@ export declare const Stepper: {

displayName: string;
propTypes: {
currentStep: PropTypes.Requireable<number>;
maxDisplayedSteps: PropTypes.Requireable<number>;
completedStepsShown: PropTypes.Requireable<number>;
};
};
//# sourceMappingURL=Stepper.d.ts.map

14

package.json
{
"name": "@leafygreen-ui/stepper",
"version": "4.0.0",
"version": "5.0.0",
"description": "leafyGreen UI Kit Stepper",

@@ -26,11 +26,11 @@ "main": "./dist/index.js",

"@leafygreen-ui/emotion": "^4.0.8",
"@leafygreen-ui/icon": "^12.3.0",
"@leafygreen-ui/lib": "^13.8.1",
"@leafygreen-ui/icon": "^13.0.0",
"@leafygreen-ui/lib": "^14.0.0",
"@leafygreen-ui/palette": "^4.0.9",
"@leafygreen-ui/tokens": "^2.5.2",
"@leafygreen-ui/tooltip": "^12.0.0",
"@leafygreen-ui/typography": "^19.0.0"
"@leafygreen-ui/tokens": "^2.11.1",
"@leafygreen-ui/tooltip": "^13.0.0",
"@leafygreen-ui/typography": "^20.0.0"
},
"peerDependencies": {
"@leafygreen-ui/leafygreen-provider": "^3.2.0"
"@leafygreen-ui/leafygreen-provider": "^4.0.0"
},

@@ -37,0 +37,0 @@ "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/stepper",

2

README.md

@@ -5,3 +5,3 @@ # Stepper

#### [View on MongoDB.design](https://www.mongodb.design/component/stepper/example/)
#### [View on MongoDB.design](https://www.mongodb.design/component/stepper/live-example/)

@@ -8,0 +8,0 @@ ## Installation

2

stories.js

@@ -1,1 +0,1 @@

import e,{useState as t}from"react";import{storybookArgTypes as n,storybookExcludedControlParams as r}from"@lg-tools/storybook-utils";import a from"prop-types";import{css as i,cx as o}from"@leafygreen-ui/emotion";import l,{useDarkMode as c}from"@leafygreen-ui/leafygreen-provider";import s,{Align as p,Justify as d,RenderMode as u}from"@leafygreen-ui/tooltip";import{createUniqueClassName as m,Theme as g}from"@leafygreen-ui/lib";import{palette as f}from"@leafygreen-ui/palette";import{spacing as y,transitionDuration as h,fontWeights as b}from"@leafygreen-ui/tokens";import x from"@leafygreen-ui/icon/dist/Checkmark";import v from"@leafygreen-ui/icon/dist/Ellipsis";import{Overline as k,Body as S}from"@leafygreen-ui/typography";function w(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function E(e,t,n){return(t=w(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(){return O=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},O.apply(this,arguments)}function M(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function D(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function j(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t);else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw a}}return l}}(e,t)||C(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function C(e,t){if(e){if("string"==typeof e)return L(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?L(e,t):void 0}}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var A,N,I,z,T,P,U,B,F,V,W,$,q=e.Fragment,G="completed-multiple",H="completed",J="current",K="upcoming",Q="upcoming-multiple",R=m(),X=m(),Y=i(A||(A=D(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),y[1],h.slower),Z=E(E({},g.Dark,E(E(E(E(E({},G,f.black),H,f.black),J,f.green.base),K,f.gray.light1),Q,f.gray.light1)),g.Light,E(E(E(E(E({},G,f.white),H,f.white),J,f.green.dark2),K,f.gray.dark1),Q,f.gray.dark1)),_=E(E({},g.Dark,E(E(E(E(E({},G,f.green.base),H,f.green.base),J,f.black),K,f.black),Q,f.black)),g.Light,E(E(E(E(E({},G,f.green.dark1),H,f.green.dark1),J,f.white),K,f.white),Q,f.white)),ee=E(E({},g.Dark,E(E(E(E(E({},G,f.green.base),H,f.green.base),J,f.green.base),K,f.gray.light1),Q,f.gray.light1)),g.Light,E(E(E(E(E({},G,f.green.dark1),H,f.green.dark1),J,f.green.dark1),K,f.gray.dark1),Q,f.gray.dark1)),te=function(e,t){return i(N||(N=D(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),Z[e][t],_[e][t],ee[e][t])},ne=function(t){var n=t.state,r=t.children;return n===H?e.createElement(x,null):n===Q||n===G?e.createElement(v,null):e.createElement(k,{className:i(I||(I=D(["\n font-weight: ",";\n color: inherit;\n "])),b.medium)},r)},re=["state","size","className"],ae=function(t){var n=t.state,r=t.size,a=t.className,l=M(t,re),s=c().theme;return e.createElement("div",{className:o(X,Y,i(z||(z=D(["\n width: ","px;\n height: ","px;\n "])),r,r),te(s,n),a)},e.createElement(ne,O({state:n},l)))},ie=E(E({},g.Dark,E(E(E(E(E({},G,f.green.base),H,f.green.base),J,f.gray.light2),K,f.gray.light1),Q,f.gray.light1)),g.Light,E(E(E(E(E({},G,f.green.dark2),H,f.green.dark2),J,f.green.dark3),K,f.gray.dark1),Q,f.gray.dark1)),oe=function(e,t){return i(T||(T=D(["\n color: ",";\n"])),ie[e][t])},le=i(P||(P=D(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),ce=function(t){var n=t.children,r=t.state,a=r===J,i=c().theme;return e.createElement(S,{className:o(oe(i,r),E({},le,r===G||r===Q),R),weight:a?"medium":"regular",as:"div"},n)},se=i(U||(U=D(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),y[1]);E(E({},g.Dark,i(B||(B=D(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),X,f.black,f.blue.light1)),g.Light,i(F||(F=D(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),X,f.white,f.blue.light1));var pe,de,ue,me=function(e,t){return i(V||(V=D(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?f.gray.light1:f.gray.base)},ge=E(E({},g.Dark,i(W||(W=D(["\n &:after {\n background-color: ",";\n }\n "])),f.green.base)),g.Light,i($||($=D(["\n &:after {\n background-color: ",";\n }\n "])),f.green.dark1)),fe=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],ye=function(t){var n=t.children,r=t.index,a=t.state,i=t.ariaLabel,l=void 0===i?"step".concat(r||""):i,s=t.shouldDisplayLine,p=void 0===s||s,d=t.iconSize,u=void 0===d?20:d,m=t.className,g=M(t,fe),f=c(),y=f.darkMode,h=f.theme,b=a===J,x=a===H||a===G;return e.createElement("div",O({className:o(se,E(E({},me(u,y),p),ge[h],x&&p),m),"aria-label":l,"aria-current":b&&"step"},g),e.createElement(ae,{state:a,size:u},r),e.createElement(ce,{state:a},n))},he={CompletedMultiple:G,UpcomingMultiple:Q},be=i(pe||(pe=D(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),y[4]),xe=E(E({},g.Dark,E(E({},he.CompletedMultiple,f.green.dark1),he.UpcomingMultiple,f.gray.dark2)),g.Light,E(E({},he.CompletedMultiple,f.green.light2),he.UpcomingMultiple,f.gray.light2)),ve=function(e,t){return i(de||(de=D(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),X,xe[e][t])},ke=["state","children","tooltipContent","startingStepIndex"],Se=function(n){var r=n.state,a=n.children,i=n.tooltipContent,o=n.startingStepIndex,l=M(n,ke),m=c(),g=m.darkMode,f=m.theme,y=j(t(!1),2),h=y[0],b=y[1];return e.createElement(s,{align:p.Top,darkMode:g,justify:d.Middle,open:h,renderMode:u.TopLayer,setOpen:b,trigger:e.createElement("li",{onMouseEnter:function(){b(!0)}},e.createElement(ye,O({className:ve(f,r),state:r,tabIndex:0},l),a))},e.createElement("div",null,e.createElement("ol",{className:be},e.Children.map(i,(function(t,n){return e.createElement("li",{value:o+n},t)})))))},we=i(ue||(ue=D(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),Ee=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],Oe=function(t){var n=t.children,r=t.currentStep,a=t.maxDisplayedSteps,i=void 0===a?Array.isArray(n)?n.length:1:a,s=t.completedStepsShown,p=void 0===s?1:s,d=t.darkMode,u=t.className,m=M(t,Ee),g=c(d).darkMode,f=e.Children.count(n);i=Math.min(i,f);var y=e.Children.toArray(n),h=Math.min(Math.max(r-p,0),f-i),b=h+i,x=h>0,v=b<f;x&&h++,v&&b--;var k=function(e){return e+1===f},S=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return e.createElement(l,{darkMode:g},e.createElement("ol",O({className:o(we,u),"aria-label":"progress"},m),x&&e.createElement(Se,{state:G,startingStepIndex:1,shouldDisplayLine:i>1,tooltipContent:y.slice(0,h)},S(1,h)),e.Children.map(y.slice(h,b),(function(t,n){return e.createElement("li",null,e.createElement(ye,{state:(a=h+n,a<r?H:a===r?J:K),shouldDisplayLine:!k(h+n),index:h+n+1},t));var a})),v&&e.createElement(Se,{state:Q,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:y.slice(b,f)},S(b+1,f))))};Oe.displayName="Stepper",Oe.propTypes={currentStep:a.number,maxDisplayedSteps:a.number,completedStepsShown:a.number};var Me,De={title:"Components/Stepper",component:Oe,parameters:{default:"LiveExample",controls:{exclude:[].concat((Me=r,function(e){if(Array.isArray(e))return L(e)}(Me)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(Me)||C(Me)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["children"])},generate:{combineArgs:{darkMode:[!1,!0],currentStep:[1,4,7],maxDisplayedSteps:[3,7],completedStepsShown:[3,5]}}},args:{children:[e.createElement("div",{key:"Overview"},"Overview"),e.createElement(q,{key:"Configuration"},"Configuration"),e.createElement(q,{key:"Update"},"Update"),e.createElement(q,{key:"Install"},"Install"),e.createElement(q,{key:"Billing"},"Billing"),e.createElement(q,{key:"Address"},"Address"),e.createElement(q,{key:"Confirmation"},"Confirmation")],currentStep:1,maxDisplayedSteps:5,completedStepsShown:3},argTypes:{currentStep:{control:{type:"range",min:0,max:7}},darkMode:n.darkMode,maxDisplayedSteps:{control:{type:"range",min:3,max:6},description:"Note: Min and max values for ranges are not defined in the component. The range values are only defined specifically for the Storybook instance so it renders correctly with all values. Value checking within the component will be added at a later date."},completedStepsShown:{control:{type:"range",max:5}}},decorators:[function(t){return e.createElement("div",{style:{minWidth:"600px"}},e.createElement(t,null))}]},je=function(t){return e.createElement(Oe,t)};je.parameters={chromatic:{disableSnapshot:!0}},je.args={currentStep:1,maxDisplayedSteps:5,completedStepsShown:3};var Ce=function(){};export{Ce as Generated,je as LiveExample,De as default};
import e,{useState as t}from"react";import{storybookArgTypes as n,storybookExcludedControlParams as r}from"@lg-tools/storybook-utils";import{css as a,cx as i}from"@leafygreen-ui/emotion";import o,{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import c,{Align as s,Justify as d,RenderMode as p}from"@leafygreen-ui/tooltip";import{createUniqueClassName as u,Theme as m}from"@leafygreen-ui/lib";import{palette as g}from"@leafygreen-ui/palette";import{spacing as f,transitionDuration as y,fontWeights as h}from"@leafygreen-ui/tokens";import b from"@leafygreen-ui/icon/dist/Checkmark";import x from"@leafygreen-ui/icon/dist/Ellipsis";import{Overline as v,Body as k}from"@leafygreen-ui/typography";function S(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function w(e,t,n){return(t=S(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(){return E=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},E.apply(this,arguments)}function O(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function M(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function j(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t);else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw a}}return l}}(e,t)||D(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function D(e,t){if(e){if("string"==typeof e)return C(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?C(e,t):void 0}}function C(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var L,A,N,I,z,T,P,U,B,F,V,W,$=e.Fragment,q="completed-multiple",G="completed",H="current",J="upcoming",K="upcoming-multiple",Q=u(),R=u(),X=a(L||(L=M(["\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n transition: ","ms box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n"])),f[1],y.slower),Y=w(w({},m.Dark,w(w(w(w(w({},q,g.black),G,g.black),H,g.green.base),J,g.gray.light1),K,g.gray.light1)),m.Light,w(w(w(w(w({},q,g.white),G,g.white),H,g.green.dark2),J,g.gray.dark1),K,g.gray.dark1)),Z=w(w({},m.Dark,w(w(w(w(w({},q,g.green.base),G,g.green.base),H,g.black),J,g.black),K,g.black)),m.Light,w(w(w(w(w({},q,g.green.dark1),G,g.green.dark1),H,g.white),J,g.white),K,g.white)),_=w(w({},m.Dark,w(w(w(w(w({},q,g.green.base),G,g.green.base),H,g.green.base),J,g.gray.light1),K,g.gray.light1)),m.Light,w(w(w(w(w({},q,g.green.dark1),G,g.green.dark1),H,g.green.dark1),J,g.gray.dark1),K,g.gray.dark1)),ee=function(e,t){return a(A||(A=M(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),Y[e][t],Z[e][t],_[e][t])},te=function(t){var n=t.state,r=t.children;return n===G?e.createElement(b,null):n===K||n===q?e.createElement(x,null):e.createElement(v,{className:a(N||(N=M(["\n font-weight: ",";\n color: inherit;\n "])),h.medium)},r)},ne=["state","size","className"],re=function(t){var n=t.state,r=t.size,o=t.className,c=O(t,ne),s=l().theme;return e.createElement("div",{className:i(R,X,a(I||(I=M(["\n width: ","px;\n height: ","px;\n "])),r,r),ee(s,n),o)},e.createElement(te,E({state:n},c)))},ae=w(w({},m.Dark,w(w(w(w(w({},q,g.green.base),G,g.green.base),H,g.gray.light2),J,g.gray.light1),K,g.gray.light1)),m.Light,w(w(w(w(w({},q,g.green.dark2),G,g.green.dark2),H,g.green.dark3),J,g.gray.dark1),K,g.gray.dark1)),ie=function(e,t){return a(z||(z=M(["\n color: ",";\n"])),ae[e][t])},oe=a(T||(T=M(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n"]))),le=function(t){var n=t.children,r=t.state,a=r===H,o=l().theme;return e.createElement(k,{className:i(ie(o,r),w({},oe,r===q||r===K),Q),weight:a?"medium":"regular",as:"div"},n)},ce=a(P||(P=M(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n }\n"])),f[1]);w(w({},m.Dark,a(U||(U=M(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),R,g.black,g.blue.light1)),m.Light,a(B||(B=M(["\n &:focus-visible {\n ."," {\n box-shadow: 0px 0px 0px 2px ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),R,g.white,g.blue.light1));var se,de,pe,ue=function(e,t){return a(F||(F=M(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n"])),e/2,t?g.gray.light1:g.gray.base)},me=w(w({},m.Dark,a(V||(V=M(["\n &:after {\n background-color: ",";\n }\n "])),g.green.base)),m.Light,a(W||(W=M(["\n &:after {\n background-color: ",";\n }\n "])),g.green.dark1)),ge=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],fe=function(t){var n=t.children,r=t.index,a=t.state,o=t.ariaLabel,c=void 0===o?"step".concat(r||""):o,s=t.shouldDisplayLine,d=void 0===s||s,p=t.iconSize,u=void 0===p?20:p,m=t.className,g=O(t,ge),f=l(),y=f.darkMode,h=f.theme,b=a===H,x=a===G||a===q;return e.createElement("div",E({className:i(ce,w(w({},ue(u,y),d),me[h],x&&d),m),"aria-label":c,"aria-current":b&&"step"},g),e.createElement(re,{state:a,size:u},r),e.createElement(le,{state:a},n))},ye={CompletedMultiple:q,UpcomingMultiple:K},he=a(se||(se=M(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n"])),f[4]),be=w(w({},m.Dark,w(w({},ye.CompletedMultiple,g.green.dark1),ye.UpcomingMultiple,g.gray.dark2)),m.Light,w(w({},ye.CompletedMultiple,g.green.light2),ye.UpcomingMultiple,g.gray.light2)),xe=function(e,t){return a(de||(de=M(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px ",";\n }\n"])),R,be[e][t])},ve=["state","children","tooltipContent","startingStepIndex"],ke=function(n){var r=n.state,a=n.children,i=n.tooltipContent,o=n.startingStepIndex,u=O(n,ve),m=l(),g=m.darkMode,f=m.theme,y=j(t(!1),2),h=y[0],b=y[1];return e.createElement(c,{align:s.Top,darkMode:g,justify:d.Middle,open:h,renderMode:p.TopLayer,setOpen:b,trigger:e.createElement("li",{onMouseEnter:function(){b(!0)}},e.createElement(fe,E({className:xe(f,r),state:r,tabIndex:0},u),a))},e.createElement("div",null,e.createElement("ol",{className:he},e.Children.map(i,(function(t,n){return e.createElement("li",{value:o+n},t)})))))},Se=a(pe||(pe=M(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),we=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],Ee=function(t){var n=t.children,r=t.currentStep,a=t.maxDisplayedSteps,c=void 0===a?Array.isArray(n)?n.length:1:a,s=t.completedStepsShown,d=void 0===s?1:s,p=t.darkMode,u=t.className,m=O(t,we),g=l(p).darkMode,f=e.Children.count(n);c=Math.min(c,f);var y=e.Children.toArray(n),h=Math.min(Math.max(r-d,0),f-c),b=h+c,x=h>0,v=b<f;x&&h++,v&&b--;var k=function(e){return e+1===f},S=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return e.createElement(o,{darkMode:g},e.createElement("ol",E({className:i(Se,u),"aria-label":"progress"},m),x&&e.createElement(ke,{state:q,startingStepIndex:1,shouldDisplayLine:c>1,tooltipContent:y.slice(0,h)},S(1,h)),e.Children.map(y.slice(h,b),(function(t,n){return e.createElement("li",null,e.createElement(fe,{state:(a=h+n,a<r?G:a===r?H:J),shouldDisplayLine:!k(h+n),index:h+n+1},t));var a})),v&&e.createElement(ke,{state:K,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:y.slice(b,f)},S(b+1,f))))};Ee.displayName="Stepper";var Oe,Me={title:"Components/Stepper",component:Ee,parameters:{default:"LiveExample",controls:{exclude:[].concat((Oe=r,function(e){if(Array.isArray(e))return C(e)}(Oe)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(Oe)||D(Oe)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["children"])},generate:{combineArgs:{darkMode:[!1,!0],currentStep:[1,4,7],maxDisplayedSteps:[3,7],completedStepsShown:[3,5]}}},args:{children:[e.createElement("div",{key:"Overview"},"Overview"),e.createElement($,{key:"Configuration"},"Configuration"),e.createElement($,{key:"Update"},"Update"),e.createElement($,{key:"Install"},"Install"),e.createElement($,{key:"Billing"},"Billing"),e.createElement($,{key:"Address"},"Address"),e.createElement($,{key:"Confirmation"},"Confirmation")],currentStep:1,maxDisplayedSteps:5,completedStepsShown:3},argTypes:{currentStep:{control:{type:"range",min:0,max:7}},darkMode:n.darkMode,maxDisplayedSteps:{control:{type:"range",min:3,max:6},description:"Note: Min and max values for ranges are not defined in the component. The range values are only defined specifically for the Storybook instance so it renders correctly with all values. Value checking within the component will be added at a later date."},completedStepsShown:{control:{type:"range",max:5}}},decorators:[function(t){return e.createElement("div",{style:{minWidth:"600px"}},e.createElement(t,null))}]},je=function(t){return e.createElement(Ee,t)};je.parameters={chromatic:{disableSnapshot:!0}},je.args={currentStep:1,maxDisplayedSteps:5,completedStepsShown:3};var De=function(){};export{De as Generated,je as LiveExample,Me as default};
dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/Stepper/Stepper.d.ts.map

Sorry, the diff of this file is not supported yet

src/Stepper/Stepper.tsx

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