@semcore/side-panel 3.38.0 → 3.39.0-prerelease.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.39.0] - 2024-07-02
+
+### Changed
+
+- Added `role="dialog"`, `aria-label` or `aria-labelledby` are required from now.
+- Close icon is wrapped into Button with localized aria-label.
+- `SidePanel.Back` is button now.
+- `SidePanel.Header` and `SidePanel.Footer` are using semantic `header` and `footer` correspondingly.
+
 ## [3.38.0] - 2024-07-05
 
 ### Changed

package/lib/cjs/SidePanel.js

@@ -27,25 +27,34 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/e
 var _usePreventScroll = _interopRequireDefault(require("@semcore/utils/lib/use/usePreventScroll"));
 var _typography = require("@semcore/typography");
 var _m = _interopRequireDefault(require("@semcore/icon/ArrowLeft/m"));
+var _button = _interopRequireDefault(require("@semcore/button"));
 var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
 var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
 var _ThemeProvider = require("@semcore/utils/lib/ThemeProvider");
+var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
+var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*__reshadow-styles__:"./style/side-panel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SOverlay_l0r0w_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;z-index:var(--intergalactic-z-index-overlay, 500);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, #191b23)}.___SPanel_l0r0w_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_l0r0w_gg_._placement_right_l0r0w_gg_,.___SPanel_l0r0w_gg_._placement_top_l0r0w_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_l0r0w_gg_._placement_top_l0r0w_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_l0r0w_gg_._placement_right_l0r0w_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_l0r0w_gg_._placement_bottom_l0r0w_gg_,.___SPanel_l0r0w_gg_._placement_left_l0r0w_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_l0r0w_gg_._placement_bottom_l0r0w_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_l0r0w_gg_._placement_left_l0r0w_gg_{height:100vh;margin-right:auto;top:0}.___SClose_l0r0w_gg_{cursor:pointer;position:absolute;z-index:1;display:inline-flex;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px) var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_l0r0w_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SClose_l0r0w_gg_.__keyboardFocused_l0r0w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBack_l0r0w_gg_{display:flex;align-items:center;color:var(--intergalactic-text-secondary, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);margin-bottom:var(--intergalactic-spacing-1x, 4px);cursor:pointer}@media (hover:hover){.___SBack_l0r0w_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SBackText_l0r0w_gg_,.___STitle_l0r0w_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SBackText_l0r0w_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-200, 142%)}.___STitle_l0r0w_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_l0r0w_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-14x, 56px);padding-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_l0r0w_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_l0r0w_gg_{height:100%;overflow:auto;padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-10x, 40px);padding-top:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "l0r0w_gg_") /*__reshadow_css_end__*/, {
-  "__SOverlay": "___SOverlay_l0r0w_gg_",
-  "__SPanel": "___SPanel_l0r0w_gg_",
-  "_placement_top": "_placement_top_l0r0w_gg_",
-  "_placement_right": "_placement_right_l0r0w_gg_",
-  "_placement_bottom": "_placement_bottom_l0r0w_gg_",
-  "_placement_left": "_placement_left_l0r0w_gg_",
-  "__SClose": "___SClose_l0r0w_gg_",
-  "_keyboardFocused": "__keyboardFocused_l0r0w_gg_",
-  "__SBackText": "___SBackText_l0r0w_gg_",
-  "__STitle": "___STitle_l0r0w_gg_",
-  "__SHeader": "___SHeader_l0r0w_gg_",
-  "__SFooter": "___SFooter_l0r0w_gg_",
-  "__SBody": "___SBody_l0r0w_gg_",
-  "__SBack": "___SBack_l0r0w_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SOverlay_149rr_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;z-index:var(--intergalactic-z-index-overlay, 500);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, #191b23)}.___SPanel_149rr_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_149rr_gg_._placement_right_149rr_gg_,.___SPanel_149rr_gg_._placement_top_149rr_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_149rr_gg_._placement_top_149rr_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_149rr_gg_._placement_right_149rr_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_149rr_gg_._placement_bottom_149rr_gg_,.___SPanel_149rr_gg_._placement_left_149rr_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_149rr_gg_._placement_bottom_149rr_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_149rr_gg_._placement_left_149rr_gg_{height:100vh;margin-right:auto;top:0}.___SClose_149rr_gg_{cursor:pointer;position:absolute;z-index:1;right:var(--intergalactic-spacing-05x, 2px);top:var(--intergalactic-spacing-05x, 2px)}.___SClose_149rr_gg_.__size_149rr_gg_{height:auto}.___SClose_149rr_gg_.__size_149rr_gg_ .___SAddon_149rr_gg_{padding:calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px) + 1px)0;color:var(--intergalactic-icon-secondary-neutral, #a9abb6)}.___SClose_149rr_gg_.__keyboardFocused_149rr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBack_149rr_gg_._size_m_149rr_gg_{display:flex;align-items:center;color:var(--intergalactic-text-secondary, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);height:auto;min-width:auto;max-width:100%;margin-left:calc(var(--intergalactic-spacing-2x, 8px)*-1 + 1px)}@media (hover:hover){.___SBack_149rr_gg_._size_m_149rr_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SBack_149rr_gg_._size_m_149rr_gg_ .___SInner_149rr_gg_{justify-content:flex-start}.___SBack_149rr_gg_ .___SText_149rr_gg_{display:block}.___SBack_149rr_gg_.__size_149rr_gg_ .___SText_149rr_gg_{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SBackText_149rr_gg_,.___STitle_149rr_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SBackText_149rr_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-200, 142%)}.___STitle_149rr_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_149rr_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-6x, 24px);padding-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_149rr_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_149rr_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)}" /*__inner_css_end__*/, "149rr_gg_") /*__reshadow_css_end__*/, {
+  "__SOverlay": "___SOverlay_149rr_gg_",
+  "__SPanel": "___SPanel_149rr_gg_",
+  "_placement_top": "_placement_top_149rr_gg_",
+  "_placement_right": "_placement_right_149rr_gg_",
+  "_placement_bottom": "_placement_bottom_149rr_gg_",
+  "_placement_left": "_placement_left_149rr_gg_",
+  "__SClose": "___SClose_149rr_gg_",
+  "_size": "__size_149rr_gg_",
+  "__SAddon": "___SAddon_149rr_gg_",
+  "_keyboardFocused": "__keyboardFocused_149rr_gg_",
+  "__SBack": "___SBack_149rr_gg_",
+  "_size_m": "_size_m_149rr_gg_",
+  "__SInner": "___SInner_149rr_gg_",
+  "__SText": "___SText_149rr_gg_",
+  "__SBackText": "___SBackText_149rr_gg_",
+  "__STitle": "___STitle_149rr_gg_",
+  "__SHeader": "___SHeader_149rr_gg_",
+  "__SFooter": "___SFooter_149rr_gg_",
+  "__SBody": "___SBody_149rr_gg_"
 });
 var RootSidePanel = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RootSidePanel, _Component);
