@leafygreen-ui/stepper - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

 # @leafygreen-ui/stepper
 
+## 1.0.1
+
+### Patch Changes
+
+- 67e9e0d: Added some visual design tweaks
+- Updated dependencies [2eba736]
+- Updated dependencies [1aa26ee]
+- Updated dependencies [d2136a0]
+- Updated dependencies [a571361]
+  - @leafygreen-ui/lib@5.0.0
+  - @leafygreen-ui/icon@6.3.0
+
 ## 1.0.0
@@ -4,0 +16,0 @@

dist/index.node.js

@@ -1,2 +0,2 @@
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["@leafygreen-ui/emotion","react","prop-types","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/palette"],n);else{var t="object"==typeof exports?n(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/palette")):n(e["@leafygreen-ui/emotion"],e.react,e["prop-types"],e["@leafygreen-ui/icon/dist/Checkmark"],e["@leafygreen-ui/icon/dist/Ellipsis"],e.polished,e["@leafygreen-ui/palette"]);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(global,(function(e,n,t,r,o,i,a){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(n,t){n.exports=e},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"Step",{enumerable:!0,get:function(){return r.Step}}),Object.defineProperty(n,"Stepper",{enumerable:!0,get:function(){return r.Stepper}});var r=t(2)},function(e,n,t){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(n,"__esModule",{value:!0}),n.Stepper=O,n.Step=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var n=p();if(n&&n.has(e))return n.get(e);var t={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(t,i,a):t[i]=e[i]}t.default=e,n&&n.set(e,t);return t}(t(3)),i=s(t(4)),a=t(0),l=s(t(5)),u=s(t(6)),c=t(7);function s(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function f(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||m(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 d(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 y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?d(Object(t),!0).forEach((function(n){v(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):d(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function b(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(t.push(a.value),!n||t.length!==n);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return t}(e,n)||m(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 m(e,n){if(e){if("string"==typeof e)return S(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(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?S(e,n):void 0}}function S(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}function g(){return(g=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 v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function h(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 x(e){var n,t,r=e.children,i=e.state,u=e.stepLabel,s=e.className,p=h(e,["children","state","stepLabel","className"]),f="current"===i,d="upcoming"===i,y="completed"===i;return o.default.createElement("div",g({className:(0,a.cx)(c.stepStyle,(n={},v(n,c.currentStepStyle,f),v(n,c.upcomingStepStyle,d),n),s)},p),u&&o.default.createElement("div",{className:(0,a.cx)(c.stepLabelStyle,(t={},v(t,c.currentStepLabelStyle,f),v(t,c.completedStepLabelStyle,y),v(t,c.upcomingStepLabelStyle,d),t))},y?o.default.createElement(l.default,null):o.default.createElement("div",{className:c.stepLabelTextStyle},u)),r,o.default.createElement("div",{className:c.stepBoxStyle},o.default.createElement("span",{className:c.stepBoxTopStyle},o.default.createElement("div",null)),o.default.createElement("span",{className:c.stepBoxBottomStyle},o.default.createElement("div",null))))}function O(e){var n=e.children,t=e.currentStep,r=e.maxDisplayedSteps,i=void 0===r?Array.isArray(n)?n.length:1:r,l=b((0,o.useState)("current"),2),u=l[0],s=l[1],p=(Array.isArray(n)?n:[n]).map((function(e,n){var r;return r=n<t?"completed":n===t?"current":"upcoming",{"aria-label":E(e.props.children),"aria-current":t===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:r,children:e}})),f=p.length,d=k({currentStep:t,numSteps:f,maxDisplayedSteps:i}),m=d.rangeStart,S=d.rangeEnd,h=w(p,{currentStep:t,rangeStart:m,rangeEnd:S}),O={current:h};return m>0&&(h[0].onMouseOver=function(){s("previous")},O.previous=w(p,y({currentStep:t},k({currentStep:m-1,numSteps:f,maxDisplayedSteps:i})))),S<f-1&&(h[h.length-1].onMouseOver=function(){s("next")},O.next=w(p,y({currentStep:t},k({currentStep:S,numSteps:f,maxDisplayedSteps:i})))),Object.entries(O).forEach((function(e){var n=b(e,2),t=n[0],r=n[1];r.forEach((function(e,n){var o;n<r.length-1&&(e.className=(0,a.cx)((v(o={},c.slideInAnimationStyle,u===t),v(o,c.slideOutAnimationStyle,u!==t),o)))}))})),o.default.createElement("ol",{className:c.containerStyle,onMouseLeave:function(){return s("current")}},Object.entries(O).map((function(e){var n=b(e,2),t=n[0],r=n[1];return o.default.createElement("li",{key:t,className:(0,a.cx)(c.layerStyle,v({},c.hiddenLayerStyle,u!==t))},r.map((function(e,n){return o.default.createElement(x,g({key:n},e))})))})))}x.displayName="Step",O.displayName="Stepper",O.propTypes={children:i.default.node.isRequired,currentStep:i.default.number.isRequired,maxDisplayedSteps:i.default.number};var j=function(e){var n=e.children;return o.default.createElement(o.default.Fragment,null,n)};function w(e,n){var t=n.currentStep,r=n.rangeStart,i=n.rangeEnd,a=[];return r>0&&a.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>t+1?"upcoming":"completed",children:o.default.createElement(u.default,null)}),a.push.apply(a,f(e.slice(r,i).map((function(e){return y({},e)})))),i<e.length&&a.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:o.default.createElement(u.default,null)}),a}function E(e){return e instanceof Array?e.map((function(e){return E(e)})).join(""):e.toString()}function k(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}}n.Step=j,j.displayName="Step",j.propTypes={children:i.default.oneOfType([i.default.string,i.default.number,i.default.arrayOf(i.default.oneOfType([i.default.string,i.default.number]))]).isRequired}},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n){e.exports=r},function(e,n){e.exports=o},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.stepLabelTextStyle=n.upcomingStepLabelStyle=n.currentStepLabelStyle=n.completedStepLabelStyle=n.stepLabelStyle=n.containerStyle=n.slideOutAnimationStyle=n.slideInAnimationStyle=n.hiddenLayerStyle=n.upcomingStepStyle=n.currentStepStyle=n.stepStyle=n.stepBoxBottomStyle=n.stepBoxTopStyle=n.stepBoxStyle=n.layerStyle=void 0;var r=t(8),o=t(0),i=t(9);function a(){var e=O(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return a=function(){return e},e}function l(){var e=O(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"]);return l=function(){return e},e}function u(){var e=O(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return u=function(){return e},e}function c(){var e=O(["\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"]);return c=function(){return e},e}function s(){var e=O(["\n  position: relative;\n  height: ","px;\n  width: 100%;\n"]);return s=function(){return e},e}function p(){var e=O(["\n  left: -30px;\n  transition: left 700ms;\n"]);return p=function(){return e},e}function f(){var e=O(["\n  left: 0;\n  transition: left 700ms;\n"]);return f=function(){return e},e}function d(){var e=O(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]);return d=function(){return e},e}function y(){var e=O(["\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"]);return y=function(){return e},e}function b(){var e=O(["\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"]);return b=function(){return e},e}function m(){var e=O(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  margin-left: -","px;\n\n  color: ",";\n\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    .",", ."," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    .",", ."," {\n      &:before,\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"]);return m=function(){return e},e}function S(){var e=O(["\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"]);return S=function(){return e},e}function g(){var e=O(["\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"]);return g=function(){return e},e}function v(){var e=O(["\n  display: inline-block;\n\n  height: 50%;\n  width: calc(100% - ","px);\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"]);return v=function(){return e},e}function h(){var e=O(["\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"]);return h=function(){return e},e}function x(){var e=O(["\n  display: flex;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]);return x=function(){return e},e}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var j=(0,o.css)(x());n.layerStyle=j;var w=(0,o.css)(h());n.stepBoxStyle=w;var E=(0,o.css)(v(),46/3,46/3,46/3,46/3),k=(0,o.css)(g(),E,Math.atan(2/3));n.stepBoxTopStyle=k;var P=(0,o.css)(S(),E,-Math.atan(2/3));n.stepBoxBottomStyle=P;var L=(0,o.css)(m(),46/3+1,i.uiColors.gray.dark3,k,P,k,P);n.stepStyle=L;var A=(0,o.css)(b(),(0,r.transparentize)(.7,i.uiColors.black),k,Math.atan(2/3),P,Math.atan(2/3));n.currentStepStyle=A;var M=(0,o.css)(y(),i.uiColors.gray.base,k,P,i.uiColors.gray.light3,i.uiColors.gray.light2);n.upcomingStepStyle=M;var q=(0,o.css)(d());n.hiddenLayerStyle=q;var N=(0,o.css)(f());n.slideInAnimationStyle=N;var _=(0,o.css)(p());n.slideOutAnimationStyle=_;var C=(0,o.css)(s(),46);n.containerStyle=C;var T=(0,o.css)(c());n.stepLabelStyle=T;var z=(0,o.css)(u(),i.uiColors.green.base,i.uiColors.green.base);n.completedStepLabelStyle=z;var B=(0,o.css)(l(),i.uiColors.gray.dark2);n.currentStepLabelStyle=B;var D=(0,o.css)(a(),i.uiColors.gray.light1,i.uiColors.gray.base);n.upcomingStepLabelStyle=D;var I=(0,o.css)("padding: 0 8px;");n.stepLabelTextStyle=I},function(e,n){e.exports=i},function(e,n){e.exports=a}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["@leafygreen-ui/emotion","react","prop-types","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/lib","@leafygreen-ui/palette"],t);else{var n="object"==typeof exports?t(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):t(e["@leafygreen-ui/emotion"],e.react,e["prop-types"],e["@leafygreen-ui/icon/dist/Checkmark"],e["@leafygreen-ui/icon/dist/Ellipsis"],e.polished,e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(global,(function(e,t,n,r,o,i,a,l){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Step",{enumerable:!0,get:function(){return r.Step}}),Object.defineProperty(t,"Stepper",{enumerable:!0,get:function(){return r.Stepper}});var r=n(2)},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Stepper=O,t.Step=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=p();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(3)),i=s(n(4)),a=n(0),l=s(n(5)),u=s(n(6)),c=n(7);function s(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function f(e){return function(e){if(Array.isArray(e))return g(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||m(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 d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||m(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 m(e,t){if(e){if("string"==typeof e)return g(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(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function g(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}function S(){return(S=Object.assign||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}).apply(this,arguments)}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}function h(e){var t,n,r=e.children,i=e.state,u=e.stepLabel,s=e.isPreview,p=e.className,f=x(e,["children","state","stepLabel","isPreview","className"]),d="current"===i,y="upcoming"===i,b="completed"===i;return o.default.createElement("div",S({className:"".concat((0,a.cx)(c.stepStyle,(t={},v(t,c.currentStepStyle,d),v(t,c.upcomingStepStyle,y),v(t,c.previewStyle,s),t))," ").concat(p)},f),u&&o.default.createElement("div",{className:(0,a.cx)(c.stepLabelStyle,(n={},v(n,c.currentStepLabelStyle,d),v(n,c.completedStepLabelStyle,b),v(n,c.upcomingStepLabelStyle,y),v(n,c.previewStyle,s),n))},b?o.default.createElement(l.default,null):o.default.createElement("div",{className:c.stepLabelTextStyle},u)),o.default.createElement("div",{className:(0,a.cx)(c.stepTextStyle,v({},c.previewStyle,s))},r),o.default.createElement("div",{className:c.stepBoxStyle},o.default.createElement("span",S({className:c.stepBoxTopStyle},c.dataProps.stepBoxTop.prop),o.default.createElement("div",null)),o.default.createElement("span",S({className:c.stepBoxBottomStyle},c.dataProps.stepBoxBottom.prop),o.default.createElement("div",null))))}function O(e){var t=e.children,n=e.currentStep,r=e.maxDisplayedSteps,i=void 0===r?Array.isArray(t)?t.length:1:r,l=b((0,o.useState)("current"),2),u=l[0],s=l[1],p=(Array.isArray(t)?t:[t]).map((function(e,t){var r;return r=t<n?"completed":t===n?"current":"upcoming",{"aria-label":P(e.props.children),"aria-current":n===t?"step":void 0,step:t,stepLabel:(t+1).toString(),state:r,children:e,isPreview:!1}})),f=p.length,d=E({currentStep:n,numSteps:f,maxDisplayedSteps:i}),m=d.rangeStart,g=d.rangeEnd,x=j(p,{currentStep:n,rangeStart:m,rangeEnd:g}),O={current:x};return m>0&&(x[0].onMouseOver=function(){s("previous")},O.previous=j(p,y({currentStep:n},E({currentStep:m-1,numSteps:f,maxDisplayedSteps:i}))).map((function(e){return y({},e,{isPreview:!0})}))),g<f-1&&(x[x.length-1].onMouseOver=function(){s("next")},O.next=j(p,y({currentStep:n},E({currentStep:g,numSteps:f,maxDisplayedSteps:i}))).map((function(e){return y({},e,{isPreview:!0})}))),Object.entries(O).forEach((function(e){var t=b(e,2),n=t[0],r=t[1];r.forEach((function(e,t){var o;t<r.length-1&&(e.className=(0,a.cx)((v(o={},c.slideInAnimationStyle,u===n),v(o,c.slideOutAnimationStyle,u!==n),o)))}))})),o.default.createElement("ol",{className:c.containerStyle,onMouseLeave:function(){return s("current")}},Object.entries(O).map((function(e){var t=b(e,2),n=t[0],r=t[1];return o.default.createElement("li",{key:n,className:(0,a.cx)(c.layerStyle,v({},c.hiddenLayerStyle,u!==n))},r.map((function(e,t){return o.default.createElement(h,S({key:t},e))})))})))}h.displayName="Step",O.displayName="Stepper",O.propTypes={children:i.default.node.isRequired,currentStep:i.default.number.isRequired,maxDisplayedSteps:i.default.number};var w=function(e){var t=e.children;return o.default.createElement(o.default.Fragment,null,t)};function j(e,t){var n=t.currentStep,r=t.rangeStart,i=t.rangeEnd,a=[];return r>0&&a.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>n+1?"upcoming":"completed",children:o.default.createElement(u.default,null),isPreview:!0}),a.push.apply(a,f(e.slice(r,i).map((function(e){return y({},e)})))),i<e.length&&a.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:o.default.createElement(u.default,null),isPreview:!0}),a}function P(e){return e instanceof Array?e.map((function(e){return P(e)})).join(""):e.toString()}function E(e){var t=e.currentStep,n=e.numSteps,r=e.maxDisplayedSteps;if(n<=r)return{rangeStart:0,rangeEnd:n};if(t+1<r)return{rangeStart:0,rangeEnd:r-1};if(t>n-r)return{rangeStart:n-r+1,rangeEnd:n};var o=t-(t-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}t.Step=w,w.displayName="Step",w.propTypes={children:i.default.oneOfType([i.default.string,i.default.number,i.default.arrayOf(i.default.oneOfType([i.default.string,i.default.number]))]).isRequired}},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.previewStyle=t.stepLabelTextStyle=t.upcomingStepLabelStyle=t.currentStepLabelStyle=t.completedStepLabelStyle=t.stepLabelStyle=t.containerStyle=t.slideOutAnimationStyle=t.slideInAnimationStyle=t.hiddenLayerStyle=t.upcomingStepStyle=t.currentStepStyle=t.stepTextStyle=t.stepStyle=t.stepBoxBottomStyle=t.stepBoxTopStyle=t.stepBoxStyle=t.layerStyle=t.dataProps=void 0;var r=n(8),o=n(0),i=n(9),a=n(10);function l(){var e=j(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return l=function(){return e},e}function u(){var e=j(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"]);return u=function(){return e},e}function c(){var e=j(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return c=function(){return e},e}function s(){var e=j(["\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"]);return s=function(){return e},e}function p(){var e=j(["\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"]);return p=function(){return e},e}function f(){var e=j(["\n  left: ","px;\n  transition: left 700ms;\n"]);return f=function(){return e},e}function d(){var e=j(["\n  left: 0;\n  transition: left 700ms;\n"]);return d=function(){return e},e}function y(){var e=j(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]);return y=function(){return e},e}function b(){var e=j(["\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"]);return b=function(){return e},e}function m(){var e=j(["\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"]);return m=function(){return e},e}function g(){var e=j(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]);return g=function(){return e},e}function S(){var e=j(["\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"]);return S=function(){return e},e}function v(){var e=j(["\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"]);return v=function(){return e},e}function x(){var e=j(["\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"]);return x=function(){return e},e}function h(){var e=j(["\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"]);return h=function(){return e},e}function O(){var e=j(["\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"]);return O=function(){return e},e}function w(){var e=j(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]);return w=function(){return e},e}function j(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var P={stepBoxTop:(0,i.createDataProp)("step-box-top"),stepBoxBottom:(0,i.createDataProp)("step-box-bottom")};t.dataProps=P;var E=(0,o.css)(w());t.layerStyle=E;var k=(0,o.css)(O());t.stepBoxStyle=k;var B=(0,o.css)(h(),16,16,16),L=(0,o.css)(x(),B,Math.atan(2/3));t.stepBoxTopStyle=L;var T=(0,o.css)(v(),B,-Math.atan(2/3));t.stepBoxBottomStyle=T;var A=(0,o.css)(S(),17,32,a.uiColors.gray.dark3,P.stepBoxTop.selector,P.stepBoxBottom.selector,48,P.stepBoxTop.selector,P.stepBoxBottom.selector);t.stepStyle=A;var q=(0,o.css)(g());t.stepTextStyle=q;var M=(0,o.css)(m(),(0,r.transparentize)(.75,a.uiColors.black),P.stepBoxTop.selector,Math.atan(2/3),P.stepBoxBottom.selector,Math.atan(2/3));t.currentStepStyle=M;var C=(0,o.css)(b(),a.uiColors.gray.base,P.stepBoxTop.selector,P.stepBoxBottom.selector,a.uiColors.gray.light3,a.uiColors.gray.light2);t.upcomingStepStyle=C;var N=(0,o.css)(y());t.hiddenLayerStyle=N;var _=(0,o.css)(d());t.slideInAnimationStyle=_;var D=(0,o.css)(f(),-32);t.slideOutAnimationStyle=D;var z=(0,o.css)(p(),48,a.uiColors.gray.light3,a.uiColors.gray.light2);t.containerStyle=z;var I=(0,o.css)(s());t.stepLabelStyle=I;var X=(0,o.css)(c(),a.uiColors.green.base,a.uiColors.green.base);t.completedStepLabelStyle=X;var R=(0,o.css)(u(),a.uiColors.gray.dark2);t.currentStepLabelStyle=R;var H=(0,o.css)(l(),a.uiColors.gray.light1,a.uiColors.gray.base);t.upcomingStepLabelStyle=H;var W=(0,o.css)("padding: 0 8px;");t.stepLabelTextStyle=W;var F=(0,o.css)("cursor: pointer;");t.previewStyle=F},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t){e.exports=l}])}));
 //# sourceMappingURL=index.node.js.map

