@semcore/side-panel 16.0.0-prerelease.6 → 16.0.0-prerelease.9

package/lib/esm/SidePanel.mjs

@@ -1,111 +1,121 @@
-import v from "@babel/runtime/helpers/esm/objectSpread2";
-import B from "@babel/runtime/helpers/esm/classCallCheck";
-import O from "@babel/runtime/helpers/esm/createClass";
-import p from "@babel/runtime/helpers/esm/assertThisInitialized";
-import T from "@babel/runtime/helpers/esm/inherits";
-import I from "@babel/runtime/helpers/esm/createSuper";
-import m from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as c, createComponent as z, assignProps as s, Component as A } from "@semcore/core";
-import l from "react";
-import { Flex as F, Box as P } from "@semcore/flex-box";
-import { FadeInOut as R, Slide as M } from "@semcore/animation";
-import N, { PortalProvider as L } from "@semcore/portal";
-import D from "@semcore/outside-click";
-import H from "@semcore/icon/Close/l";
-import S from "@semcore/core/lib/utils/fire";
-import { isAdvanceMode as y } from "@semcore/core/lib/utils/findComponent";
-import $ from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
-import K from "@semcore/core/lib/utils/use/usePreventScroll";
-import { Text as U } from "@semcore/typography";
-import Z from "@semcore/icon/ArrowLeft/m";
-import j, { ButtonLink as w } from "@semcore/button";
-import { cssVariableEnhance as q } from "@semcore/core/lib/utils/useCssVariable";
-import { useFocusLock as V } from "@semcore/core/lib/utils/use/useFocusLock";
-import { useContextTheme as G } from "@semcore/core/lib/utils/ThemeProvider";
-import J from "@semcore/core/lib/utils/logger";
-import Q from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { localizedMessages as W } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { useZIndexStacking as X, ZIndexStackingContextProvider as Y } from "@semcore/core/lib/utils/zIndexStacking";
-var ee = (
+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, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Flex, Box } from "@semcore/flex-box";
+import { FadeInOut, Slide } from "@semcore/animation";
+import Portal, { PortalProvider } from "@semcore/portal";
+import OutsideClick from "@semcore/outside-click";
+import CloseIcon from "@semcore/icon/Close/l";
+import fire from "@semcore/core/lib/utils/fire";
+import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
+import usePreventScroll from "@semcore/core/lib/utils/use/usePreventScroll";
+import { Text } from "@semcore/typography";
+import ArrowLeft from "@semcore/icon/ArrowLeft/m";
+import Button, { ButtonLink } from "@semcore/button";
+import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
+import { useFocusLock } from "@semcore/core/lib/utils/use/useFocusLock";
+import { useContextTheme } from "@semcore/core/lib/utils/ThemeProvider";
+import logger from "@semcore/core/lib/utils/logger";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { useZIndexStacking, ZIndexStackingContextProvider } from "@semcore/core/lib/utils/zIndexStacking";
+var style = (
   /*__reshadow_css_start__*/
-  (c.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     ".___SOverlay_vg6wl_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, #191b23)}.___SPanel_vg6wl_gg_{display:flex;flex-direction:column;width:260px;outline:0;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral, #ffffff);z-index:1}.___SPanel_vg6wl_gg_._placement_right_vg6wl_gg_,.___SPanel_vg6wl_gg_._placement_top_vg6wl_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_vg6wl_gg_._placement_top_vg6wl_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_vg6wl_gg_._placement_right_vg6wl_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_vg6wl_gg_._placement_bottom_vg6wl_gg_,.___SPanel_vg6wl_gg_._placement_left_vg6wl_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_vg6wl_gg_._placement_bottom_vg6wl_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_vg6wl_gg_._placement_left_vg6wl_gg_{height:100vh;margin-right:auto;top:0}.___SClose_vg6wl_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SClose_vg6wl_gg_ .___SAddon_vg6wl_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_vg6wl_gg_{max-width:100%}.___SBack_vg6wl_gg_ .___SInner_vg6wl_gg_{display:flex}.___SBack_vg6wl_gg_ .___SBackText_vg6wl_gg_,.___STitle_vg6wl_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_vg6wl_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);color:var(--intergalactic-text-primary, #191b23)}.___SHeader_vg6wl_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);margin-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px));margin-top:var(--intergalactic-spacing-1x, 4px);min-height:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SFooter_vg6wl_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_vg6wl_gg_{height:100%;overflow:auto;padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-4x, 16px);padding-right:var(--intergalactic-spacing-6x, 24px);padding-top:var(--intergalactic-spacing-4x, 16px)}",
     "vg6wl_gg_"
   ), {
-    __SOverlay: "___SOverlay_vg6wl_gg_",
-    __SPanel: "___SPanel_vg6wl_gg_",
-    _placement_top: "_placement_top_vg6wl_gg_",
-    _placement_right: "_placement_right_vg6wl_gg_",
-    _placement_bottom: "_placement_bottom_vg6wl_gg_",
-    _placement_left: "_placement_left_vg6wl_gg_",
-    __STitle: "___STitle_vg6wl_gg_",
-    __SHeader: "___SHeader_vg6wl_gg_",
-    __SFooter: "___SFooter_vg6wl_gg_",
-    __SBody: "___SBody_vg6wl_gg_",
-    __SClose: "___SClose_vg6wl_gg_",
-    __SAddon: "___SAddon_vg6wl_gg_",
-    __SBack: "___SBack_vg6wl_gg_",
-    __SInner: "___SInner_vg6wl_gg_",
-    __SBackText: "___SBackText_vg6wl_gg_"
+    "__SOverlay": "___SOverlay_vg6wl_gg_",
+    "__SPanel": "___SPanel_vg6wl_gg_",
+    "_placement_top": "_placement_top_vg6wl_gg_",
+    "_placement_right": "_placement_right_vg6wl_gg_",
+    "_placement_bottom": "_placement_bottom_vg6wl_gg_",
+    "_placement_left": "_placement_left_vg6wl_gg_",
+    "__STitle": "___STitle_vg6wl_gg_",
+    "__SHeader": "___SHeader_vg6wl_gg_",
+    "__SFooter": "___SFooter_vg6wl_gg_",
+    "__SBody": "___SBody_vg6wl_gg_",
+    "__SClose": "___SClose_vg6wl_gg_",
+    "__SAddon": "___SAddon_vg6wl_gg_",
+    "__SBack": "___SBack_vg6wl_gg_",
+    "__SInner": "___SInner_vg6wl_gg_",
+    "__SBackText": "___SBackText_vg6wl_gg_"
   })
