intergalactic 15.129.0 → 15.130.0

package/wizard/lib/esm/Wizard.mjs

@@ -1,94 +1,111 @@
-import v from "@babel/runtime/helpers/esm/objectSpread2";
-import I from "@babel/runtime/helpers/esm/classCallCheck";
-import D from "@babel/runtime/helpers/esm/createClass";
-import u from "@babel/runtime/helpers/esm/assertThisInitialized";
-import W from "@babel/runtime/helpers/esm/inherits";
-import B from "@babel/runtime/helpers/esm/createSuper";
-import p from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as M } from 'intergalactic/utils/lib/core/index';
-import F, { sstyled as h, Component as H, assignProps as S } from 'intergalactic/core';
-import a from "react";
-import { ScreenReaderOnly as $, Box as x } from 'intergalactic/flex-box';
-import U from 'intergalactic/modal';
-import K from 'intergalactic/icon/Check/m';
-import L from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
-import O from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import { localizedMessages as k } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { setFocus as j } from 'intergalactic/utils/lib/use/useFocusLock';
-import q from 'intergalactic/utils/lib/uniqueID';
-import m from 'intergalactic/button';
-import G from 'intergalactic/icon/ArrowRight/m';
-import J from 'intergalactic/icon/ArrowLeft/m';
-var Q = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from 'intergalactic/utils/lib/core/index';
+import createComponent, { sstyled as sstyled$1, Component, assignProps } from 'intergalactic/core';
+import React from "react";
+import { ScreenReaderOnly, Box } from 'intergalactic/flex-box';
+import Modal from 'intergalactic/modal';
+import CheckM from 'intergalactic/icon/Check/m';
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { setFocus } from 'intergalactic/utils/lib/use/useFocusLock';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import Button from 'intergalactic/button';
+import ArrowRight from 'intergalactic/icon/ArrowRight/m';
+import ArrowLeft from 'intergalactic/icon/ArrowLeft/m';
+/*!__reshadow-styles__:"./style/wizard.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (M.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SWizard_n61tb_gg_{max-width:980px;max-height:700px;display:flex;padding:0;background:0 0}.___SSidebar_n61tb_gg_{background:var(--intergalactic-control-primary-advertising, #5925ab);color:var(--intergalactic-text-primary-invert, #ffffff);font-weight:var(--intergalactic-bold, 700);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px) calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));max-width:220px;flex-shrink:0;box-sizing:border-box;border-radius:var(--intergalactic-modal-rounded, 12px)0 0 var(--intergalactic-modal-rounded, 12px)}@media (max-width:1060px){.___SSidebar_n61tb_gg_{width:44px}}.___SSidebarHeader_n61tb_gg_{font-size:var(--intergalactic-fs-300, 16px);margin:0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px)}@media (max-width:1060px){.___SSidebarHeader_n61tb_gg_{display:none}}.___SStepper_n61tb_gg_{display:flex;font-size:var(--intergalactic-fs-200, 14px);border-radius:var(--intergalactic-control-rounded, 6px);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);cursor:pointer;position:relative;overflow:auto;line-height:var(--intergalactic-lh-200, 142%)}@media (hover:hover){.___SStepper_n61tb_gg_:hover{background:var(--intergalactic-control-primary-advertising-hover, #421983);z-index:1}}.___SStepper_n61tb_gg_.__active_n61tb_gg_{background:var(--intergalactic-control-primary-advertising-active, #8649e1)}.___SStepper_n61tb_gg_.__disabled_n61tb_gg_,.___SStepper_n61tb_gg_:disabled{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (max-width:1060px){.___SStepper_n61tb_gg_{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___SStepper_n61tb_gg_:hover{width:-moz-fit-content;width:fit-content;max-width:220px}.___SStepper_n61tb_gg_:hover .___SStepDescription_n61tb_gg_{display:block;border-radius:var(--intergalactic-control-rounded, 6px);white-space:nowrap;overflow:auto}.___SStepper_n61tb_gg_.__active_n61tb_gg_:hover .___SStepDescription_n61tb_gg_{background:var(--intergalactic-control-primary-advertising-active, #8649e1)}}}.___SStepNumber_n61tb_gg_{display:inline-block;min-width:20px}.___SCompleted_n61tb_gg_{margin-top:1px}@media (max-width:1060px){.___SStepDescription_n61tb_gg_{display:none}}.___SContent_n61tb_gg_{padding:var(--intergalactic-spacing-10x, 40px);width:100%;border-radius:0 var(--intergalactic-modal-rounded, 12px) var(--intergalactic-modal-rounded, 12px)0;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SSidebarMenu_n61tb_gg_{display:contents}",
-    "n61tb_gg_"
-  ), {
-    __SWizard: "___SWizard_n61tb_gg_",
-    __SStepNumber: "___SStepNumber_n61tb_gg_",
-    __SCompleted: "___SCompleted_n61tb_gg_",
-    __SContent: "___SContent_n61tb_gg_",
-    __SSidebarMenu: "___SSidebarMenu_n61tb_gg_",
-    __SSidebar: "___SSidebar_n61tb_gg_",
-    __SSidebarHeader: "___SSidebarHeader_n61tb_gg_",
-    __SStepper: "___SStepper_n61tb_gg_",
-    _active: "__active_n61tb_gg_",
-    _disabled: "__disabled_n61tb_gg_",
-    __SStepDescription: "___SStepDescription_n61tb_gg_"
+    ".___SWizard_tet9m_gg_{max-width:980px;max-height:700px;display:flex;padding:0;background:0 0}.___SSidebar_tet9m_gg_{background:var(--intergalactic-control-primary-advertising, #5925ab);color:var(--intergalactic-text-primary-invert, #ffffff);font-weight:var(--intergalactic-bold, 700);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px) calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));max-width:220px;flex-shrink:0;box-sizing:border-box;border-radius:var(--intergalactic-modal-rounded, 12px)0 0 var(--intergalactic-modal-rounded, 12px)}@media (max-width:1060px){.___SSidebar_tet9m_gg_{width:44px}}.___SSidebarHeader_tet9m_gg_{font-size:var(--intergalactic-fs-300, 16px);margin:0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px)}@media (max-width:1060px){.___SSidebarHeader_tet9m_gg_{display:none}}.___SStepper_tet9m_gg_{display:flex;font-size:var(--intergalactic-fs-200, 14px);border-radius:var(--intergalactic-control-rounded, 6px);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);cursor:pointer;position:relative;overflow:auto;line-height:var(--intergalactic-lh-200, 142%)}@media (hover:hover){.___SStepper_tet9m_gg_:hover{background:var(--intergalactic-control-primary-advertising-hover, #421983);z-index:1}}.___SStepper_tet9m_gg_.__active_tet9m_gg_{background:var(--intergalactic-control-primary-advertising-active, #8649e1)}.___SStepper_tet9m_gg_.__disabled_tet9m_gg_,.___SStepper_tet9m_gg_:disabled{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (max-width:1060px){.___SStepper_tet9m_gg_{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___SStepper_tet9m_gg_:hover{width:-moz-fit-content;width:fit-content;max-width:220px}.___SStepper_tet9m_gg_:hover .___SStepDescription_tet9m_gg_{display:block;border-radius:var(--intergalactic-control-rounded, 6px);white-space:nowrap;overflow:auto}.___SStepper_tet9m_gg_.__active_tet9m_gg_:hover .___SStepDescription_tet9m_gg_{background:var(--intergalactic-control-primary-advertising-active, #8649e1)}}}.___SStepNumber_tet9m_gg_{display:inline-block;min-width:20px}.___SCompleted_tet9m_gg_{margin-top:1px}@media (max-width:1060px){.___SStepDescription_tet9m_gg_{display:none}}.___SContent_tet9m_gg_{padding:var(--intergalactic-spacing-10x, 40px);width:100%;border-radius:0 var(--intergalactic-modal-rounded, 12px) var(--intergalactic-modal-rounded, 12px)0;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SSidebarMenu_tet9m_gg_{display:contents}",
+    /*__inner_css_end__*/
+    "tet9m_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SWizard": "___SWizard_tet9m_gg_",
+    "__SStepNumber": "___SStepNumber_tet9m_gg_",
+    "__SCompleted": "___SCompleted_tet9m_gg_",
+    "__SContent": "___SContent_tet9m_gg_",
+    "__SSidebarMenu": "___SSidebarMenu_tet9m_gg_",
+    "__SSidebar": "___SSidebar_tet9m_gg_",
+    "__SSidebarHeader": "___SSidebarHeader_tet9m_gg_",
+    "__SStepper": "___SStepper_tet9m_gg_",
+    "_active": "__active_tet9m_gg_",
+    "_disabled": "__disabled_tet9m_gg_",
+    "__SStepDescription": "___SStepDescription_tet9m_gg_"
   })