@@ -116,7 +125,9 @@ var RootSidePanel = /*#__PURE__*/function (_Component) {
         visible = _this$asProps2.visible,
         closable = _this$asProps2.closable,
         duration = _this$asProps2.duration,
-        animationsDisabled = _this$asProps2.animationsDisabled;
+        animationsDisabled = _this$asProps2.animationsDisabled,
+        ariaLabel = _this$asProps2['aria-label'],
+        ariaLabelledBy = _this$asProps2['aria-labelledby'];
       return {
         visible: visible,
         placement: placement,
@@ -126,14 +137,17 @@ var RootSidePanel = /*#__PURE__*/function (_Component) {
         delay: this.calculateDelayAnimation('panel'),
         onOutsideClick: this.handleOutsideClick,
         onKeyDown: this.handleSidebarKeyDown,
-        animationsDisabled: animationsDisabled
+        animationsDisabled: animationsDisabled,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy
       };
     }
   }, {
     key: "getCloseProps",
     value: function getCloseProps() {
       return {
-        onClick: this.handleIconCloseClick
+        onClick: this.handleIconCloseClick,
+        getI18nText: this.asProps.getI18nText
       };
     }
   }, {
@@ -159,7 +173,7 @@ var RootSidePanel = /*#__PURE__*/function (_Component) {
   fallback: '200',
   map: Number.parseInt,
   prop: 'duration'
-})]);
+}), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
 (0, _defineProperty2["default"])(RootSidePanel, "defaultProps", {
   placement: 'right',
   closable: true,
@@ -190,6 +204,8 @@ function Panel(props) {
   var advancedMode = forcedAdvancedMode || (0, _findComponent.isAdvanceMode)(Children, [SidePanel.Header.displayName, SidePanel.Body.displayName, SidePanel.Footer.displayName]);
   var sidebarRef = _react["default"].useRef(null);
   (0, _useFocusLock.useFocusLock)(sidebarRef, true, 'auto', !visible, true);
+  var hasLabel = Boolean(props['aria-label'] || props['aria-labelledby']);
+  _logger["default"].warn(!hasLabel, "'aria-label' or 'aria-labelledby' are required for SidePanel component", props['data-ui-name'] || Panel.displayName);
   return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, visible && /*#__PURE__*/_react["default"].createElement(_outsideClick["default"], _ref11.cn("OutsideClick", {
     "onOutsideClick": onOutsideClick,
     "excludeRefs": [sidebarRef]
@@ -197,7 +213,9 @@ function Panel(props) {
     "visible": visible,
     "initialAnimation": true,
     "slideOrigin": placement,
-    "ref": sidebarRef
+    "ref": sidebarRef,
+    "role": 'dialog',
+    "aria-modal": 'true'
   }, _ref3))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref11.cn("PortalProvider", {
     "value": sidebarRef
   }), closable && /*#__PURE__*/_react["default"].createElement(SidePanel.Close, null), advancedMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SidePanel.Body, null, /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {}))))));
@@ -206,20 +224,26 @@ function Footer(props) {
   var _ref4 = arguments[0],
     _ref12;
   var SFooter = _flexBox.Flex;
-  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref12.cn("SFooter", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))));
+  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref12.cn("SFooter", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "tag": 'footer'
+  }, _ref4))));
 }
 function Close(_ref18) {
   var _ref5 = arguments[0],
     _ref13;
   var styles = _ref18.styles,
-    children = _ref18.children,
-    Children = _ref18.Children;
-  var SClose = _flexBox.Box;
+    hasChildren = _ref18.children,
+    Children = _ref18.Children,
+    getI18nText = _ref18.getI18nText;
+  var SClose = _button["default"];
   return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref13.cn("SClose", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": 'button'
-  }, _ref5))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_l["default"], _ref13.cn("CloseIcon", {
-    "title": 'Close'
-  })));
+    "aria-label": getI18nText('close'),
+    "use": 'tertiary',
+    "theme": 'muted',
+    "type": 'button',
+    "size": 'l',
+    "addonLeft": hasChildren ? undefined : _l["default"]
+  }, _ref5))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})) : null);
 }
 Close.enhance = [(0, _keyboardFocusEnhance["default"])()];
 function Title(props) {
@@ -233,11 +257,17 @@ function Title(props) {
 function Back(props) {
   var _ref7 = arguments[0],
     _ref15;
-  var SBack = _flexBox.Box;
-  var SBackText = _typography.Text;
+  var SBack = _button["default"];
+  var SBackText = _button["default"].Text;
   var Children = props.Children,
     styles = props.styles;
-  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBack, _ref15.cn("SBack", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref7))), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref15.cn("ArrowLeft", {})), /*#__PURE__*/_react["default"].createElement(SBackText, _ref15.cn("SBackText", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {}))));
+  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBack, _ref15.cn("SBack", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "use": 'tertiary',
+    "theme": 'muted',
+    "type": 'button'
+  }, _ref7))), /*#__PURE__*/_react["default"].createElement(_button["default"].Addon, {
+    tag: _m["default"]
+  }), /*#__PURE__*/_react["default"].createElement(SBackText, _ref15.cn("SBackText", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {}))));
 }
 function Body(props) {
   var _ref8 = arguments[0],
@@ -252,7 +282,9 @@ function Header(props) {
   var Children = props.Children,
     styles = props.styles,
     title = props.title;
-  return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref17.cn("SHeader", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))), title && /*#__PURE__*/_react["default"].createElement(SidePanel.Title, {
+  return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref17.cn("SHeader", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "tag": 'header'
+  }, _ref9))), title && /*#__PURE__*/_react["default"].createElement(SidePanel.Title, {
     children: title
   }), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {})));
 }

