@leafygreen-ui/stepper - npm Package Compare versions

Comparing version 2.1.5 to 2.1.6

CHANGELOG.md

 # @leafygreen-ui/stepper
 
+## 2.1.6
+
+### Patch Changes
+
+- d661688: Ensures the Stepper sets its own stacking context (i.e. sets `z-index: 0`)
+- Updated dependencies [d661688]
+  - @leafygreen-ui/lib@9.1.0
+
 ## 2.1.5
@@ -4,0 +12,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{useState as e}from"react";import r from"prop-types";import{css as t,cx as o}from"@leafygreen-ui/emotion";import i from"@leafygreen-ui/icon/dist/Checkmark";import a from"@leafygreen-ui/icon/dist/Ellipsis";import{transparentize as l}from"polished";import{createDataProp as s}from"@leafygreen-ui/lib";import{uiColors as p}from"@leafygreen-ui/palette";import{jsx as c}from"@emotion/react";function u(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function f(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){d(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function d(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function m(){return(m=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n}).apply(this,arguments)}function b(n,e){if(null==n)return{};var r,t,o=function(n,e){if(null==n)return{};var r,t,o={},i=Object.keys(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||(o[r]=n[r]);return o}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(o[r]=n[r])}return o}function g(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function y(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==r)return;var t,o,i=[],a=!0,l=!1;try{for(r=r.call(n);!(a=(t=r.next()).done)&&(i.push(t.value),!e||i.length!==e);a=!0);}catch(n){l=!0,o=n}finally{try{a||null==r.return||r.return()}finally{if(l)throw o}}return i}(n,e)||x(n,e)||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 h(n){return function(n){if(Array.isArray(n))return v(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||x(n)||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.")}()}function x(n,e){if(n){if("string"==typeof n)return v(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?v(n,e):void 0}}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}var w,S,O,j,k,P,B,N,A,E,T,z,D,M,I,L,X,q={stepBoxTop:s("step-box-top"),stepBoxBottom:s("step-box-bottom")},R=t(w||(w=g(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]))),C=t(S||(S=g(["\n  display: flex;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n\n  // Safari doesn't correctly position absolutely positioned elements inside flex containers\n  // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n  left: 0;\n  top: 0;\n"]))),H=t(O||(O=g(["\n  display: inline-block;\n\n  height: 50%;\n  width: 100%;\n\n  & > *,\n  &:before,\n  &:after {\n    display: inline-block;\n    height: 100%;\n    background: white;\n    border: 1px solid #dee0e3;\n  }\n\n  & > * {\n    width: calc(100% - ","px);\n    margin-right: -","px;\n    border-left: none;\n    border-right: none;\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    width: ","px;\n  }\n\n  &:before {\n    border-right: none;\n  }\n\n  &:after {\n    border-left: none;\n  }\n"])),16,16,16),F=t(j||(j=g(["\n  ",";\n\n  & > * {\n    border-bottom: none;\n  }\n\n  &:before,\n  &:after {\n    border-bottom: none;\n    transform-origin: 50% 0%;\n    transform: skewX(","rad);\n  }\n"])),H,Math.atan(2/3)),U=t(k||(k=g(["\n  ",";\n\n  & > * {\n    border-top: none;\n  }\n\n  &:before,\n  &:after {\n    border-top: none;\n    transform-origin: 50% 100%;\n    transform: skewX(","rad);\n  }\n"])),H,-Math.atan(2/3)),$=t(P||(P=g(["\n  flex: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(100% + 2px);\n  min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n  margin-left: -","px;\n  margin-top: -1px;\n  margin-bottom: -1px;\n  padding-left: ","px;\n  padding-right: 16px;\n\n  color: ",";\n  font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: bold;\n\n  z-index: 2;\n\n  &:first-of-type {\n    margin-left: 0;\n    padding-left: 16px;\n\n    ",", "," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    padding-left: calc(","px);\n\n    ",", "," {\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"])),17,32,p.gray.dark3,q.stepBoxTop.selector,q.stepBoxBottom.selector,48,q.stepBoxTop.selector,q.stepBoxBottom.selector),G=t(B||(B=g(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]))),J=t(N||(N=g(["\n  filter: drop-shadow(0px 4px 4px ",");\n  z-index: 3;\n\n  &:last-of-type:not(:first-of-type) {\n    ",":before {\n      transform: skewX(","rad);\n    }\n\n    ",":before {\n      transform: skewX(-","rad);\n    }\n  }\n"])),l(.75,p.black),q.stepBoxTop.selector,Math.atan(2/3),q.stepBoxBottom.selector,Math.atan(2/3)),K=t(A||(A=g(["\n  color: ",";\n  z-index: 1;\n\n  &:last-of-type {\n    z-index: 0;\n  }\n\n  ",", "," {\n    & > *,\n    &:before,\n    &:after {\n      background: ",";\n      border-color: ",";\n    }\n  }\n"])),p.gray.base,q.stepBoxTop.selector,q.stepBoxBottom.selector,p.gray.light3,p.gray.light2),Q=t(E||(E=g(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]))),V=t(T||(T=g(["\n  left: 0;\n  transition: left 700ms;\n"]))),W=t(z||(z=g(["\n  left: ","px;\n  transition: left 700ms;\n"])),-32),Y=t(D||(D=g(["\n  position: relative;\n  height: ","px;\n  width: 100%;\n\n  background: ",";\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ",";\n"])),48,p.gray.light3,p.gray.light2),Z=t(M||(M=g(["\n  display: flex;\n  position: absolute;\n\n  align-items: center;\n  justify-content: center;\n  top: calc(100% - 12px);\n\n  height: 24px;\n  min-width: 24px;\n  max-width: max-content;\n\n  font-size: 12px;\n  line-height: 14px;\n\n  border-radius: 12px;\n  border: 1px solid;\n"]))),_=t(I||(I=g(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),p.green.base,p.green.base),nn=t(L||(L=g(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"])),p.gray.dark2),en=t(X||(X=g(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),p.gray.light1,p.gray.base),rn=t("padding: 0 8px;"),tn=t("cursor: pointer;"),on=["children","state","stepLabel","isPreview","className"];function an(n){var e,r,t=n.children,a=n.state,l=n.stepLabel,s=n.isPreview,p=n.className,u=b(n,on),f="current"===a,g="upcoming"===a,y="completed"===a;return c("div",m({className:"".concat(o($,(e={},d(e,J,f),d(e,K,g),d(e,tn,s),e))," ").concat(p)},u),l&&c("div",{className:o(Z,(r={},d(r,nn,f),d(r,_,y),d(r,en,g),d(r,tn,s),r))},y?c(i,null):c("div",{className:rn},l)),c("div",{className:o(G,d({},tn,s))},t),c("div",{className:C},c("span",m({className:F},q.stepBoxTop.prop),c("div",null)),c("span",m({className:U},q.stepBoxBottom.prop),c("div",null))))}function ln(n){var r=n.children,t=n.currentStep,i=n.maxDisplayedSteps,a=void 0===i?Array.isArray(r)?r.length:1:i,l=n.className,s=y(e("current"),2),p=s[0],u=s[1],b=(Array.isArray(r)?r:[r]).map((function(n,e){var r;return r=e<t?"completed":e===t?"current":"upcoming",{"aria-label":cn(n.props.children),"aria-current":t===e?"step":void 0,step:e,stepLabel:(e+1).toString(),state:r,children:n,isPreview:!1}})),g=b.length,h=un({currentStep:t,numSteps:g,maxDisplayedSteps:a}),x=h.rangeStart,v=h.rangeEnd,w=pn(b,{currentStep:t,rangeStart:x,rangeEnd:v}),S={current:w};return x>0&&(w[0].onMouseOver=function(){u("previous")},S.previous=pn(b,f({currentStep:t},un({currentStep:x-1,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),v<g-1&&(w[w.length-1].onMouseOver=function(){u("next")},S.next=pn(b,f({currentStep:t},un({currentStep:v,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),Object.entries(S).forEach((function(n){var e=y(n,2),r=e[0],t=e[1];t.forEach((function(n,e){var i;e<t.length-1&&(n.className=o((d(i={},V,p===r),d(i,W,p!==r),i)))}))})),c("ol",{className:o(Y,l),onMouseLeave:function(){return u("current")}},Object.entries(S).map((function(n){var e=y(n,2),r=e[0],t=e[1];return c("li",{key:r,className:o(R,d({},Q,p!==r))},t.map((function(n,e){return c(an,m({key:e},n))})))})))}an.displayName="Step",ln.displayName="Stepper",ln.propTypes={children:r.node.isRequired,currentStep:r.number.isRequired,maxDisplayedSteps:r.number};var sn=function(e){var r=e.children;return c(n.Fragment,null,r)};function pn(n,e){var r=e.currentStep,t=e.rangeStart,o=e.rangeEnd,i=[];return t>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(t),state:t>r+1?"upcoming":"completed",children:c(a,null),isPreview:!0}),i.push.apply(i,h(n.slice(t,o).map((function(n){return f({},n)})))),o<n.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(n.length-o),state:"upcoming",children:c(a,null),isPreview:!0}),i}function cn(n){return n instanceof Array?n.map((function(n){return cn(n)})).join(""):n.toString()}function un(n){var e=n.currentStep,r=n.numSteps,t=n.maxDisplayedSteps;if(r<=t)return{rangeStart:0,rangeEnd:r};if(e+1<t)return{rangeStart:0,rangeEnd:t-1};if(e>r-t)return{rangeStart:r-t+1,rangeEnd:r};var o=e-(e-t+1)%(t-2);return{rangeStart:o,rangeEnd:o+t-2}}sn.displayName="Step",sn.propTypes={children:r.oneOfType([r.string,r.number,r.arrayOf(r.oneOfType([r.string,r.number]))]).isRequired};export{sn as Step,ln as Stepper};
+import n,{useState as e}from"react";import r from"prop-types";import{css as t,cx as o}from"@leafygreen-ui/emotion";import i from"@leafygreen-ui/icon/dist/Checkmark";import a from"@leafygreen-ui/icon/dist/Ellipsis";import{transparentize as l}from"polished";import{createDataProp as s}from"@leafygreen-ui/lib";import{uiColors as p}from"@leafygreen-ui/palette";import{jsx as c}from"@emotion/react";function u(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function f(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){d(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function d(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function m(){return(m=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n}).apply(this,arguments)}function b(n,e){if(null==n)return{};var r,t,o=function(n,e){if(null==n)return{};var r,t,o={},i=Object.keys(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||(o[r]=n[r]);return o}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(o[r]=n[r])}return o}function g(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function y(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==r)return;var t,o,i=[],a=!0,l=!1;try{for(r=r.call(n);!(a=(t=r.next()).done)&&(i.push(t.value),!e||i.length!==e);a=!0);}catch(n){l=!0,o=n}finally{try{a||null==r.return||r.return()}finally{if(l)throw o}}return i}(n,e)||x(n,e)||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 h(n){return function(n){if(Array.isArray(n))return v(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||x(n)||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.")}()}function x(n,e){if(n){if("string"==typeof n)return v(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?v(n,e):void 0}}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}var w,S,O,j,k,P,B,N,A,E,z,T,D,M,I,L,X,q={stepBoxTop:s("step-box-top"),stepBoxBottom:s("step-box-bottom")},R=t(w||(w=g(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]))),C=t(S||(S=g(["\n  display: flex;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n\n  // Safari doesn't correctly position absolutely positioned elements inside flex containers\n  // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n  left: 0;\n  top: 0;\n"]))),H=t(O||(O=g(["\n  display: inline-block;\n\n  height: 50%;\n  width: 100%;\n\n  & > *,\n  &:before,\n  &:after {\n    display: inline-block;\n    height: 100%;\n    background: white;\n    border: 1px solid #dee0e3;\n  }\n\n  & > * {\n    width: calc(100% - ","px);\n    margin-right: -","px;\n    border-left: none;\n    border-right: none;\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    width: ","px;\n  }\n\n  &:before {\n    border-right: none;\n  }\n\n  &:after {\n    border-left: none;\n  }\n"])),16,16,16),F=t(j||(j=g(["\n  ",";\n\n  & > * {\n    border-bottom: none;\n  }\n\n  &:before,\n  &:after {\n    border-bottom: none;\n    transform-origin: 50% 0%;\n    transform: skewX(","rad);\n  }\n"])),H,Math.atan(2/3)),U=t(k||(k=g(["\n  ",";\n\n  & > * {\n    border-top: none;\n  }\n\n  &:before,\n  &:after {\n    border-top: none;\n    transform-origin: 50% 100%;\n    transform: skewX(","rad);\n  }\n"])),H,-Math.atan(2/3)),$=t(P||(P=g(["\n  flex: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(100% + 2px);\n  min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n  margin-left: -","px;\n  margin-top: -1px;\n  margin-bottom: -1px;\n  padding-left: ","px;\n  padding-right: 16px;\n\n  color: ",";\n  font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: bold;\n\n  z-index: 2;\n\n  &:first-of-type {\n    margin-left: 0;\n    padding-left: 16px;\n\n    ",", "," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    padding-left: calc(","px);\n\n    ",", "," {\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"])),17,32,p.gray.dark3,q.stepBoxTop.selector,q.stepBoxBottom.selector,48,q.stepBoxTop.selector,q.stepBoxBottom.selector),G=t(B||(B=g(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]))),J=t(N||(N=g(["\n  filter: drop-shadow(0px 4px 4px ",");\n  z-index: 3;\n\n  &:last-of-type:not(:first-of-type) {\n    ",":before {\n      transform: skewX(","rad);\n    }\n\n    ",":before {\n      transform: skewX(-","rad);\n    }\n  }\n"])),l(.75,p.black),q.stepBoxTop.selector,Math.atan(2/3),q.stepBoxBottom.selector,Math.atan(2/3)),K=t(A||(A=g(["\n  color: ",";\n  z-index: 1;\n\n  &:last-of-type {\n    z-index: 0;\n  }\n\n  ",", "," {\n    & > *,\n    &:before,\n    &:after {\n      background: ",";\n      border-color: ",";\n    }\n  }\n"])),p.gray.base,q.stepBoxTop.selector,q.stepBoxBottom.selector,p.gray.light3,p.gray.light2),Q=t(E||(E=g(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]))),V=t(z||(z=g(["\n  left: 0;\n  transition: left 700ms;\n"]))),W=t(T||(T=g(["\n  left: ","px;\n  transition: left 700ms;\n"])),-32),Y=t(D||(D=g(["\n  position: relative;\n  z-index: 0;\n  height: ","px;\n  width: 100%;\n\n  background: ",";\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ",";\n"])),48,p.gray.light3,p.gray.light2),Z=t(M||(M=g(["\n  display: flex;\n  position: absolute;\n\n  align-items: center;\n  justify-content: center;\n  top: calc(100% - 12px);\n\n  height: 24px;\n  min-width: 24px;\n  max-width: max-content;\n\n  font-size: 12px;\n  line-height: 14px;\n\n  border-radius: 12px;\n  border: 1px solid;\n"]))),_=t(I||(I=g(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),p.green.base,p.green.base),nn=t(L||(L=g(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"])),p.gray.dark2),en=t(X||(X=g(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),p.gray.light1,p.gray.base),rn=t("padding: 0 8px;"),tn=t("cursor: pointer;"),on=["children","state","stepLabel","isPreview","className"];function an(n){var e,r,t=n.children,a=n.state,l=n.stepLabel,s=n.isPreview,p=n.className,u=b(n,on),f="current"===a,g="upcoming"===a,y="completed"===a;return c("div",m({className:"".concat(o($,(e={},d(e,J,f),d(e,K,g),d(e,tn,s),e))," ").concat(p)},u),l&&c("div",{className:o(Z,(r={},d(r,nn,f),d(r,_,y),d(r,en,g),d(r,tn,s),r))},y?c(i,null):c("div",{className:rn},l)),c("div",{className:o(G,d({},tn,s))},t),c("div",{className:C},c("span",m({className:F},q.stepBoxTop.prop),c("div",null)),c("span",m({className:U},q.stepBoxBottom.prop),c("div",null))))}function ln(n){var r=n.children,t=n.currentStep,i=n.maxDisplayedSteps,a=void 0===i?Array.isArray(r)?r.length:1:i,l=n.className,s=y(e("current"),2),p=s[0],u=s[1],b=(Array.isArray(r)?r:[r]).map((function(n,e){var r;return r=e<t?"completed":e===t?"current":"upcoming",{"aria-label":cn(n.props.children),"aria-current":t===e?"step":void 0,step:e,stepLabel:(e+1).toString(),state:r,children:n,isPreview:!1}})),g=b.length,h=un({currentStep:t,numSteps:g,maxDisplayedSteps:a}),x=h.rangeStart,v=h.rangeEnd,w=pn(b,{currentStep:t,rangeStart:x,rangeEnd:v}),S={current:w};return x>0&&(w[0].onMouseOver=function(){u("previous")},S.previous=pn(b,f({currentStep:t},un({currentStep:x-1,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),v<g-1&&(w[w.length-1].onMouseOver=function(){u("next")},S.next=pn(b,f({currentStep:t},un({currentStep:v,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),Object.entries(S).forEach((function(n){var e=y(n,2),r=e[0],t=e[1];t.forEach((function(n,e){var i;e<t.length-1&&(n.className=o((d(i={},V,p===r),d(i,W,p!==r),i)))}))})),c("ol",{className:o(Y,l),onMouseLeave:function(){return u("current")}},Object.entries(S).map((function(n){var e=y(n,2),r=e[0],t=e[1];return c("li",{key:r,className:o(R,d({},Q,p!==r))},t.map((function(n,e){return c(an,m({key:e},n))})))})))}an.displayName="Step",ln.displayName="Stepper",ln.propTypes={children:r.node.isRequired,currentStep:r.number.isRequired,maxDisplayedSteps:r.number};var sn=function(e){var r=e.children;return c(n.Fragment,null,r)};function pn(n,e){var r=e.currentStep,t=e.rangeStart,o=e.rangeEnd,i=[];return t>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(t),state:t>r+1?"upcoming":"completed",children:c(a,null),isPreview:!0}),i.push.apply(i,h(n.slice(t,o).map((function(n){return f({},n)})))),o<n.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(n.length-o),state:"upcoming",children:c(a,null),isPreview:!0}),i}function cn(n){return n instanceof Array?n.map((function(n){return cn(n)})).join(""):n.toString()}function un(n){var e=n.currentStep,r=n.numSteps,t=n.maxDisplayedSteps;if(r<=t)return{rangeStart:0,rangeEnd:r};if(e+1<t)return{rangeStart:0,rangeEnd:t-1};if(e>r-t)return{rangeStart:r-t+1,rangeEnd:r};var o=e-(e-t+1)%(t-2);return{rangeStart:o,rangeEnd:o+t-2}}sn.displayName="Step",sn.propTypes={children:r.oneOfType([r.string,r.number,r.arrayOf(r.oneOfType([r.string,r.number]))]).isRequired};export{sn as Step,ln as Stepper};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/lib","@leafygreen-ui/palette","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.Ellipsis,e.polished,e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.react)}(this,(function(e,n,t,r,o,i,a,s,l,c){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u,f,d,b,y,g,m,h,x,v,w,j,S,O,k,P,B,N=p(n),E=p(t),A=p(o),C=p(i);function T(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function q(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?T(Object(t),!0).forEach((function(n){z(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function z(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function D(){return(D=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function M(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function I(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function L(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,s=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(s)throw o}}return i}(e,n)||X(e,n)||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 R(e){return function(e){if(Array.isArray(e))return H(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||X(e)||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.")}()}function X(e,n){if(e){if("string"==typeof e)return H(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?H(e,n):void 0}}function H(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var _=48,F={stepBoxTop:s.createDataProp("step-box-top"),stepBoxBottom:s.createDataProp("step-box-bottom")},U=r.css(u||(u=I(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]))),$=r.css(f||(f=I(["\n  display: flex;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n\n  // Safari doesn't correctly position absolutely positioned elements inside flex containers\n  // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n  left: 0;\n  top: 0;\n"]))),G=r.css(d||(d=I(["\n  display: inline-block;\n\n  height: 50%;\n  width: 100%;\n\n  & > *,\n  &:before,\n  &:after {\n    display: inline-block;\n    height: 100%;\n    background: white;\n    border: 1px solid #dee0e3;\n  }\n\n  & > * {\n    width: calc(100% - ","px);\n    margin-right: -","px;\n    border-left: none;\n    border-right: none;\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    width: ","px;\n  }\n\n  &:before {\n    border-right: none;\n  }\n\n  &:after {\n    border-left: none;\n  }\n"])),16,16,16),J=r.css(b||(b=I(["\n  ",";\n\n  & > * {\n    border-bottom: none;\n  }\n\n  &:before,\n  &:after {\n    border-bottom: none;\n    transform-origin: 50% 0%;\n    transform: skewX(","rad);\n  }\n"])),G,Math.atan(2/3)),K=r.css(y||(y=I(["\n  ",";\n\n  & > * {\n    border-top: none;\n  }\n\n  &:before,\n  &:after {\n    border-top: none;\n    transform-origin: 50% 100%;\n    transform: skewX(","rad);\n  }\n"])),G,-Math.atan(2/3)),Q=r.css(g||(g=I(["\n  flex: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(100% + 2px);\n  min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n  margin-left: -","px;\n  margin-top: -1px;\n  margin-bottom: -1px;\n  padding-left: ","px;\n  padding-right: 16px;\n\n  color: ",";\n  font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: bold;\n\n  z-index: 2;\n\n  &:first-of-type {\n    margin-left: 0;\n    padding-left: 16px;\n\n    ",", "," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    padding-left: calc(","px);\n\n    ",", "," {\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"])),17,32,l.uiColors.gray.dark3,F.stepBoxTop.selector,F.stepBoxBottom.selector,48,F.stepBoxTop.selector,F.stepBoxBottom.selector),V=r.css(m||(m=I(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]))),W=r.css(h||(h=I(["\n  filter: drop-shadow(0px 4px 4px ",");\n  z-index: 3;\n\n  &:last-of-type:not(:first-of-type) {\n    ",":before {\n      transform: skewX(","rad);\n    }\n\n    ",":before {\n      transform: skewX(-","rad);\n    }\n  }\n"])),a.transparentize(.75,l.uiColors.black),F.stepBoxTop.selector,Math.atan(2/3),F.stepBoxBottom.selector,Math.atan(2/3)),Y=r.css(x||(x=I(["\n  color: ",";\n  z-index: 1;\n\n  &:last-of-type {\n    z-index: 0;\n  }\n\n  ",", "," {\n    & > *,\n    &:before,\n    &:after {\n      background: ",";\n      border-color: ",";\n    }\n  }\n"])),l.uiColors.gray.base,F.stepBoxTop.selector,F.stepBoxBottom.selector,l.uiColors.gray.light3,l.uiColors.gray.light2),Z=r.css(v||(v=I(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]))),ee=r.css(w||(w=I(["\n  left: 0;\n  transition: left 700ms;\n"]))),ne=r.css(j||(j=I(["\n  left: ","px;\n  transition: left 700ms;\n"])),-32),te=r.css(S||(S=I(["\n  position: relative;\n  height: ","px;\n  width: 100%;\n\n  background: ",";\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ",";\n"])),_,l.uiColors.gray.light3,l.uiColors.gray.light2),re=r.css(O||(O=I(["\n  display: flex;\n  position: absolute;\n\n  align-items: center;\n  justify-content: center;\n  top: calc(100% - 12px);\n\n  height: 24px;\n  min-width: 24px;\n  max-width: max-content;\n\n  font-size: 12px;\n  line-height: 14px;\n\n  border-radius: 12px;\n  border: 1px solid;\n"]))),oe=r.css(k||(k=I(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),l.uiColors.green.base,l.uiColors.green.base),ie=r.css(P||(P=I(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"])),l.uiColors.gray.dark2),ae=r.css(B||(B=I(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),l.uiColors.gray.light1,l.uiColors.gray.base),se=r.css("padding: 0 8px;"),le=r.css("cursor: pointer;"),ce=["children","state","stepLabel","isPreview","className"];function pe(e){var n,t,o=e.children,i=e.state,a=e.stepLabel,s=e.isPreview,l=e.className,p=M(e,ce),u="current"===i,f="upcoming"===i,d="completed"===i;return c.jsx("div",D({className:"".concat(r.cx(Q,(n={},z(n,W,u),z(n,Y,f),z(n,le,s),n))," ").concat(l)},p),a&&c.jsx("div",{className:r.cx(re,(t={},z(t,ie,u),z(t,oe,d),z(t,ae,f),z(t,le,s),t))},d?c.jsx(A.default,null):c.jsx("div",{className:se},a)),c.jsx("div",{className:r.cx(V,z({},le,s))},o),c.jsx("div",{className:$},c.jsx("span",D({className:J},F.stepBoxTop.prop),c.jsx("div",null)),c.jsx("span",D({className:K},F.stepBoxBottom.prop),c.jsx("div",null))))}function ue(e){var t=e.children,o=e.currentStep,i=e.maxDisplayedSteps,a=void 0===i?Array.isArray(t)?t.length:1:i,s=e.className,l=L(n.useState("current"),2),p=l[0],u=l[1],f=(Array.isArray(t)?t:[t]).map((function(e,n){var t;return t=n<o?"completed":n===o?"current":"upcoming",{"aria-label":be(e.props.children),"aria-current":o===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:t,children:e,isPreview:!1}})),d=f.length,b=ye({currentStep:o,numSteps:d,maxDisplayedSteps:a}),y=b.rangeStart,g=b.rangeEnd,m=de(f,{currentStep:o,rangeStart:y,rangeEnd:g}),h={current:m};return y>0&&(m[0].onMouseOver=function(){u("previous")},h.previous=de(f,q({currentStep:o},ye({currentStep:y-1,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return q(q({},e),{},{isPreview:!0})}))),g<d-1&&(m[m.length-1].onMouseOver=function(){u("next")},h.next=de(f,q({currentStep:o},ye({currentStep:g,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return q(q({},e),{},{isPreview:!0})}))),Object.entries(h).forEach((function(e){var n=L(e,2),t=n[0],o=n[1];o.forEach((function(e,n){var i;n<o.length-1&&(e.className=r.cx((z(i={},ee,p===t),z(i,ne,p!==t),i)))}))})),c.jsx("ol",{className:r.cx(te,s),onMouseLeave:function(){return u("current")}},Object.entries(h).map((function(e){var n=L(e,2),t=n[0],o=n[1];return c.jsx("li",{key:t,className:r.cx(U,z({},Z,p!==t))},o.map((function(e,n){return c.jsx(pe,D({key:n},e))})))})))}pe.displayName="Step",ue.displayName="Stepper",ue.propTypes={children:E.default.node.isRequired,currentStep:E.default.number.isRequired,maxDisplayedSteps:E.default.number};var fe=function(e){var n=e.children;return c.jsx(N.default.Fragment,null,n)};function de(e,n){var t=n.currentStep,r=n.rangeStart,o=n.rangeEnd,i=[];return r>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>t+1?"upcoming":"completed",children:c.jsx(C.default,null),isPreview:!0}),i.push.apply(i,R(e.slice(r,o).map((function(e){return q({},e)})))),o<e.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-o),state:"upcoming",children:c.jsx(C.default,null),isPreview:!0}),i}function be(e){return e instanceof Array?e.map((function(e){return be(e)})).join(""):e.toString()}function ye(e){var n=e.currentStep,t=e.numSteps,r=e.maxDisplayedSteps;if(t<=r)return{rangeStart:0,rangeEnd:t};if(n+1<r)return{rangeStart:0,rangeEnd:r-1};if(n>t-r)return{rangeStart:t-r+1,rangeEnd:t};var o=n-(n-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}fe.displayName="Step",fe.propTypes={children:E.default.oneOfType([E.default.string,E.default.number,E.default.arrayOf(E.default.oneOfType([E.default.string,E.default.number]))]).isRequired},e.Step=fe,e.Stepper=ue,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/lib","@leafygreen-ui/palette","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.Ellipsis,e.polished,e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.react)}(this,(function(e,n,t,r,o,i,a,s,l,c){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u,f,d,b,y,g,m,h,x,v,w,j,S,O,k,P,B,N=p(n),E=p(t),A=p(o),C=p(i);function T(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function z(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?T(Object(t),!0).forEach((function(n){q(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function q(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function D(){return(D=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function M(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function I(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function L(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,s=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(s)throw o}}return i}(e,n)||X(e,n)||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 R(e){return function(e){if(Array.isArray(e))return H(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||X(e)||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.")}()}function X(e,n){if(e){if("string"==typeof e)return H(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?H(e,n):void 0}}function H(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var _=48,F={stepBoxTop:s.createDataProp("step-box-top"),stepBoxBottom:s.createDataProp("step-box-bottom")},U=r.css(u||(u=I(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]))),$=r.css(f||(f=I(["\n  display: flex;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n\n  // Safari doesn't correctly position absolutely positioned elements inside flex containers\n  // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n  left: 0;\n  top: 0;\n"]))),G=r.css(d||(d=I(["\n  display: inline-block;\n\n  height: 50%;\n  width: 100%;\n\n  & > *,\n  &:before,\n  &:after {\n    display: inline-block;\n    height: 100%;\n    background: white;\n    border: 1px solid #dee0e3;\n  }\n\n  & > * {\n    width: calc(100% - ","px);\n    margin-right: -","px;\n    border-left: none;\n    border-right: none;\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    width: ","px;\n  }\n\n  &:before {\n    border-right: none;\n  }\n\n  &:after {\n    border-left: none;\n  }\n"])),16,16,16),J=r.css(b||(b=I(["\n  ",";\n\n  & > * {\n    border-bottom: none;\n  }\n\n  &:before,\n  &:after {\n    border-bottom: none;\n    transform-origin: 50% 0%;\n    transform: skewX(","rad);\n  }\n"])),G,Math.atan(2/3)),K=r.css(y||(y=I(["\n  ",";\n\n  & > * {\n    border-top: none;\n  }\n\n  &:before,\n  &:after {\n    border-top: none;\n    transform-origin: 50% 100%;\n    transform: skewX(","rad);\n  }\n"])),G,-Math.atan(2/3)),Q=r.css(g||(g=I(["\n  flex: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(100% + 2px);\n  min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n  margin-left: -","px;\n  margin-top: -1px;\n  margin-bottom: -1px;\n  padding-left: ","px;\n  padding-right: 16px;\n\n  color: ",";\n  font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: bold;\n\n  z-index: 2;\n\n  &:first-of-type {\n    margin-left: 0;\n    padding-left: 16px;\n\n    ",", "," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    padding-left: calc(","px);\n\n    ",", "," {\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"])),17,32,l.uiColors.gray.dark3,F.stepBoxTop.selector,F.stepBoxBottom.selector,48,F.stepBoxTop.selector,F.stepBoxBottom.selector),V=r.css(m||(m=I(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]))),W=r.css(h||(h=I(["\n  filter: drop-shadow(0px 4px 4px ",");\n  z-index: 3;\n\n  &:last-of-type:not(:first-of-type) {\n    ",":before {\n      transform: skewX(","rad);\n    }\n\n    ",":before {\n      transform: skewX(-","rad);\n    }\n  }\n"])),a.transparentize(.75,l.uiColors.black),F.stepBoxTop.selector,Math.atan(2/3),F.stepBoxBottom.selector,Math.atan(2/3)),Y=r.css(x||(x=I(["\n  color: ",";\n  z-index: 1;\n\n  &:last-of-type {\n    z-index: 0;\n  }\n\n  ",", "," {\n    & > *,\n    &:before,\n    &:after {\n      background: ",";\n      border-color: ",";\n    }\n  }\n"])),l.uiColors.gray.base,F.stepBoxTop.selector,F.stepBoxBottom.selector,l.uiColors.gray.light3,l.uiColors.gray.light2),Z=r.css(v||(v=I(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]))),ee=r.css(w||(w=I(["\n  left: 0;\n  transition: left 700ms;\n"]))),ne=r.css(j||(j=I(["\n  left: ","px;\n  transition: left 700ms;\n"])),-32),te=r.css(S||(S=I(["\n  position: relative;\n  z-index: 0;\n  height: ","px;\n  width: 100%;\n\n  background: ",";\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ",";\n"])),_,l.uiColors.gray.light3,l.uiColors.gray.light2),re=r.css(O||(O=I(["\n  display: flex;\n  position: absolute;\n\n  align-items: center;\n  justify-content: center;\n  top: calc(100% - 12px);\n\n  height: 24px;\n  min-width: 24px;\n  max-width: max-content;\n\n  font-size: 12px;\n  line-height: 14px;\n\n  border-radius: 12px;\n  border: 1px solid;\n"]))),oe=r.css(k||(k=I(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),l.uiColors.green.base,l.uiColors.green.base),ie=r.css(P||(P=I(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"])),l.uiColors.gray.dark2),ae=r.css(B||(B=I(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"])),l.uiColors.gray.light1,l.uiColors.gray.base),se=r.css("padding: 0 8px;"),le=r.css("cursor: pointer;"),ce=["children","state","stepLabel","isPreview","className"];function pe(e){var n,t,o=e.children,i=e.state,a=e.stepLabel,s=e.isPreview,l=e.className,p=M(e,ce),u="current"===i,f="upcoming"===i,d="completed"===i;return c.jsx("div",D({className:"".concat(r.cx(Q,(n={},q(n,W,u),q(n,Y,f),q(n,le,s),n))," ").concat(l)},p),a&&c.jsx("div",{className:r.cx(re,(t={},q(t,ie,u),q(t,oe,d),q(t,ae,f),q(t,le,s),t))},d?c.jsx(A.default,null):c.jsx("div",{className:se},a)),c.jsx("div",{className:r.cx(V,q({},le,s))},o),c.jsx("div",{className:$},c.jsx("span",D({className:J},F.stepBoxTop.prop),c.jsx("div",null)),c.jsx("span",D({className:K},F.stepBoxBottom.prop),c.jsx("div",null))))}function ue(e){var t=e.children,o=e.currentStep,i=e.maxDisplayedSteps,a=void 0===i?Array.isArray(t)?t.length:1:i,s=e.className,l=L(n.useState("current"),2),p=l[0],u=l[1],f=(Array.isArray(t)?t:[t]).map((function(e,n){var t;return t=n<o?"completed":n===o?"current":"upcoming",{"aria-label":be(e.props.children),"aria-current":o===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:t,children:e,isPreview:!1}})),d=f.length,b=ye({currentStep:o,numSteps:d,maxDisplayedSteps:a}),y=b.rangeStart,g=b.rangeEnd,m=de(f,{currentStep:o,rangeStart:y,rangeEnd:g}),h={current:m};return y>0&&(m[0].onMouseOver=function(){u("previous")},h.previous=de(f,z({currentStep:o},ye({currentStep:y-1,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return z(z({},e),{},{isPreview:!0})}))),g<d-1&&(m[m.length-1].onMouseOver=function(){u("next")},h.next=de(f,z({currentStep:o},ye({currentStep:g,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return z(z({},e),{},{isPreview:!0})}))),Object.entries(h).forEach((function(e){var n=L(e,2),t=n[0],o=n[1];o.forEach((function(e,n){var i;n<o.length-1&&(e.className=r.cx((q(i={},ee,p===t),q(i,ne,p!==t),i)))}))})),c.jsx("ol",{className:r.cx(te,s),onMouseLeave:function(){return u("current")}},Object.entries(h).map((function(e){var n=L(e,2),t=n[0],o=n[1];return c.jsx("li",{key:t,className:r.cx(U,q({},Z,p!==t))},o.map((function(e,n){return c.jsx(pe,D({key:n},e))})))})))}pe.displayName="Step",ue.displayName="Stepper",ue.propTypes={children:E.default.node.isRequired,currentStep:E.default.number.isRequired,maxDisplayedSteps:E.default.number};var fe=function(e){var n=e.children;return c.jsx(N.default.Fragment,null,n)};function de(e,n){var t=n.currentStep,r=n.rangeStart,o=n.rangeEnd,i=[];return r>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>t+1?"upcoming":"completed",children:c.jsx(C.default,null),isPreview:!0}),i.push.apply(i,R(e.slice(r,o).map((function(e){return z({},e)})))),o<e.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-o),state:"upcoming",children:c.jsx(C.default,null),isPreview:!0}),i}function be(e){return e instanceof Array?e.map((function(e){return be(e)})).join(""):e.toString()}function ye(e){var n=e.currentStep,t=e.numSteps,r=e.maxDisplayedSteps;if(t<=r)return{rangeStart:0,rangeEnd:t};if(n+1<r)return{rangeStart:0,rangeEnd:r-1};if(n>t-r)return{rangeStart:t-r+1,rangeEnd:t};var o=n-(n-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}fe.displayName="Step",fe.propTypes={children:E.default.oneOfType([E.default.string,E.default.number,E.default.arrayOf(E.default.oneOfType([E.default.string,E.default.number]))]).isRequired},e.Step=fe,e.Stepper=ue,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/stepper",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "leafyGreen UI Kit Stepper",
@@ -25,3 +25,3 @@ "main": "./dist/index.js",
     "@leafygreen-ui/icon": "^11.6.0",
-    "@leafygreen-ui/lib": "^9.0.1",
+    "@leafygreen-ui/lib": "^9.1.0",
     "@leafygreen-ui/palette": "^3.2.2",
@@ -28,0 +28,0 @@ "polished": "^4.1.3"

src/styles.ts

@@ -205,2 +205,3 @@ import { transparentize } from 'polished';
   position: relative;
+  z-index: 0;
   height: ${stepperHeight}px;
@@ -207,0 +208,0 @@ width: 100%;

No alert changes

Improved metrics

Total package byte prevSize

313767

increased by0.4%

Lines of code

1004

increased by0.1%

Dependency changes

• Updated@leafygreen-ui/lib@^9.1.0