-), f = /* @__PURE__ */ function(e) {
-  W(t, e);
-  var _ = B(t);
-  function t() {
-    var r;
-    I(this, t);
-    for (var n = arguments.length, i = new Array(n), s = 0; s < n; s++)
-      i[s] = arguments[s];
-    return r = _.call.apply(_, [this].concat(i)), p(u(r), "_steps", /* @__PURE__ */ new Map()), p(u(r), "modalRef", /* @__PURE__ */ a.createRef()), p(u(r), "contentRef", /* @__PURE__ */ a.createRef()), p(u(r), "state", {
+);
+var WizardRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(WizardRoot2, _Component);
+  var _super = _createSuper(WizardRoot2);
+  function WizardRoot2() {
+    var _this;
+    _classCallCheck(this, WizardRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_steps", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "modalRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "contentRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "state", {
       highlighted: null
-    }), p(u(r), "stepperRefs", []), p(u(r), "stepperFocusPrev", function(c) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "stepperRefs", []);
+    _defineProperty(_assertThisInitialized(_this), "stepperFocusPrev", function(i) {
       return function() {
-        var o = r._steps.get(c);
-        o && (r.setState({
-          highlighted: o == null ? void 0 : o.step
-        }), setTimeout(function() {
-          var l;
-          (l = r.stepperRefs[c - 1]) === null || l === void 0 || l.focus();
-        }, 0));
+        var prevStep = _this._steps.get(i);
+        if (!prevStep) return;
+        _this.setState({
+          highlighted: prevStep === null || prevStep === void 0 ? void 0 : prevStep.step
+        });
+        setTimeout(function() {
+          var _this$stepperRefs;
+          (_this$stepperRefs = _this.stepperRefs[i - 1]) === null || _this$stepperRefs === void 0 ? void 0 : _this$stepperRefs.focus();
+        }, 0);
       };
-    }), p(u(r), "stepperFocusNext", function(c) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "stepperFocusNext", function(i) {
       return function() {
-        var o = r._steps.get(c + 2);
-        o && (r.setState({
-          highlighted: o == null ? void 0 : o.step
-        }), setTimeout(function() {
-          var l;
-          (l = r.stepperRefs[c + 1]) === null || l === void 0 || l.focus();
-        }, 0));
+        var nextStep = _this._steps.get(i + 2);
+        if (!nextStep) return;
+        _this.setState({
+          highlighted: nextStep === null || nextStep === void 0 ? void 0 : nextStep.step
+        });
+        setTimeout(function() {
+          var _this$stepperRefs2;
+          (_this$stepperRefs2 = _this.stepperRefs[i + 1]) === null || _this$stepperRefs2 === void 0 ? void 0 : _this$stepperRefs2.focus();
+        }, 0);
       };
-    }), r;
+    });
+    return _this;
   }