-), f = /* @__PURE__ */ function(a) {
-  T(e, a);
-  var o = I(e);
-  function e() {
-    var t;
-    B(this, e);
-    for (var r = arguments.length, n = new Array(r), i = 0; i < r; i++)
-      n[i] = arguments[i];
-    return t = o.call.apply(o, [this].concat(n)), m(p(t), "sidebarRef", /* @__PURE__ */ l.createRef()), m(p(t), "handleSidebarKeyDown", function(_) {
-      _.key === "Escape" && (_.stopPropagation(), S(p(t), "onClose", "onEscape", _));
-    }), m(p(t), "handleIconCloseClick", function(_) {
-      S(p(t), "onClose", "onCloseClick", _);
-    }), m(p(t), "handleOutsideClick", function(_) {
-      S(p(t), "onClose", "onOutsideClick", _);
-    }), t;
+);
+var RootSidePanel = /* @__PURE__ */ function(_Component) {
+  _inherits(RootSidePanel2, _Component);
+  var _super = _createSuper(RootSidePanel2);
+  function RootSidePanel2() {
+    var _this;
+    _classCallCheck(this, RootSidePanel2);
+    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), "sidebarRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "handleSidebarKeyDown", function(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        fire(_assertThisInitialized(_this), "onClose", "onEscape", e);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleIconCloseClick", function(e) {
+      fire(_assertThisInitialized(_this), "onClose", "onCloseClick", e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleOutsideClick", function(e) {
+      fire(_assertThisInitialized(_this), "onClose", "onOutsideClick", e);
+    });
+    return _this;
   }
-  return O(e, [{
+  _createClass(RootSidePanel2, [{
     key: "isAdvanceMode",
-    value: function() {
-      return y(this.asProps.Children, [g.Overlay.displayName, g.Panel.displayName]);
+    value: function isAdvanceMode$1() {
+      return isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName, SidePanel.Panel.displayName]);
     }
   }, {
     key: "isUsedOverlay",
-    value: function() {
-      return !this.isAdvanceMode() || y(this.asProps.Children, [g.Overlay.displayName]);
+    value: function isUsedOverlay() {
+      return !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName]);
     }
   }, {
     key: "getOverlayProps",
-    value: function() {
-      var r = this.asProps, n = r.visible, i = r.duration, _ = r.animationsDisabled, d = r.disablePreventScroll;
+    value: function getOverlayProps() {
+      var _this$asProps = this.asProps, visible = _this$asProps.visible, duration = _this$asProps.duration, animationsDisabled = _this$asProps.animationsDisabled, disablePreventScroll = _this$asProps.disablePreventScroll;
       return {
-        visible: n,
-        duration: i,
-        animationsDisabled: _,
-        disablePreventScroll: d
+        visible,
+        duration,
+        animationsDisabled,
+        disablePreventScroll
       };
     }
   }, {
     key: "getPanelProps",
-    value: function() {
-      var r = this.asProps, n = r.placement, i = r.visible, _ = r.closable, d = r.duration, h = r.animationsDisabled, x = r["aria-label"], b = r["aria-labelledby"];
+    value: function getPanelProps() {
+      var _this$asProps2 = this.asProps, placement = _this$asProps2.placement, visible = _this$asProps2.visible, closable = _this$asProps2.closable, duration = _this$asProps2.duration, animationsDisabled = _this$asProps2.animationsDisabled, ariaLabel = _this$asProps2["aria-label"], ariaLabelledBy = _this$asProps2["aria-labelledby"];
       return {
-        visible: i,
-        placement: n,
-        closable: _,
-        duration: d + d / 2,
+        visible,
+        placement,
+        closable,
+        duration: duration + duration / 2,
         disableEnforceFocus: !this.isUsedOverlay(),
         onOutsideClick: this.handleOutsideClick,
         onKeyDown: this.handleSidebarKeyDown,
-        animationsDisabled: h,
-        "aria-label": x,
-        "aria-labelledby": b
+        animationsDisabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
       };
     }
   }, {
     key: "getCloseProps",
-    value: function() {
+    value: function getCloseProps() {
       return {
         onClick: this.handleIconCloseClick,
         getI18nText: this.asProps.getI18nText
@@ -113,110 +123,130 @@ var ee = (
     }
   }, {
     key: "render",
-    value: function() {
-      var r = this.asProps, n = this.asProps, i = n.Children, _ = n.disablePortal, d = n.ignorePortalsStacking;
-      return /* @__PURE__ */ l.createElement(N, {
-        disablePortal: _,
-        ignorePortalsStacking: d
-      }, this.isAdvanceMode() ? /* @__PURE__ */ l.createElement(i, null) : /* @__PURE__ */ l.createElement(g.Overlay, null, /* @__PURE__ */ l.createElement(g.Panel, s({}, r))));
+    value: function render() {
+      var _ref = this.asProps;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, disablePortal = _this$asProps3.disablePortal, ignorePortalsStacking = _this$asProps3.ignorePortalsStacking;
+      return /* @__PURE__ */ React.createElement(Portal, {
+        disablePortal,
+        ignorePortalsStacking
+      }, this.isAdvanceMode() ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(SidePanel.Overlay, null, /* @__PURE__ */ React.createElement(SidePanel.Panel, assignProps({}, _ref))));
     }
-  }]), e;
-}(A);
-m(f, "displayName", "SidePanel");
-m(f, "style", ee);
-m(f, "enhance", [q({
+  }]);
+  return RootSidePanel2;
+}(Component);
+_defineProperty(RootSidePanel, "displayName", "SidePanel");
+_defineProperty(RootSidePanel, "style", style);
+_defineProperty(RootSidePanel, "enhance", [cssVariableEnhance({
   variable: "--intergalactic-duration-modal",
   fallback: "200",
   map: Number.parseInt,
   prop: "duration"
-}), Q(W)]);
-m(f, "defaultProps", {
+}), i18nEnhance(localizedMessages)]);
+_defineProperty(RootSidePanel, "defaultProps", {
   placement: "right",
-  closable: !0,
-  disablePreventScroll: !1
+  closable: true,
+  disablePreventScroll: false
 });
-function ae(a) {
-  var o = arguments[0], e, t = R, r = l.useRef(null);
-  K(a.visible, a.disablePreventScroll), G(r, a.visible);
-  var n = X("z-index-modal");
-  return e = c(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SOverlay", v({}, s({
-    ref: r,
-    zIndex: n
-  }, o))));
+function Overlay(props) {
+  var _ref2 = arguments[0], _ref10;
+  var SOverlay = FadeInOut;
+  var overlayRef = React.useRef(null);
+  usePreventScroll(props.visible, props.disablePreventScroll);
+  useContextTheme(overlayRef, props.visible);
+  var zIndex = useZIndexStacking("z-index-modal");
+  return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SOverlay, _ref10.cn("SOverlay", _objectSpread({}, assignProps({
+    "ref": overlayRef,
+    "zIndex": zIndex
+  }, _ref2))));
 }
-function C(a) {
-  var o = arguments[0], e, t = M, r = a.Children, n = a.styles, i = a.visible, _ = a.closable, d = a.placement, h = a.onOutsideClick, x = a.forcedAdvancedMode, b = x || y(r, [g.Header.displayName, g.Body.displayName, g.Footer.displayName]), u = l.useRef(null);
-  V(u, !0, "auto", !i, !0);
-  var E = !!(a["aria-label"] || a["aria-labelledby"]);
-  return J.warn(!E, "'aria-label' or 'aria-labelledby' are required for SidePanel component", a["data-ui-name"] || C.displayName), e = c(n), /* @__PURE__ */ l.createElement(l.Fragment, null, i && /* @__PURE__ */ l.createElement(D, e.cn("OutsideClick", {
-    onOutsideClick: h,
-    excludeRefs: [u]
-  })), /* @__PURE__ */ l.createElement(t, e.cn("SPanel", v({}, s({
-    visible: i,
-    initialAnimation: !0,
-    slideOrigin: d,
-    ref: u,
-    role: "dialog",
+function Panel(props) {
+  var _ref3 = arguments[0], _ref11;
+  var SPanel = Slide;
+  var Children = props.Children, styles = props.styles, visible = props.visible, closable = props.closable, placement = props.placement, onOutsideClick = props.onOutsideClick, forcedAdvancedMode = props.forcedAdvancedMode;
+  var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [SidePanel.Header.displayName, SidePanel.Body.displayName, SidePanel.Footer.displayName]);
+  var sidebarRef = React.useRef(null);
+  useFocusLock(sidebarRef, true, "auto", !visible, true);
+  var hasLabel = Boolean(props["aria-label"] || props["aria-labelledby"]);
+  logger.warn(!hasLabel, "'aria-label' or 'aria-labelledby' are required for SidePanel component", props["data-ui-name"] || Panel.displayName);
+  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, visible && /* @__PURE__ */ React.createElement(OutsideClick, _ref11.cn("OutsideClick", {
+    "onOutsideClick": onOutsideClick,
+    "excludeRefs": [sidebarRef]
+  })), /* @__PURE__ */ React.createElement(SPanel, _ref11.cn("SPanel", _objectSpread({}, assignProps({
+    "visible": visible,
+    "initialAnimation": true,
+    "slideOrigin": placement,
+    "ref": sidebarRef,
+    "role": "dialog",
     "aria-modal": "true"
-  }, o))), /* @__PURE__ */ l.createElement(Y, e.cn("ZIndexStackingContextProvider", {
-    designToken: "z-index-modal"
-  }), /* @__PURE__ */ l.createElement(L, e.cn("PortalProvider", {
-    value: u
-  }), _ && /* @__PURE__ */ l.createElement(g.Close, null), b ? /* @__PURE__ */ l.createElement(r, e.cn("Children", {})) : /* @__PURE__ */ l.createElement(g.Body, null, /* @__PURE__ */ l.createElement(r, e.cn("Children", {})))))));
+  }, _ref3))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref11.cn("ZIndexStackingContextProvider", {
+    "designToken": "z-index-modal"
+  }), /* @__PURE__ */ React.createElement(PortalProvider, _ref11.cn("PortalProvider", {
+    "value": sidebarRef
+  }), closable && /* @__PURE__ */ React.createElement(SidePanel.Close, null), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : /* @__PURE__ */ React.createElement(SidePanel.Body, null, /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})))))));
 }