package/lib/cjs/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_animation","_portal","_outsideClick","_l","_fire","_findComponent","_keyboardFocusEnhance","_usePreventScroll","_typography","_m","_useCssVariable","_useFocusLock","_ThemeProvider","style","_index","sstyled","insert","RootSidePanel","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","e","key","stopPropagation","fire","_createClass2","value","isAdvanceMode","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","calculateDelayAnimation","name","delay","duration","usedOverlay","overlay","panel","getOverlayProps","_this$asProps","visible","animationsDisabled","disablePreventScroll","getPanelProps","_this$asProps2","placement","closable","disableEnforceFocus","onOutsideClick","handleOutsideClick","onKeyDown","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","render","_ref","_this$asProps3","disablePortal","ignorePortalsStacking","createElement","assignProps","Component","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","props","_ref2","arguments[0]","_ref10","SOverlay","FadeInOut","overlayRef","useRef","usePreventScroll","useContextTheme","styles","cn","_objectSpread2","_ref3","_ref11","SPanel","Slide","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","useFocusLock","Fragment","PortalProvider","Close","_ref4","_ref12","SFooter","Flex","_ref18","_ref5","_ref13","children","SClose","Box","enhance","keyboardFocusEnhance","Title","_ref6","_ref14","STitle","Text","Back","_ref7","_ref15","SBack","SBackText","_ref8","_ref16","SBody","_ref9","_ref17","SHeader","title","createComponent","_default","exports"],"sources":["../../src/SidePanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Flex, Box } from '@semcore/flex-box';\nimport { FadeInOut, Slide } from '@semcore/animation';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { Text } from '@semcore/typography';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';\nimport { useContextTheme } from '@semcore/utils/lib/ThemeProvider';\n\nimport style from './style/side-panel.shadow.css';\n\nclass RootSidePanel extends Component {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n  ];\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  };\n\n  sidebarRef = React.createRef();\n\n  handleSidebarKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  isAdvanceMode() {\n    return isAdvanceMode(this.asProps.Children, [\n      SidePanel.Overlay.displayName,\n      SidePanel.Panel.displayName,\n    ]);\n  }\n\n  isUsedOverlay() {\n    return (\n      !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName])\n    );\n  }\n\n  calculateDelayAnimation(name) {\n    const delay = this.asProps.duration / 2;\n    const usedOverlay = this.isUsedOverlay();\n\n    return {\n      overlay: usedOverlay ? [0, delay] : 0,\n      panel: usedOverlay ? [delay, 0] : 0,\n    }[name];\n  }\n\n  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\n      delay: this.calculateDelayAnimation('overlay'),\n      animationsDisabled,\n      disablePreventScroll,\n    };\n  }\n\n  getPanelProps() {\n    const { placement, visible, closable, duration, animationsDisabled } = this.asProps;\n\n    return {\n      visible,\n      placement,\n      closable,\n      duration,\n      disableEnforceFocus: !this.isUsedOverlay(),\n      delay: this.calculateDelayAnimation('panel'),\n      onOutsideClick: this.handleOutsideClick,\n      onKeyDown: this.handleSidebarKeyDown,\n      animationsDisabled,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal, ignorePortalsStacking } = this.asProps;\n\n    return (\n      <Portal disablePortal={disablePortal} ignorePortalsStacking={ignorePortalsStacking}>\n        {this.isAdvanceMode() ? (\n          <Children />\n        ) : (\n          <SidePanel.Overlay>\n            <Root render={SidePanel.Panel} />\n          </SidePanel.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} />);\n}\n\nfunction Panel(props) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } =\n    props;\n  const advancedMode =\n    forcedAdvancedMode ||\n    isAdvanceMode(Children, [\n      SidePanel.Header.displayName,\n      SidePanel.Body.displayName,\n      SidePanel.Footer.displayName,\n    ]);\n\n  const sidebarRef = React.useRef(null);\n\n  useFocusLock(sidebarRef, true, 'auto', !visible, true);\n\n  return sstyled(styles)(\n    <>\n      {visible && <OutsideClick onOutsideClick={onOutsideClick} excludeRefs={[sidebarRef]} />}\n      <SPanel\n        render={Slide}\n        visible={visible}\n        initialAnimation={true}\n        slideOrigin={placement}\n        ref={sidebarRef}\n      >\n        <PortalProvider value={sidebarRef}>\n          {closable && <SidePanel.Close />}\n          {advancedMode ? (\n            <Children />\n          ) : (\n            <SidePanel.Body>\n              <Children />\n            </SidePanel.Body>\n          )}\n        </PortalProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(props) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} />);\n}\n\nfunction Close({ styles, children, Children }) {\n  const SClose = Root;\n  return sstyled(styles)(\n    <SClose render={Box} tag='button'>\n      {children ? <Children /> : <CloseIcon title='Close' />}\n    </SClose>,\n  );\n}\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' />);\n}\n\nfunction Back(props) {\n  const SBack = Root;\n  const SBackText = Text;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={Box}>\n      <ArrowLeft />\n      <SBackText>\n        <Children />\n      </SBackText>\n    </SBack>,\n  );\n}\n\nfunction Body(props) {\n  const SBody = Root;\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(props) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Box}>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\nconst SidePanel = createComponent(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_animation","_portal","_outsideClick","_l","_fire","_findComponent","_keyboardFocusEnhance","_usePreventScroll","_typography","_m","_button","_useCssVariable","_useFocusLock","_ThemeProvider","_logger","_i18nEnhance","_intergalacticDynamicLocales","style","_index","sstyled","insert","RootSidePanel","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","e","key","stopPropagation","fire","_createClass2","value","isAdvanceMode","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","calculateDelayAnimation","name","delay","duration","usedOverlay","overlay","panel","getOverlayProps","_this$asProps","visible","animationsDisabled","disablePreventScroll","getPanelProps","_this$asProps2","placement","closable","ariaLabel","ariaLabelledBy","disableEnforceFocus","onOutsideClick","handleOutsideClick","onKeyDown","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","_this$asProps3","disablePortal","ignorePortalsStacking","createElement","assignProps","Component","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","i18nEnhance","localizedMessages","props","_ref2","arguments[0]","_ref10","SOverlay","FadeInOut","overlayRef","useRef","usePreventScroll","useContextTheme","styles","cn","_objectSpread2","_ref3","_ref11","SPanel","Slide","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","useFocusLock","hasLabel","Boolean","logger","warn","Fragment","PortalProvider","Close","_ref4","_ref12","SFooter","Flex","_ref18","_ref5","_ref13","hasChildren","children","SClose","Button","undefined","CloseIcon","enhance","keyboardFocusEnhance","Title","_ref6","_ref14","STitle","Text","Back","_ref7","_ref15","SBack","SBackText","Addon","tag","ArrowLeft","_ref8","_ref16","SBody","Box","_ref9","_ref17","SHeader","title","createComponent","_default","exports"],"sources":["../../src/SidePanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Flex, Box } from '@semcore/flex-box';\nimport { FadeInOut, Slide } from '@semcore/animation';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { Text } from '@semcore/typography';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport Button from '@semcore/button';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';\nimport { useContextTheme } from '@semcore/utils/lib/ThemeProvider';\nimport logger from '@semcore/utils/lib/logger';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/side-panel.shadow.css';\n\nclass RootSidePanel extends Component {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ];\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  };\n\n  sidebarRef = React.createRef();\n\n  handleSidebarKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  isAdvanceMode() {\n    return isAdvanceMode(this.asProps.Children, [\n      SidePanel.Overlay.displayName,\n      SidePanel.Panel.displayName,\n    ]);\n  }\n\n  isUsedOverlay() {\n    return (\n      !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName])\n    );\n  }\n\n  calculateDelayAnimation(name) {\n    const delay = this.asProps.duration / 2;\n    const usedOverlay = this.isUsedOverlay();\n\n    return {\n      overlay: usedOverlay ? [0, delay] : 0,\n      panel: usedOverlay ? [delay, 0] : 0,\n    }[name];\n  }\n\n  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\n      delay: this.calculateDelayAnimation('overlay'),\n      animationsDisabled,\n      disablePreventScroll,\n    };\n  }\n\n  getPanelProps() {\n    const {\n      placement,\n      visible,\n      closable,\n      duration,\n      animationsDisabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = this.asProps;\n\n    return {\n      visible,\n      placement,\n      closable,\n      duration,\n      disableEnforceFocus: !this.isUsedOverlay(),\n      delay: this.calculateDelayAnimation('panel'),\n      onOutsideClick: this.handleOutsideClick,\n      onKeyDown: this.handleSidebarKeyDown,\n      animationsDisabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal, ignorePortalsStacking } = this.asProps;\n\n    return (\n      <Portal disablePortal={disablePortal} ignorePortalsStacking={ignorePortalsStacking}>\n        {this.isAdvanceMode() ? (\n          <Children />\n        ) : (\n          <SidePanel.Overlay>\n            <Root render={SidePanel.Panel} />\n          </SidePanel.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} />);\n}\n\nfunction Panel(props) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } =\n    props;\n  const advancedMode =\n    forcedAdvancedMode ||\n    isAdvanceMode(Children, [\n      SidePanel.Header.displayName,\n      SidePanel.Body.displayName,\n      SidePanel.Footer.displayName,\n    ]);\n\n  const sidebarRef = React.useRef(null);\n\n  useFocusLock(sidebarRef, true, 'auto', !visible, true);\n\n  const hasLabel = Boolean(props['aria-label'] || props['aria-labelledby']);\n\n  logger.warn(\n    !hasLabel,\n    \"'aria-label' or 'aria-labelledby' are required for SidePanel component\",\n    props['data-ui-name'] || Panel.displayName,\n  );\n\n  return sstyled(styles)(\n    <>\n      {visible && <OutsideClick onOutsideClick={onOutsideClick} excludeRefs={[sidebarRef]} />}\n      <SPanel\n        render={Slide}\n        visible={visible}\n        initialAnimation={true}\n        slideOrigin={placement}\n        ref={sidebarRef}\n        role='dialog'\n        aria-modal='true'\n      >\n        <PortalProvider value={sidebarRef}>\n          {closable && <SidePanel.Close />}\n          {advancedMode ? (\n            <Children />\n          ) : (\n            <SidePanel.Body>\n              <Children />\n            </SidePanel.Body>\n          )}\n        </PortalProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(props) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close({ styles, children: hasChildren, Children, getI18nText }) {\n  const SClose = Root;\n  return sstyled(styles)(\n    <SClose\n      render={Button}\n      aria-label={getI18nText('close')}\n      use='tertiary'\n      theme='muted'\n      type='button'\n      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n    >\n      {hasChildren ? <Children /> : null}\n    </SClose>,\n  );\n}\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' />);\n}\n\nfunction Back(props) {\n  const SBack = Root;\n  const SBackText = Button.Text;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={Button} use='tertiary' theme='muted' type='button'>\n      <Button.Addon tag={ArrowLeft} />\n      <SBackText>\n        <Children />\n      </SBackText>\n    </SBack>,\n  );\n}\n\nfunction Body(props) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(props) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Box} tag='header'>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\nconst SidePanel = createComponent(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":"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"}

package/lib/cjs/style/side-panel.shadow.css

@@ -62,38 +62,46 @@ SClose {
   cursor: pointer;
   position: absolute;
   z-index: 1;
-  display: inline-flex;
-  right: 0;
-  top: 0;
-  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-3x, 12px)
-    var(--intergalactic-spacing-4x, 16px) var(--intergalactic-spacing-3x, 12px);
+  right: var(--intergalactic-spacing-05x, 2px);
+  top: var(--intergalactic-spacing-05x, 2px);
+}
+SClose[size] {
+  height: auto;
+}
+SClose[size] SAddon {
+  padding: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px) + 1px) 0;
   color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  border: none;