dist/index.web.js

@@ -1,2 +0,2 @@
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["@leafygreen-ui/emotion","react","prop-types","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/palette"],n);else{var t="object"==typeof exports?n(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/palette")):n(e["@leafygreen-ui/emotion"],e.react,e["prop-types"],e["@leafygreen-ui/icon/dist/Checkmark"],e["@leafygreen-ui/icon/dist/Ellipsis"],e.polished,e["@leafygreen-ui/palette"]);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(window,(function(e,n,t,r,o,i,a){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(n,t){n.exports=e},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"Step",{enumerable:!0,get:function(){return r.Step}}),Object.defineProperty(n,"Stepper",{enumerable:!0,get:function(){return r.Stepper}});var r=t(2)},function(e,n,t){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(n,"__esModule",{value:!0}),n.Stepper=O,n.Step=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var n=p();if(n&&n.has(e))return n.get(e);var t={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(t,i,a):t[i]=e[i]}t.default=e,n&&n.set(e,t);return t}(t(3)),i=s(t(4)),a=t(0),l=s(t(5)),u=s(t(6)),c=t(7);function s(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function f(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||m(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 d(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 y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?d(Object(t),!0).forEach((function(n){v(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):d(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function b(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(t.push(a.value),!n||t.length!==n);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return t}(e,n)||m(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 m(e,n){if(e){if("string"==typeof e)return S(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(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?S(e,n):void 0}}function S(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}function g(){return(g=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 v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function h(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 x(e){var n,t,r=e.children,i=e.state,u=e.stepLabel,s=e.className,p=h(e,["children","state","stepLabel","className"]),f="current"===i,d="upcoming"===i,y="completed"===i;return o.default.createElement("div",g({className:(0,a.cx)(c.stepStyle,(n={},v(n,c.currentStepStyle,f),v(n,c.upcomingStepStyle,d),n),s)},p),u&&o.default.createElement("div",{className:(0,a.cx)(c.stepLabelStyle,(t={},v(t,c.currentStepLabelStyle,f),v(t,c.completedStepLabelStyle,y),v(t,c.upcomingStepLabelStyle,d),t))},y?o.default.createElement(l.default,null):o.default.createElement("div",{className:c.stepLabelTextStyle},u)),r,o.default.createElement("div",{className:c.stepBoxStyle},o.default.createElement("span",{className:c.stepBoxTopStyle},o.default.createElement("div",null)),o.default.createElement("span",{className:c.stepBoxBottomStyle},o.default.createElement("div",null))))}function O(e){var n=e.children,t=e.currentStep,r=e.maxDisplayedSteps,i=void 0===r?Array.isArray(n)?n.length:1:r,l=b((0,o.useState)("current"),2),u=l[0],s=l[1],p=(Array.isArray(n)?n:[n]).map((function(e,n){var r;return r=n<t?"completed":n===t?"current":"upcoming",{"aria-label":E(e.props.children),"aria-current":t===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:r,children:e}})),f=p.length,d=k({currentStep:t,numSteps:f,maxDisplayedSteps:i}),m=d.rangeStart,S=d.rangeEnd,h=w(p,{currentStep:t,rangeStart:m,rangeEnd:S}),O={current:h};return m>0&&(h[0].onMouseOver=function(){s("previous")},O.previous=w(p,y({currentStep:t},k({currentStep:m-1,numSteps:f,maxDisplayedSteps:i})))),S<f-1&&(h[h.length-1].onMouseOver=function(){s("next")},O.next=w(p,y({currentStep:t},k({currentStep:S,numSteps:f,maxDisplayedSteps:i})))),Object.entries(O).forEach((function(e){var n=b(e,2),t=n[0],r=n[1];r.forEach((function(e,n){var o;n<r.length-1&&(e.className=(0,a.cx)((v(o={},c.slideInAnimationStyle,u===t),v(o,c.slideOutAnimationStyle,u!==t),o)))}))})),o.default.createElement("ol",{className:c.containerStyle,onMouseLeave:function(){return s("current")}},Object.entries(O).map((function(e){var n=b(e,2),t=n[0],r=n[1];return o.default.createElement("li",{key:t,className:(0,a.cx)(c.layerStyle,v({},c.hiddenLayerStyle,u!==t))},r.map((function(e,n){return o.default.createElement(x,g({key:n},e))})))})))}x.displayName="Step",O.displayName="Stepper",O.propTypes={children:i.default.node.isRequired,currentStep:i.default.number.isRequired,maxDisplayedSteps:i.default.number};var j=function(e){var n=e.children;return o.default.createElement(o.default.Fragment,null,n)};function w(e,n){var t=n.currentStep,r=n.rangeStart,i=n.rangeEnd,a=[];return r>0&&a.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>t+1?"upcoming":"completed",children:o.default.createElement(u.default,null)}),a.push.apply(a,f(e.slice(r,i).map((function(e){return y({},e)})))),i<e.length&&a.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:o.default.createElement(u.default,null)}),a}function E(e){return e instanceof Array?e.map((function(e){return E(e)})).join(""):e.toString()}function k(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}}n.Step=j,j.displayName="Step",j.propTypes={children:i.default.oneOfType([i.default.string,i.default.number,i.default.arrayOf(i.default.oneOfType([i.default.string,i.default.number]))]).isRequired}},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n){e.exports=r},function(e,n){e.exports=o},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.stepLabelTextStyle=n.upcomingStepLabelStyle=n.currentStepLabelStyle=n.completedStepLabelStyle=n.stepLabelStyle=n.containerStyle=n.slideOutAnimationStyle=n.slideInAnimationStyle=n.hiddenLayerStyle=n.upcomingStepStyle=n.currentStepStyle=n.stepStyle=n.stepBoxBottomStyle=n.stepBoxTopStyle=n.stepBoxStyle=n.layerStyle=void 0;var r=t(8),o=t(0),i=t(9);function a(){var e=O(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return a=function(){return e},e}function l(){var e=O(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"]);return l=function(){return e},e}function u(){var e=O(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return u=function(){return e},e}function c(){var e=O(["\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"]);return c=function(){return e},e}function s(){var e=O(["\n  position: relative;\n  height: ","px;\n  width: 100%;\n"]);return s=function(){return e},e}function p(){var e=O(["\n  left: -30px;\n  transition: left 700ms;\n"]);return p=function(){return e},e}function f(){var e=O(["\n  left: 0;\n  transition: left 700ms;\n"]);return f=function(){return e},e}function d(){var e=O(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]);return d=function(){return e},e}function y(){var e=O(["\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"]);return y=function(){return e},e}function b(){var e=O(["\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"]);return b=function(){return e},e}function m(){var e=O(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  margin-left: -","px;\n\n  color: ",";\n\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    .",", ."," {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    .",", ."," {\n      &:before,\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"]);return m=function(){return e},e}function S(){var e=O(["\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"]);return S=function(){return e},e}function g(){var e=O(["\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"]);return g=function(){return e},e}function v(){var e=O(["\n  display: inline-block;\n\n  height: 50%;\n  width: calc(100% - ","px);\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"]);return v=function(){return e},e}function h(){var e=O(["\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"]);return h=function(){return e},e}function x(){var e=O(["\n  display: flex;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]);return x=function(){return e},e}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var j=(0,o.css)(x());n.layerStyle=j;var w=(0,o.css)(h());n.stepBoxStyle=w;var E=(0,o.css)(v(),46/3,46/3,46/3,46/3),k=(0,o.css)(g(),E,Math.atan(2/3));n.stepBoxTopStyle=k;var P=(0,o.css)(S(),E,-Math.atan(2/3));n.stepBoxBottomStyle=P;var L=(0,o.css)(m(),46/3+1,i.uiColors.gray.dark3,k,P,k,P);n.stepStyle=L;var A=(0,o.css)(b(),(0,r.transparentize)(.7,i.uiColors.black),k,Math.atan(2/3),P,Math.atan(2/3));n.currentStepStyle=A;var M=(0,o.css)(y(),i.uiColors.gray.base,k,P,i.uiColors.gray.light3,i.uiColors.gray.light2);n.upcomingStepStyle=M;var q=(0,o.css)(d());n.hiddenLayerStyle=q;var N=(0,o.css)(f());n.slideInAnimationStyle=N;var _=(0,o.css)(p());n.slideOutAnimationStyle=_;var C=(0,o.css)(s(),46);n.containerStyle=C;var T=(0,o.css)(c());n.stepLabelStyle=T;var z=(0,o.css)(u(),i.uiColors.green.base,i.uiColors.green.base);n.completedStepLabelStyle=z;var B=(0,o.css)(l(),i.uiColors.gray.dark2);n.currentStepLabelStyle=B;var D=(0,o.css)(a(),i.uiColors.gray.light1,i.uiColors.gray.base);n.upcomingStepLabelStyle=D;var I=(0,o.css)("padding: 0 8px;");n.stepLabelTextStyle=I},function(e,n){e.exports=i},function(e,n){e.exports=a}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["@leafygreen-ui/emotion","react","prop-types","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/lib","@leafygreen-ui/palette"],t);else{var n="object"==typeof exports?t(require("@leafygreen-ui/emotion"),require("react"),require("prop-types"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):t(e["@leafygreen-ui/emotion"],e.react,e["prop-types"],e["@leafygreen-ui/icon/dist/Checkmark"],e["@leafygreen-ui/icon/dist/Ellipsis"],e.polished,e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e,t,n,r,o,i,a,l){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Step",{enumerable:!0,get:function(){return r.Step}}),Object.defineProperty(t,"Stepper",{enumerable:!0,get:function(){return r.Stepper}});var r=n(2)},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Stepper=O,t.Step=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=p();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(3)),i=s(n(4)),a=n(0),l=s(n(5)),u=s(n(6)),c=n(7);function s(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function f(e){return function(e){if(Array.isArray(e))return g(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||m(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 d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||m(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 m(e,t){if(e){if("string"==typeof e)return g(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(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function g(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}function S(){return(S=Object.assign||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}).apply(this,arguments)}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}function h(e){var t,n,r=e.children,i=e.state,u=e.stepLabel,s=e.isPreview,p=e.className,f=x(e,["children","state","stepLabel","isPreview","className"]),d="current"===i,y="upcoming"===i,b="completed"===i;return o.default.createElement("div",S({className:"".concat((0,a.cx)(c.stepStyle,(t={},v(t,c.currentStepStyle,d),v(t,c.upcomingStepStyle,y),v(t,c.previewStyle,s),t))," ").concat(p)},f),u&&o.default.createElement("div",{className:(0,a.cx)(c.stepLabelStyle,(n={},v(n,c.currentStepLabelStyle,d),v(n,c.completedStepLabelStyle,b),v(n,c.upcomingStepLabelStyle,y),v(n,c.previewStyle,s),n))},b?o.default.createElement(l.default,null):o.default.createElement("div",{className:c.stepLabelTextStyle},u)),o.default.createElement("div",{className:(0,a.cx)(c.stepTextStyle,v({},c.previewStyle,s))},r),o.default.createElement("div",{className:c.stepBoxStyle},o.default.createElement("span",S({className:c.stepBoxTopStyle},c.dataProps.stepBoxTop.prop),o.default.createElement("div",null)),o.default.createElement("span",S({className:c.stepBoxBottomStyle},c.dataProps.stepBoxBottom.prop),o.default.createElement("div",null))))}function O(e){var t=e.children,n=e.currentStep,r=e.maxDisplayedSteps,i=void 0===r?Array.isArray(t)?t.length:1:r,l=b((0,o.useState)("current"),2),u=l[0],s=l[1],p=(Array.isArray(t)?t:[t]).map((function(e,t){var r;return r=t<n?"completed":t===n?"current":"upcoming",{"aria-label":P(e.props.children),"aria-current":n===t?"step":void 0,step:t,stepLabel:(t+1).toString(),state:r,children:e,isPreview:!1}})),f=p.length,d=E({currentStep:n,numSteps:f,maxDisplayedSteps:i}),m=d.rangeStart,g=d.rangeEnd,x=j(p,{currentStep:n,rangeStart:m,rangeEnd:g}),O={current:x};return m>0&&(x[0].onMouseOver=function(){s("previous")},O.previous=j(p,y({currentStep:n},E({currentStep:m-1,numSteps:f,maxDisplayedSteps:i}))).map((function(e){return y({},e,{isPreview:!0})}))),g<f-1&&(x[x.length-1].onMouseOver=function(){s("next")},O.next=j(p,y({currentStep:n},E({currentStep:g,numSteps:f,maxDisplayedSteps:i}))).map((function(e){return y({},e,{isPreview:!0})}))),Object.entries(O).forEach((function(e){var t=b(e,2),n=t[0],r=t[1];r.forEach((function(e,t){var o;t<r.length-1&&(e.className=(0,a.cx)((v(o={},c.slideInAnimationStyle,u===n),v(o,c.slideOutAnimationStyle,u!==n),o)))}))})),o.default.createElement("ol",{className:c.containerStyle,onMouseLeave:function(){return s("current")}},Object.entries(O).map((function(e){var t=b(e,2),n=t[0],r=t[1];return o.default.createElement("li",{key:n,className:(0,a.cx)(c.layerStyle,v({},c.hiddenLayerStyle,u!==n))},r.map((function(e,t){return o.default.createElement(h,S({key:t},e))})))})))}h.displayName="Step",O.displayName="Stepper",O.propTypes={children:i.default.node.isRequired,currentStep:i.default.number.isRequired,maxDisplayedSteps:i.default.number};var w=function(e){var t=e.children;return o.default.createElement(o.default.Fragment,null,t)};function j(e,t){var n=t.currentStep,r=t.rangeStart,i=t.rangeEnd,a=[];return r>0&&a.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>n+1?"upcoming":"completed",children:o.default.createElement(u.default,null),isPreview:!0}),a.push.apply(a,f(e.slice(r,i).map((function(e){return y({},e)})))),i<e.length&&a.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:o.default.createElement(u.default,null),isPreview:!0}),a}function P(e){return e instanceof Array?e.map((function(e){return P(e)})).join(""):e.toString()}function E(e){var t=e.currentStep,n=e.numSteps,r=e.maxDisplayedSteps;if(n<=r)return{rangeStart:0,rangeEnd:n};if(t+1<r)return{rangeStart:0,rangeEnd:r-1};if(t>n-r)return{rangeStart:n-r+1,rangeEnd:n};var o=t-(t-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}t.Step=w,w.displayName="Step",w.propTypes={children:i.default.oneOfType([i.default.string,i.default.number,i.default.arrayOf(i.default.oneOfType([i.default.string,i.default.number]))]).isRequired}},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.previewStyle=t.stepLabelTextStyle=t.upcomingStepLabelStyle=t.currentStepLabelStyle=t.completedStepLabelStyle=t.stepLabelStyle=t.containerStyle=t.slideOutAnimationStyle=t.slideInAnimationStyle=t.hiddenLayerStyle=t.upcomingStepStyle=t.currentStepStyle=t.stepTextStyle=t.stepStyle=t.stepBoxBottomStyle=t.stepBoxTopStyle=t.stepBoxStyle=t.layerStyle=t.dataProps=void 0;var r=n(8),o=n(0),i=n(9),a=n(10);function l(){var e=j(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return l=function(){return e},e}function u(){var e=j(["\n  background-color: ",";\n  border-color: #464c4f;\n  color: white;\n"]);return u=function(){return e},e}function c(){var e=j(["\n  background-color: white;\n  border-color: ",";\n  color: ",";\n"]);return c=function(){return e},e}function s(){var e=j(["\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"]);return s=function(){return e},e}function p(){var e=j(["\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"]);return p=function(){return e},e}function f(){var e=j(["\n  left: ","px;\n  transition: left 700ms;\n"]);return f=function(){return e},e}function d(){var e=j(["\n  left: 0;\n  transition: left 700ms;\n"]);return d=function(){return e},e}function y(){var e=j(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"]);return y=function(){return e},e}function b(){var e=j(["\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"]);return b=function(){return e},e}function m(){var e=j(["\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"]);return m=function(){return e},e}function g(){var e=j(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"]);return g=function(){return e},e}function S(){var e=j(["\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"]);return S=function(){return e},e}function v(){var e=j(["\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"]);return v=function(){return e},e}function x(){var e=j(["\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"]);return x=function(){return e},e}function h(){var e=j(["\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"]);return h=function(){return e},e}function O(){var e=j(["\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"]);return O=function(){return e},e}function w(){var e=j(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"]);return w=function(){return e},e}function j(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var P={stepBoxTop:(0,i.createDataProp)("step-box-top"),stepBoxBottom:(0,i.createDataProp)("step-box-bottom")};t.dataProps=P;var E=(0,o.css)(w());t.layerStyle=E;var k=(0,o.css)(O());t.stepBoxStyle=k;var B=(0,o.css)(h(),16,16,16),L=(0,o.css)(x(),B,Math.atan(2/3));t.stepBoxTopStyle=L;var T=(0,o.css)(v(),B,-Math.atan(2/3));t.stepBoxBottomStyle=T;var A=(0,o.css)(S(),17,32,a.uiColors.gray.dark3,P.stepBoxTop.selector,P.stepBoxBottom.selector,48,P.stepBoxTop.selector,P.stepBoxBottom.selector);t.stepStyle=A;var q=(0,o.css)(g());t.stepTextStyle=q;var M=(0,o.css)(m(),(0,r.transparentize)(.75,a.uiColors.black),P.stepBoxTop.selector,Math.atan(2/3),P.stepBoxBottom.selector,Math.atan(2/3));t.currentStepStyle=M;var C=(0,o.css)(b(),a.uiColors.gray.base,P.stepBoxTop.selector,P.stepBoxBottom.selector,a.uiColors.gray.light3,a.uiColors.gray.light2);t.upcomingStepStyle=C;var N=(0,o.css)(y());t.hiddenLayerStyle=N;var _=(0,o.css)(d());t.slideInAnimationStyle=_;var D=(0,o.css)(f(),-32);t.slideOutAnimationStyle=D;var z=(0,o.css)(p(),48,a.uiColors.gray.light3,a.uiColors.gray.light2);t.containerStyle=z;var I=(0,o.css)(s());t.stepLabelStyle=I;var X=(0,o.css)(c(),a.uiColors.green.base,a.uiColors.green.base);t.completedStepLabelStyle=X;var R=(0,o.css)(u(),a.uiColors.gray.dark2);t.currentStepLabelStyle=R;var H=(0,o.css)(l(),a.uiColors.gray.light1,a.uiColors.gray.base);t.upcomingStepLabelStyle=H;var W=(0,o.css)("padding: 0 8px;");t.stepLabelTextStyle=W;var F=(0,o.css)("cursor: pointer;");t.previewStyle=F},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t){e.exports=l}])}));
 //# sourceMappingURL=index.web.js.map

dist/Stepper.js

@@ -28,6 +28,6 @@ var __assign = (this && this.__assign) || function () {
 import EllipsisIcon from '@leafygreen-ui/icon/dist/Ellipsis';
-import { completedStepLabelStyle, containerStyle, currentStepLabelStyle, currentStepStyle, hiddenLayerStyle, layerStyle, slideInAnimationStyle, slideOutAnimationStyle, stepBoxBottomStyle, stepBoxStyle, stepBoxTopStyle, stepLabelStyle, stepLabelTextStyle, stepStyle, upcomingStepLabelStyle, upcomingStepStyle, } from './styles';
+import { completedStepLabelStyle, containerStyle, currentStepLabelStyle, currentStepStyle, dataProps, hiddenLayerStyle, layerStyle, previewStyle, slideInAnimationStyle, slideOutAnimationStyle, stepBoxBottomStyle, stepBoxStyle, stepBoxTopStyle, stepLabelStyle, stepLabelTextStyle, stepStyle, stepTextStyle, upcomingStepLabelStyle, upcomingStepStyle, } from './styles';
 function InternalStep(_a) {
-    var _b, _c;
-    var children = _a.children, state = _a.state, stepLabel = _a.stepLabel, className = _a.className, containerProps = __rest(_a, ["children", "state", "stepLabel", "className"]);
+    var _b, _c, _d;
+    var children = _a.children, state = _a.state, stepLabel = _a.stepLabel, isPreview = _a.isPreview, className = _a.className, containerProps = __rest(_a, ["children", "state", "stepLabel", "isPreview", "className"]);
     var isCurrent = state === 'current';
@@ -39,3 +39,4 @@ var isUpcoming = state === 'upcoming';
             _b[upcomingStepStyle] = isUpcoming,
-            _b), className) }, containerProps),
+            _b[previewStyle] = isPreview,
+            _b)) + " " + className }, containerProps),
         stepLabel && (React.createElement("div", { className: cx(stepLabelStyle, (_c = {},
@@ -45,8 +46,9 @@ _c[currentStepLabelStyle] = isCurrent,
                 _c[upcomingStepLabelStyle] = isUpcoming,
+                _c[previewStyle] = isPreview,
                 _c)) }, isCompleted ? (React.createElement(CheckmarkIcon, null)) : (React.createElement("div", { className: stepLabelTextStyle }, stepLabel)))),