-function te(a) {
-  var o = arguments[0], e, t = F;
-  return e = c(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SFooter", v({}, s({
-    tag: "footer"
-  }, o))));
+function Footer(props) {
+  var _ref4 = arguments[0], _ref12;
+  var SFooter = Flex;
+  return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SFooter, _ref12.cn("SFooter", _objectSpread({}, assignProps({
+    "tag": "footer"
+  }, _ref4))));
 }
-function k(a) {
-  var o = arguments[0], e, t = a.styles, r = a.children, n = a.Children, i = a.getI18nText, _ = j;
-  return e = c(t), /* @__PURE__ */ l.createElement(_, e.cn("SClose", v({}, s({
-    "aria-label": i("close"),
-    use: "tertiary",
-    theme: "muted",
-    size: "l",
-    addonLeft: r ? void 0 : H
-  }, o))), r ? /* @__PURE__ */ l.createElement(n, e.cn("Children", {})) : void 0);
+function Close(_ref18) {
+  var _ref5 = arguments[0], _ref13;
+  var styles = _ref18.styles, hasChildren = _ref18.children, Children = _ref18.Children, getI18nText = _ref18.getI18nText;
+  var SClose = Button;
+  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SClose, _ref13.cn("SClose", _objectSpread({}, assignProps({
+    "aria-label": getI18nText("close"),
+    "use": "tertiary",
+    "theme": "muted",
+    "size": "l",
+    "addonLeft": hasChildren ? void 0 : CloseIcon
+  }, _ref5))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : void 0);
 }
-k.enhance = [$()];
-function re(a) {
-  var o = arguments[0], e, t = U;
-  return e = c(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("STitle", v({}, s({
-    tag: "h6"
-  }, o))));
+Close.enhance = [keyboardFocusEnhance()];
+function Title(props) {
+  var _ref6 = arguments[0], _ref14;
+  var STitle = Text;
+  return _ref14 = sstyled(props.styles), /* @__PURE__ */ React.createElement(STitle, _ref14.cn("STitle", _objectSpread({}, assignProps({
+    "tag": "h6"
+  }, _ref6))));
 }
-function le(a) {
-  var o = arguments[0], e, t = w, r = w.Text, n = a.Children, i = a.styles;
-  return e = c(i), /* @__PURE__ */ l.createElement(t, e.cn("SBack", v({}, s({
-    color: "text-hint",
-    size: 100,
-    addonLeft: Z
-  }, o))), /* @__PURE__ */ l.createElement(r, e.cn("SBackText", {}), /* @__PURE__ */ l.createElement(n, e.cn("Children", {}))));
+function Back(props) {
+  var _ref7 = arguments[0], _ref15;
+  var SBack = ButtonLink;
+  var SBackText = ButtonLink.Text;
+  var Children = props.Children, styles = props.styles;
+  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SBack, _ref15.cn("SBack", _objectSpread({}, assignProps({
+    "color": "text-hint",
+    "size": 100,
+    "addonLeft": ArrowLeft
+  }, _ref7))), /* @__PURE__ */ React.createElement(SBackText, _ref15.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {}))));
 }
