@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/dist/esm/style.css

@@ -0,0 +1,639 @@
+.desktopActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:100%;
+}
+
+.mobileActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  width:100%;
+}
+
+.button{
+  white-space:nowrap;
+}
+.button[data-full-width]:not([data-variant=icon-only]){
+  flex:1 1 0;
+}
+.button[data-variant=icon-only]{
+  flex:0 0 auto;
+}
+.subtitle{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  align-items:center;
+}
+
+.label{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+}
+.headline{
+  display:flex;
+  flex-direction:column;
+}
+
+.headlineLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-start;
+}
+
+.titleLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-start;
+  width:100%;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.title{
+  min-width:0;
+}
+
+.prefixButtonWrapper,
+.statusWrapper{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  min-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+}
+
+.moreActions{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  margin-left:auto;
+}
+
+.actions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:flex-end;
+}
+
+.subtitle{
+  margin-top:var(--sn-primitive-dimension-4, 4px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  box-sizing:border-box;
+  width:100%;
+  margin:0 auto;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  min-width:992px;
+  max-width:min(100%, 1248px);
+  margin:0 auto;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}
+.container{
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
+  min-height:100%;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.body{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  flex:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.footer{
+  position:sticky;
+  z-index:1;
+  bottom:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
+  margin:0 calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.priceSummary{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.priceSummaryText{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.priceSummaryRight{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  position:sticky;
+  z-index:1;
+  top:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  margin:calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px)) 0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.modalContent{
+  padding:0 var(--sn-primitive-dimension-16, 16px);
+}
+.container{
+  display:flex;
+  gap:var(--sn-primitive-dimension-24, 24px);
+  justify-content:center;
+  box-sizing:border-box;
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  min-height:100%;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.form{
+  flex-shrink:0;
+  width:800px;
+  min-height:100%;
+}
+
+.container > .form[data-size=l]{
+  padding:var(--sn-primitive-dimension-56, 56px);
+}
+
+.formContent{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-32, 32px);
+}
+
+.headline{
+  position:relative;
+}
+
+.body{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  flex:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.footerSticky{
+  position:sticky;
+  bottom:0;
+  box-sizing:border-box;
+  margin:calc(0px - var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)))) calc(0px - var(--sn-primitive-dimension-56, 56px)) calc(0px - var(--sn-primitive-dimension-56, 56px));
+  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px))) var(--sn-primitive-dimension-56, 56px) var(--sn-primitive-dimension-56, 56px);
+  border-radius:0 0 var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px))) var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  transition:border-radius 0.15s ease, padding 0.15s ease;
+}
+.footerSticky::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:inherit;
+  opacity:0;
+  transition:opacity 0.15s ease;
+}
+
+.footerStuck{
+  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+}
+.footerStuck::before{
+  opacity:1;
+}
+
+.footerSentinel{
+  pointer-events:none;
+  position:absolute;
+  bottom:calc(0px - var(--sn-primitive-dimension-56, 56px));
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--sn-primitive-dimension-2, 2px);
+  height:var(--sn-primitive-dimension-1, 1px);
+}
+
+.mainActions{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+  margin-left:auto;
+}
+
+.sideItems{
+  position:sticky;
+  top:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-self:flex-start;
+  width:304px;
+}
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.spinner{
+  flex-shrink:0;
+}
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  width:100%;
+  min-height:100%;
+}
+
+.sidebarSelect{
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  box-sizing:border-box;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.wrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  justify-content:flex-end;
+  min-width:100%;
+  height:100%;
+}
+
+.sidebar{
+  position:relative;
+  flex-grow:0;
+  flex-shrink:0;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:256px;
+}
+
+.tempContainer{
+  position:relative;
+  overflow-y:auto;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+  min-width:992px;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  min-height:100%;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+.container[data-limited=true]{
+  max-width:1248px;
+  margin:0 auto;
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.trigger{
+  display:flex;
+  align-items:center;
+}
+.wrapper{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+  cursor:pointer;
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:var(--sn-primitive-dimension-48, 48px);
+  padding:0 var(--sn-primitive-dimension-12, 12px);
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.triggerText{
+  flex-grow:1;
+}
+.wrapper{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.icon{
+  flex-grow:0;
+  flex-shrink:0;
+}
+
+.title{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.wrapper{
+  width:256px;
+}
+.wrapper[data-collapsed]{
+  width:0;
+}
+.wrapper .body{
+  position:absolute;
+  display:flex;
+  width:256px;
+  height:100%;
+  transition:left 0.15s 0.35s ease-in-out;
+}
+.wrapper .body[data-hover-off]{
+  pointer-events:none;
+  transition:left 0.15s ease-in-out;
+}
+.wrapper .body[data-collapsed]{
+  left:-256px;
+}
+.wrapper .body[data-collapsed]::before{
+  content:" ";
+  position:absolute;
+  right:calc(-1 * var(--sn-primitive-dimension-4, 4px));
+  width:var(--sn-primitive-dimension-4, 4px);
+  height:100%;
+}
+.wrapper .body[data-collapsed]:hover{
+  left:0;
+  transition:left 0.15s ease-in-out;
+}
+.wrapper .body[data-collapsed]:hover::before{
+  right:calc(-4 * var(--sn-primitive-dimension-4, 4px));
+  width:calc(4 * var(--sn-primitive-dimension-4, 4px));
+}
+.wrapper .content{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-4, 4px) 0;
+  border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.wrapper .content[data-collapsed]{
+  margin:var(--sn-primitive-dimension-4, 4px);
+  border-right:none;
+  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.wrapper .list{
+  position:relative;
+  overflow-y:auto;
+  display:flex;
+  flex-direction:column-reverse;
+  flex-grow:1;
+  flex-shrink:1;
+}
+.wrapper .toggler{
+  display:flex;
+  flex-grow:0;
+  flex-shrink:0;
+  justify-content:end;
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.wrapper .expandButton{
+  position:fixed;
+  bottom:var(--sn-primitive-dimension-8, 8px);
+  left:var(--sn-primitive-dimension-8, 8px);
+}
+
+.button{
+  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+
+.pinnedHeaderSlot{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  min-height:calc(var(--sn-primitive-dimension-44, 44px) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+}
+
+.pinnedHeaderContent{
+  display:flex;
+  flex-grow:1;
+  min-width:0;
+}
+
+.pinnedHeaderSlotSearch{
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.popover{
+  max-height:80%;
+}
+.popover > div{
+  overflow:auto;
+}
+.sidebar{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  min-width:292px;
+}
+
+.subheader{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+  height:100%;
+}
+
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-40, 40px);
+  align-items:flex-start;
+  justify-content:space-between;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)) var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.body{
+  display:flex;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  width:100%;
+  padding:0 var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.sidebar{
+  height:-moz-max-content;
+  height:max-content;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  border-radius:var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.main{
+  box-sizing:border-box;
+  width:100%;
+  padding-top:var(--sn-primitive-dimension-16, 16px);
+}
+
+.titleWrapper{
+  display:flex;
+  flex:1 1 auto;
+  flex-wrap:wrap;
+  gap:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-16, 16px);
+  align-items:center;
+  min-width:0;
+}
+
+.headerActions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.titleInner{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.title{
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+}
+
+.innerElement{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+
+.icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,7 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { BUTTON_PRIMARY_VARIANT, BUTTON_SECONDARY_VARIANT, SIDEBAR_HEADER_TYPE, SIDEBAR_ITEM_TYPE, TREE_NAVIGATION_MODE } from './constants.js';
+export type ButtonPrimaryVariant = ValueOf<typeof BUTTON_PRIMARY_VARIANT>;
+export type ButtonSecondaryVariant = ValueOf<typeof BUTTON_SECONDARY_VARIANT>;
+export type TreeNavigationMode = ValueOf<typeof TREE_NAVIGATION_MODE>;
+export type SidebarItemType = ValueOf<typeof SIDEBAR_ITEM_TYPE>;
+export type SidebarHeaderType = ValueOf<typeof SIDEBAR_HEADER_TYPE>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};