-        children,
+        React.createElement("div", { className: cx(stepTextStyle, (_d = {}, _d[previewStyle] = isPreview, _d)) }, children),
         React.createElement("div", { className: stepBoxStyle },
-            React.createElement("span", { className: stepBoxTopStyle },
+            React.createElement("span", __assign({ className: stepBoxTopStyle }, dataProps.stepBoxTop.prop),
                 React.createElement("div", null)),
-            React.createElement("span", { className: stepBoxBottomStyle },
+            React.createElement("span", __assign({ className: stepBoxBottomStyle }, dataProps.stepBoxBottom.prop),
                 React.createElement("div", null)))));
@@ -78,2 +80,3 @@ }
             children: child,
+            isPreview: false,
         };
@@ -103,3 +106,3 @@ });
             maxDisplayedSteps: maxDisplayedSteps,
-        })));
+        }))).map(function (step) { return (__assign(__assign({}, step), { isPreview: true })); });
     }
@@ -114,3 +117,3 @@ if (rangeEnd < numSteps - 1) {
             maxDisplayedSteps: maxDisplayedSteps,
-        })));
+        }))).map(function (step) { return (__assign(__assign({}, step), { isPreview: true })); });
     }
@@ -165,2 +168,3 @@ Object.entries(layerToLayerSteps).forEach(function (_a) {
             children: React.createElement(EllipsisIcon, null),
+            isPreview: true,
         });