-  return D(t, [{
+  _createClass(WizardRoot2, [{
     key: "getStepProps",
-    value: function(n) {
+    value: function getStepProps(props) {
       return {
         steps: this._steps,
-        active: n.step === this.asProps.step,
-        id: "".concat(this.asProps.uid, "-step-").concat(n.step)
+        active: props.step === this.asProps.step,
+        id: "".concat(this.asProps.uid, "-step-").concat(props.step)
       };
     }
   }, {
     key: "getSidebarProps",
-    value: function() {
+    value: function getSidebarProps() {
       return {
         uid: this.asProps.uid
       };
     }
   }, {
     key: "getContentProps",
-    value: function() {
+    value: function getContentProps() {
       return {
         uid: this.asProps.uid,
         step: this.asProps.step,
@@ -97,7 +114,7 @@ var Q = (
     }
   }, {
     key: "getStepBackProps",
-    value: function() {
+    value: function getStepBackProps() {
       return {
         getI18nText: this.asProps.getI18nText,
         step: this.asProps.step
@@ -105,7 +122,7 @@ var Q = (
     }
   }, {
     key: "getStepNextProps",
-    value: function() {
+    value: function getStepNextProps() {
       return {
         getI18nText: this.asProps.getI18nText,
         step: this.asProps.step
@@ -113,24 +130,27 @@ var Q = (
     }
   }, {
     key: "getStepperProps",
-    value: function(n, i) {
-      var s = this, c = i + 1;
-      if (this._steps.has(n.step)) {
-        var o = this._steps.get(n.step);
-        c = o.number;
-      } else
-        this._steps.set(n.step, v({
-          number: c
-        }, n));
-      var l = n.step === this.asProps.step, d = this.state.highlighted === n.step || this.state.highlighted === null && i === 0;
+    value: function getStepperProps(props, i) {
+      var _this2 = this;
+      var number = i + 1;
+      if (this._steps.has(props.step)) {
+        var step = this._steps.get(props.step);
+        number = step.number;
+      } else {
+        this._steps.set(props.step, _objectSpread({
+          number
+        }, props));
+      }
+      var active = props.step === this.asProps.step;
+      var highlighted = this.state.highlighted === props.step || this.state.highlighted === null && i === 0;
       return {
-        active: l,
-        tabIndex: d ? 0 : -1,
-        number: c,
+        active,
+        tabIndex: highlighted ? 0 : -1,
+        number,
         getI18nText: this.asProps.getI18nText,
         uid: this.asProps.uid,
-        ref: function(b) {
-          s.stepperRefs[i] = b;
+        ref: function ref(node) {
+          _this2.stepperRefs[i] = node;
         },
         focusNext: this.stepperFocusNext(i),
         focusPrev: this.stepperFocusPrev(i)
@@ -138,121 +158,162 @@ var Q = (
     }
   }, {
     key: "componentDidUpdate",
-    value: function(n) {
-      var i = this;
-      n.step !== this.asProps.step && (this.setState({
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      if (prevProps.step === this.asProps.step) return;
+      this.setState({
         highlighted: this.asProps.step || null
-      }), setTimeout(function() {
-        n.step !== i.asProps.step && j(i.contentRef.current);
-      }, 1));
+      });
+      setTimeout(function() {
+        if (prevProps.step === _this3.asProps.step) return;
+        setFocus(_this3.contentRef.current);
+      }, 1);
     }
   }, {
     key: "render",
-    value: function() {
-      var n, i = this.Root, s = this.asProps, c = s.Children, o = s.styles, l = s.uid;
-      return this._steps.clear(), n = h(o), /* @__PURE__ */ a.createElement(i, n.cn("SWizard", {
-        render: U,
+    value: function render() {
+      var _ref7;
+      var SWizard = this.Root;
+      var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles, uid = _this$asProps.uid;
+      this._steps.clear();
+      return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SWizard, _ref7.cn("SWizard", {
+        "render": Modal,
         "aria-label": void 0,
-        ref: this.modalRef,
-        "aria-labelledby": "".concat(l, "-title")
-      }), /* @__PURE__ */ a.createElement(c, n.cn("Children", {})));
+        "ref": this.modalRef,
+        "aria-labelledby": "".concat(uid, "-title")
+      }), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
     }
-  }]), t;
-}(H);
-p(f, "displayName", "Wizard");
-p(f, "style", Q);
-p(f, "enhance", [O(k), q()]);
-p(f, "defaultProps", {
+  }]);
+  return WizardRoot2;
+}(Component);
+_defineProperty(WizardRoot, "displayName", "Wizard");
+_defineProperty(WizardRoot, "style", style);
+_defineProperty(WizardRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
+_defineProperty(WizardRoot, "defaultProps", {
   step: null,
-  i18n: k,
+  i18n: localizedMessages,
   locale: "en"
 });
-function V(e) {
-  var _ = arguments[0], t, r = e.Children, n = e.styles, i = e.title, s = e.uid, c = x, o = "h2", l = "div";
-  return a.useCallback(function(d) {
-  }, []), t = h(n), /* @__PURE__ */ a.createElement(c, t.cn("SSidebar", v({}, S({
-    __excludeProps: ["title"]
-  }, _))), i && /* @__PURE__ */ a.createElement(o, t.cn("SSidebarHeader", {
-    id: "".concat(s, "-title")
-  }), i), /* @__PURE__ */ a.createElement(l, t.cn("SSidebarMenu", {
-    role: "tablist",
+function Sidebar(props) {
+  var _ref = arguments[0], _ref8;
+  var Children = props.Children, styles = props.styles, title = props.title, uid = props.uid;
+  var SSidebar = Box;
+  var SSidebarHeader = "h2";
+  var SSidebarMenu = "div";
+  React.useCallback(function(e) {
+  }, []);
+  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSidebar, _ref8.cn("SSidebar", _objectSpread({}, assignProps({
+    "__excludeProps": ["title"]
+  }, _ref))), title && /* @__PURE__ */ React.createElement(SSidebarHeader, _ref8.cn("SSidebarHeader", {
+    "id": "".concat(uid, "-title")
+  }), title), /* @__PURE__ */ React.createElement(SSidebarMenu, _ref8.cn("SSidebarMenu", {
+    "role": "tablist",
     "aria-orientation": "vertical"
-  }), /* @__PURE__ */ a.createElement(r, t.cn("Children", {}))));
+  }), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}))));
 }
-function X(e) {
-  var _ = arguments[0], t = x, r = e.Children, n = e.styles, i = e.active;
-  if (i) {
-    var s;
-    return s = h(n), /* @__PURE__ */ a.createElement(t, s.cn("SStep", v({}, S({}, _))), /* @__PURE__ */ a.createElement(r, s.cn("Children", {})));
+function Step(props) {
+  var _ref2 = arguments[0];
+  var SStep = Box;
+  var Children = props.Children, styles = props.styles, active = props.active;
+  if (active) {
+    var _ref9;
+    return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SStep, _ref9.cn("SStep", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
   }
   return null;
 }
-function w(e) {
-  var _ = arguments[0], t, r = e.Children, n = e.styles, i = e.step, s = e.active, c = e.onActive, o = e.completed, l = e.disabled, d = e.number, y = e.getI18nText, b = e.uid, C = e.focusNext, P = e.focusPrev, E = x, N = "span", z = "span", R = K, T = a.useCallback(function(g) {
-    c && c(i, g);
-  }, [i, c]), A = a.useCallback(function(g) {
-    c && (g.key === "Enter" || g.key === " ") && (g.preventDefault(), c(i, g)), g.key === "ArrowUp" && (P(), g.stopPropagation()), g.key === "ArrowDown" && (C(), g.stopPropagation());
-  }, [i, c, P, C]);
-  return t = h(n), /* @__PURE__ */ a.createElement(E, t.cn("SStepper", v({}, S({
-    role: "tab",
-    id: "".concat(b, "-stepper-").concat(i),
-    "aria-controls": s ? "".concat(b, "-content-").concat(i) : void 0,
-    "aria-disabled": l,
-    "aria-selected": s,
-    onClick: T,
-    onKeyDown: A
-  }, _))), o && /* @__PURE__ */ a.createElement($, t.cn("ScreenReaderOnly", {}), y("completedStep")), /* @__PURE__ */ a.createElement(N, t.cn("SStepNumber", {
+function Stepper(props) {
+  var _ref3 = arguments[0], _ref10;
+  var Children = props.Children, styles = props.styles, step = props.step, active = props.active, onActive = props.onActive, completed = props.completed, disabled = props.disabled, number = props.number, getI18nText = props.getI18nText, uid = props.uid, focusNext = props.focusNext, focusPrev = props.focusPrev;
+  var SStepper = Box;
+  var SStepNumber = "span";
+  var SStepDescription = "span";
+  var SCompleted = CheckM;
+  var handlerClick = React.useCallback(function(e) {
+    if (onActive) onActive(step, e);
+  }, [step, onActive]);
+  var handlerKeyDown = React.useCallback(function(e) {
+    if (onActive && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onActive(step, e);
+    }
+    if (e.key === "ArrowUp") {
+      focusPrev();
+      e.stopPropagation();
+    }
+    if (e.key === "ArrowDown") {
+      focusNext();
+      e.stopPropagation();
+    }
+  }, [step, onActive, focusPrev, focusNext]);
+  return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SStepper, _ref10.cn("SStepper", _objectSpread({}, assignProps({
+    "role": "tab",
+    "id": "".concat(uid, "-stepper-").concat(step),
+    "aria-controls": active ? "".concat(uid, "-content-").concat(step) : void 0,
+    "aria-disabled": disabled,
+    "aria-selected": active,
+    "onClick": handlerClick,
+    "onKeyDown": handlerKeyDown
+  }, _ref3))), completed && /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref10.cn("ScreenReaderOnly", {}), getI18nText("completedStep")), /* @__PURE__ */ React.createElement(SStepNumber, _ref10.cn("SStepNumber", {
     "aria-hidden": "true"
-  }), o ? /* @__PURE__ */ a.createElement(R, t.cn("SCompleted", {})) : d), /* @__PURE__ */ a.createElement(z, t.cn("SStepDescription", {}), /* @__PURE__ */ a.createElement(r, t.cn("Children", {}))));
+  }), completed ? /* @__PURE__ */ React.createElement(SCompleted, _ref10.cn("SCompleted", {})) : number), /* @__PURE__ */ React.createElement(SStepDescription, _ref10.cn("SStepDescription", {}), /* @__PURE__ */ React.createElement(Children, _ref10.cn("Children", {}))));
 }
-w.enhance = [L()];
-function Y(e) {
-  var _ = arguments[0], t, r = e.Children, n = e.children, i = e.styles, s = e.uid, c = e.step, o = x;
-  return t = h(i), /* @__PURE__ */ a.createElement(o, t.cn("SContent", v({}, S({
-    role: "tabpanel",
-    "aria-labelledby": "".concat(s, "-stepper-").concat(c),
-    id: "".concat(s, "-content-").concat(c)
-  }, _))), n ? /* @__PURE__ */ a.createElement(r, t.cn("Children", {})) : stepName);
+Stepper.enhance = [keyboardFocusEnhance()];
+function Content(props) {
+  var _ref4 = arguments[0], _ref11;
+  var Children = props.Children, hasChildren = props.children, styles = props.styles, uid = props.uid, step = props.step;
+  var SContent = Box;
+  return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContent, _ref11.cn("SContent", _objectSpread({}, assignProps({
+    "role": "tabpanel",
+    "aria-labelledby": "".concat(uid, "-stepper-").concat(step),
+    "id": "".concat(uid, "-content-").concat(step)
+  }, _ref4))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : stepName);
 }
-function Z(e) {
-  var _ = arguments[0], t, r = m, n = e.Children, i = e.children, s = e.styles, c = e.getI18nText, o = e.stepName, l = a.useCallback(function() {
-    var d;
-    (d = e.onActive) === null || d === void 0 || d.call(e, e.step - 1);
-  }, [e.step]);
-  return t = h(s), /* @__PURE__ */ a.createElement(r, t.cn("SStepBack", v({}, S({
-    use: "tertiary",
-    size: "l",
-    onClick: l,
-    "aria-label": c("backButton", {
-      buttonName: o
+function StepBack(props) {
+  var _ref5 = arguments[0], _ref12;
+  var SStepBack = Button;
+  var Children = props.Children, hasChildren = props.children, styles = props.styles, getI18nText = props.getI18nText, stepName2 = props.stepName;
+  var handleClick = React.useCallback(function() {
+    var _props$onActive;
+    (_props$onActive = props.onActive) === null || _props$onActive === void 0 ? void 0 : _props$onActive.call(props, props.step - 1);
+  }, [props.step]);
+  return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SStepBack, _ref12.cn("SStepBack", _objectSpread({}, assignProps({
+    "use": "tertiary",
+    "size": "l",
+    "onClick": handleClick,
+    "aria-label": getI18nText("backButton", {
+      buttonName: stepName2
     })
-  }, _))), /* @__PURE__ */ a.createElement(m.Addon, null, /* @__PURE__ */ a.createElement(J, t.cn("ArrowLeft", {}))), /* @__PURE__ */ a.createElement(m.Text, null, i ? /* @__PURE__ */ a.createElement(n, t.cn("Children", {})) : o));
+  }, _ref5))), /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(ArrowLeft, _ref12.cn("ArrowLeft", {}))), /* @__PURE__ */ React.createElement(Button.Text, null, hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref12.cn("Children", {})) : stepName2));
 }
-function ee(e) {
-  var _ = arguments[0], t, r = m, n = e.Children, i = e.children, s = e.styles, c = e.getI18nText, o = e.stepName, l = a.useCallback(function() {
-    var d;
-    (d = e.onActive) === null || d === void 0 || d.call(e, e.step + 1);
-  }, [e.step]);
-  return t = h(s), /* @__PURE__ */ a.createElement(r, t.cn("SStepNext", v({}, S({
-    use: "tertiary",
-    size: "l",
-    onClick: l,
-    "aria-label": c("nextButton", {
-      buttonName: o
+function StepNext(props) {
+  var _ref6 = arguments[0], _ref13;
+  var SStepNext = Button;
+  var Children = props.Children, hasChildren = props.children, styles = props.styles, getI18nText = props.getI18nText, stepName2 = props.stepName;
+  var handleClick = React.useCallback(function() {
+    var _props$onActive2;
+    (_props$onActive2 = props.onActive) === null || _props$onActive2 === void 0 ? void 0 : _props$onActive2.call(props, props.step + 1);
+  }, [props.step]);
+  return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SStepNext, _ref13.cn("SStepNext", _objectSpread({}, assignProps({
+    "use": "tertiary",
+    "size": "l",
+    "onClick": handleClick,
+    "aria-label": getI18nText("nextButton", {
+      buttonName: stepName2
     })
-  }, _))), /* @__PURE__ */ a.createElement(m.Text, null, i ? /* @__PURE__ */ a.createElement(n, t.cn("Children", {})) : o), /* @__PURE__ */ a.createElement(m.Addon, null, /* @__PURE__ */ a.createElement(G, t.cn("ArrowRight", {}))));
+  }, _ref6))), /* @__PURE__ */ React.createElement(Button.Text, null, hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : stepName2), /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(ArrowRight, _ref13.cn("ArrowRight", {}))));
 }
-var ye = F(f, {
-  Sidebar: V,
-  Content: Y,
-  Step: X,
-  Stepper: w,
-  StepBack: Z,
-  StepNext: ee
-}), Ce = function(_) {
-  return _;
+var Wizard = createComponent(WizardRoot, {
+  Sidebar,
+  Content,
+  Step,
+  Stepper,
+  StepBack,
+  StepNext
+});
+var wrapWizardStepper = function wrapWizardStepper2(wrapper) {
+  return wrapper;
 };
 export {
-  ye as default,
-  Ce as wrapWizardStepper
+  Wizard as default,
+  wrapWizardStepper
 };

package/wizard/lib/esm/index.mjs

@@ -1,5 +1,5 @@
-import { default as p, wrapWizardStepper as a } from "./Wizard.mjs";
+import { default as default2, wrapWizardStepper } from "./Wizard.mjs";
 export {
-  p as default,
-  a as wrapWizardStepper
+  default2 as default,
+  wrapWizardStepper
 };

package/wizard/lib/esm/style/wizard.shadow.css

@@ -0,0 +1,103 @@
+SWizard {
+  max-width: 980px;
+  max-height: 700px;
+  display: flex;
+  padding: 0;
+  background: transparent;
+}
+
+SSidebar {
+  background: var(--intergalactic-control-primary-advertising, #5925ab);
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  font-weight: var(--intergalactic-bold, 700);
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+  padding: var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px)
+    calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
+  max-width: 220px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--intergalactic-modal-rounded, 12px) 0 0
+    var(--intergalactic-modal-rounded, 12px);
+  @media (max-width: 1060px) {
+    width: 44px;
+  }
+}
+
+SSidebarHeader {
+  font-size: var(--intergalactic-fs-300, 16px);
+  margin: 0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px);
+  @media (max-width: 1060px) {
+    display: none;
+  }
+}
+
+SStepper {
+  display: flex;
+  font-size: var(--intergalactic-fs-200, 14px);
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
+  cursor: pointer;
+  position: relative;
+  overflow: auto;
+  line-height: var(--intergalactic-lh-200, 142%);
+
+  &:hover {
+    background: var(--intergalactic-control-primary-advertising-hover, #421983);
+    z-index: 1;
+  }
+  &[active] {
+    background: var(--intergalactic-control-primary-advertising-active, #8649e1);
+  }
+  &:disabled,
+  &[disabled] {
+    opacity: var(--intergalactic-disabled-opacity, 0.3);
+    cursor: default;
+    pointer-events: none; /* Disable interactions */
+  }
+
+  @media (max-width: 1060px) {
+    padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-1x, 4px);
+    &:hover {
+      width: fit-content;
+      max-width: 220px;
+    }
+    &:hover SStepDescription {
+      display: block;
+      border-radius: var(--intergalactic-control-rounded, 6px);
+      white-space: nowrap;
+      overflow: auto;
+    }
+    &[active]:hover SStepDescription {
+      background: var(--intergalactic-control-primary-advertising-active, #8649e1);
+    }
+  }
+}
+
+SStepNumber {
+  display: inline-block;
+  min-width: 20px;
+}
+
+SCompleted {
+  /* disable-tokens-validator */
+  margin-top: 1px;
+}
+
+SStepDescription {
+  @media (max-width: 1060px) {
+    display: none;
+  }
+}
+
+SContent {
+  padding: var(--intergalactic-spacing-10x, 40px);
+  width: 100%;
+  border-radius: 0 var(--intergalactic-modal-rounded, 12px) var(--intergalactic-modal-rounded, 12px)
+    0;
+  background: var(--intergalactic-bg-primary-neutral, #ffffff);
+}
+
+SSidebarMenu {
+  display: contents;
+}