-  background: none;
-  outline: none;
-
-  &:hover {
-    color: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
-  }
 }
 
 SClose[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
 }
 
-SBack {
+SBack[size="m"] {
   display: flex;
   align-items: center;
   color: var(--intergalactic-text-secondary, #6c6e79);
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
-  margin-bottom: var(--intergalactic-spacing-1x, 4px);
-  cursor: pointer;
+  height: auto;
+  min-width: auto;
+  max-width: 100%;
+  margin-left: calc(var(--intergalactic-spacing-2x, 8px) * -1 + 1px);
 
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, #484a54);
   }
 }
+SBack[size="m"] SInner {
+  justify-content: flex-start;
+}
+SBack SText {
+  display: block;
+}
+
+SBack[size] SText {
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+}
 
 SBackText {
   margin-left: var(--intergalactic-spacing-1x, 4px);
@@ -117,7 +125,7 @@ STitle {
 SHeader {
   padding-left: var(--intergalactic-spacing-6x, 24px);
   padding-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-right: var(--intergalactic-spacing-6x, 24px);
   padding-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);
@@ -134,7 +142,7 @@ SBody {
   height: 100%;
   overflow: auto;
   padding-left: var(--intergalactic-spacing-6x, 24px);
-  padding-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-10x, 40px);
+  padding-bottom:var(--intergalactic-spacing-4x, 16px);
+  padding-right: var(--intergalactic-spacing-6x, 24px);
   padding-top: var(--intergalactic-spacing-4x, 16px);
 }

package/lib/cjs/translations/__intergalactic-dynamic-locales.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.localizedMessages = void 0;
+var _de = _interopRequireDefault(require("./de.json"));
+var _en = _interopRequireDefault(require("./en.json"));
+var _es = _interopRequireDefault(require("./es.json"));
+var _fr = _interopRequireDefault(require("./fr.json"));
+var _it = _interopRequireDefault(require("./it.json"));
+var _ja = _interopRequireDefault(require("./ja.json"));
+var _ko = _interopRequireDefault(require("./ko.json"));
+var _nl = _interopRequireDefault(require("./nl.json"));
+var _pt = _interopRequireDefault(require("./pt.json"));
+var _tr = _interopRequireDefault(require("./tr.json"));
+var _vi = _interopRequireDefault(require("./vi.json"));
+var _zh = _interopRequireDefault(require("./zh.json"));
+var _pl = _interopRequireDefault(require("./pl.json"));
+var _sv = _interopRequireDefault(require("./sv.json"));
+var localizedMessages = {
+  de: _de["default"],
+  en: _en["default"],
+  es: _es["default"],
+  fr: _fr["default"],
+  it: _it["default"],
+  ja: _ja["default"],
+  ko: _ko["default"],
+  nl: _nl["default"],
+  pt: _pt["default"],
+  tr: _tr["default"],
+  vi: _vi["default"],
+  zh: _zh["default"],
+  pl: _pl["default"],
+  sv: _sv["default"]
+};
+exports.localizedMessages = localizedMessages;
+//# sourceMappingURL=__intergalactic-dynamic-locales.js.map

package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["_de","_interopRequireDefault","require","_en","_es","_fr","_it","_ja","_ko","_nl","_pt","_tr","_vi","_zh","_pl","_sv","localizedMessages","de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","exports"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,GAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,GAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,GAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,GAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,GAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,GAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,GAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,GAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,GAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,GAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,GAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,GAAA,GAAAd,sBAAA,CAAAC,OAAA;AAEO,IAAMc,iBAAiB,GAAG;EAC/BC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA;AACF,CAAC;AAACC,OAAA,CAAAf,iBAAA,GAAAA,iBAAA"}

package/lib/cjs/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

package/lib/cjs/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/lib/cjs/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}

package/lib/cjs/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

package/lib/cjs/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}

package/lib/cjs/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "close": "閉じる"
+}

