@xfers/design-system 8.0.0-dev.2e3325b3c4 → 8.0.0-dev.6b390e2ad3

package/cjs/index.js

@@ -1033,21 +1033,30 @@ padding-top:
   gap: 8px;
 `,ru={business:rt.NEUTRAL,personal:rt.NEUTRAL,sandbox:at.PRIMARY_3},au={business:ct.SIDEBAR_ACTIVE,personal:ct.SIDEBAR_ACTIVE,sandbox:ct.SIDEBAR_ACTIVE_SANDBOX},su={business:st.HOVER_SURFACE,personal:st.HOVER_SURFACE,sandbox:"rgba(255, 255, 255, 0.08)"},lu=(t,e)=>(t=>"sandbox"===t)(t)?at.ON_CONTAINER:e?lt.POSITIVE:at.ON_NEUTRAL_SECONDARY,cu=(t,e)=>e?au[t]:su[t],du=ie.div`
   width: 240px;
-  min-height: 1000px;
+  height: 100vh;
   box-sizing: border-box;
-  padding: 32px 16px;
+  padding: 32px 0;
   background-color: ${t=>ru[t.variant]};
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
   flex-shrink: 0;
+  overflow: hidden;
 `,hu=ie.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Slim scrollbar so it doesn't fight the 240px width */
+  scrollbar-width: thin;
 `,uu=ie.div`
   width: 200px;
   height: 60px;
@@ -1158,6 +1167,14 @@ padding-top:
   border-radius: 8px;
   width: 100%;
   box-sizing: border-box;
+  flex-shrink: 0;
+  /*
+   * margin-top: auto bottom-anchors the footer when the nav list is short
+   * (spare space in the flex column pushes it down). When the list overflows,
+   * auto resolves to 0 and the flex gap provides spacing, so the footer sits
+   * right after the last item and scrolls with the content.
+   */
+  margin-top: auto;
   background-color: ${rt.SECONDARY_NEUTRAL};
 `,Eu=ie.span`
   flex: 1 0 0;
@@ -1187,7 +1204,7 @@ padding-top:
   .material-symbols-rounded {
     font-size: 24px;
   }
-`,Au=({variant:e="business",logo:n,companyProfile:i,children:o,footer:r})=>{var a,l;const c=t.useContext(Cu),d=null===(a=null==c?void 0:c.open)||void 0===a||a,h=null!==(l=null==c?void 0:c.isMobile)&&void 0!==l&&l,u=s.default.createElement(du,{variant:e},s.default.createElement(hu,null,n&&s.default.createElement(uu,null,n),i,s.default.createElement(pu,null,o)),r);return h?d?s.default.createElement($u,null,s.default.createElement(Ru,{onClick:()=>null==c?void 0:c.setOpen(!1),"aria-label":"Close navigation"}),s.default.createElement(Lu,null,u)):null:d?u:null},$u=ie.div`
+`,Au=({variant:e="business",logo:n,companyProfile:i,children:o,footer:r})=>{var a,l;const c=t.useContext(Cu),d=null===(a=null==c?void 0:c.open)||void 0===a||a,h=null!==(l=null==c?void 0:c.isMobile)&&void 0!==l&&l,u=s.default.createElement(du,{variant:e},s.default.createElement(hu,null,n&&s.default.createElement(uu,null,n),i,s.default.createElement(pu,null,o),r));return h?d?s.default.createElement($u,null,s.default.createElement(Ru,{onClick:()=>null==c?void 0:c.setOpen(!1),"aria-label":"Close navigation"}),s.default.createElement(Lu,null,u)):null:d?u:null},$u=ie.div`
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -1520,7 +1537,7 @@ padding-top:
     justify-content: center;
     padding: 5px 0 5px 15px;
     gap: ${t?"5px":"0px"};
-  `;return s.default.createElement(i,null,s.default.createElement(o,null,s.default.createElement(bt.Label,{size:"md"},t),n?s.default.createElement(bt.Body,{size:"md",style:{scrollbarWidth:"none"}},s.default.createElement("ol",{style:{margin:0,paddingLeft:"20px"}},e.map((t,e)=>s.default.createElement("li",{key:e},t)))):s.default.createElement(bt.Body,{size:"md",style:{scrollbarWidth:"none"}},e)))},exports.P1=on,exports.P1Bold=rn,exports.Pagination=function({current:t,pageSize:n,total:i,onChange:o,showSizeChanger:r,onShowSizeChange:a,pageSizeOptions:l}){const c=`\n    -webkit-font-smoothing: antialiased;\n\n    & > .ant-pagination-prev {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      margin-right: 5px;\n    }\n\n    & > .ant-pagination-prev .ant-pagination-item-link {\n      border-radius: 5px;\n      border: 1px solid ${exports.NEUTRAL_COLORS.G200};\n    }\n\n    & > .ant-pagination-item {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      font-family: ${Ze};\n      border-radius: 5px;\n      border: 1px solid ${exports.NEUTRAL_COLORS.G200};\n      margin-right: 5px;\n      transition: 0.3s all;\n    }\n\n    & > .ant-pagination-item-active {\n      border-color: ${exports.MAIN_COLORS.PRIMARY_BLUE};\n    }\n\n    & > .ant-pagination-next {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      margin-right: 5px;\n    }\n\n    & > .ant-pagination-next .ant-pagination-item-link {\n      border-radius: 5px;\n    }\n  `;return s.default.createElement(e.Pagination,{className:`${pt(c)}`,current:t,pageSize:n,total:i,onChange:o,showSizeChanger:r,onShowSizeChange:a,pageSizeOptions:l})},exports.Radio=th,exports.RangePicker=function(t){var{format:e="DD-MM-YYYY",size:n="large"}=t,i=d(t,["format","size"]);const o=ze(),{height:r,borderRadius:a,padding:l}=Je[n],c=`\n    -webkit-font-smoothing: antialiased;\n    height: ${r} !important;\n\n    &.ant-picker {\n      border-radius: ${a} !important;\n      border-color: ${o.color.base.line} !important;\n      padding: ${l} !important;\n      transition: 0.3s all ease !important;\n\n      &:hover {\n        border-color: ${o.color.base.primary2} !important;\n      }\n\n      &.ant-picker-focused {\n        border-color: ${o.color.base.primary2} !important;\n        box-shadow: none !important;\n        -webkit-box-shadow: none !important;\n      }\n\n      .ant-picker-active-bar {\n        background: ${o.color.base.primary2} !important;\n      }\n    }\n\n\n    &.ant-picker > .ant-picker-input {\n      font-family: ${Ze} !important;\n      font-style: normal !important;\n      font-weight: normal !important;\n      font-size: 14px !important;\n      line-height: 22px !important;\n      color: ${o.color.base.onNeutral} !important;\n    }\n\n    & .ant-picker-input > input {\n      color: ${o.color.base.onNeutral} !important;\n    }\n\n    & .ant-picker-input > input::placeholder {\n      color: ${o.color.component.placeholderInput} !important;\n    }\n  `,h=`\n    .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end > .ant-picker-cell-inner {\n      background-color: ${o.color.base.primary2} !important;\n    }\n\n    .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start > .ant-picker-cell-inner {\n      background-color: ${o.color.base.primary2} !important;\n    }\n\n    .ant-picker-cell.ant-picker-cell-in-view {\n      &.ant-picker-cell-in-range::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n\n      &.ant-picker-cell-range-end::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n\n      &.ant-picker-cell-range-start::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n    }\n  `;return s.default.createElement(mh.RangePicker,Object.assign({className:`${pt(c)}`,format:e,popupClassName:pt(h)},i))},exports.Section=Ph,exports.Select=rd,exports.SelectionBox=bh,exports.SelectionBoxGroup=({children:t,label:e})=>s.default.createElement("div",{role:"radiogroup","aria-label":e},t),exports.Sidebar=Pu,exports.SidebarBase=Au,exports.SidebarNavItem=({id:t,icon:e,label:n,variant:i="business",active:o=!1,onClick:r,subItems:a,isExpanded:l=!1,tag:c})=>{const d=lu(i,o),h=Boolean(a&&a.length>0);return s.default.createElement(s.default.Fragment,null,s.default.createElement(fu,{variant:i,active:o,onClick:r,"data-id":t},s.default.createElement(Ac,{icon:e,size:"m",fill:o?1:0,color:d}),s.default.createElement(gu,{variant:i,active:o},n),c&&s.default.createElement(Fc,{type:"positive",variant:"filled",size:"sm"},c),h&&s.default.createElement(mu,null,s.default.createElement(Ac,{icon:"keyboard_arrow_down",size:"m",color:d,style:l?{transform:"rotate(180deg)"}:void 0}))),l&&a&&a.map(t=>s.default.createElement(Nu,{key:t.id,label:t.label,variant:i,active:t.active,onClick:t.onClick})))},exports.SidebarProvider=Du,exports.SidebarSubItem=Nu,exports.SidebarTrigger=Mu,exports.SmallP=an,exports.Spin=t=>{var{size:n}=t,i=d(t,["size"]);const{brand:o}=ze(),r=pt`
+  `;return s.default.createElement(i,null,s.default.createElement(o,null,s.default.createElement(bt.Label,{size:"md"},t),n?s.default.createElement(bt.Body,{size:"md",style:{scrollbarWidth:"none"}},s.default.createElement("ol",{style:{margin:0,paddingLeft:"20px"}},e.map((t,e)=>s.default.createElement("li",{key:e},t)))):s.default.createElement(bt.Body,{size:"md",style:{scrollbarWidth:"none"}},e)))},exports.P1=on,exports.P1Bold=rn,exports.Pagination=function({current:t,pageSize:n,total:i,onChange:o,showSizeChanger:r,onShowSizeChange:a,pageSizeOptions:l}){const c=`\n    -webkit-font-smoothing: antialiased;\n\n    & > .ant-pagination-prev {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      margin-right: 5px;\n    }\n\n    & > .ant-pagination-prev .ant-pagination-item-link {\n      border-radius: 5px;\n      border: 1px solid ${exports.NEUTRAL_COLORS.G200};\n    }\n\n    & > .ant-pagination-item {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      font-family: ${Ze};\n      border-radius: 5px;\n      border: 1px solid ${exports.NEUTRAL_COLORS.G200};\n      margin-right: 5px;\n      transition: 0.3s all;\n    }\n\n    & > .ant-pagination-item-active {\n      border-color: ${exports.MAIN_COLORS.PRIMARY_BLUE};\n    }\n\n    & > .ant-pagination-next {\n      height: 36px;\n      line-height: 36px;\n      min-width: 36px;\n      margin-right: 5px;\n    }\n\n    & > .ant-pagination-next .ant-pagination-item-link {\n      border-radius: 5px;\n    }\n  `;return s.default.createElement(e.Pagination,{className:`${pt(c)}`,current:t,pageSize:n,total:i,onChange:o,showSizeChanger:r,onShowSizeChange:a,pageSizeOptions:l})},exports.Radio=th,exports.RangePicker=function(t){var{format:e="DD-MM-YYYY",size:n="large"}=t,i=d(t,["format","size"]);const o=ze(),{height:r,borderRadius:a,padding:l}=Je[n],c=`\n    -webkit-font-smoothing: antialiased;\n    height: ${r} !important;\n\n    &.ant-picker {\n      border-radius: ${a} !important;\n      border-color: ${o.color.base.line} !important;\n      padding: ${l} !important;\n      transition: 0.3s all ease !important;\n\n      &:hover {\n        border-color: ${o.color.base.primary2} !important;\n      }\n\n      &.ant-picker-focused {\n        border-color: ${o.color.base.primary2} !important;\n        box-shadow: none !important;\n        -webkit-box-shadow: none !important;\n      }\n\n      .ant-picker-active-bar {\n        background: ${o.color.base.primary2} !important;\n      }\n    }\n\n\n    &.ant-picker > .ant-picker-input {\n      font-family: ${Ze} !important;\n      font-style: normal !important;\n      font-weight: normal !important;\n      font-size: 14px !important;\n      line-height: 22px !important;\n      color: ${o.color.base.onNeutral} !important;\n    }\n\n    & .ant-picker-input > input {\n      color: ${o.color.base.onNeutral} !important;\n    }\n\n    & .ant-picker-input > input::placeholder {\n      color: ${o.color.component.placeholderInput} !important;\n    }\n  `,h=`\n    .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end > .ant-picker-cell-inner {\n      background-color: ${o.color.base.primary2} !important;\n    }\n\n    .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start > .ant-picker-cell-inner {\n      background-color: ${o.color.base.primary2} !important;\n    }\n\n    .ant-picker-cell.ant-picker-cell-in-view {\n      &.ant-picker-cell-in-range::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n\n      &.ant-picker-cell-range-end::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n\n      &.ant-picker-cell-range-start::before {\n        background-color: ${o.color.interactive.selected} !important;\n      }\n    }\n  `;return s.default.createElement(mh.RangePicker,Object.assign({className:`${pt(c)}`,format:e,popupClassName:pt(h)},i))},exports.Section=Ph,exports.Select=rd,exports.SelectionBox=bh,exports.SelectionBoxGroup=({children:t,label:e})=>s.default.createElement("div",{role:"radiogroup","aria-label":e},t),exports.Sidebar=Pu,exports.SidebarBase=Au,exports.SidebarNavItem=({id:t,icon:e,label:n,variant:i="business",active:o=!1,onClick:r,subItems:a,isExpanded:l=!1,tag:c,autoSelectFirstSubItem:d=!1})=>{const h=lu(i,o),u=Boolean(a&&a.length>0);return s.default.createElement(s.default.Fragment,null,s.default.createElement(fu,{variant:i,active:o,onClick:()=>{var t,e,n;d&&u&&!l&&(null===(t=null==a?void 0:a[0])||void 0===t?void 0:t.onClick)&&(null===(n=(e=a[0]).onClick)||void 0===n||n.call(e)),null==r||r()},"data-id":t},s.default.createElement(Ac,{icon:e,size:"m",fill:o?1:0,color:h}),s.default.createElement(gu,{variant:i,active:o},n),c&&s.default.createElement(Fc,{type:"positive",variant:"filled",size:"sm"},c),u&&s.default.createElement(mu,null,s.default.createElement(Ac,{icon:"keyboard_arrow_down",size:"m",color:h,style:l?{transform:"rotate(180deg)"}:void 0}))),l&&a&&a.map(t=>s.default.createElement(Nu,{key:t.id,label:t.label,variant:i,active:t.active,onClick:t.onClick})))},exports.SidebarProvider=Du,exports.SidebarSubItem=Nu,exports.SidebarTrigger=Mu,exports.SmallP=an,exports.Spin=t=>{var{size:n}=t,i=d(t,["size"]);const{brand:o}=ze(),r=pt`
     & .ant-spin-dot-item {
       background-color: ${o.primary.default};
     }