@@ -176,2 +180,3 @@ }
             children: React.createElement(EllipsisIcon, null),
+            isPreview: true,
         });
@@ -178,0 +183,0 @@ }

dist/styles.d.ts

@@ -0,1 +1,15 @@
+export declare const dataProps: {
+    stepBoxTop: {
+        prop: {
+            [x: string]: string;
+        };
+        selector: string;
+    };
+    stepBoxBottom: {
+        prop: {
+            [x: string]: string;
+        };
+        selector: string;
+    };
+};
 export declare const layerStyle: string;
@@ -6,2 +20,3 @@ export declare const stepBoxStyle: string;
 export declare const stepStyle: string;
+export declare const stepTextStyle: string;
 export declare const currentStepStyle: string;
@@ -18,2 +33,3 @@ export declare const upcomingStepStyle: string;
 export declare const stepLabelTextStyle: string;
+export declare const previewStyle: string;
 //# sourceMappingURL=styles.d.ts.map

dist/styles.js

@@ -7,22 +7,29 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { css } from '@leafygreen-ui/emotion';
+import { createDataProp } from '@leafygreen-ui/lib';
 import { uiColors } from '@leafygreen-ui/palette';
-var stepperHeight = 46;
-export var layerStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"], ["\n  display: flex;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"])));
+var stepperHeight = 48;
+export var dataProps = {
+    stepBoxTop: createDataProp('step-box-top'),
+    stepBoxBottom: createDataProp('step-box-bottom'),
+};
+export var layerStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"], ["\n  display: flex;\n  position: absolute;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transition: opacity 700ms, visibility 700ms;\n"])));
 export var stepBoxStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])));