package/lib/cjs/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "close": "닫기"
+}

package/lib/cjs/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

package/lib/cjs/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

package/lib/cjs/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

package/lib/cjs/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Stäng"
+}

package/lib/cjs/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Kapat"
+}

package/lib/cjs/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Đóng"
+}

package/lib/cjs/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "close": "关闭"
+}

package/lib/es6/SidePanel.js

@@ -28,25 +28,34 @@ import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhan
 import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
 import { Text } from '@semcore/typography';
 import ArrowLeft from '@semcore/icon/ArrowLeft/m';
+import Button from '@semcore/button';
 import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
 import { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';
 import { useContextTheme } from '@semcore/utils/lib/ThemeProvider';
+import logger from '@semcore/utils/lib/logger';
+import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 /*__reshadow-styles__:"./style/side-panel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOverlay_l0r0w_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;z-index:var(--intergalactic-z-index-overlay, 500);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, #191b23)}.___SPanel_l0r0w_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_l0r0w_gg_._placement_right_l0r0w_gg_,.___SPanel_l0r0w_gg_._placement_top_l0r0w_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_l0r0w_gg_._placement_top_l0r0w_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_l0r0w_gg_._placement_right_l0r0w_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_l0r0w_gg_._placement_bottom_l0r0w_gg_,.___SPanel_l0r0w_gg_._placement_left_l0r0w_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_l0r0w_gg_._placement_bottom_l0r0w_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_l0r0w_gg_._placement_left_l0r0w_gg_{height:100vh;margin-right:auto;top:0}.___SClose_l0r0w_gg_{cursor:pointer;position:absolute;z-index:1;display:inline-flex;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px) var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_l0r0w_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SClose_l0r0w_gg_.__keyboardFocused_l0r0w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBack_l0r0w_gg_{display:flex;align-items:center;color:var(--intergalactic-text-secondary, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);margin-bottom:var(--intergalactic-spacing-1x, 4px);cursor:pointer}@media (hover:hover){.___SBack_l0r0w_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SBackText_l0r0w_gg_,.___STitle_l0r0w_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SBackText_l0r0w_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-200, 142%)}.___STitle_l0r0w_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_l0r0w_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-14x, 56px);padding-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_l0r0w_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_l0r0w_gg_{height:100%;overflow:auto;padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-10x, 40px);padding-top:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "l0r0w_gg_") /*__reshadow_css_end__*/, {
-  "__SOverlay": "___SOverlay_l0r0w_gg_",
-  "__SPanel": "___SPanel_l0r0w_gg_",
-  "_placement_top": "_placement_top_l0r0w_gg_",
-  "_placement_right": "_placement_right_l0r0w_gg_",
-  "_placement_bottom": "_placement_bottom_l0r0w_gg_",
-  "_placement_left": "_placement_left_l0r0w_gg_",
-  "__SClose": "___SClose_l0r0w_gg_",
-  "_keyboardFocused": "__keyboardFocused_l0r0w_gg_",
-  "__SBackText": "___SBackText_l0r0w_gg_",
-  "__STitle": "___STitle_l0r0w_gg_",
-  "__SHeader": "___SHeader_l0r0w_gg_",
-  "__SFooter": "___SFooter_l0r0w_gg_",
-  "__SBody": "___SBody_l0r0w_gg_",
-  "__SBack": "___SBack_l0r0w_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOverlay_149rr_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;z-index:var(--intergalactic-z-index-overlay, 500);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, #191b23)}.___SPanel_149rr_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_149rr_gg_._placement_right_149rr_gg_,.___SPanel_149rr_gg_._placement_top_149rr_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_149rr_gg_._placement_top_149rr_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_149rr_gg_._placement_right_149rr_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_149rr_gg_._placement_bottom_149rr_gg_,.___SPanel_149rr_gg_._placement_left_149rr_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_149rr_gg_._placement_bottom_149rr_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_149rr_gg_._placement_left_149rr_gg_{height:100vh;margin-right:auto;top:0}.___SClose_149rr_gg_{cursor:pointer;position:absolute;z-index:1;right:var(--intergalactic-spacing-05x, 2px);top:var(--intergalactic-spacing-05x, 2px)}.___SClose_149rr_gg_.__size_149rr_gg_{height:auto}.___SClose_149rr_gg_.__size_149rr_gg_ .___SAddon_149rr_gg_{padding:calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px) + 1px)0;color:var(--intergalactic-icon-secondary-neutral, #a9abb6)}.___SClose_149rr_gg_.__keyboardFocused_149rr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBack_149rr_gg_._size_m_149rr_gg_{display:flex;align-items:center;color:var(--intergalactic-text-secondary, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);height:auto;min-width:auto;max-width:100%;margin-left:calc(var(--intergalactic-spacing-2x, 8px)*-1 + 1px)}@media (hover:hover){.___SBack_149rr_gg_._size_m_149rr_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SBack_149rr_gg_._size_m_149rr_gg_ .___SInner_149rr_gg_{justify-content:flex-start}.___SBack_149rr_gg_ .___SText_149rr_gg_{display:block}.___SBack_149rr_gg_.__size_149rr_gg_ .___SText_149rr_gg_{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SBackText_149rr_gg_,.___STitle_149rr_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SBackText_149rr_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-200, 142%)}.___STitle_149rr_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_149rr_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-6x, 24px);padding-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_149rr_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_149rr_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)}" /*__inner_css_end__*/, "149rr_gg_") /*__reshadow_css_end__*/, {
+  "__SOverlay": "___SOverlay_149rr_gg_",
+  "__SPanel": "___SPanel_149rr_gg_",
+  "_placement_top": "_placement_top_149rr_gg_",
+  "_placement_right": "_placement_right_149rr_gg_",
+  "_placement_bottom": "_placement_bottom_149rr_gg_",
+  "_placement_left": "_placement_left_149rr_gg_",
+  "__SClose": "___SClose_149rr_gg_",
+  "_size": "__size_149rr_gg_",
+  "__SAddon": "___SAddon_149rr_gg_",
+  "_keyboardFocused": "__keyboardFocused_149rr_gg_",
+  "__SBack": "___SBack_149rr_gg_",
+  "_size_m": "_size_m_149rr_gg_",
+  "__SInner": "___SInner_149rr_gg_",
+  "__SText": "___SText_149rr_gg_",
+  "__SBackText": "___SBackText_149rr_gg_",
+  "__STitle": "___STitle_149rr_gg_",
+  "__SHeader": "___SHeader_149rr_gg_",
+  "__SFooter": "___SFooter_149rr_gg_",
+  "__SBody": "___SBody_149rr_gg_"
 });
 var RootSidePanel = /*#__PURE__*/function (_Component) {
   _inherits(RootSidePanel, _Component);
@@ -117,7 +126,9 @@ var RootSidePanel = /*#__PURE__*/function (_Component) {
         visible = _this$asProps2.visible,
         closable = _this$asProps2.closable,
         duration = _this$asProps2.duration,
-        animationsDisabled = _this$asProps2.animationsDisabled;
+        animationsDisabled = _this$asProps2.animationsDisabled,
+        ariaLabel = _this$asProps2['aria-label'],
+        ariaLabelledBy = _this$asProps2['aria-labelledby'];
       return {
         visible: visible,
         placement: placement,
@@ -127,14 +138,17 @@ var RootSidePanel = /*#__PURE__*/function (_Component) {
         delay: this.calculateDelayAnimation('panel'),
         onOutsideClick: this.handleOutsideClick,
         onKeyDown: this.handleSidebarKeyDown,
-        animationsDisabled: animationsDisabled
+        animationsDisabled: animationsDisabled,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy
       };
     }
   }, {
     key: "getCloseProps",
     value: function getCloseProps() {
       return {
-        onClick: this.handleIconCloseClick
+        onClick: this.handleIconCloseClick,
+        getI18nText: this.asProps.getI18nText
       };
     }
   }, {
@@ -160,7 +174,7 @@ _defineProperty(RootSidePanel, "enhance", [cssVariableEnhance({
   fallback: '200',
   map: Number.parseInt,
   prop: 'duration'
-})]);
+}), i18nEnhance(localizedMessages)]);
 _defineProperty(RootSidePanel, "defaultProps", {
   placement: 'right',
   closable: true,
@@ -191,6 +205,8 @@ function Panel(props) {
   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]
@@ -198,7 +214,9 @@ function Panel(props) {
     "visible": visible,
     "initialAnimation": true,
     "slideOrigin": placement,
-    "ref": sidebarRef
+    "ref": sidebarRef,
+    "role": 'dialog',
+    "aria-modal": 'true'
   }, _ref3))), /*#__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", {}))))));
@@ -207,20 +225,26 @@ function Footer(props) {
   var _ref4 = arguments[0],
     _ref12;
   var SFooter = Flex;
-  return _ref12 = sstyled(props.styles), /*#__PURE__*/React.createElement(SFooter, _ref12.cn("SFooter", _objectSpread({}, _assignProps4({}, _ref4))));
+  return _ref12 = sstyled(props.styles), /*#__PURE__*/React.createElement(SFooter, _ref12.cn("SFooter", _objectSpread({}, _assignProps4({
+    "tag": 'footer'
+  }, _ref4))));
 }
 function Close(_ref18) {
   var _ref5 = arguments[0],
     _ref13;
   var styles = _ref18.styles,
-    children = _ref18.children,
-    Children = _ref18.Children;
-  var SClose = Box;
+    hasChildren = _ref18.children,
+    Children = _ref18.Children,
+    getI18nText = _ref18.getI18nText;
+  var SClose = Button;
   return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref13.cn("SClose", _objectSpread({}, _assignProps5({
-    "tag": 'button'
-  }, _ref5))), children ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/React.createElement(CloseIcon, _ref13.cn("CloseIcon", {
-    "title": 'Close'
-  })));
+    "aria-label": getI18nText('close'),
+    "use": 'tertiary',
+    "theme": 'muted',
+    "type": 'button',
+    "size": 'l',
+    "addonLeft": hasChildren ? undefined : CloseIcon
+  }, _ref5))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : null);
 }
 Close.enhance = [keyboardFocusEnhance()];
 function Title(props) {
@@ -234,11 +258,17 @@ function Title(props) {
 function Back(props) {
   var _ref7 = arguments[0],
     _ref15;
-  var SBack = Box;
-  var SBackText = Text;
+  var SBack = Button;
+  var SBackText = Button.Text;
   var Children = props.Children,
     styles = props.styles;
-  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SBack, _ref15.cn("SBack", _objectSpread({}, _assignProps7({}, _ref7))), /*#__PURE__*/React.createElement(ArrowLeft, _ref15.cn("ArrowLeft", {})), /*#__PURE__*/React.createElement(SBackText, _ref15.cn("SBackText", {}), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {}))));
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SBack, _ref15.cn("SBack", _objectSpread({}, _assignProps7({
+    "use": 'tertiary',
+    "theme": 'muted',
+    "type": 'button'
+  }, _ref7))), /*#__PURE__*/React.createElement(Button.Addon, {
+    tag: ArrowLeft
+  }), /*#__PURE__*/React.createElement(SBackText, _ref15.cn("SBackText", {}), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {}))));
 }
 function Body(props) {
   var _ref8 = arguments[0],
@@ -253,7 +283,9 @@ function Header(props) {
   var Children = props.Children,
     styles = props.styles,
     title = props.title;
-  return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SHeader, _ref17.cn("SHeader", _objectSpread({}, _assignProps9({}, _ref9))), title && /*#__PURE__*/React.createElement(SidePanel.Title, {
+  return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SHeader, _ref17.cn("SHeader", _objectSpread({}, _assignProps9({
+    "tag": 'header'
+  }, _ref9))), title && /*#__PURE__*/React.createElement(SidePanel.Title, {
     children: title
   }), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {})));
 }

