@semcore/side-panel 17.2.2 → 18.0.0-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [18.0.0] - 2026-09-28
+
+### BREAK
+
+- New theme applied.
+
 ## [17.2.2] - 2026-07-10
 
 ### Fixed

package/lib/cjs/SidePanel.js

@@ -25,21 +25,20 @@ var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*!__reshadow-styles__:"./style/side-panel.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SOverlay_di9xj_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_di9xj_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_di9xj_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_di9xj_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-2x,8px)}.___SClose_di9xj_gg_ .___SAddon_di9xj_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_di9xj_gg_{max-width:100%}.___SHeader_di9xj_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,#000c0829);box-sizing:border-box;flex-shrink:0}@media (color-gamut:p3){.___SHeader_di9xj_gg_{box-shadow:inset 0 -1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_di9xj_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,#000c0829);box-sizing:border-box}@media (color-gamut:p3){.___SFooter_di9xj_gg_{box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_di9xj_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-4x,16px) var(--intergalactic-spacing-6x,24px)}", /*__inner_css_end__*/"di9xj_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SOverlay_xzndr_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_xzndr_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_xzndr_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_xzndr_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-1x,4px)}.___SBack_xzndr_gg_{max-width:100%}.___SHeader_xzndr_gg_{padding:var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-14x,56px) var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);min-height:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));border-bottom:1px solid var(--intergalactic-border-primary,#000c0829);box-sizing:border-box;flex-shrink:0;flex-direction:column;justify-content:center}@media (color-gamut:p3){.___SHeader_xzndr_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_xzndr_gg_{min-height:44px;padding:var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-xlarge,12px);border-top:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SFooter_xzndr_gg_{border-top:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_xzndr_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-content-padding-large,16px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px)}", /*__inner_css_end__*/"xzndr_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SOverlay": "___SOverlay_di9xj_gg_",
-  "__SPanel": "___SPanel_di9xj_gg_",
-  "_placement_top": "_placement_top_di9xj_gg_",
-  "_placement_right": "_placement_right_di9xj_gg_",
-  "_placement_bottom": "_placement_bottom_di9xj_gg_",
-  "_placement_left": "_placement_left_di9xj_gg_",
-  "__SBack": "___SBack_di9xj_gg_",
-  "__SHeader": "___SHeader_di9xj_gg_",
-  "__SFooter": "___SFooter_di9xj_gg_",
-  "__SBody": "___SBody_di9xj_gg_",
-  "__SClose": "___SClose_di9xj_gg_",
-  "__SAddon": "___SAddon_di9xj_gg_"
+  "__SOverlay": "___SOverlay_xzndr_gg_",
+  "__SPanel": "___SPanel_xzndr_gg_",
+  "_placement_top": "_placement_top_xzndr_gg_",
+  "_placement_right": "_placement_right_xzndr_gg_",
+  "_placement_bottom": "_placement_bottom_xzndr_gg_",
+  "_placement_left": "_placement_left_xzndr_gg_",
+  "__SClose": "___SClose_xzndr_gg_",
+  "__SBack": "___SBack_xzndr_gg_",
+  "__SHeader": "___SHeader_xzndr_gg_",
+  "__SFooter": "___SFooter_xzndr_gg_",
+  "__SBody": "___SBody_xzndr_gg_"
 });
 class RootSidePanel extends _core.Component {
   constructor(...args) {
@@ -260,7 +259,7 @@ function Body(props) {
 function Header(props) {
   var _ref9 = arguments[0],
     _ref15;
-  const SHeader = _baseComponents.Box;
+  const SHeader = _baseComponents.Flex;
   const {
     Children,
     styles,

package/lib/cjs/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":["_core","require","_baseComponents","_button","_interopRequireWildcard","_i18nEnhance","_interopRequireDefault","_findComponent","_fire","_logger","_ThemeProvider","_useFocusLock","_usePreventScroll","_useCssVariable","_zIndexStacking","_m","_l","_typography","_react","_intergalacticDynamicLocales","style","sstyled","insert","RootSidePanel","Component","constructor","args","_defineProperty2","default","React","createRef","e","key","stopPropagation","fire","isAdvanceMode","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","getOverlayProps","visible","duration","animationsDisabled","disablePreventScroll","getPanelProps","placement","closable","ariaLabel","ariaLabelledBy","handleOutsideClick","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","disablePortal","ignorePortalsStacking","createElement","Portal","assignProps","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","i18nEnhance","localizedMessages","props","_ref2","arguments[0]","_ref0","SOverlay","FadeInOut","overlayRef","useRef","usePreventScroll","useContextTheme","zIndex","useZIndexStacking","styles","cn","_ref3","_ref1","SPanel","Slide","onOutsideClick","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","useFocusLock","hasLabel","Boolean","logger","warn","Fragment","OutsideClick","ZIndexStackingContextProvider","PortalProvider","Close","_ref4","_ref10","SFooter","Flex","_ref5","_ref11","children","hasChildren","SClose","Button","undefined","CloseIcon","Title","_ref6","_ref12","STitle","Text","Back","_ref7","_ref13","SBack","ButtonLink","ArrowLeft","ellipsis","_ref8","_ref14","SBody","Box","_ref9","_ref15","SHeader","title","createComponent","_default","exports"],"sources":["../../src/SidePanel.tsx"],"sourcesContent":["import { FadeInOut, Slide, Flex, Box, OutsideClick, PortalProvider, Portal } from '@semcore/base-components';\nimport Button, { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport fire from '@semcore/core/lib/utils/fire';\nimport logger from '@semcore/core/lib/utils/logger';\nimport { useContextTheme } from '@semcore/core/lib/utils/ThemeProvider';\nimport { useFocusLock } from '@semcore/core/lib/utils/use/useFocusLock';\nimport usePreventScroll from '@semcore/core/lib/utils/use/usePreventScroll';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport {\n  ZIndexStackingContextProvider,\n  useZIndexStacking,\n} from '@semcore/core/lib/utils/zIndexStacking';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSSidePanel } from './SidePanel.type';\nimport style from './style/side-panel.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass RootSidePanel extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Component>,\n  typeof RootSidePanel.enhance,\n  {},\n  {},\n  {},\n  NSSidePanel.DefaultProps\n> {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      // TODO: Types are incompatible. For some reason string type doesn't recognized as a valid value.\n      // Leave it with ts-ignore annotation.\n      // @ts-ignore\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ] as const;\n\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  } as const;\n\n  sidebarRef = React.createRef<HTMLDivElement>();\n\n  handleSidebarKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {\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  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\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': duration + duration / 2,\n      'disableEnforceFocus': !this.isUsedOverlay(),\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          ? (\n              <Children />\n            )\n          : (\n              <SidePanel.Overlay>\n                <Root render={SidePanel.Panel} />\n              </SidePanel.Overlay>\n            )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Overlay.Component, typeof RootSidePanel, 'Overlay'>,\n) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  const zIndex = useZIndexStacking('z-index-modal');\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} zIndex={zIndex} />);\n}\n\nfunction Panel(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Panel.Component, typeof RootSidePanel, 'Panel'>,\n) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } = 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'],\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        <ZIndexStackingContextProvider designToken='z-index-modal'>\n          <PortalProvider value={sidebarRef}>\n            {closable && <SidePanel.Close />}\n            {advancedMode\n              ? (\n                  <Children />\n                )\n              : (\n                  <SidePanel.Body>\n                    <Children />\n                  </SidePanel.Body>\n                )}\n          </PortalProvider>\n        </ZIndexStackingContextProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Footer.Component>,\n) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Close.Component, typeof RootSidePanel, 'Close'>,\n) {\n  const { styles, children: hasChildren, Children, getI18nText } = props;\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      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n      data-hide-focus-hover-popper='true'\n    >\n      {hasChildren ? <Children /> : undefined}\n    </SClose>,\n  );\n}\n\nfunction Title(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Title.Component>,\n) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' size={300} bold ellipsis />);\n}\n\nfunction Back(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Back.Component>,\n) {\n  const SBack = Root;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>\n      <ButtonLink.Text ellipsis>\n        <Children />\n      </ButtonLink.Text>\n    </SBack>,\n  );\n}\n\nfunction Body(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Body.Component>,\n) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Header.Component>,\n) {\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\n/**\n * SidePanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-code/|Examples}\n */\nconst SidePanel = createComponent<\n  NSSidePanel.Component,\n  typeof RootSidePanel\n>(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,uBAAA,CAAAH,OAAA;AAGA,IAAAI,YAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,OAAA,GAAAH,sBAAA,CAAAL,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,iBAAA,GAAAN,sBAAA,CAAAL,OAAA;AACA,IAAAY,eAAA,GAAAZ,OAAA;AACA,IAAAa,eAAA,GAAAb,OAAA;AAIA,IAAAc,EAAA,GAAAT,sBAAA,CAAAL,OAAA;AACA,IAAAe,EAAA,GAAAV,sBAAA,CAAAL,OAAA;AACA,IAAAgB,WAAA,GAAAhB,OAAA;AACA,IAAAiB,MAAA,GAAAZ,sBAAA,CAAAL,OAAA;AAIA,IAAAkB,4BAAA,GAAAlB,OAAA;AAAmF;AAAA,MAAAmB,KAAA,8BAAApB,KAAA,CAAAqB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEnF,MAAMC,aAAa,SAASC,eAAS,CAOnC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,mCAsBaC,cAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,gCAEtBG,CAAsC,IAAK;MACjE,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;QACtBD,CAAC,CAACE,eAAe,CAAC,CAAC;QACnB,IAAAC,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAEH,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,gCAEuBG,CAAsC,IAAK;MACjE,IAAAG,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,cAAc,EAAEH,CAAC,CAAC;IAC1C,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,8BAEqBG,CAAmC,IAAK;MAC5D,IAAAG,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAEH,CAAC,CAAC;IAC5C,CAAC;EAAA;EAEDI,aAAaA,CAAA,EAAG;IACd,OAAO,IAAAA,4BAAa,EAAC,IAAI,CAACC,OAAO,CAACC,QAAQ,EAAE,CAC1CC,SAAS,CAACC,OAAO,CAACC,WAAW,EAC7BF,SAAS,CAACG,KAAK,CAACD,WAAW,CAC5B,CAAC;EACJ;EAEAE,aAAaA,CAAA,EAAG;IACd,OACE,CAAC,IAAI,CAACP,aAAa,CAAC,CAAC,IAAI,IAAAA,4BAAa,EAAC,IAAI,CAACC,OAAO,CAACC,QAAQ,EAAE,CAACC,SAAS,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC;EAElG;EAEAG,eAAeA,CAAA,EAAG;IAChB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,kBAAkB;MAAEC;IAAqB,CAAC,GAAG,IAAI,CAACX,OAAO;IACpF,OAAO;MACLQ,OAAO;MACPC,QAAQ;MACRC,kBAAkB;MAClBC;IACF,CAAC;EACH;EAEAC,aAAaA,CAAA,EAAG;IACd,MAAM;MACJC,SAAS;MACTL,OAAO;MACPM,QAAQ;MACRL,QAAQ;MACRC,kBAAkB;MAClB,YAAY,EAAEK,SAAS;MACvB,iBAAiB,EAAEC;IACrB,CAAC,GAAG,IAAI,CAAChB,OAAO;IAEhB,OAAO;MACLQ,OAAO;MACPK,SAAS;MACTC,QAAQ;MACR,UAAU,EAAEL,QAAQ,GAAGA,QAAQ,GAAG,CAAC;MACnC,qBAAqB,EAAE,CAAC,IAAI,CAACH,aAAa,CAAC,CAAC;MAC5C,gBAAgB,EAAE,IAAI,CAACW,kBAAkB;MACzC,WAAW,EAAE,IAAI,CAACC,oBAAoB;MACtCR,kBAAkB;MAClB,YAAY,EAAEK,SAAS;MACvB,iBAAiB,EAAEC;IACrB,CAAC;EACH;EAEAG,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,OAAO,EAAE,IAAI,CAACC,oBAAoB;MAClCC,WAAW,EAAE,IAAI,CAACtB,OAAO,CAACsB;IAC5B,CAAC;EACH;EAEAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAxB,OAAA;IACP,MAAM;MAAEC,QAAQ;MAAEwB,aAAa;MAAEC;IAAsB,CAAC,GAAG,IAAI,CAAC1B,OAAO;IAEvE,oBACElB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAA8D,MAAM;MAACH,aAAa,EAAEA,aAAc;MAACC,qBAAqB,EAAEA;IAAsB,GAChF,IAAI,CAAC3B,aAAa,CAAC,CAAC,gBAEfjB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,MAAE,CAAC,gBAGZnB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACC,OAAO,qBAChBrB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAczB,SAAS,CAACG,KAAK,MAAAzC,KAAA,CAAAiE,WAAA,MAAAL,IAAA,CAAG,CACf,CAEnB,CAAC;EAEb;AACF;AAAC,IAAAjC,gBAAA,CAAAC,OAAA,EAtHKL,aAAa,iBAQI,WAAW;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAR5BL,aAAa,WASFH,KAAK;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EAThBL,aAAa,aAUA,CACf,IAAA2C,kCAAkB,EAAC;EACjBC,QAAQ,EAAE,gCAAgC;EAC1CC,QAAQ,EAAE,KAAK;EACf;EACA;EACA;EACAC,GAAG,EAAEC,MAAM,CAACC,QAAQ;EACpBC,IAAI,EAAE;AACR,CAAC,CAAC,EACF,IAAAC,oBAAW,EAACC,8CAAiB,CAAC,CAC/B;AAAA,IAAA/C,gBAAA,CAAAC,OAAA,EArBGL,aAAa,kBAuBK;EACpB0B,SAAS,EAAE,OAAO;EAClBC,QAAQ,EAAE,IAAI;EACdH,oBAAoB,EAAE;AACxB,CAAC;AA6FH,SAASR,OAAOA,CACdoC,KAA6H,EAC7H;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,QAAQ,GAKiCC,yBAAS;EAJxD,MAAMC,UAAU,GAAGpD,cAAK,CAACqD,MAAM,CAAC,IAAI,CAAC;EACrC,IAAAC,yBAAgB,EAACR,KAAK,CAAC/B,OAAO,EAAE+B,KAAK,CAAC5B,oBAAoB,CAAC;EAC3D,IAAAqC,8BAAe,EAACH,UAAU,EAAEN,KAAK,CAAC/B,OAAO,CAAC;EAC1C,MAAMyC,MAAM,GAAG,IAAAC,iCAAiB,EAAC,eAAe,CAAC;EACjD,OAAAR,KAAA,GAAO,IAAAzD,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACgB,QAAQ,EAAAD,KAAA,CAAAU,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAyBgB,UAAU;MAAA,UAAUI;IAAM,GAAAT,KAAA;EAAA,EAAG,CAAC;AAC/F;AAEA,SAASnC,KAAKA,CACZkC,KAAyH,EACzH;EAAA,IAAAc,KAAA,GAAAZ,YAAA;IAAAa,KAAA;EACA,MAAMC,MAAM,GA0BEC,qBAAK;EAzBnB,MAAM;IAAEvD,QAAQ;IAAEkD,MAAM;IAAE3C,OAAO;IAAEM,QAAQ;IAAED,SAAS;IAAE4C,cAAc;IAAEC;EAAmB,CAAC,GAAGnB,KAAK;EACpG,MAAMoB,YAAY,GAChBD,kBAAkB,IAClB,IAAA3D,4BAAa,EAACE,QAAQ,EAAE,CACtBC,SAAS,CAAC0D,MAAM,CAACxD,WAAW,EAC5BF,SAAS,CAAC2D,IAAI,CAACzD,WAAW,EAC1BF,SAAS,CAAC4D,MAAM,CAAC1D,WAAW,CAC7B,CAAC;EAEJ,MAAM2D,UAAU,GAAGtE,cAAK,CAACqD,MAAM,CAAC,IAAI,CAAC;EAErC,IAAAkB,0BAAY,EAACD,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAACvD,OAAO,EAAE,IAAI,CAAC;EAEtD,MAAMyD,QAAQ,GAAGC,OAAO,CAAC3B,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAAC,iBAAiB,CAAC,CAAC;EAEzE4B,eAAM,CAACC,IAAI,CACT,CAACH,QAAQ,EACT,4EAA4E,EAC5E1B,KAAK,CAAC,cAAc,CACtB,CAAC;EAED,OAAAe,KAAA,GAAO,IAAArE,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAA7C,MAAA,CAAAU,OAAA,CAAA6E,QAAA,QACG7D,OAAO,iBAAI1B,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAAwG,YAAY,EAAAhB,KAAA,CAAAF,EAAA;IAAA,kBAAiBK,cAAc;IAAA,eAAe,CAACM,UAAU;EAAC,EAAG,CAAC,eACvFjF,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC4B,MAAM,EAAAD,KAAA,CAAAF,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,WAEIrB,OAAO;MAAA,oBACE,IAAI;MAAA,eACTK,SAAS;MAAA,OACjBkD,UAAU;MAAA,QACV,QAAQ;MAAA,cACF;IAAM,GAAAV,KAAA;EAAA,iBAEjBvE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACjD,eAAA,CAAA6F,6BAA6B,EAAAjB,KAAA,CAAAF,EAAA;IAAA,eAAa;EAAe,iBACxDtE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAA0G,cAAc,EAAAlB,KAAA,CAAAF,EAAA;IAAA,SAAQW;EAAU,IAC9BjD,QAAQ,iBAAIhC,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACuE,KAAK,MAAE,CAAC,EAC/Bd,YAAY,gBAEP7E,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAqD,KAAA,CAAAF,EAAA,gBAAE,CAAC,gBAGZtE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAAC2D,IAAI,qBACb/E,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAqD,KAAA,CAAAF,EAAA,gBAAE,CACG,CAER,CACa,CACzB,CACR,CAAC;AAEP;AAEA,SAASU,MAAMA,CACbvB,KAAsF,EACtF;EAAA,IAAAmC,KAAA,GAAAjC,YAAA;IAAAkC,MAAA;EACA,MAAMC,OAAO,GACiCC,oBAAI;EAAlD,OAAAF,MAAA,GAAO,IAAA1F,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACiD,OAAO,EAAAD,MAAA,CAAAvB,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAmB;IAAQ,GAAA6C,KAAA;EAAA,EAAE,CAAC;AACrE;AAEA,SAASD,KAAKA,CACZlC,KAAyH,EACzH;EAAA,IAAAuC,KAAA,GAAArC,YAAA;IAAAsC,MAAA;EACA,MAAM;IAAE5B,MAAM;IAAE6B,QAAQ,EAAEC,WAAW;IAAEhF,QAAQ;IAAEqB;EAAY,CAAC,GAAGiB,KAAK;EACtE,MAAM2C,MAAM,GAGAC,eAAM;EAFlB,OAAAJ,MAAA,GAAO,IAAA9F,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACuD,MAAM,EAAAH,MAAA,CAAA3B,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,cAEOP,WAAW,CAAC,OAAO,CAAC;MAAA,OAC5B,UAAU;MAAA,SACR,OAAO;MAAA,QACR,GAAG;MAAA,aACG2D,WAAW,GAAGG,SAAS,GAAGC,UAAS;MAAA,gCACjB;IAAM,GAAAP,KAAA;EAAA,IAElCG,WAAW,gBAAGnG,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAA8E,MAAA,CAAA3B,EAAA,gBAAE,CAAC,GAAGgC,SACxB,CAAC;AAEb;AAEA,SAASE,KAAKA,CACZ/C,KAAqF,EACrF;EAAA,IAAAgD,KAAA,GAAA9C,YAAA;IAAA+C,MAAA;EACA,MAAMC,MAAM,GACiCC,gBAAI;EAAjD,OAAAF,MAAA,GAAO,IAAAvG,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC8D,MAAM,EAAAD,MAAA,CAAApC,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAmB,IAAI;MAAA,QAAO,GAAG;MAAA;MAAA;IAAA,GAAA0D,KAAA;EAAA,EAAiB,CAAC;AACzF;AAEA,SAASI,IAAIA,CACXpD,KAAoF,EACpF;EAAA,IAAAqD,KAAA,GAAAnD,YAAA;IAAAoD,MAAA;EACA,MAAMC,KAAK,GAIMC,kBAAU;EAH3B,MAAM;IAAE9F,QAAQ;IAAEkD;EAAO,CAAC,GAAGZ,KAAK;EAElC,OAAAsD,MAAA,GAAO,IAAA5G,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACmE,KAAK,EAAAD,MAAA,CAAAzC,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,SAA2B,WAAW;MAAA,QAAO,GAAG;MAAA,aAAamE;IAAS,GAAAJ,KAAA;EAAA,iBAC1E9G,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC5D,OAAA,CAAAgI,UAAU,CAACL,IAAI;IAACO,QAAQ;EAAA,gBACvBnH,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAA4F,MAAA,CAAAzC,EAAA,gBAAE,CACI,CACZ,CAAC;AAEZ;AAEA,SAASS,IAAIA,CACXtB,KAAoF,EACpF;EAAA,IAAA2D,KAAA,GAAAzD,YAAA;IAAA0D,MAAA;EACA,MAAMC,KAAK,GAEiCC,mBAAG;EAA/C,OAAAF,MAAA,GAAO,IAAAlH,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACyE,KAAK,EAAAD,MAAA,CAAA/C,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA,MAAAqE,KAAA;EAAA,EAAe,CAAC;AACrD;AAEA,SAAStC,MAAMA,CACbrB,KAAsF,EACtF;EAAA,IAAA+D,KAAA,GAAA7D,YAAA;IAAA8D,MAAA;EACA,MAAMC,OAAO,GAGMH,mBAAG;EAFtB,MAAM;IAAEpG,QAAQ;IAAEkD,MAAM;IAAEsD;EAAM,CAAC,GAAGlE,KAAK;EACzC,OAAAgE,MAAA,GAAO,IAAAtH,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC6E,OAAO,EAAAD,MAAA,CAAAnD,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAkB;IAAQ,GAAAyE,KAAA;EAAA,IAC/BG,KAAK,iBAAI3H,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACoF,KAAK;IAACN,QAAQ,EAAEyB;EAAM,CAAE,CAAC,eAC9C3H,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAsG,MAAA,CAAAnD,EAAA,gBAAE,CACJ,CAAC;AAEd;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMlD,SAAS,GAAG,IAAAwG,qBAAe,EAG/BvH,aAAa,EAAE;EACfgB,OAAO;EACPE,KAAK;EACLoE,KAAK;EACLb,MAAM;EACNE,MAAM;EACND,IAAI;EACJ8B,IAAI;EACJL;AACF,CAAC,CAAC;AAAC,IAAAqB,QAAA,GAAAC,OAAA,CAAApH,OAAA,GAEYU,SAAS","ignoreList":[]}
+{"version":3,"file":"SidePanel.js","names":["_core","require","_baseComponents","_button","_interopRequireWildcard","_i18nEnhance","_interopRequireDefault","_findComponent","_fire","_logger","_ThemeProvider","_useFocusLock","_usePreventScroll","_useCssVariable","_zIndexStacking","_m","_l","_typography","_react","_intergalacticDynamicLocales","style","sstyled","insert","RootSidePanel","Component","constructor","args","_defineProperty2","default","React","createRef","e","key","stopPropagation","fire","isAdvanceMode","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","getOverlayProps","visible","duration","animationsDisabled","disablePreventScroll","getPanelProps","placement","closable","ariaLabel","ariaLabelledBy","handleOutsideClick","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","disablePortal","ignorePortalsStacking","createElement","Portal","assignProps","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","i18nEnhance","localizedMessages","props","_ref2","arguments[0]","_ref0","SOverlay","FadeInOut","overlayRef","useRef","usePreventScroll","useContextTheme","zIndex","useZIndexStacking","styles","cn","_ref3","_ref1","SPanel","Slide","onOutsideClick","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","useFocusLock","hasLabel","Boolean","logger","warn","Fragment","OutsideClick","ZIndexStackingContextProvider","PortalProvider","Close","_ref4","_ref10","SFooter","Flex","_ref5","_ref11","children","hasChildren","SClose","Button","undefined","CloseIcon","Title","_ref6","_ref12","STitle","Text","Back","_ref7","_ref13","SBack","ButtonLink","ArrowLeft","ellipsis","_ref8","_ref14","SBody","Box","_ref9","_ref15","SHeader","title","createComponent","_default","exports"],"sources":["../../src/SidePanel.tsx"],"sourcesContent":["import { FadeInOut, Slide, Flex, Box, OutsideClick, PortalProvider, Portal } from '@semcore/base-components';\nimport Button, { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport fire from '@semcore/core/lib/utils/fire';\nimport logger from '@semcore/core/lib/utils/logger';\nimport { useContextTheme } from '@semcore/core/lib/utils/ThemeProvider';\nimport { useFocusLock } from '@semcore/core/lib/utils/use/useFocusLock';\nimport usePreventScroll from '@semcore/core/lib/utils/use/usePreventScroll';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport {\n  ZIndexStackingContextProvider,\n  useZIndexStacking,\n} from '@semcore/core/lib/utils/zIndexStacking';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSSidePanel } from './SidePanel.type';\nimport style from './style/side-panel.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass RootSidePanel extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Component>,\n  typeof RootSidePanel.enhance,\n  {},\n  {},\n  {},\n  NSSidePanel.DefaultProps\n> {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      // TODO: Types are incompatible. For some reason string type doesn't recognized as a valid value.\n      // Leave it with ts-ignore annotation.\n      // @ts-ignore\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ] as const;\n\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  } as const;\n\n  sidebarRef = React.createRef<HTMLDivElement>();\n\n  handleSidebarKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {\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  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\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': duration + duration / 2,\n      'disableEnforceFocus': !this.isUsedOverlay(),\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          ? (\n              <Children />\n            )\n          : (\n              <SidePanel.Overlay>\n                <Root render={SidePanel.Panel} />\n              </SidePanel.Overlay>\n            )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Overlay.Component, typeof RootSidePanel, 'Overlay'>,\n) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  const zIndex = useZIndexStacking('z-index-modal');\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} zIndex={zIndex} />);\n}\n\nfunction Panel(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Panel.Component, typeof RootSidePanel, 'Panel'>,\n) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } = 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'],\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        <ZIndexStackingContextProvider designToken='z-index-modal'>\n          <PortalProvider value={sidebarRef}>\n            {closable && <SidePanel.Close />}\n            {advancedMode\n              ? (\n                  <Children />\n                )\n              : (\n                  <SidePanel.Body>\n                    <Children />\n                  </SidePanel.Body>\n                )}\n          </PortalProvider>\n        </ZIndexStackingContextProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Footer.Component>,\n) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Close.Component, typeof RootSidePanel, 'Close'>,\n) {\n  const { styles, children: hasChildren, Children, getI18nText } = props;\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      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n      data-hide-focus-hover-popper='true'\n    >\n      {hasChildren ? <Children /> : undefined}\n    </SClose>,\n  );\n}\n\nfunction Title(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Title.Component>,\n) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' size={300} bold ellipsis />);\n}\n\nfunction Back(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Back.Component>,\n) {\n  const SBack = Root;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>\n      <ButtonLink.Text ellipsis>\n        <Children />\n      </ButtonLink.Text>\n    </SBack>,\n  );\n}\n\nfunction Body(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Body.Component>,\n) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Header.Component>,\n) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Flex} tag='header'>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\n/**\n * SidePanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-code/|Examples}\n */\nconst SidePanel = createComponent<\n  NSSidePanel.Component,\n  typeof RootSidePanel\n>(RootSidePanel, {\n  Overlay,\n  Panel,\n  Close,\n  Header,\n  Footer,\n  Body,\n  Back,\n  Title,\n});\n\nexport default SidePanel;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,uBAAA,CAAAH,OAAA;AAGA,IAAAI,YAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,OAAA,GAAAH,sBAAA,CAAAL,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,iBAAA,GAAAN,sBAAA,CAAAL,OAAA;AACA,IAAAY,eAAA,GAAAZ,OAAA;AACA,IAAAa,eAAA,GAAAb,OAAA;AAIA,IAAAc,EAAA,GAAAT,sBAAA,CAAAL,OAAA;AACA,IAAAe,EAAA,GAAAV,sBAAA,CAAAL,OAAA;AACA,IAAAgB,WAAA,GAAAhB,OAAA;AACA,IAAAiB,MAAA,GAAAZ,sBAAA,CAAAL,OAAA;AAIA,IAAAkB,4BAAA,GAAAlB,OAAA;AAAmF;AAAA,MAAAmB,KAAA,8BAAApB,KAAA,CAAAqB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEnF,MAAMC,aAAa,SAASC,eAAS,CAOnC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,mCAsBaC,cAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,gCAEtBG,CAAsC,IAAK;MACjE,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;QACtBD,CAAC,CAACE,eAAe,CAAC,CAAC;QACnB,IAAAC,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAEH,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,gCAEuBG,CAAsC,IAAK;MACjE,IAAAG,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,cAAc,EAAEH,CAAC,CAAC;IAC1C,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,8BAEqBG,CAAmC,IAAK;MAC5D,IAAAG,aAAI,EAAC,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAEH,CAAC,CAAC;IAC5C,CAAC;EAAA;EAEDI,aAAaA,CAAA,EAAG;IACd,OAAO,IAAAA,4BAAa,EAAC,IAAI,CAACC,OAAO,CAACC,QAAQ,EAAE,CAC1CC,SAAS,CAACC,OAAO,CAACC,WAAW,EAC7BF,SAAS,CAACG,KAAK,CAACD,WAAW,CAC5B,CAAC;EACJ;EAEAE,aAAaA,CAAA,EAAG;IACd,OACE,CAAC,IAAI,CAACP,aAAa,CAAC,CAAC,IAAI,IAAAA,4BAAa,EAAC,IAAI,CAACC,OAAO,CAACC,QAAQ,EAAE,CAACC,SAAS,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC;EAElG;EAEAG,eAAeA,CAAA,EAAG;IAChB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,kBAAkB;MAAEC;IAAqB,CAAC,GAAG,IAAI,CAACX,OAAO;IACpF,OAAO;MACLQ,OAAO;MACPC,QAAQ;MACRC,kBAAkB;MAClBC;IACF,CAAC;EACH;EAEAC,aAAaA,CAAA,EAAG;IACd,MAAM;MACJC,SAAS;MACTL,OAAO;MACPM,QAAQ;MACRL,QAAQ;MACRC,kBAAkB;MAClB,YAAY,EAAEK,SAAS;MACvB,iBAAiB,EAAEC;IACrB,CAAC,GAAG,IAAI,CAAChB,OAAO;IAEhB,OAAO;MACLQ,OAAO;MACPK,SAAS;MACTC,QAAQ;MACR,UAAU,EAAEL,QAAQ,GAAGA,QAAQ,GAAG,CAAC;MACnC,qBAAqB,EAAE,CAAC,IAAI,CAACH,aAAa,CAAC,CAAC;MAC5C,gBAAgB,EAAE,IAAI,CAACW,kBAAkB;MACzC,WAAW,EAAE,IAAI,CAACC,oBAAoB;MACtCR,kBAAkB;MAClB,YAAY,EAAEK,SAAS;MACvB,iBAAiB,EAAEC;IACrB,CAAC;EACH;EAEAG,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,OAAO,EAAE,IAAI,CAACC,oBAAoB;MAClCC,WAAW,EAAE,IAAI,CAACtB,OAAO,CAACsB;IAC5B,CAAC;EACH;EAEAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAxB,OAAA;IACP,MAAM;MAAEC,QAAQ;MAAEwB,aAAa;MAAEC;IAAsB,CAAC,GAAG,IAAI,CAAC1B,OAAO;IAEvE,oBACElB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAA8D,MAAM;MAACH,aAAa,EAAEA,aAAc;MAACC,qBAAqB,EAAEA;IAAsB,GAChF,IAAI,CAAC3B,aAAa,CAAC,CAAC,gBAEfjB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,MAAE,CAAC,gBAGZnB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACC,OAAO,qBAChBrB,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAczB,SAAS,CAACG,KAAK,MAAAzC,KAAA,CAAAiE,WAAA,MAAAL,IAAA,CAAG,CACf,CAEnB,CAAC;EAEb;AACF;AAAC,IAAAjC,gBAAA,CAAAC,OAAA,EAtHKL,aAAa,iBAQI,WAAW;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAR5BL,aAAa,WASFH,KAAK;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EAThBL,aAAa,aAUA,CACf,IAAA2C,kCAAkB,EAAC;EACjBC,QAAQ,EAAE,gCAAgC;EAC1CC,QAAQ,EAAE,KAAK;EACf;EACA;EACA;EACAC,GAAG,EAAEC,MAAM,CAACC,QAAQ;EACpBC,IAAI,EAAE;AACR,CAAC,CAAC,EACF,IAAAC,oBAAW,EAACC,8CAAiB,CAAC,CAC/B;AAAA,IAAA/C,gBAAA,CAAAC,OAAA,EArBGL,aAAa,kBAuBK;EACpB0B,SAAS,EAAE,OAAO;EAClBC,QAAQ,EAAE,IAAI;EACdH,oBAAoB,EAAE;AACxB,CAAC;AA6FH,SAASR,OAAOA,CACdoC,KAA6H,EAC7H;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,QAAQ,GAKiCC,yBAAS;EAJxD,MAAMC,UAAU,GAAGpD,cAAK,CAACqD,MAAM,CAAC,IAAI,CAAC;EACrC,IAAAC,yBAAgB,EAACR,KAAK,CAAC/B,OAAO,EAAE+B,KAAK,CAAC5B,oBAAoB,CAAC;EAC3D,IAAAqC,8BAAe,EAACH,UAAU,EAAEN,KAAK,CAAC/B,OAAO,CAAC;EAC1C,MAAMyC,MAAM,GAAG,IAAAC,iCAAiB,EAAC,eAAe,CAAC;EACjD,OAAAR,KAAA,GAAO,IAAAzD,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACgB,QAAQ,EAAAD,KAAA,CAAAU,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAyBgB,UAAU;MAAA,UAAUI;IAAM,GAAAT,KAAA;EAAA,EAAG,CAAC;AAC/F;AAEA,SAASnC,KAAKA,CACZkC,KAAyH,EACzH;EAAA,IAAAc,KAAA,GAAAZ,YAAA;IAAAa,KAAA;EACA,MAAMC,MAAM,GA0BEC,qBAAK;EAzBnB,MAAM;IAAEvD,QAAQ;IAAEkD,MAAM;IAAE3C,OAAO;IAAEM,QAAQ;IAAED,SAAS;IAAE4C,cAAc;IAAEC;EAAmB,CAAC,GAAGnB,KAAK;EACpG,MAAMoB,YAAY,GAChBD,kBAAkB,IAClB,IAAA3D,4BAAa,EAACE,QAAQ,EAAE,CACtBC,SAAS,CAAC0D,MAAM,CAACxD,WAAW,EAC5BF,SAAS,CAAC2D,IAAI,CAACzD,WAAW,EAC1BF,SAAS,CAAC4D,MAAM,CAAC1D,WAAW,CAC7B,CAAC;EAEJ,MAAM2D,UAAU,GAAGtE,cAAK,CAACqD,MAAM,CAAC,IAAI,CAAC;EAErC,IAAAkB,0BAAY,EAACD,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAACvD,OAAO,EAAE,IAAI,CAAC;EAEtD,MAAMyD,QAAQ,GAAGC,OAAO,CAAC3B,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAAC,iBAAiB,CAAC,CAAC;EAEzE4B,eAAM,CAACC,IAAI,CACT,CAACH,QAAQ,EACT,4EAA4E,EAC5E1B,KAAK,CAAC,cAAc,CACtB,CAAC;EAED,OAAAe,KAAA,GAAO,IAAArE,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAA7C,MAAA,CAAAU,OAAA,CAAA6E,QAAA,QACG7D,OAAO,iBAAI1B,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAAwG,YAAY,EAAAhB,KAAA,CAAAF,EAAA;IAAA,kBAAiBK,cAAc;IAAA,eAAe,CAACM,UAAU;EAAC,EAAG,CAAC,eACvFjF,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC4B,MAAM,EAAAD,KAAA,CAAAF,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,WAEIrB,OAAO;MAAA,oBACE,IAAI;MAAA,eACTK,SAAS;MAAA,OACjBkD,UAAU;MAAA,QACV,QAAQ;MAAA,cACF;IAAM,GAAAV,KAAA;EAAA,iBAEjBvE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACjD,eAAA,CAAA6F,6BAA6B,EAAAjB,KAAA,CAAAF,EAAA;IAAA,eAAa;EAAe,iBACxDtE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC7D,eAAA,CAAA0G,cAAc,EAAAlB,KAAA,CAAAF,EAAA;IAAA,SAAQW;EAAU,IAC9BjD,QAAQ,iBAAIhC,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACuE,KAAK,MAAE,CAAC,EAC/Bd,YAAY,gBAEP7E,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAqD,KAAA,CAAAF,EAAA,gBAAE,CAAC,gBAGZtE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAAC2D,IAAI,qBACb/E,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAqD,KAAA,CAAAF,EAAA,gBAAE,CACG,CAER,CACa,CACzB,CACR,CAAC;AAEP;AAEA,SAASU,MAAMA,CACbvB,KAAsF,EACtF;EAAA,IAAAmC,KAAA,GAAAjC,YAAA;IAAAkC,MAAA;EACA,MAAMC,OAAO,GACiCC,oBAAI;EAAlD,OAAAF,MAAA,GAAO,IAAA1F,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACiD,OAAO,EAAAD,MAAA,CAAAvB,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAmB;IAAQ,GAAA6C,KAAA;EAAA,EAAE,CAAC;AACrE;AAEA,SAASD,KAAKA,CACZlC,KAAyH,EACzH;EAAA,IAAAuC,KAAA,GAAArC,YAAA;IAAAsC,MAAA;EACA,MAAM;IAAE5B,MAAM;IAAE6B,QAAQ,EAAEC,WAAW;IAAEhF,QAAQ;IAAEqB;EAAY,CAAC,GAAGiB,KAAK;EACtE,MAAM2C,MAAM,GAGAC,eAAM;EAFlB,OAAAJ,MAAA,GAAO,IAAA9F,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACuD,MAAM,EAAAH,MAAA,CAAA3B,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,cAEOP,WAAW,CAAC,OAAO,CAAC;MAAA,OAC5B,UAAU;MAAA,SACR,OAAO;MAAA,QACR,GAAG;MAAA,aACG2D,WAAW,GAAGG,SAAS,GAAGC,UAAS;MAAA,gCACjB;IAAM,GAAAP,KAAA;EAAA,IAElCG,WAAW,gBAAGnG,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAA8E,MAAA,CAAA3B,EAAA,gBAAE,CAAC,GAAGgC,SACxB,CAAC;AAEb;AAEA,SAASE,KAAKA,CACZ/C,KAAqF,EACrF;EAAA,IAAAgD,KAAA,GAAA9C,YAAA;IAAA+C,MAAA;EACA,MAAMC,MAAM,GACiCC,gBAAI;EAAjD,OAAAF,MAAA,GAAO,IAAAvG,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC8D,MAAM,EAAAD,MAAA,CAAApC,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAmB,IAAI;MAAA,QAAO,GAAG;MAAA;MAAA;IAAA,GAAA0D,KAAA;EAAA,EAAiB,CAAC;AACzF;AAEA,SAASI,IAAIA,CACXpD,KAAoF,EACpF;EAAA,IAAAqD,KAAA,GAAAnD,YAAA;IAAAoD,MAAA;EACA,MAAMC,KAAK,GAIMC,kBAAU;EAH3B,MAAM;IAAE9F,QAAQ;IAAEkD;EAAO,CAAC,GAAGZ,KAAK;EAElC,OAAAsD,MAAA,GAAO,IAAA5G,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACmE,KAAK,EAAAD,MAAA,CAAAzC,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,SAA2B,WAAW;MAAA,QAAO,GAAG;MAAA,aAAamE;IAAS,GAAAJ,KAAA;EAAA,iBAC1E9G,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC5D,OAAA,CAAAgI,UAAU,CAACL,IAAI;IAACO,QAAQ;EAAA,gBACvBnH,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAA4F,MAAA,CAAAzC,EAAA,gBAAE,CACI,CACZ,CAAC;AAEZ;AAEA,SAASS,IAAIA,CACXtB,KAAoF,EACpF;EAAA,IAAA2D,KAAA,GAAAzD,YAAA;IAAA0D,MAAA;EACA,MAAMC,KAAK,GAEiCC,mBAAG;EAA/C,OAAAF,MAAA,GAAO,IAAAlH,aAAO,EAACsD,KAAK,CAACY,MAAM,CAAC,eAACrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACyE,KAAK,EAAAD,MAAA,CAAA/C,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA,MAAAqE,KAAA;EAAA,EAAe,CAAC;AACrD;AAEA,SAAStC,MAAMA,CACbrB,KAAsF,EACtF;EAAA,IAAA+D,KAAA,GAAA7D,YAAA;IAAA8D,MAAA;EACA,MAAMC,OAAO,GAGM3B,oBAAI;EAFvB,MAAM;IAAE5E,QAAQ;IAAEkD,MAAM;IAAEsD;EAAM,CAAC,GAAGlE,KAAK;EACzC,OAAAgE,MAAA,GAAO,IAAAtH,aAAO,EAACkE,MAAM,CAAC,eACpBrE,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC6E,OAAO,EAAAD,MAAA,CAAAnD,EAAA;IAAA,OAAAxF,KAAA,CAAAiE,WAAA;MAAA,OAAmB;IAAQ,GAAAyE,KAAA;EAAA,IAChCG,KAAK,iBAAI3H,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAACzB,SAAS,CAACoF,KAAK;IAACN,QAAQ,EAAEyB;EAAM,CAAE,CAAC,eAC9C3H,MAAA,CAAAU,OAAA,CAAAmC,aAAA,CAAC1B,QAAQ,EAAAsG,MAAA,CAAAnD,EAAA,gBAAE,CACJ,CAAC;AAEd;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMlD,SAAS,GAAG,IAAAwG,qBAAe,EAG/BvH,aAAa,EAAE;EACfgB,OAAO;EACPE,KAAK;EACLoE,KAAK;EACLb,MAAM;EACNE,MAAM;EACND,IAAI;EACJ8B,IAAI;EACJL;AACF,CAAC,CAAC;AAAC,IAAAqB,QAAA,GAAAC,OAAA,CAAApH,OAAA,GAEYU,SAAS","ignoreList":[]}

package/lib/cjs/SidePanel.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.type.js","names":[],"sources":["../../src/SidePanel.type.ts"],"sourcesContent":["import type { FadeInOutProps, SlideProps, Box, BoxProps, Flex, PortalProps } from '@semcore/base-components';\nimport type Button from '@semcore/button';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSSidePanel {\n  type Props = PortalProps &\n    BoxProps & {\n      /** Animation display duration in ms\n       * @default 350\n       */\n      duration?: number;\n      /**\n       * The property responsible for the visibility of the component\n       */\n      visible?: boolean;\n      /**\n       * Callback for the component closure\n       */\n      onClose?: (trigger: 'onOutsideClick' | 'onEscape' | 'onCloseClick', e?: React.MouseEvent | React.KeyboardEvent) => void;\n      /**\n       * Property for displaying the close button\n       * @default true\n       */\n      closable?: boolean;\n      /**\n       * Position of a dropdown window\n       * @default right\n       */\n      placement?: NSSidePanel.Placement;\n      /**\n       * Setting `true` disables mechanism that hides document body scrollbar when SidePanel is visible\n       * @default false\n       */\n      disablePreventScroll?: boolean;\n      /**\n        * Disable animation\n        * @deprecated\n      */\n      animationsDisabled?: boolean;\n    };\n  type DefaultProps = {\n    placement: 'right';\n    closable: true;\n    disablePreventScroll: false;\n  };\n  type Ctx = {\n    getOverlayProps?: PropGetterFn;\n    getPanelProps?: PropGetterFn;\n    getCloseProps?: PropGetterFn;\n  };\n  type Placement = 'top' | 'left' | 'right' | 'bottom';\n\n  namespace Header {\n    type Props = BoxProps & {\n      title?: React.ReactNode;\n    };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Back {\n    type Component = typeof Box;\n  }\n\n  namespace Body {\n    type Component = typeof Box;\n  }\n\n  namespace Footer {\n    type Component = typeof Flex;\n  }\n\n  namespace Title {\n    type Component = typeof Text;\n  }\n\n  namespace Overlay {\n    type Props = FadeInOutProps & BoxProps;\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Panel {\n    type Props = SlideProps &\n      BoxProps & {\n        /** Callback that is triggered when click outside is occured */\n        onOutsideClick?: (e?: React.SyntheticEvent) => void;\n        /**\n          * Forces advanced mode\n          * @deprecated It will be removed in v18.\n        */\n        forcedAdvancedMode?: boolean;\n      };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Close {\n    type Component = typeof Button;\n  }\n\n  type Component = Intergalactic.Component<'div', Props, Ctx> & {\n    Header: Header.Component;\n    Back: Back.Component;\n    Body: Body.Component;\n    Footer: Footer.Component;\n    Title: Title.Component;\n    Overlay: Overlay.Component;\n    Panel: Panel.Component;\n    Close: Close.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type SidePanelProps = NSSidePanel.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelContext = NSSidePanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelHeaderProps = NSSidePanel.Header.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelOverlayProps = NSSidePanel.Overlay.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelPanelProps = NSSidePanel.Panel.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelPlacement = NSSidePanel.Placement;\n/** @deprecated It will be removed in v18. */\nexport type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';\n/** @deprecated It will be removed in v18. */\nexport type OnCloseType = (\n  trigger: OnCloseTriggerType,\n  e?: React.MouseEvent | React.KeyboardEvent,\n) => void;\n\nexport type { NSSidePanel };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"SidePanel.type.js","names":[],"sources":["../../src/SidePanel.type.ts"],"sourcesContent":["import type { NSAnimation, NSBox, NSFlex, NSPortal } from '@semcore/base-components';\nimport type { NSButton } from '@semcore/button';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSSidePanel {\n  type Props = NSPortal.Props &\n    NSBox.Props & {\n    /** Animation display duration in ms\n       * @default 350\n       */\n      duration?: number;\n      /**\n       * The property responsible for the visibility of the component\n       */\n      visible?: boolean;\n      /**\n       * Callback for the component closure\n       */\n      onClose?: (trigger: 'onOutsideClick' | 'onEscape' | 'onCloseClick', e?: React.MouseEvent | React.KeyboardEvent) => void;\n      /**\n       * Property for displaying the close button\n       * @default true\n       */\n      closable?: boolean;\n      /**\n       * Position of a dropdown window\n       * @default right\n       */\n      placement?: NSSidePanel.Placement;\n      /**\n       * Setting `true` disables mechanism that hides document body scrollbar when SidePanel is visible\n       * @default false\n       */\n      disablePreventScroll?: boolean;\n      /**\n        * Disable animation\n        * @deprecated\n      */\n      animationsDisabled?: boolean;\n    };\n  type DefaultProps = {\n    placement: 'right';\n    closable: true;\n    disablePreventScroll: false;\n  };\n  type Ctx = {\n    getOverlayProps?: PropGetterFn;\n    getPanelProps?: PropGetterFn;\n    getCloseProps?: PropGetterFn;\n  };\n  type Placement = 'top' | 'left' | 'right' | 'bottom';\n\n  namespace Header {\n    type Props = NSBox.Props & {\n      title?: React.ReactNode;\n    };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Back {\n    type Component = NSBox.Component;\n  }\n\n  namespace Body {\n    type Component = NSBox.Component;\n  }\n\n  namespace Footer {\n    type Component = NSFlex.Component;\n  }\n\n  namespace Title {\n    type Component = NSText.Component;\n  }\n\n  namespace Overlay {\n    type Props = NSAnimation.FadeInOut.Props & NSBox.Props;\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Panel {\n    type Props = NSAnimation.Slide.Props &\n      NSBox.Props & {\n        /** Callback that is triggered when click outside is occured */\n        onOutsideClick?: (e?: React.SyntheticEvent) => void;\n        /**\n          * Forces advanced mode\n          * @deprecated It will be removed in v19.\n        */\n        forcedAdvancedMode?: boolean;\n      };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Close {\n    type Component = NSButton.Component;\n  }\n\n  type Component = Intergalactic.Component<'div', Props, Ctx> & {\n    Header: Header.Component;\n    /**\n     * @deprecated. Use ButtonLink instead.\n     */\n    Back: Back.Component;\n    Body: Body.Component;\n    Footer: Footer.Component;\n    Title: Title.Component;\n    Overlay: Overlay.Component;\n    Panel: Panel.Component;\n    Close: Close.Component;\n  };\n}\n\n/** @deprecated It will be removed in v19. */\nexport type SidePanelProps = NSSidePanel.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelContext = NSSidePanel.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelHeaderProps = NSSidePanel.Header.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelOverlayProps = NSSidePanel.Overlay.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelPanelProps = NSSidePanel.Panel.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelPlacement = NSSidePanel.Placement;\n/** @deprecated It will be removed in v19. */\nexport type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';\n/** @deprecated It will be removed in v19. */\nexport type OnCloseType = (\n  trigger: OnCloseTriggerType,\n  e?: React.MouseEvent | React.KeyboardEvent,\n) => void;\n\nexport type { NSSidePanel };\n"],"mappings":"","ignoreList":[]}

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

@@ -61,12 +61,7 @@ SClose {
   position: absolute;
   z-index: 1;
   right: var(--intergalactic-spacing-2x, 8px);
-  top: var(--intergalactic-spacing-2x, 8px);
-
-  & SAddon:only-child {
-    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-  }
+  top: var(--intergalactic-spacing-1x, 4px);
 }
 
 SBack {
@@ -74,27 +69,32 @@ SBack {
 }
 
 SHeader {
-  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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
-  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
   flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
 }
 
 SFooter {
   min-height: 44px;
-  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  box-sizing: border-box;
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
 }

package/lib/es6/SidePanel.js

@@ -26,21 +26,20 @@ import CloseIcon from '@semcore/icon/Close/l';
 import { Text } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/side-panel.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SOverlay_di9xj_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_di9xj_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_di9xj_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_di9xj_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-2x,8px)}.___SClose_di9xj_gg_ .___SAddon_di9xj_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_di9xj_gg_{max-width:100%}.___SHeader_di9xj_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,#000c0829);box-sizing:border-box;flex-shrink:0}@media (color-gamut:p3){.___SHeader_di9xj_gg_{box-shadow:inset 0 -1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_di9xj_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,#000c0829);box-sizing:border-box}@media (color-gamut:p3){.___SFooter_di9xj_gg_{box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_di9xj_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-4x,16px) var(--intergalactic-spacing-6x,24px)}", /*__inner_css_end__*/"di9xj_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SOverlay_xzndr_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_xzndr_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_xzndr_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_xzndr_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-1x,4px)}.___SBack_xzndr_gg_{max-width:100%}.___SHeader_xzndr_gg_{padding:var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-14x,56px) var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);min-height:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));border-bottom:1px solid var(--intergalactic-border-primary,#000c0829);box-sizing:border-box;flex-shrink:0;flex-direction:column;justify-content:center}@media (color-gamut:p3){.___SHeader_xzndr_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_xzndr_gg_{min-height:44px;padding:var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-xlarge,12px);border-top:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SFooter_xzndr_gg_{border-top:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_xzndr_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-content-padding-large,16px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px)}", /*__inner_css_end__*/"xzndr_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SOverlay": "___SOverlay_di9xj_gg_",
-  "__SPanel": "___SPanel_di9xj_gg_",
-  "_placement_top": "_placement_top_di9xj_gg_",
-  "_placement_right": "_placement_right_di9xj_gg_",
-  "_placement_bottom": "_placement_bottom_di9xj_gg_",
-  "_placement_left": "_placement_left_di9xj_gg_",
-  "__SBack": "___SBack_di9xj_gg_",
-  "__SHeader": "___SHeader_di9xj_gg_",
-  "__SFooter": "___SFooter_di9xj_gg_",
-  "__SBody": "___SBody_di9xj_gg_",
-  "__SClose": "___SClose_di9xj_gg_",
-  "__SAddon": "___SAddon_di9xj_gg_"
+  "__SOverlay": "___SOverlay_xzndr_gg_",
+  "__SPanel": "___SPanel_xzndr_gg_",
+  "_placement_top": "_placement_top_xzndr_gg_",
+  "_placement_right": "_placement_right_xzndr_gg_",
+  "_placement_bottom": "_placement_bottom_xzndr_gg_",
+  "_placement_left": "_placement_left_xzndr_gg_",
+  "__SClose": "___SClose_xzndr_gg_",
+  "__SBack": "___SBack_xzndr_gg_",
+  "__SHeader": "___SHeader_xzndr_gg_",
+  "__SFooter": "___SFooter_xzndr_gg_",
+  "__SBody": "___SBody_xzndr_gg_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 class RootSidePanel extends Component {
@@ -262,7 +261,7 @@ function Body(props) {
 function Header(props) {
   var _ref9 = arguments[0],
     _ref15;
-  const SHeader = Box;
+  const SHeader = Flex;
   const {
     Children,
     styles,

package/lib/es6/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":["FadeInOut","Slide","Flex","Box","OutsideClick","PortalProvider","Portal","Button","ButtonLink","createComponent","Component","Root","sstyled","i18nEnhance","isAdvanceMode","fire","logger","useContextTheme","useFocusLock","usePreventScroll","cssVariableEnhance","ZIndexStackingContextProvider","useZIndexStacking","ArrowLeft","CloseIcon","Text","React","style","_sstyled","insert","localizedMessages","RootSidePanel","constructor","args","_defineProperty","createRef","e","key","stopPropagation","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","getOverlayProps","visible","duration","animationsDisabled","disablePreventScroll","getPanelProps","placement","closable","ariaLabel","ariaLabelledBy","handleOutsideClick","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","disablePortal","ignorePortalsStacking","createElement","_assignProps","variable","fallback","map","Number","parseInt","prop","props","_ref2","arguments[0]","_ref0","SOverlay","overlayRef","useRef","zIndex","styles","cn","_assignProps2","_ref3","_ref1","SPanel","onOutsideClick","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","hasLabel","Boolean","warn","Fragment","_assignProps3","Close","_ref4","_ref10","SFooter","_assignProps4","_ref5","_ref11","children","hasChildren","SClose","_assignProps5","undefined","Title","_ref6","_ref12","STitle","_assignProps6","Back","_ref7","_ref13","SBack","_assignProps7","ellipsis","_ref8","_ref14","SBody","_assignProps8","_ref9","_ref15","SHeader","title","_assignProps9"],"sources":["../../src/SidePanel.tsx"],"sourcesContent":["import { FadeInOut, Slide, Flex, Box, OutsideClick, PortalProvider, Portal } from '@semcore/base-components';\nimport Button, { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport fire from '@semcore/core/lib/utils/fire';\nimport logger from '@semcore/core/lib/utils/logger';\nimport { useContextTheme } from '@semcore/core/lib/utils/ThemeProvider';\nimport { useFocusLock } from '@semcore/core/lib/utils/use/useFocusLock';\nimport usePreventScroll from '@semcore/core/lib/utils/use/usePreventScroll';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport {\n  ZIndexStackingContextProvider,\n  useZIndexStacking,\n} from '@semcore/core/lib/utils/zIndexStacking';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSSidePanel } from './SidePanel.type';\nimport style from './style/side-panel.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass RootSidePanel extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Component>,\n  typeof RootSidePanel.enhance,\n  {},\n  {},\n  {},\n  NSSidePanel.DefaultProps\n> {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      // TODO: Types are incompatible. For some reason string type doesn't recognized as a valid value.\n      // Leave it with ts-ignore annotation.\n      // @ts-ignore\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ] as const;\n\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  } as const;\n\n  sidebarRef = React.createRef<HTMLDivElement>();\n\n  handleSidebarKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {\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  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\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': duration + duration / 2,\n      'disableEnforceFocus': !this.isUsedOverlay(),\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          ? (\n              <Children />\n            )\n          : (\n              <SidePanel.Overlay>\n                <Root render={SidePanel.Panel} />\n              </SidePanel.Overlay>\n            )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Overlay.Component, typeof RootSidePanel, 'Overlay'>,\n) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  const zIndex = useZIndexStacking('z-index-modal');\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} zIndex={zIndex} />);\n}\n\nfunction Panel(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Panel.Component, typeof RootSidePanel, 'Panel'>,\n) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } = 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'],\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        <ZIndexStackingContextProvider designToken='z-index-modal'>\n          <PortalProvider value={sidebarRef}>\n            {closable && <SidePanel.Close />}\n            {advancedMode\n              ? (\n                  <Children />\n                )\n              : (\n                  <SidePanel.Body>\n                    <Children />\n                  </SidePanel.Body>\n                )}\n          </PortalProvider>\n        </ZIndexStackingContextProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Footer.Component>,\n) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Close.Component, typeof RootSidePanel, 'Close'>,\n) {\n  const { styles, children: hasChildren, Children, getI18nText } = props;\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      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n      data-hide-focus-hover-popper='true'\n    >\n      {hasChildren ? <Children /> : undefined}\n    </SClose>,\n  );\n}\n\nfunction Title(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Title.Component>,\n) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' size={300} bold ellipsis />);\n}\n\nfunction Back(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Back.Component>,\n) {\n  const SBack = Root;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>\n      <ButtonLink.Text ellipsis>\n        <Children />\n      </ButtonLink.Text>\n    </SBack>,\n  );\n}\n\nfunction Body(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Body.Component>,\n) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Header.Component>,\n) {\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\n/**\n * SidePanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-code/|Examples}\n */\nconst SidePanel = createComponent<\n  NSSidePanel.Component,\n  typeof RootSidePanel\n>(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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","ignoreList":[]}
+{"version":3,"file":"SidePanel.js","names":["FadeInOut","Slide","Flex","Box","OutsideClick","PortalProvider","Portal","Button","ButtonLink","createComponent","Component","Root","sstyled","i18nEnhance","isAdvanceMode","fire","logger","useContextTheme","useFocusLock","usePreventScroll","cssVariableEnhance","ZIndexStackingContextProvider","useZIndexStacking","ArrowLeft","CloseIcon","Text","React","style","_sstyled","insert","localizedMessages","RootSidePanel","constructor","args","_defineProperty","createRef","e","key","stopPropagation","asProps","Children","SidePanel","Overlay","displayName","Panel","isUsedOverlay","getOverlayProps","visible","duration","animationsDisabled","disablePreventScroll","getPanelProps","placement","closable","ariaLabel","ariaLabelledBy","handleOutsideClick","handleSidebarKeyDown","getCloseProps","onClick","handleIconCloseClick","getI18nText","render","_ref","disablePortal","ignorePortalsStacking","createElement","_assignProps","variable","fallback","map","Number","parseInt","prop","props","_ref2","arguments[0]","_ref0","SOverlay","overlayRef","useRef","zIndex","styles","cn","_assignProps2","_ref3","_ref1","SPanel","onOutsideClick","forcedAdvancedMode","advancedMode","Header","Body","Footer","sidebarRef","hasLabel","Boolean","warn","Fragment","_assignProps3","Close","_ref4","_ref10","SFooter","_assignProps4","_ref5","_ref11","children","hasChildren","SClose","_assignProps5","undefined","Title","_ref6","_ref12","STitle","_assignProps6","Back","_ref7","_ref13","SBack","_assignProps7","ellipsis","_ref8","_ref14","SBody","_assignProps8","_ref9","_ref15","SHeader","title","_assignProps9"],"sources":["../../src/SidePanel.tsx"],"sourcesContent":["import { FadeInOut, Slide, Flex, Box, OutsideClick, PortalProvider, Portal } from '@semcore/base-components';\nimport Button, { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport fire from '@semcore/core/lib/utils/fire';\nimport logger from '@semcore/core/lib/utils/logger';\nimport { useContextTheme } from '@semcore/core/lib/utils/ThemeProvider';\nimport { useFocusLock } from '@semcore/core/lib/utils/use/useFocusLock';\nimport usePreventScroll from '@semcore/core/lib/utils/use/usePreventScroll';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport {\n  ZIndexStackingContextProvider,\n  useZIndexStacking,\n} from '@semcore/core/lib/utils/zIndexStacking';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSSidePanel } from './SidePanel.type';\nimport style from './style/side-panel.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass RootSidePanel extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Component>,\n  typeof RootSidePanel.enhance,\n  {},\n  {},\n  {},\n  NSSidePanel.DefaultProps\n> {\n  static displayName = 'SidePanel';\n  static style = style;\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-modal',\n      fallback: '200',\n      // TODO: Types are incompatible. For some reason string type doesn't recognized as a valid value.\n      // Leave it with ts-ignore annotation.\n      // @ts-ignore\n      map: Number.parseInt,\n      prop: 'duration',\n    }),\n    i18nEnhance(localizedMessages),\n  ] as const;\n\n  static defaultProps = {\n    placement: 'right',\n    closable: true,\n    disablePreventScroll: false,\n  } as const;\n\n  sidebarRef = React.createRef<HTMLDivElement>();\n\n  handleSidebarKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {\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  getOverlayProps() {\n    const { visible, duration, animationsDisabled, disablePreventScroll } = this.asProps;\n    return {\n      visible,\n      duration,\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': duration + duration / 2,\n      'disableEnforceFocus': !this.isUsedOverlay(),\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          ? (\n              <Children />\n            )\n          : (\n              <SidePanel.Overlay>\n                <Root render={SidePanel.Panel} />\n              </SidePanel.Overlay>\n            )}\n      </Portal>\n    );\n  }\n}\n\nfunction Overlay(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Overlay.Component, typeof RootSidePanel, 'Overlay'>,\n) {\n  const SOverlay = Root;\n  const overlayRef = React.useRef(null);\n  usePreventScroll(props.visible, props.disablePreventScroll);\n  useContextTheme(overlayRef, props.visible);\n  const zIndex = useZIndexStacking('z-index-modal');\n  return sstyled(props.styles)(<SOverlay render={FadeInOut} ref={overlayRef} zIndex={zIndex} />);\n}\n\nfunction Panel(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Panel.Component, typeof RootSidePanel, 'Panel'>,\n) {\n  const SPanel = Root;\n  const { Children, styles, visible, closable, placement, onOutsideClick, forcedAdvancedMode } = 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'],\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        <ZIndexStackingContextProvider designToken='z-index-modal'>\n          <PortalProvider value={sidebarRef}>\n            {closable && <SidePanel.Close />}\n            {advancedMode\n              ? (\n                  <Children />\n                )\n              : (\n                  <SidePanel.Body>\n                    <Children />\n                  </SidePanel.Body>\n                )}\n          </PortalProvider>\n        </ZIndexStackingContextProvider>\n      </SPanel>\n    </>,\n  );\n}\n\nfunction Footer(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Footer.Component>,\n) {\n  const SFooter = Root;\n  return sstyled(props.styles)(<SFooter render={Flex} tag='footer' />);\n}\n\nfunction Close(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSSidePanel.Close.Component, typeof RootSidePanel, 'Close'>,\n) {\n  const { styles, children: hasChildren, Children, getI18nText } = props;\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      size='l'\n      addonLeft={hasChildren ? undefined : CloseIcon}\n      data-hide-focus-hover-popper='true'\n    >\n      {hasChildren ? <Children /> : undefined}\n    </SClose>,\n  );\n}\n\nfunction Title(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Title.Component>,\n) {\n  const STitle = Root;\n  return sstyled(props.styles)(<STitle render={Text} tag='h6' size={300} bold ellipsis />);\n}\n\nfunction Back(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Back.Component>,\n) {\n  const SBack = Root;\n  const { Children, styles } = props;\n\n  return sstyled(styles)(\n    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>\n      <ButtonLink.Text ellipsis>\n        <Children />\n      </ButtonLink.Text>\n    </SBack>,\n  );\n}\n\nfunction Body(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Body.Component>,\n) {\n  const SBody = Root;\n\n  return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Header(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Header.Component>,\n) {\n  const SHeader = Root;\n  const { Children, styles, title } = props;\n  return sstyled(styles)(\n    <SHeader render={Flex} tag='header'>\n      {title && <SidePanel.Title children={title} />}\n      <Children />\n    </SHeader>,\n  );\n}\n\n/**\n * SidePanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/side-panel/side-panel-code/|Examples}\n */\nconst SidePanel = createComponent<\n  NSSidePanel.Component,\n  typeof RootSidePanel\n>(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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","ignoreList":[]}

package/lib/es6/SidePanel.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.type.js","names":[],"sources":["../../src/SidePanel.type.ts"],"sourcesContent":["import type { FadeInOutProps, SlideProps, Box, BoxProps, Flex, PortalProps } from '@semcore/base-components';\nimport type Button from '@semcore/button';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSSidePanel {\n  type Props = PortalProps &\n    BoxProps & {\n      /** Animation display duration in ms\n       * @default 350\n       */\n      duration?: number;\n      /**\n       * The property responsible for the visibility of the component\n       */\n      visible?: boolean;\n      /**\n       * Callback for the component closure\n       */\n      onClose?: (trigger: 'onOutsideClick' | 'onEscape' | 'onCloseClick', e?: React.MouseEvent | React.KeyboardEvent) => void;\n      /**\n       * Property for displaying the close button\n       * @default true\n       */\n      closable?: boolean;\n      /**\n       * Position of a dropdown window\n       * @default right\n       */\n      placement?: NSSidePanel.Placement;\n      /**\n       * Setting `true` disables mechanism that hides document body scrollbar when SidePanel is visible\n       * @default false\n       */\n      disablePreventScroll?: boolean;\n      /**\n        * Disable animation\n        * @deprecated\n      */\n      animationsDisabled?: boolean;\n    };\n  type DefaultProps = {\n    placement: 'right';\n    closable: true;\n    disablePreventScroll: false;\n  };\n  type Ctx = {\n    getOverlayProps?: PropGetterFn;\n    getPanelProps?: PropGetterFn;\n    getCloseProps?: PropGetterFn;\n  };\n  type Placement = 'top' | 'left' | 'right' | 'bottom';\n\n  namespace Header {\n    type Props = BoxProps & {\n      title?: React.ReactNode;\n    };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Back {\n    type Component = typeof Box;\n  }\n\n  namespace Body {\n    type Component = typeof Box;\n  }\n\n  namespace Footer {\n    type Component = typeof Flex;\n  }\n\n  namespace Title {\n    type Component = typeof Text;\n  }\n\n  namespace Overlay {\n    type Props = FadeInOutProps & BoxProps;\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Panel {\n    type Props = SlideProps &\n      BoxProps & {\n        /** Callback that is triggered when click outside is occured */\n        onOutsideClick?: (e?: React.SyntheticEvent) => void;\n        /**\n          * Forces advanced mode\n          * @deprecated It will be removed in v18.\n        */\n        forcedAdvancedMode?: boolean;\n      };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Close {\n    type Component = typeof Button;\n  }\n\n  type Component = Intergalactic.Component<'div', Props, Ctx> & {\n    Header: Header.Component;\n    Back: Back.Component;\n    Body: Body.Component;\n    Footer: Footer.Component;\n    Title: Title.Component;\n    Overlay: Overlay.Component;\n    Panel: Panel.Component;\n    Close: Close.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type SidePanelProps = NSSidePanel.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelContext = NSSidePanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelHeaderProps = NSSidePanel.Header.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelOverlayProps = NSSidePanel.Overlay.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelPanelProps = NSSidePanel.Panel.Props;\n/** @deprecated It will be removed in v18. */\nexport type SidePanelPlacement = NSSidePanel.Placement;\n/** @deprecated It will be removed in v18. */\nexport type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';\n/** @deprecated It will be removed in v18. */\nexport type OnCloseType = (\n  trigger: OnCloseTriggerType,\n  e?: React.MouseEvent | React.KeyboardEvent,\n) => void;\n\nexport type { NSSidePanel };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"SidePanel.type.js","names":[],"sources":["../../src/SidePanel.type.ts"],"sourcesContent":["import type { NSAnimation, NSBox, NSFlex, NSPortal } from '@semcore/base-components';\nimport type { NSButton } from '@semcore/button';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSSidePanel {\n  type Props = NSPortal.Props &\n    NSBox.Props & {\n    /** Animation display duration in ms\n       * @default 350\n       */\n      duration?: number;\n      /**\n       * The property responsible for the visibility of the component\n       */\n      visible?: boolean;\n      /**\n       * Callback for the component closure\n       */\n      onClose?: (trigger: 'onOutsideClick' | 'onEscape' | 'onCloseClick', e?: React.MouseEvent | React.KeyboardEvent) => void;\n      /**\n       * Property for displaying the close button\n       * @default true\n       */\n      closable?: boolean;\n      /**\n       * Position of a dropdown window\n       * @default right\n       */\n      placement?: NSSidePanel.Placement;\n      /**\n       * Setting `true` disables mechanism that hides document body scrollbar when SidePanel is visible\n       * @default false\n       */\n      disablePreventScroll?: boolean;\n      /**\n        * Disable animation\n        * @deprecated\n      */\n      animationsDisabled?: boolean;\n    };\n  type DefaultProps = {\n    placement: 'right';\n    closable: true;\n    disablePreventScroll: false;\n  };\n  type Ctx = {\n    getOverlayProps?: PropGetterFn;\n    getPanelProps?: PropGetterFn;\n    getCloseProps?: PropGetterFn;\n  };\n  type Placement = 'top' | 'left' | 'right' | 'bottom';\n\n  namespace Header {\n    type Props = NSBox.Props & {\n      title?: React.ReactNode;\n    };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Back {\n    type Component = NSBox.Component;\n  }\n\n  namespace Body {\n    type Component = NSBox.Component;\n  }\n\n  namespace Footer {\n    type Component = NSFlex.Component;\n  }\n\n  namespace Title {\n    type Component = NSText.Component;\n  }\n\n  namespace Overlay {\n    type Props = NSAnimation.FadeInOut.Props & NSBox.Props;\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Panel {\n    type Props = NSAnimation.Slide.Props &\n      NSBox.Props & {\n        /** Callback that is triggered when click outside is occured */\n        onOutsideClick?: (e?: React.SyntheticEvent) => void;\n        /**\n          * Forces advanced mode\n          * @deprecated It will be removed in v19.\n        */\n        forcedAdvancedMode?: boolean;\n      };\n\n    type Component = Intergalactic.Component<'div', Props>;\n  }\n\n  namespace Close {\n    type Component = NSButton.Component;\n  }\n\n  type Component = Intergalactic.Component<'div', Props, Ctx> & {\n    Header: Header.Component;\n    /**\n     * @deprecated. Use ButtonLink instead.\n     */\n    Back: Back.Component;\n    Body: Body.Component;\n    Footer: Footer.Component;\n    Title: Title.Component;\n    Overlay: Overlay.Component;\n    Panel: Panel.Component;\n    Close: Close.Component;\n  };\n}\n\n/** @deprecated It will be removed in v19. */\nexport type SidePanelProps = NSSidePanel.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelContext = NSSidePanel.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelHeaderProps = NSSidePanel.Header.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelOverlayProps = NSSidePanel.Overlay.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelPanelProps = NSSidePanel.Panel.Props;\n/** @deprecated It will be removed in v19. */\nexport type SidePanelPlacement = NSSidePanel.Placement;\n/** @deprecated It will be removed in v19. */\nexport type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';\n/** @deprecated It will be removed in v19. */\nexport type OnCloseType = (\n  trigger: OnCloseTriggerType,\n  e?: React.MouseEvent | React.KeyboardEvent,\n) => void;\n\nexport type { NSSidePanel };\n"],"mappings":"","ignoreList":[]}

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

@@ -61,12 +61,7 @@ SClose {
   position: absolute;
   z-index: 1;
   right: var(--intergalactic-spacing-2x, 8px);
-  top: var(--intergalactic-spacing-2x, 8px);
-
-  & SAddon:only-child {
-    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-  }
+  top: var(--intergalactic-spacing-1x, 4px);
 }
 
 SBack {
@@ -74,27 +69,32 @@ SBack {
 }
 
 SHeader {
-  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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
-  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
   flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
 }
 
 SFooter {
   min-height: 44px;
-  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  box-sizing: border-box;
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
 }

package/lib/esm/SidePanel.mjs

@@ -21,23 +21,22 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SOverlay_di9xj_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_di9xj_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_di9xj_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_top_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_right_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_bottom_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_di9xj_gg_._placement_left_di9xj_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_di9xj_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-2x,8px)}.___SClose_di9xj_gg_ .___SAddon_di9xj_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_di9xj_gg_{max-width:100%}.___SHeader_di9xj_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,#000c0829);box-sizing:border-box;flex-shrink:0}@media (color-gamut:p3){.___SHeader_di9xj_gg_{box-shadow:inset 0 -1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_di9xj_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,#000c0829);box-sizing:border-box}@media (color-gamut:p3){.___SFooter_di9xj_gg_{box-shadow:inset 0 1px 0 var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_di9xj_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-4x,16px) var(--intergalactic-spacing-6x,24px)}",
+    ".___SOverlay_xzndr_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary,#00060356);-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}@media (color-gamut:p3){.___SOverlay_xzndr_gg_{background:var(--intergalactic-overlay-primary,oklch(.109 .023 165.5/.337))}}.___SPanel_xzndr_gg_{display:flex;flex-direction:column;width:260px;outline:none;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));z-index:1}.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-bottom:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_top_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-left:auto;top:0;right:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_right_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);width:100%;margin-top:auto;bottom:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_bottom_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);height:100vh;margin-right:auto;top:0;left:0}@media (color-gamut:p3){.___SPanel_xzndr_gg_._placement_left_xzndr_gg_{box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___SClose_xzndr_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x,8px);top:var(--intergalactic-spacing-1x,4px)}.___SBack_xzndr_gg_{max-width:100%}.___SHeader_xzndr_gg_{padding:var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-14x,56px) var(--intergalactic-spacing-content-padding-xsmall,4px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);min-height:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));border-bottom:1px solid var(--intergalactic-border-primary,#000c0829);box-sizing:border-box;flex-shrink:0;flex-direction:column;justify-content:center}@media (color-gamut:p3){.___SHeader_xzndr_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SFooter_xzndr_gg_{min-height:44px;padding:var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px);justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-xlarge,12px);border-top:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SFooter_xzndr_gg_{border-top:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBody_xzndr_gg_{height:100%;overflow:auto;padding:var(--intergalactic-spacing-content-padding-large,16px) var(--intergalactic-spacing-content-padding-xlarge-extended,24px)}",
     /*__inner_css_end__*/
-    "di9xj_gg_"
+    "xzndr_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SOverlay": "___SOverlay_di9xj_gg_",
-    "__SPanel": "___SPanel_di9xj_gg_",
-    "_placement_top": "_placement_top_di9xj_gg_",
-    "_placement_right": "_placement_right_di9xj_gg_",
-    "_placement_bottom": "_placement_bottom_di9xj_gg_",
-    "_placement_left": "_placement_left_di9xj_gg_",
-    "__SBack": "___SBack_di9xj_gg_",
-    "__SHeader": "___SHeader_di9xj_gg_",
-    "__SFooter": "___SFooter_di9xj_gg_",
-    "__SBody": "___SBody_di9xj_gg_",
-    "__SClose": "___SClose_di9xj_gg_",
-    "__SAddon": "___SAddon_di9xj_gg_"
+    "__SOverlay": "___SOverlay_xzndr_gg_",
+    "__SPanel": "___SPanel_xzndr_gg_",
+    "_placement_top": "_placement_top_xzndr_gg_",
+    "_placement_right": "_placement_right_xzndr_gg_",
+    "_placement_bottom": "_placement_bottom_xzndr_gg_",
+    "_placement_left": "_placement_left_xzndr_gg_",
+    "__SClose": "___SClose_xzndr_gg_",
+    "__SBack": "___SBack_xzndr_gg_",
+    "__SHeader": "___SHeader_xzndr_gg_",
+    "__SFooter": "___SFooter_xzndr_gg_",
+    "__SBody": "___SBody_xzndr_gg_"
   })
 );
 class RootSidePanel extends Component {
@@ -251,7 +250,7 @@ function Body(props) {
 }
 function Header(props) {
   var _ref9 = arguments[0], _ref15;
-  const SHeader = Box;
+  const SHeader = Flex;
   const {
     Children,
     styles,

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

@@ -61,12 +61,7 @@ SClose {
   position: absolute;
   z-index: 1;
   right: var(--intergalactic-spacing-2x, 8px);
-  top: var(--intergalactic-spacing-2x, 8px);
-
-  & SAddon:only-child {
-    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-  }
+  top: var(--intergalactic-spacing-1x, 4px);
 }
 
 SBack {
@@ -74,27 +69,32 @@ SBack {
 }
 
 SHeader {
-  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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
-  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
   flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
 }
 
 SFooter {
   min-height: 44px;
-  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  box-sizing: border-box;
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   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);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
 }

package/lib/types/SidePanel.d.ts

@@ -6,3 +6,4 @@ import type { NSSidePanel } from './SidePanel.type';
  */
 declare const SidePanel: NSSidePanel.Component;
 export default SidePanel;
+//# sourceMappingURL=SidePanel.d.ts.map

package/lib/types/SidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../src/SidePanel.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAqQpD;;;;GAIG;AACH,QAAA,MAAM,SAAS,uBAYb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/types/SidePanel.type.d.ts

@@ -1,13 +1,13 @@
-import type { FadeInOutProps, SlideProps, Box, BoxProps, Flex, PortalProps } from '@semcore/base-components';
-import type Button from '@semcore/button';
+import type { NSAnimation, NSBox, NSFlex, NSPortal } from '@semcore/base-components';
+import type { NSButton } from '@semcore/button';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { Text } from '@semcore/typography';
+import type { NSText } from '@semcore/typography';
 import type React from 'react';
 declare namespace NSSidePanel {
-    type Props = PortalProps & BoxProps & {
+    type Props = NSPortal.Props & NSBox.Props & {
         /** Animation display duration in ms
-         * @default 350
-         */
+           * @default 350
+           */
         duration?: number;
         /**
          * The property responsible for the visibility of the component
@@ -50,44 +50,47 @@ declare namespace NSSidePanel {
     };
     type Placement = 'top' | 'left' | 'right' | 'bottom';
     namespace Header {
-        type Props = BoxProps & {
+        type Props = NSBox.Props & {
             title?: React.ReactNode;
         };
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Back {
-        type Component = typeof Box;
+        type Component = NSBox.Component;
     }
     namespace Body {
-        type Component = typeof Box;
+        type Component = NSBox.Component;
     }
     namespace Footer {
-        type Component = typeof Flex;
+        type Component = NSFlex.Component;
     }
     namespace Title {
-        type Component = typeof Text;
+        type Component = NSText.Component;
     }
     namespace Overlay {
-        type Props = FadeInOutProps & BoxProps;
+        type Props = NSAnimation.FadeInOut.Props & NSBox.Props;
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Panel {
-        type Props = SlideProps & BoxProps & {
+        type Props = NSAnimation.Slide.Props & NSBox.Props & {
             /** Callback that is triggered when click outside is occured */
             onOutsideClick?: (e?: React.SyntheticEvent) => void;
             /**
               * Forces advanced mode
-              * @deprecated It will be removed in v18.
+              * @deprecated It will be removed in v19.
             */
             forcedAdvancedMode?: boolean;
         };
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Close {
-        type Component = typeof Button;
+        type Component = NSButton.Component;
     }
     type Component = Intergalactic.Component<'div', Props, Ctx> & {
         Header: Header.Component;
+        /**
+         * @deprecated. Use ButtonLink instead.
+         */
         Back: Back.Component;
         Body: Body.Component;
         Footer: Footer.Component;
@@ -97,20 +100,21 @@ declare namespace NSSidePanel {
         Close: Close.Component;
     };
 }
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelProps = NSSidePanel.Props;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelContext = NSSidePanel.Ctx;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelHeaderProps = NSSidePanel.Header.Props;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelOverlayProps = NSSidePanel.Overlay.Props;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelPanelProps = NSSidePanel.Panel.Props;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type SidePanelPlacement = NSSidePanel.Placement;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type OnCloseType = (trigger: OnCloseTriggerType, e?: React.MouseEvent | React.KeyboardEvent) => void;
 export type { NSSidePanel };
+//# sourceMappingURL=SidePanel.type.d.ts.map

package/lib/types/SidePanel.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.type.d.ts","sourceRoot":"","sources":["../../src/SidePanel.type.ts"],"names":[],"mappings":"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"}

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './SidePanel';
 export * from './SidePanel.type';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -42,3 +42,4 @@ export declare const localizedMessages: {
         close: string;
     };
 };
+//# sourceMappingURL=__intergalactic-dynamic-locales.d.ts.map

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.d.ts","sourceRoot":"","sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe7B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/side-panel",
   "description": "Semrush SidePanel Component",
-  "version": "17.2.2",
+  "version": "18.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/button": "^17.2.1",
-    "@semcore/typography": "^17.2.1"
+    "@semcore/button": "^18.0.0-prerelease.0",
+    "@semcore/typography": "^18.0.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.1",
-    "@semcore/icon": "^17.2.0"
+    "@semcore/base-components": "^18.0.0-prerelease.0",
+    "@semcore/icon": "^18.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -27,10 +27,10 @@
     "directory": "semcore/side-panel"
   },
   "devDependencies": {
-    "@semcore/core": "17.2.1",
+    "@semcore/base-components": "18.0.0-prerelease.0",
+    "@semcore/core": "18.0.0-prerelease.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/base-components": "17.2.1",
-    "@semcore/icon": "17.2.0"
+    "@semcore/icon": "18.0.0-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"