-var stepBoxHalfStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n\n  height: 50%;\n  width: calc(100% - ", "px);\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"], ["\n  display: inline-block;\n\n  height: 50%;\n  width: calc(100% - ", "px);\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"])), stepperHeight / 3, stepperHeight / 3, stepperHeight / 3, stepperHeight / 3);
+var stepBoxHalfStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), stepperHeight / 3, stepperHeight / 3, stepperHeight / 3);
 export var stepBoxTopStyle = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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"])), stepBoxHalfStyle, Math.atan(2 / 3));
 export var stepBoxBottomStyle = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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"], ["\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"])), stepBoxHalfStyle, -Math.atan(2 / 3));
-export var stepStyle = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  margin-left: -", "px;\n\n  color: ", ";\n\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    .", ", .", " {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    .", ", .", " {\n      &:before,\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  margin-left: -", "px;\n\n  color: ", ";\n\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    .", ", .", " {\n      &:before {\n        transform: none;\n      }\n    }\n  }\n\n  &:last-of-type {\n    .", ", .", " {\n      &:before,\n      &:after {\n        transform: none;\n      }\n    }\n  }\n"])), stepperHeight / 3 + 1, uiColors.gray.dark3, stepBoxTopStyle, stepBoxBottomStyle, stepBoxTopStyle, stepBoxBottomStyle);
-export var currentStepStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\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"], ["\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"])), transparentize(0.7, uiColors.black), stepBoxTopStyle, Math.atan(2 / 3), stepBoxBottomStyle, Math.atan(2 / 3));
-export var upcomingStepStyle = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\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"], ["\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"])), uiColors.gray.base, stepBoxTopStyle, stepBoxBottomStyle, uiColors.gray.light3, uiColors.gray.light2);
-export var hiddenLayerStyle = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"], ["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"])));
-export var slideInAnimationStyle = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  left: 0;\n  transition: left 700ms;\n"], ["\n  left: 0;\n  transition: left 700ms;\n"])));
-export var slideOutAnimationStyle = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  left: -30px;\n  transition: left 700ms;\n"], ["\n  left: -30px;\n  transition: left 700ms;\n"])));
-export var containerStyle = css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  height: ", "px;\n  width: 100%;\n"], ["\n  position: relative;\n  height: ", "px;\n  width: 100%;\n"])), stepperHeight);
-export var stepLabelStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\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"], ["\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"])));
-export var completedStepLabelStyle = css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"], ["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"])), uiColors.green.base, uiColors.green.base);
-export var currentStepLabelStyle = css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: #464c4f;\n  color: white;\n"], ["\n  background-color: ", ";\n  border-color: #464c4f;\n  color: white;\n"])), uiColors.gray.dark2);
-export var upcomingStepLabelStyle = css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"], ["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"])), uiColors.gray.light1, uiColors.gray.base);
+export var stepStyle = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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"], ["\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"])), stepperHeight / 3 + 1, 16 + stepperHeight / 3, uiColors.gray.dark3, dataProps.stepBoxTop.selector, dataProps.stepBoxBottom.selector, 16 + (2 * stepperHeight) / 3, dataProps.stepBoxTop.selector, dataProps.stepBoxBottom.selector);
+export var stepTextStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"], ["\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"])));
+export var currentStepStyle = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\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"], ["\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"])), transparentize(0.75, uiColors.black), dataProps.stepBoxTop.selector, Math.atan(2 / 3), dataProps.stepBoxBottom.selector, Math.atan(2 / 3));
+export var upcomingStepStyle = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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"])), uiColors.gray.base, dataProps.stepBoxTop.selector, dataProps.stepBoxBottom.selector, uiColors.gray.light3, uiColors.gray.light2);
+export var hiddenLayerStyle = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"], ["\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n"])));
+export var slideInAnimationStyle = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  left: 0;\n  transition: left 700ms;\n"], ["\n  left: 0;\n  transition: left 700ms;\n"])));
+export var slideOutAnimationStyle = css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  left: ", "px;\n  transition: left 700ms;\n"], ["\n  left: ", "px;\n  transition: left 700ms;\n"])), (-2 * stepperHeight) / 3);
+export var containerStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\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"], ["\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"])), stepperHeight, uiColors.gray.light3, uiColors.gray.light2);
+export var stepLabelStyle = css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\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"], ["\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"])));
+export var completedStepLabelStyle = css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"], ["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"])), uiColors.green.base, uiColors.green.base);
+export var currentStepLabelStyle = css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: #464c4f;\n  color: white;\n"], ["\n  background-color: ", ";\n  border-color: #464c4f;\n  color: white;\n"])), uiColors.gray.dark2);
+export var upcomingStepLabelStyle = css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"], ["\n  background-color: white;\n  border-color: ", ";\n  color: ", ";\n"])), uiColors.gray.light1, uiColors.gray.base);
 export var stepLabelTextStyle = css('padding: 0 8px;');
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+export var previewStyle = css('cursor: pointer;');
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 //# sourceMappingURL=styles.js.map

package.json

 {
   "name": "@leafygreen-ui/stepper",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "leafyGreen UI Kit Stepper",
@@ -17,4 +17,4 @@ "browser": "./dist/index.web.js",
     "@leafygreen-ui/emotion": "^2.0.1",
-    "@leafygreen-ui/icon": "^6.1.1",
-    "@leafygreen-ui/lib": "^4.0.0",
+    "@leafygreen-ui/icon": "^6.3.0",
+    "@leafygreen-ui/lib": "^5.0.0",
     "@leafygreen-ui/palette": "^2.0.1",
@@ -21,0 +21,0 @@ "polished": "^3.6.5"

src/styles.ts

 import { transparentize } from 'polished';
 import { css } from '@leafygreen-ui/emotion';
+import { createDataProp } from '@leafygreen-ui/lib';
 import { uiColors } from '@leafygreen-ui/palette';
 
-const stepperHeight = 46;
+const stepperHeight = 48;
 
+export const dataProps = {
+  stepBoxTop: createDataProp('step-box-top'),
+  stepBoxBottom: createDataProp('step-box-bottom'),
+};
+
 export const layerStyle = css`
   display: flex;
   position: absolute;
+  left: 0;
   height: 100%;
@@ -33,3 +40,3 @@ width: 100%;
   height: 50%;
-  width: calc(100% - ${stepperHeight / 3}px);
+  width: 100%;
 
@@ -98,2 +105,3 @@ & > *,
 export const stepStyle = css`
+  flex: 1;
   position: relative;
@@ -103,8 +111,11 @@ display: inline-flex;
   justify-content: center;
-  height: 100%;
-  width: 100%;
+  height: calc(100% + 2px);
+  min-width: 0; // https://css-tricks.com/flexbox-truncated-text/
   margin-left: -${stepperHeight / 3 + 1}px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  padding-left: ${16 + stepperHeight / 3}px;
+  padding-right: 16px;
 
   color: ${uiColors.gray.dark3};
-
   font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -117,3 +128,6 @@ font-size: 14px;
   &:first-of-type {
-    .${stepBoxTopStyle}, .${stepBoxBottomStyle} {
+    margin-left: 0;
+    padding-left: 16px;
+
+    ${dataProps.stepBoxTop.selector}, ${dataProps.stepBoxBottom.selector} {
       &:before {
@@ -126,4 +140,5 @@ transform: none;
   &:last-of-type {
-    .${stepBoxTopStyle}, .${stepBoxBottomStyle} {
-      &:before,
+    padding-left: calc(${16 + (2 * stepperHeight) / 3}px);
+
+    ${dataProps.stepBoxTop.selector}, ${dataProps.stepBoxBottom.selector} {
       &:after {
@@ -136,12 +151,20 @@ transform: none;
 
+export const stepTextStyle = css`
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+
 export const currentStepStyle = css`
-  filter: drop-shadow(0px 4px 4px ${transparentize(0.7, uiColors.black)});
+  filter: drop-shadow(0px 4px 4px ${transparentize(0.75, uiColors.black)});
   z-index: 3;
 
   &:last-of-type:not(:first-of-type) {
-    .${stepBoxTopStyle}:before {
+    ${dataProps.stepBoxTop.selector}:before {
       transform: skewX(${Math.atan(2 / 3)}rad);
     }
 
-    .${stepBoxBottomStyle}:before {
+    ${dataProps.stepBoxBottom.selector}:before {
       transform: skewX(-${Math.atan(2 / 3)}rad);
@@ -160,3 +183,3 @@ }
 
-  .${stepBoxTopStyle}, .${stepBoxBottomStyle} {
+  ${dataProps.stepBoxTop.selector}, ${dataProps.stepBoxBottom.selector} {
     & > *,
@@ -183,3 +206,3 @@ &:before,
 export const slideOutAnimationStyle = css`
-  left: -30px;
+  left: ${(-2 * stepperHeight) / 3}px;
   transition: left 700ms;
@@ -192,2 +215,7 @@ `;
   width: 100%;
+
+  background: ${uiColors.gray.light3};
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  border-color: ${uiColors.gray.light2};
 `;
@@ -233,1 +261,3 @@
 export const stepLabelTextStyle = css('padding: 0 8px;');
+
+export const previewStyle = css('cursor: pointer;');

No alert changes

Improved metrics

Total package byte prevSize

527161

increased by2.96%

Lines of code

1282

increased by6.57%

Dependency changes

• - Removed@jest/types@24.9.0(transitive)

• - Removed@leafygreen-ui/lib@4.5.1(transitive)

• - Removed@sheerun/mutationobserver-shim@0.3.3(transitive)

• - Removed@testing-library/dom@5.6.1(transitive)

• - Removed@testing-library/react@8.0.9(transitive)

• - Removed@types/istanbul-lib-coverage@2.0.6(transitive)

• - Removed@types/istanbul-lib-report@3.0.3(transitive)

• - Removed@types/istanbul-reports@1.1.2(transitive)

• - Removed@types/yargs@13.0.12(transitive)

• - Removed@types/yargs-parser@21.0.3(transitive)

• - Removedansi-regex@4.1.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedaria-query@3.0.0(transitive)

• - Removedast-types-flow@0.0.7(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedpretty-format@24.9.0(transitive)

• - Removedreact@19.0.0(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedscheduler@0.25.0(transitive)

• - Removedwait-for-expect@1.3.0(transitive)

• Updated@leafygreen-ui/icon@^6.3.0

• Updated@leafygreen-ui/lib@^5.0.0