package/lib/es6/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":["React","createComponent","Component","Root","sstyled","Flex","Box","FadeInOut","Slide","Portal","PortalProvider","OutsideClick","CloseIcon","fire","isAdvanceMode","keyboardFocusEnhance","usePreventScroll","Text","ArrowLeft","cssVariableEnhance","useFocusLock","useContextTheme","style","_sstyled","insert","RootSidePanel","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","e","key","stopPropagation","_createClass","value","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","calculateDelayAnimation","name","delay","duration","usedOverlay","overlay","panel","getOverlayProps","_this$asProps","visible","animationsDisabled","disablePreventScroll","getPanelProps","_this$asProps2","placement","closable","disableEnforceFocus","onOutsideClick","handleOutsideClick","onKeyDown","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","render","_ref","_this$asProps3","disablePortal","ignorePortalsStacking","createElement","_assignProps","variable","fallback","map","Number","parseInt","prop","props","_ref2","arguments[0]","_ref10","SOverlay","overlayRef","useRef","styles","cn","_objectSpread","_assignProps2","_ref3","_ref11","SPanel","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","Fragment","_assignProps3","Close","_ref4","_ref12","SFooter","_assignProps4","_ref18","_ref5","_ref13","children","SClose","_assignProps5","enhance","Title","_ref6","_ref14","STitle","_assignProps6","Back","_ref7","_ref15","SBack","SBackText","_assignProps7","_ref8","_ref16","SBody","_assignProps8","_ref9","_ref17","SHeader","title","_assignProps9"],"sources":["../../src/SidePanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Flex, Box } from '@semcore/flex-box';\nimport { FadeInOut, Slide } from '@semcore/animation';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { Text } from '@semcore/typography';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';\nimport { useContextTheme } from '@semcore/utils/lib/ThemeProvider';\n\nimport style from './style/side-panel.shadow.css';\n\nclass RootSidePanel extends Component {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n  ];\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  };\n\n  sidebarRef = React.createRef();\n\n  handleSidebarKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  isAdvanceMode() {\n    return isAdvanceMode(this.asProps.Children, [\n      SidePanel.Overlay.displayName,\n      SidePanel.Panel.displayName,\n    ]);\n  }\n\n  isUsedOverlay() {\n    return (\n      !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName])\n    );\n  }\n\n  calculateDelayAnimation(name) {\n    const delay = this.asProps.duration / 2;\n    const usedOverlay = this.isUsedOverlay();\n\n    return {\n      overlay: usedOverlay ? [0, delay] : 0,\n      panel: usedOverlay ? [delay, 0] : 0,\n    }[name];\n  }\n\n  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\n      delay: this.calculateDelayAnimation('overlay'),\n      animationsDisabled,\n      disablePreventScroll,\n    };\n  }\n\n  getPanelProps() {\n    const { placement, visible, closable, duration, animationsDisabled } = this.asProps;\n\n    return {\n      visible,\n      placement,\n      closable,\n      duration,\n      disableEnforceFocus: !this.isUsedOverlay(),\n      delay: this.calculateDelayAnimation('panel'),\n      onOutsideClick: this.handleOutsideClick,\n      onKeyDown: this.handleSidebarKeyDown,\n      animationsDisabled,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal, ignorePortalsStacking } = this.asProps;\n\n    return (\n      <Portal disablePortal={disablePortal} ignorePortalsStacking={ignorePortalsStacking}>\n        {this.isAdvanceMode() ? (\n          <Children />\n        ) : (\n          <SidePanel.Overlay>\n            <Root render={SidePanel.Panel} />\n          </SidePanel.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} />);\n}\n\nfunction Panel(props) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } =\n    props;\n  const advancedMode =\n    forcedAdvancedMode ||\n    isAdvanceMode(Children, [\n      SidePanel.Header.displayName,\n      SidePanel.Body.displayName,\n      SidePanel.Footer.displayName,\n    ]);\n\n  const sidebarRef = React.useRef(null);\n\n  useFocusLock(sidebarRef, true, 'auto', !visible, true);\n\n  return sstyled(styles)(\n    <>\n      {visible && <OutsideClick onOutsideClick={onOutsideClick} excludeRefs={[sidebarRef]} />}\n      <SPanel\n        render={Slide}\n        visible={visible}\n        initialAnimation={true}\n        slideOrigin={placement}\n        ref={sidebarRef}\n      >\n        <PortalProvider value={sidebarRef}>\n          {closable && <SidePanel.Close />}\n          {advancedMode ? (\n            <Children />\n          ) : (\n            <SidePanel.Body>\n              <Children />\n            </SidePanel.Body>\n          )}\n        </PortalProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(props) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} />);\n}\n\nfunction Close({ styles, children, Children }) {\n  const SClose = Root;\n  return sstyled(styles)(\n    <SClose render={Box} tag='button'>\n      {children ? <Children /> : <CloseIcon title='Close' />}\n    </SClose>,\n  );\n}\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' />);\n}\n\nfunction Back(props) {\n  const SBack = Root;\n  const SBackText = Text;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={Box}>\n      <ArrowLeft />\n      <SBackText>\n        <Children />\n      </SBackText>\n    </SBack>,\n  );\n}\n\nfunction Body(props) {\n  const SBody = Root;\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(props) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Box}>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\nconst SidePanel = createComponent(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","names":["React","createComponent","Component","Root","sstyled","Flex","Box","FadeInOut","Slide","Portal","PortalProvider","OutsideClick","CloseIcon","fire","isAdvanceMode","keyboardFocusEnhance","usePreventScroll","Text","ArrowLeft","Button","cssVariableEnhance","useFocusLock","useContextTheme","logger","i18nEnhance","localizedMessages","style","_sstyled","insert","RootSidePanel","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","e","key","stopPropagation","_createClass","value","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","calculateDelayAnimation","name","delay","duration","usedOverlay","overlay","panel","getOverlayProps","_this$asProps","visible","animationsDisabled","disablePreventScroll","getPanelProps","_this$asProps2","placement","closable","ariaLabel","ariaLabelledBy","disableEnforceFocus","onOutsideClick","handleOutsideClick","onKeyDown","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","_this$asProps3","disablePortal","ignorePortalsStacking","createElement","_assignProps","variable","fallback","map","Number","parseInt","prop","props","_ref2","arguments[0]","_ref10","SOverlay","overlayRef","useRef","styles","cn","_objectSpread","_assignProps2","_ref3","_ref11","SPanel","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","hasLabel","Boolean","warn","Fragment","_assignProps3","Close","_ref4","_ref12","SFooter","_assignProps4","_ref18","_ref5","_ref13","hasChildren","children","SClose","_assignProps5","undefined","enhance","Title","_ref6","_ref14","STitle","_assignProps6","Back","_ref7","_ref15","SBack","SBackText","_assignProps7","Addon","tag","_ref8","_ref16","SBody","_assignProps8","_ref9","_ref17","SHeader","title","_assignProps9"],"sources":["../../src/SidePanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Flex, Box } from '@semcore/flex-box';\nimport { FadeInOut, Slide } from '@semcore/animation';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { Text } from '@semcore/typography';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport Button from '@semcore/button';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';\nimport { useContextTheme } from '@semcore/utils/lib/ThemeProvider';\nimport logger from '@semcore/utils/lib/logger';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/side-panel.shadow.css';\n\nclass RootSidePanel extends Component {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ];\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  };\n\n  sidebarRef = React.createRef();\n\n  handleSidebarKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  isAdvanceMode() {\n    return isAdvanceMode(this.asProps.Children, [\n      SidePanel.Overlay.displayName,\n      SidePanel.Panel.displayName,\n    ]);\n  }\n\n  isUsedOverlay() {\n    return (\n      !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName])\n    );\n  }\n\n  calculateDelayAnimation(name) {\n    const delay = this.asProps.duration / 2;\n    const usedOverlay = this.isUsedOverlay();\n\n    return {\n      overlay: usedOverlay ? [0, delay] : 0,\n      panel: usedOverlay ? [delay, 0] : 0,\n    }[name];\n  }\n\n  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\n      delay: this.calculateDelayAnimation('overlay'),\n      animationsDisabled,\n      disablePreventScroll,\n    };\n  }\n\n  getPanelProps() {\n    const {\n      placement,\n      visible,\n      closable,\n      duration,\n      animationsDisabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = this.asProps;\n\n    return {\n      visible,\n      placement,\n      closable,\n      duration,\n      disableEnforceFocus: !this.isUsedOverlay(),\n      delay: this.calculateDelayAnimation('panel'),\n      onOutsideClick: this.handleOutsideClick,\n      onKeyDown: this.handleSidebarKeyDown,\n      animationsDisabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal, ignorePortalsStacking } = this.asProps;\n\n    return (\n      <Portal disablePortal={disablePortal} ignorePortalsStacking={ignorePortalsStacking}>\n        {this.isAdvanceMode() ? (\n          <Children />\n        ) : (\n          <SidePanel.Overlay>\n            <Root render={SidePanel.Panel} />\n          </SidePanel.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} />);\n}\n\nfunction Panel(props) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } =\n    props;\n  const advancedMode =\n    forcedAdvancedMode ||\n    isAdvanceMode(Children, [\n      SidePanel.Header.displayName,\n      SidePanel.Body.displayName,\n      SidePanel.Footer.displayName,\n    ]);\n\n  const sidebarRef = React.useRef(null);\n\n  useFocusLock(sidebarRef, true, 'auto', !visible, true);\n\n  const hasLabel = Boolean(props['aria-label'] || props['aria-labelledby']);\n\n  logger.warn(\n    !hasLabel,\n    \"'aria-label' or 'aria-labelledby' are required for SidePanel component\",\n    props['data-ui-name'] || Panel.displayName,\n  );\n\n  return sstyled(styles)(\n    <>\n      {visible && <OutsideClick onOutsideClick={onOutsideClick} excludeRefs={[sidebarRef]} />}\n      <SPanel\n        render={Slide}\n        visible={visible}\n        initialAnimation={true}\n        slideOrigin={placement}\n        ref={sidebarRef}\n        role='dialog'\n        aria-modal='true'\n      >\n        <PortalProvider value={sidebarRef}>\n          {closable && <SidePanel.Close />}\n          {advancedMode ? (\n            <Children />\n          ) : (\n            <SidePanel.Body>\n              <Children />\n            </SidePanel.Body>\n          )}\n        </PortalProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(props) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close({ styles, children: hasChildren, Children, getI18nText }) {\n  const SClose = Root;\n  return sstyled(styles)(\n    <SClose\n      render={Button}\n      aria-label={getI18nText('close')}\n      use='tertiary'\n      theme='muted'\n      type='button'\n      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n    >\n      {hasChildren ? <Children /> : null}\n    </SClose>,\n  );\n}\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' />);\n}\n\nfunction Back(props) {\n  const SBack = Root;\n  const SBackText = Button.Text;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={Button} use='tertiary' theme='muted' type='button'>\n      <Button.Addon tag={ArrowLeft} />\n      <SBackText>\n        <Children />\n      </SBackText>\n    </SBack>,\n  );\n}\n\nfunction Body(props) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(props) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Box} tag='header'>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\nconst SidePanel = createComponent(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":"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"}

package/lib/es6/style/side-panel.shadow.css

@@ -62,38 +62,46 @@ SClose {
   cursor: pointer;
   position: absolute;
   z-index: 1;
-  display: inline-flex;
-  right: 0;
-  top: 0;
-  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-3x, 12px)
-    var(--intergalactic-spacing-4x, 16px) var(--intergalactic-spacing-3x, 12px);
+  right: var(--intergalactic-spacing-05x, 2px);
+  top: var(--intergalactic-spacing-05x, 2px);
+}
+SClose[size] {
+  height: auto;
+}
+SClose[size] SAddon {
+  padding: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px) + 1px) 0;
   color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  border: none;