-function ie(a) {
-  var o = arguments[0], e, t = P;
-  return e = c(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SBody", v({}, s({}, o))));
+function Body(props) {
+  var _ref8 = arguments[0], _ref16;
+  var SBody = Box;
+  return _ref16 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBody, _ref16.cn("SBody", _objectSpread({}, assignProps({}, _ref8))));
 }
-function ne(a) {
-  var o = arguments[0], e, t = P, r = a.Children, n = a.styles, i = a.title;
-  return e = c(n), /* @__PURE__ */ l.createElement(t, e.cn("SHeader", v({}, s({
-    tag: "header"
-  }, o))), i && /* @__PURE__ */ l.createElement(g.Title, {
-    children: i
-  }), /* @__PURE__ */ l.createElement(r, e.cn("Children", {})));
+function Header(props) {
+  var _ref9 = arguments[0], _ref17;
+  var SHeader = Box;
+  var Children = props.Children, styles = props.styles, title = props.title;
+  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref17.cn("SHeader", _objectSpread({}, assignProps({
+    "tag": "header"
+  }, _ref9))), title && /* @__PURE__ */ React.createElement(SidePanel.Title, {
+    children: title
+  }), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
 }
-var g = z(f, {
-  Overlay: ae,
-  Panel: C,
-  Close: k,
-  Header: ne,
-  Footer: te,
-  Body: ie,
-  Back: le,
-  Title: re
+var SidePanel = createComponent(RootSidePanel, {
+  Overlay,
+  Panel,
+  Close,
+  Header,
+  Footer,
+  Body,
+  Back,
+  Title
 });
 export {
-  g as default
+  SidePanel as default
 };

package/lib/esm/index.mjs

@@ -1,4 +1,4 @@
-import { default as o } from "./SidePanel.mjs";
+import { default as default2 } from "./SidePanel.mjs";
 export {
-  o as default
+  default2 as default
 };

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,7 +1,8 @@
-const e = "Schließen", c = {
-  close: e
+const close = "Schließen";
+const de = {
+  close
 };
 export {
-  e as close,
-  c as default
+  close,
+  de as default
 };

package/lib/esm/translations/en.json.mjs

@@ -1,7 +1,8 @@
-const e = "Close", o = {
-  close: e
+const close = "Close";
+const en = {
+  close
 };
 export {
-  e as close,
-  o as default
+  close,
+  en as default
 };

package/lib/esm/translations/es.json.mjs

@@ -1,7 +1,8 @@
-const e = "Cerrar", s = {
-  close: e
+const close = "Cerrar";
+const es = {
+  close
 };
 export {
-  e as close,
-  s as default
+  close,
+  es as default
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,7 +1,8 @@
-const e = "Fermer", o = {
-  close: e
+const close = "Fermer";
+const fr = {
+  close
 };
 export {
-  e as close,
-  o as default
+  close,
+  fr as default
 };

package/lib/esm/translations/it.json.mjs

@@ -1,7 +1,8 @@
-const o = "Chiudi", s = {
-  close: o
+const close = "Chiudi";
+const it = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  it as default
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,7 +1,8 @@
-const o = "閉じる", s = {
-  close: o
+const close = "閉じる";
+const ja = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  ja as default
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,7 +1,8 @@
-const o = "닫기", s = {
-  close: o
+const close = "닫기";
+const ko = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  ko as default
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,7 +1,8 @@
-const e = "Sluiten", l = {
-  close: e
+const close = "Sluiten";
+const nl = {
+  close
 };
 export {
-  e as close,
-  l as default
+  close,
+  nl as default
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,7 +1,8 @@
-const o = "Zamknij", s = {
-  close: o
+const close = "Zamknij";
+const pl = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  pl as default
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,7 +1,8 @@
-const c = "Fechar", e = {
-  close: c
+const close = "Fechar";
+const pt = {
+  close
 };
 export {
-  c as close,
-  e as default
+  close,
+  pt as default
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,7 +1,8 @@
-const s = "Stäng", o = {
-  close: s
+const close = "Stäng";
+const sv = {
+  close
 };
 export {
-  s as close,
-  o as default
+  close,
+  sv as default
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,7 +1,8 @@
-const t = "Kapat", o = {
-  close: t
+const close = "Kapat";
+const tr = {
+  close
 };
 export {
-  t as close,
-  o as default
+  close,
+  tr as default
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,7 +1,8 @@
-const o = "Đóng", s = {
-  close: o
+const close = "Đóng";
+const vi = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  vi as default
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,7 +1,8 @@
-const o = "关闭", s = {
-  close: o
+const close = "关闭";
+const zh = {
+  close
 };
 export {
-  o as close,
-  s as default
+  close,
+  zh as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/side-panel",
   "description": "Semrush SidePanel Component",
-  "version": "16.0.0-prerelease.6",
+  "version": "16.0.0-prerelease.9",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,16 +14,16 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/animation": "16.0.0-prerelease.6",
-    "@semcore/button": "16.0.0-prerelease.6",
-    "@semcore/flex-box": "16.0.0-prerelease.6",
-    "@semcore/portal": "16.0.0-prerelease.6",
-    "@semcore/outside-click": "16.0.0-prerelease.6",
-    "@semcore/typography": "16.0.0-prerelease.6",
-    "@semcore/icon": "16.0.0-prerelease.6"
+    "@semcore/animation": "16.0.0-prerelease.9",
+    "@semcore/button": "16.0.0-prerelease.9",
+    "@semcore/flex-box": "16.0.0-prerelease.9",
+    "@semcore/portal": "16.0.0-prerelease.9",
+    "@semcore/outside-click": "16.0.0-prerelease.9",
+    "@semcore/typography": "16.0.0-prerelease.9",
+    "@semcore/icon": "16.0.0-prerelease.9"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.6"
+    "@semcore/base-components": "^16.0.0-prerelease.9"
   },
   "repository": {
     "type": "git",