-  background: none;
-  outline: none;
-
-  &:hover {
-    color: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
-  }
 }
 
 SClose[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
 }
 
-SBack {
+SBack[size="m"] {
   display: flex;
   align-items: center;
   color: var(--intergalactic-text-secondary, #6c6e79);
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
-  margin-bottom: var(--intergalactic-spacing-1x, 4px);
-  cursor: pointer;
+  height: auto;
+  min-width: auto;
+  max-width: 100%;
+  margin-left: calc(var(--intergalactic-spacing-2x, 8px) * -1 + 1px);
 
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, #484a54);
   }
 }
+SBack[size="m"] SInner {
+  justify-content: flex-start;
+}
+SBack SText {
+  display: block;
+}
+
+SBack[size] SText {
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+}
 
 SBackText {
   margin-left: var(--intergalactic-spacing-1x, 4px);
@@ -117,7 +125,7 @@ STitle {
 SHeader {
   padding-left: var(--intergalactic-spacing-6x, 24px);
   padding-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-right: var(--intergalactic-spacing-6x, 24px);
   padding-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);
@@ -134,7 +142,7 @@ SBody {
   height: 100%;
   overflow: auto;
   padding-left: var(--intergalactic-spacing-6x, 24px);
-  padding-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-10x, 40px);
+  padding-bottom:var(--intergalactic-spacing-4x, 16px);
+  padding-right: var(--intergalactic-spacing-6x, 24px);
   padding-top: var(--intergalactic-spacing-4x, 16px);
 }

package/lib/es6/translations/__intergalactic-dynamic-locales.js

@@ -0,0 +1,31 @@
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ja from './ja.json';
+import ko from './ko.json';
+import nl from './nl.json';
+import pt from './pt.json';
+import tr from './tr.json';
+import vi from './vi.json';
+import zh from './zh.json';
+import pl from './pl.json';
+import sv from './sv.json';
+export var localizedMessages = {
+  de: de,
+  en: en,
+  es: es,
+  fr: fr,
+  it: it,
+  ja: ja,
+  ko: ko,
+  nl: nl,
+  pt: pt,
+  tr: tr,
+  vi: vi,
+  zh: zh,
+  pl: pl,
+  sv: sv
+};
+//# sourceMappingURL=__intergalactic-dynamic-locales.js.map

package/lib/es6/translations/__intergalactic-dynamic-locales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA;AACF,CAAC"}

package/lib/es6/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

package/lib/es6/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/lib/es6/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}

package/lib/es6/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

package/lib/es6/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}

package/lib/es6/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "close": "閉じる"
+}

package/lib/es6/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "close": "닫기"
+}

package/lib/es6/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

package/lib/es6/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

package/lib/es6/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

package/lib/es6/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Stäng"
+}

package/lib/es6/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Kapat"
+}

package/lib/es6/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Đóng"
+}

package/lib/es6/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "close": "关闭"
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/side-panel",
   "description": "Semrush SidePanel Component",
-  "version": "3.38.0",
+  "version": "3.39.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,16 +9,16 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/utils": "4.30.0",
-    "@semcore/animation": "2.29.0",
-    "@semcore/flex-box": "5.29.0",
-    "@semcore/portal": "3.29.0",
-    "@semcore/typography": "5.38.0",
-    "@semcore/outside-click": "3.27.0",
-    "@semcore/icon": "4.41.0"
+    "@semcore/utils": "4.31.0-prerelease.1",
+    "@semcore/animation": "2.30.0-prerelease.1",
+    "@semcore/flex-box": "5.30.0-prerelease.1",
+    "@semcore/portal": "3.30.0-prerelease.1",
+    "@semcore/typography": "5.39.0-prerelease.1",
+    "@semcore/outside-click": "3.28.0-prerelease.1",
+    "@semcore/icon": "4.42.0-prerelease.1"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.28.0-prerelease.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },