@worldresources/wri-design-systems 2.172.0 → 2.173.0

package/dist/index.cjs.js

@@ -2491,12 +2491,12 @@ function ep(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     padding: 0px;
     min-height: 64px;
   }
-`;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("[data-rsbs-overlay] {\n  border-top-left-radius: 16px;\n  border-top-left-radius: var(--rsbs-overlay-rounded,16px);\n  border-top-right-radius: 16px;\n  border-top-right-radius: var(--rsbs-overlay-rounded,16px);\n  display: flex;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  flex-direction: column;\n  height: 0px;\n  height: var(--rsbs-overlay-h,0px);\n  transform: translate3d(0, 0px, 0);\n  transform: translate3d(0, var(--rsbs-overlay-translate-y,0px), 0);\n  will-change: height;\n}\n\n[data-rsbs-overlay]:focus {\n  outline: none;\n}\n\n[data-rsbs-is-blocking='false'] [data-rsbs-overlay] {\n  box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),\n    0 -1px 0 rgba(38, 89, 115, 0.05);\n}\n\n[data-rsbs-overlay],\n[data-rsbs-root]:after {\n  max-width: auto;\n  max-width: var(--rsbs-max-w,auto);\n  margin-left: env(safe-area-inset-left);\n  margin-left: var(--rsbs-ml,env(safe-area-inset-left));\n  margin-right: env(safe-area-inset-right);\n  margin-right: var(--rsbs-mr,env(safe-area-inset-right));\n}\n\n[data-rsbs-overlay],\n[data-rsbs-backdrop],\n[data-rsbs-root]:after {\n  z-index: 3;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  touch-action: none;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\n[data-rsbs-backdrop] {\n  top: -60px;\n  bottom: -60px;\n  background-color: rgba(0, 0, 0, 0.6);\n  background-color: var(--rsbs-backdrop-bg,rgba(0, 0, 0, 0.6));\n  will-change: opacity;\n  cursor: pointer;\n  opacity: 1;\n}\n\n[data-rsbs-is-dismissable='false'] [data-rsbs-backdrop] {\n  cursor: ns-resize;\n}\n\n[data-rsbs-root]:after {\n  content: '';\n  pointer-events: none;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  height: 1px;\n  transform-origin: bottom;\n  transform: scale3d(1, 0, 1);\n  transform: scale3d(1, var(--rsbs-antigap-scale-y,0), 1);\n  will-change: transform;\n}\n\n[data-rsbs-footer],\n[data-rsbs-header] {\n  flex-shrink: 0;\n  cursor: ns-resize;\n  padding: 16px;\n}\n\n[data-rsbs-header] {\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(1 * 0.125));\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));\n  z-index: 1;\n  padding-top: calc(20px + env(safe-area-inset-top));\n  padding-bottom: 8px;\n}\n\n[data-rsbs-header]:before {\n  position: absolute;\n  content: '';\n  display: block;\n  width: 36px;\n  height: 4px;\n  top: calc(8px + env(safe-area-inset-top));\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 2px;\n  background-color: hsla(0, 0%, 0%, 0.14);\n  background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14));\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n  [data-rsbs-header]:before {\n    transform: translateX(-50%) scaleY(0.75);\n  }\n}\n\n[data-rsbs-has-header='false'] [data-rsbs-header] {\n  box-shadow: none;\n  padding-top: calc(12px + env(safe-area-inset-top));\n}\n\n[data-rsbs-scroll] {\n  flex-shrink: 1;\n  flex-grow: 1;\n  -webkit-tap-highlight-color: revert;\n  -webkit-touch-callout: revert;\n  -webkit-user-select: auto;\n  -ms-user-select: auto;\n  -moz-user-select: auto;\n       user-select: auto;\n  overflow: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n}\n\n[data-rsbs-scroll]:focus {\n  outline: none;\n}\n\n[data-rsbs-has-footer='false'] [data-rsbs-content] {\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n[data-rsbs-content] {\n  /* The overflow hidden is to ensure any margin on child nodes are included when the resize observer is measuring the height */\n  overflow: hidden;\n}\n\n[data-rsbs-footer] {\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(1 * 0.125)),\n    0 2px 0 #fff;\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125)),\n    0 2px 0 var(--rsbs-bg,#fff);\n  overflow: hidden;\n  z-index: 1;\n  padding-bottom: calc(16px + env(safe-area-inset-bottom));\n}\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-footer] > * {\n    opacity: 1;\n    opacity: var(--rsbs-content-opacity,1);\n  }\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-backdrop] {\n    opacity: 1;\n    opacity: var(--rsbs-backdrop-opacity,1);\n  }\n\n[data-rsbs-state='closed'],\n[data-rsbs-state='closing'] {\n  /* Allows interactions on the rest of the page before the close transition is finished */\n  pointer-events: none;\n}\n");const Mh=(e,t)=>{let n=0,r=1/0;return t.forEach(((t,o)=>{const i=Math.abs(t-e);i<r&&(r=i,n=o)})),n},_h=r.css`
+`;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("[data-rsbs-overlay] {\n  border-top-left-radius: 16px;\n  border-top-left-radius: var(--rsbs-overlay-rounded,16px);\n  border-top-right-radius: 16px;\n  border-top-right-radius: var(--rsbs-overlay-rounded,16px);\n  display: flex;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  flex-direction: column;\n  height: 0px;\n  height: var(--rsbs-overlay-h,0px);\n  transform: translate3d(0, 0px, 0);\n  transform: translate3d(0, var(--rsbs-overlay-translate-y,0px), 0);\n  will-change: height;\n}\n\n[data-rsbs-overlay]:focus {\n  outline: none;\n}\n\n[data-rsbs-is-blocking='false'] [data-rsbs-overlay] {\n  box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),\n    0 -1px 0 rgba(38, 89, 115, 0.05);\n}\n\n[data-rsbs-overlay],\n[data-rsbs-root]:after {\n  max-width: auto;\n  max-width: var(--rsbs-max-w,auto);\n  margin-left: env(safe-area-inset-left);\n  margin-left: var(--rsbs-ml,env(safe-area-inset-left));\n  margin-right: env(safe-area-inset-right);\n  margin-right: var(--rsbs-mr,env(safe-area-inset-right));\n}\n\n[data-rsbs-overlay],\n[data-rsbs-backdrop],\n[data-rsbs-root]:after {\n  z-index: 3;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  touch-action: none;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\n[data-rsbs-backdrop] {\n  top: -60px;\n  bottom: -60px;\n  background-color: rgba(0, 0, 0, 0.6);\n  background-color: var(--rsbs-backdrop-bg,rgba(0, 0, 0, 0.6));\n  will-change: opacity;\n  cursor: pointer;\n  opacity: 1;\n}\n\n[data-rsbs-is-dismissable='false'] [data-rsbs-backdrop] {\n  cursor: ns-resize;\n}\n\n[data-rsbs-root]:after {\n  content: '';\n  pointer-events: none;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  height: 1px;\n  transform-origin: bottom;\n  transform: scale3d(1, 0, 1);\n  transform: scale3d(1, var(--rsbs-antigap-scale-y,0), 1);\n  will-change: transform;\n}\n\n[data-rsbs-footer],\n[data-rsbs-header] {\n  flex-shrink: 0;\n  cursor: ns-resize;\n  padding: 16px;\n}\n\n[data-rsbs-header] {\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(1 * 0.125));\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));\n  z-index: 1;\n  padding-top: calc(20px + env(safe-area-inset-top));\n  padding-bottom: 8px;\n}\n\n[data-rsbs-header]:before {\n  position: absolute;\n  content: '';\n  display: block;\n  width: 36px;\n  height: 4px;\n  top: calc(8px + env(safe-area-inset-top));\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 2px;\n  background-color: hsla(0, 0%, 0%, 0.14);\n  background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14));\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n  [data-rsbs-header]:before {\n    transform: translateX(-50%) scaleY(0.75);\n  }\n}\n\n[data-rsbs-has-header='false'] [data-rsbs-header] {\n  box-shadow: none;\n  padding-top: calc(12px + env(safe-area-inset-top));\n}\n\n[data-rsbs-scroll] {\n  flex-shrink: 1;\n  flex-grow: 1;\n  -webkit-tap-highlight-color: revert;\n  -webkit-touch-callout: revert;\n  -webkit-user-select: auto;\n  -ms-user-select: auto;\n  -moz-user-select: auto;\n       user-select: auto;\n  overflow: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n}\n\n[data-rsbs-scroll]:focus {\n  outline: none;\n}\n\n[data-rsbs-has-footer='false'] [data-rsbs-content] {\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n[data-rsbs-content] {\n  /* The overflow hidden is to ensure any margin on child nodes are included when the resize observer is measuring the height */\n  overflow: hidden;\n}\n\n[data-rsbs-footer] {\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(1 * 0.125)),\n    0 2px 0 #fff;\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125)),\n    0 2px 0 var(--rsbs-bg,#fff);\n  overflow: hidden;\n  z-index: 1;\n  padding-bottom: calc(16px + env(safe-area-inset-bottom));\n}\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-footer] > * {\n    opacity: 1;\n    opacity: var(--rsbs-content-opacity,1);\n  }\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-backdrop] {\n    opacity: 1;\n    opacity: var(--rsbs-backdrop-opacity,1);\n  }\n\n[data-rsbs-state='closed'],\n[data-rsbs-state='closing'] {\n  /* Allows interactions on the rest of the page before the close transition is finished */\n  pointer-events: none;\n}\n");const Mh=(e,t)=>{let n=0,r=1/0;return t.forEach(((t,o)=>{const i=Math.abs(t-e);i<r&&(r=i,n=o)})),n},_h=e=>r.css`
   a,
   p {
-    font-size: 16px;
+    font-size: ${"small"===e?"12px":"16px"};
     font-weight: 400;
-    line-height: 24px;
+    line-height: ${"small"===e?"16px":"24px"};
     color: ${h("neutral",600)};
     display: flex;
     align-items: center;
@@ -2505,8 +2505,8 @@ function ep(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     text-transform: capitalize;
 
     svg {
-      height: 16px;
-      width: 16px;
+      height: ${"small"===e?"12px":"16px"};
+      width: ${"small"===e?"12px":"16px"};
       color: ${h("neutral",600)};
     }
   }
@@ -2523,10 +2523,10 @@ function ep(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   a:hover {
     text-decoration: underline;
   }
-`,Dh=r.css`
+`,Dh=e=>r.css`
   svg {
-    height: 12px;
-    width: 12px;
+    height: ${"small"===e?"8px":"12px"};
+    width: ${"small"===e?"8px":"12px"};
     color: ${h("neutral",600)};
   }
 `,Ih=r.css`
@@ -3589,7 +3589,7 @@ function ep(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   background-image: url(${n});
   background-size: cover;
   background-position: center;
-`)}),t.jsxs("div",{css:Ln,children:[t.jsxs("div",{className:"ds-base-map-title-container",children:[t.jsx("p",{className:"ds-base-map-title",children:e.label}),e.active?t.jsx(Gt,{label:"Active",variant:"warning",size:"small",icon:t.jsx(C,{})}):null]}),t.jsx("p",{className:"ds-base-map-caption",children:e.caption}),e.active&&e.children?t.jsx("div",{className:"ds-base-map-children",children:e.children}):null]})]},e.label);var n}))}):null]})]})})},exports.Breadcrumb=({links:r,separator:o,maxItems:i=99,linkRouter:a})=>{const[s,l]=n.useState(r.length>i);n.useEffect((()=>{l(r.length>i)}),[r.length]);const c=a;return t.jsx(e.Breadcrumb.Root,{children:t.jsx(e.Breadcrumb.List,{gap:"16px",children:s?t.jsxs(t.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:_h,children:t.jsxs(c,{to:r[0].link,href:r[0].link,children:[r[0].icon,r[0].label]})}),t.jsx(e.Breadcrumb.Separator,{css:Dh,children:o||t.jsx($,{rotate:"270"})}),t.jsx("li",{className:"chakra-breadcrumb__item",children:t.jsx("button",{css:Ih,type:"button",onClick:()=>l(!1),children:"..."})}),t.jsx(e.Breadcrumb.Separator,{css:Dh,children:o||t.jsx($,{rotate:"270"})}),t.jsx(e.Breadcrumb.Item,{css:_h,children:t.jsxs("p",{"aria-current":"page","aria-label":r[r.length-1].label,children:[r[r.length-1].icon,r[r.length-1].label]})})]}):r.map(((i,a)=>i?.label?t.jsxs(n.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:_h,children:a<r.length-1?t.jsxs(c,{to:i.link,href:i.link,children:[i.icon,i.label]}):t.jsxs("p",{"aria-current":"page","aria-label":i.label,children:[i.label&&i.icon?i.icon:"",i.label]})}),a<r.length-1?t.jsx(e.Breadcrumb.Separator,{css:Dh,children:o||t.jsx($,{rotate:"270"})}):null]},i.label):null))})})},exports.Button=b,exports.ChartContainer=n=>{const{isLoading:r,isError:o,isEmpty:i,errorMessage:a="An error occurred while loading the chart.",children:s,...l}=n;return t.jsx(e.Box,{width:"100%",children:r?t.jsx(e.Center,{minH:"300px",children:t.jsx(e.Spinner,{size:"xl",color:"blue.500"})}):o?t.jsx(e.Center,{minH:"300px",border:"1px dashed",borderColor:"red.200",borderRadius:"md",children:t.jsx(e.Text,{color:"red.600",fontWeight:"medium",children:a})}):i?t.jsx(e.Center,{minH:"300px",border:"1px dashed",borderColor:"gray.200",borderRadius:"md",children:t.jsx(e.Text,{color:"gray.500",children:"No data available to display."})}):t.jsx(e.Box,{width:"100%",height:"100%",minH:"300px",children:s})})},exports.Checkbox=Le,exports.CheckboxList=({label:o,caption:i,checkboxes:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:d,required:u,hideCheckedCounter:p=!1,hideExpandToggle:h=!1})=>{const[f,x]=n.useState(s?{[s]:!0}:{}),[g,v]=n.useState(!0),m="string"!=typeof o,b=a.length>0&&a.every((e=>e.name&&f[e.name])),y=a.some((e=>e.name&&f[e.name]))&&!b,w=a.length,C=`${a.filter((e=>e?.name&&f[e.name])).length} / ${w}`,j=i?`${i}.`:"",k=u?"Required.":"Optional",S=c?`Error: ${c}.`:"",E=`${m?o.label:o}. ${j} ${k} ${S} `;return t.jsxs(e.Group,{css:ot,"aria-label":E,children:[c?t.jsx("div",{css:lt}):null,t.jsxs("div",{css:(R=!!c,r.css`
+`)}),t.jsxs("div",{css:Ln,children:[t.jsxs("div",{className:"ds-base-map-title-container",children:[t.jsx("p",{className:"ds-base-map-title",children:e.label}),e.active?t.jsx(Gt,{label:"Active",variant:"warning",size:"small",icon:t.jsx(C,{})}):null]}),t.jsx("p",{className:"ds-base-map-caption",children:e.caption}),e.active&&e.children?t.jsx("div",{className:"ds-base-map-children",children:e.children}):null]})]},e.label);var n}))}):null]})]})})},exports.Breadcrumb=({links:r,separator:o,maxItems:i=99,linkRouter:a,size:s="default"})=>{const[l,c]=n.useState(r.length>i);n.useEffect((()=>{c(r.length>i)}),[r.length]);const d=a;return t.jsx(e.Breadcrumb.Root,{children:t.jsx(e.Breadcrumb.List,{gap:"small"===s?"6px":"10px",children:l?t.jsxs(t.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:_h(s),children:t.jsxs(d,{to:r[0].link,href:r[0].link,children:[r[0].icon,r[0].label]})}),t.jsx(e.Breadcrumb.Separator,{css:Dh(s),children:o||t.jsx($,{rotate:"270"})}),t.jsx("li",{className:"chakra-breadcrumb__item",children:t.jsx("button",{css:Ih,type:"button",onClick:()=>c(!1),children:"..."})}),t.jsx(e.Breadcrumb.Separator,{css:Dh(s),children:o||t.jsx($,{rotate:"270"})}),t.jsx(e.Breadcrumb.Item,{css:_h(s),children:t.jsxs("p",{"aria-current":"page","aria-label":r[r.length-1].label,children:[r[r.length-1].icon,r[r.length-1].label]})})]}):r.map(((i,a)=>i?.label?t.jsxs(n.Fragment,{children:[t.jsx(e.Breadcrumb.Item,{css:_h(s),children:a<r.length-1?t.jsxs(d,{to:i.link,href:i.link,children:[i.icon,i.label]}):t.jsxs("p",{"aria-current":"page","aria-label":i.label,children:[i.label&&i.icon?i.icon:"",i.label]})}),a<r.length-1?t.jsx(e.Breadcrumb.Separator,{css:Dh(s),children:o||t.jsx($,{rotate:"270"})}):null]},i.label):null))})})},exports.Button=b,exports.ChartContainer=n=>{const{isLoading:r,isError:o,isEmpty:i,errorMessage:a="An error occurred while loading the chart.",children:s,...l}=n;return t.jsx(e.Box,{width:"100%",children:r?t.jsx(e.Center,{minH:"300px",children:t.jsx(e.Spinner,{size:"xl",color:"blue.500"})}):o?t.jsx(e.Center,{minH:"300px",border:"1px dashed",borderColor:"red.200",borderRadius:"md",children:t.jsx(e.Text,{color:"red.600",fontWeight:"medium",children:a})}):i?t.jsx(e.Center,{minH:"300px",border:"1px dashed",borderColor:"gray.200",borderRadius:"md",children:t.jsx(e.Text,{color:"gray.500",children:"No data available to display."})}):t.jsx(e.Box,{width:"100%",height:"100%",minH:"300px",children:s})})},exports.Checkbox=Le,exports.CheckboxList=({label:o,caption:i,checkboxes:a,defaultValue:s,onCheckedChange:l,errorMessage:c,horizontal:d,required:u,hideCheckedCounter:p=!1,hideExpandToggle:h=!1})=>{const[f,x]=n.useState(s?{[s]:!0}:{}),[g,v]=n.useState(!0),m="string"!=typeof o,b=a.length>0&&a.every((e=>e.name&&f[e.name])),y=a.some((e=>e.name&&f[e.name]))&&!b,w=a.length,C=`${a.filter((e=>e?.name&&f[e.name])).length} / ${w}`,j=i?`${i}.`:"",k=u?"Required.":"Optional",S=c?`Error: ${c}.`:"",E=`${m?o.label:o}. ${j} ${k} ${S} `;return t.jsxs(e.Group,{css:ot,"aria-label":E,children:[c?t.jsx("div",{css:lt}):null,t.jsxs("div",{css:(R=!!c,r.css`
   margin-left: ${R?"19px":"0px"};
   width: 100%;
 `),children:[t.jsx("div",{css:it,children:"string"==typeof o?t.jsxs(t.Fragment,{children:[u&&t.jsx("span",{id:"required-symbol","aria-label":"required",children:"*"}),o]}):t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[t.jsxs(Le,{checked:b,indeterminate:y,onCheckedChange:e=>(e=>{const t=a.filter((e=>void 0!==e.name)).reduce(((t,n)=>(t[n.name]=e,t)),{});x(t),l?.(t)})(!!e.checked),children:[o.label," ",!p&&t.jsx("span",{"aria-hidden":"true",css:dt,children:C})]}),!h&&t.jsxs("button",{type:"button",onClick:()=>v((e=>!e)),"aria-expanded":g,"aria-controls":"checkbox-list",css:ut,children:[g?"Hide":"Expand",t.jsx("span",{"aria-hidden":"true",children:g?t.jsx($,{style:{transform:"rotate(180deg)"}}):t.jsx($,{})})]})]})}),t.jsx("p",{css:at,"aria-label":i,children:i}),c?t.jsx("p",{css:ct,"aria-label":c,children:c}):null,t.jsx("div",{id:"checkbox-list",css:st(d,g),children:a.map((e=>t.jsx(Le,{ms:m&&!d?"6":"",css:{},checked:!!e?.name&&!!f[e.name],onCheckedChange:({checked:t})=>((e,t)=>{const n={...f};t&&(n[t]=e,x(n)),l&&l(n)})(t,e.name),...e},e.name)))})]})]});var R},exports.CheckboxOptionCard=({defaultValue:n,items:o,onValueChange:i})=>t.jsx(e.CheckboxGroup,{defaultValue:n,onValueChange:i,children:t.jsx(e.HStack,{alignItems:"flex-start",flexWrap:"wrap",gap:"12px",children:o.map((o=>{return t.jsxs(e.CheckboxCard.Root,{css:Oe,defaultChecked:-1!==n?.indexOf(o.value),disabled:o.disabled,value:o.value,children:[t.jsx(e.CheckboxCard.HiddenInput,{}),t.jsxs(e.CheckboxCard.Control,{css:Te,children:[t.jsxs(e.CheckboxCard.Content,{css:(a=o.variant,r.css`

package/dist/index.d.ts

@@ -715,9 +715,10 @@ type BreadcrumbProps = {
     separator?: React.ReactNode;
     maxItems?: number;
     linkRouter: any;
+    size?: 'small' | 'default';
 };
 
-declare const Breadcrumb: ({ links, separator, maxItems, linkRouter, }: BreadcrumbProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Breadcrumb: ({ links, separator, maxItems, linkRouter, size, }: BreadcrumbProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FooterProps = {
     children: React.ReactNode;

package/dist/index.esm.js

@@ -2548,12 +2548,12 @@ function Nh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     padding: 0px;
     min-height: 64px;
   }
-`;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("[data-rsbs-overlay] {\n  border-top-left-radius: 16px;\n  border-top-left-radius: var(--rsbs-overlay-rounded,16px);\n  border-top-right-radius: 16px;\n  border-top-right-radius: var(--rsbs-overlay-rounded,16px);\n  display: flex;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  flex-direction: column;\n  height: 0px;\n  height: var(--rsbs-overlay-h,0px);\n  transform: translate3d(0, 0px, 0);\n  transform: translate3d(0, var(--rsbs-overlay-translate-y,0px), 0);\n  will-change: height;\n}\n\n[data-rsbs-overlay]:focus {\n  outline: none;\n}\n\n[data-rsbs-is-blocking='false'] [data-rsbs-overlay] {\n  box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),\n    0 -1px 0 rgba(38, 89, 115, 0.05);\n}\n\n[data-rsbs-overlay],\n[data-rsbs-root]:after {\n  max-width: auto;\n  max-width: var(--rsbs-max-w,auto);\n  margin-left: env(safe-area-inset-left);\n  margin-left: var(--rsbs-ml,env(safe-area-inset-left));\n  margin-right: env(safe-area-inset-right);\n  margin-right: var(--rsbs-mr,env(safe-area-inset-right));\n}\n\n[data-rsbs-overlay],\n[data-rsbs-backdrop],\n[data-rsbs-root]:after {\n  z-index: 3;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  touch-action: none;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\n[data-rsbs-backdrop] {\n  top: -60px;\n  bottom: -60px;\n  background-color: rgba(0, 0, 0, 0.6);\n  background-color: var(--rsbs-backdrop-bg,rgba(0, 0, 0, 0.6));\n  will-change: opacity;\n  cursor: pointer;\n  opacity: 1;\n}\n\n[data-rsbs-is-dismissable='false'] [data-rsbs-backdrop] {\n  cursor: ns-resize;\n}\n\n[data-rsbs-root]:after {\n  content: '';\n  pointer-events: none;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  height: 1px;\n  transform-origin: bottom;\n  transform: scale3d(1, 0, 1);\n  transform: scale3d(1, var(--rsbs-antigap-scale-y,0), 1);\n  will-change: transform;\n}\n\n[data-rsbs-footer],\n[data-rsbs-header] {\n  flex-shrink: 0;\n  cursor: ns-resize;\n  padding: 16px;\n}\n\n[data-rsbs-header] {\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(1 * 0.125));\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));\n  z-index: 1;\n  padding-top: calc(20px + env(safe-area-inset-top));\n  padding-bottom: 8px;\n}\n\n[data-rsbs-header]:before {\n  position: absolute;\n  content: '';\n  display: block;\n  width: 36px;\n  height: 4px;\n  top: calc(8px + env(safe-area-inset-top));\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 2px;\n  background-color: hsla(0, 0%, 0%, 0.14);\n  background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14));\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n  [data-rsbs-header]:before {\n    transform: translateX(-50%) scaleY(0.75);\n  }\n}\n\n[data-rsbs-has-header='false'] [data-rsbs-header] {\n  box-shadow: none;\n  padding-top: calc(12px + env(safe-area-inset-top));\n}\n\n[data-rsbs-scroll] {\n  flex-shrink: 1;\n  flex-grow: 1;\n  -webkit-tap-highlight-color: revert;\n  -webkit-touch-callout: revert;\n  -webkit-user-select: auto;\n  -ms-user-select: auto;\n  -moz-user-select: auto;\n       user-select: auto;\n  overflow: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n}\n\n[data-rsbs-scroll]:focus {\n  outline: none;\n}\n\n[data-rsbs-has-footer='false'] [data-rsbs-content] {\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n[data-rsbs-content] {\n  /* The overflow hidden is to ensure any margin on child nodes are included when the resize observer is measuring the height */\n  overflow: hidden;\n}\n\n[data-rsbs-footer] {\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(1 * 0.125)),\n    0 2px 0 #fff;\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125)),\n    0 2px 0 var(--rsbs-bg,#fff);\n  overflow: hidden;\n  z-index: 1;\n  padding-bottom: calc(16px + env(safe-area-inset-bottom));\n}\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-footer] > * {\n    opacity: 1;\n    opacity: var(--rsbs-content-opacity,1);\n  }\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-backdrop] {\n    opacity: 1;\n    opacity: var(--rsbs-backdrop-opacity,1);\n  }\n\n[data-rsbs-state='closed'],\n[data-rsbs-state='closing'] {\n  /* Allows interactions on the rest of the page before the close transition is finished */\n  pointer-events: none;\n}\n");const gg=(e,t)=>{let n=0,r=1/0;return t.forEach(((t,i)=>{const o=Math.abs(t-e);o<r&&(r=o,n=i)})),n},vg=({header:e,content:t,footer:n,open:r=!1,onClose:i,minimizedHeight:o,midHeight:a=200,maxFullHeight:l,defaultSnap:s="minimized",className:c,blocking:d,zIndex:u=1e3})=>{const p=ee(null),h=K.useRef([]),[f,g]=K.useState(null),v=window.innerWidth>768,m=h.current;let x="Expand sheet";if(null!=f){const e=gg(f,m);e>0&&e<m.length-1?x="Make full screen":e===m.length-1&&(x="Expanded sheet")}const b=!(null==f||!m.length||gg(f,m)!==m.length-1);return U(pg,{ref:p,css:fg(!!e,u),className:c,open:r,onDismiss:i,header:G("div",{children:[U("button",{type:"button",disabled:b,"aria-label":x,css:hg,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=m[m.length-1];if(v)return void p.current?.snapTo?.((()=>t));const n=f??m[0];let r=m.findIndex((e=>e>n));-1===r&&(r=m.length-1);const i=m[r];p.current?.snapTo?.((()=>i))},children:U("div",{})}),U("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:n,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:r})=>{const i=[20,o||e,a+(n?r:0),l||t-t/6];return h.current=i,i},onSpringEnd:()=>{const e=p.current?.height;e&&g(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:r})=>{let i=20;return"minimized"===s?i=o||e:"mid"===s?i=a+(n?r:0):"full"===s&&(i=l||t-t/6),i},blocking:d,children:r?t:null})},mg=ue`
+`;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("[data-rsbs-overlay] {\n  border-top-left-radius: 16px;\n  border-top-left-radius: var(--rsbs-overlay-rounded,16px);\n  border-top-right-radius: 16px;\n  border-top-right-radius: var(--rsbs-overlay-rounded,16px);\n  display: flex;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  flex-direction: column;\n  height: 0px;\n  height: var(--rsbs-overlay-h,0px);\n  transform: translate3d(0, 0px, 0);\n  transform: translate3d(0, var(--rsbs-overlay-translate-y,0px), 0);\n  will-change: height;\n}\n\n[data-rsbs-overlay]:focus {\n  outline: none;\n}\n\n[data-rsbs-is-blocking='false'] [data-rsbs-overlay] {\n  box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),\n    0 -1px 0 rgba(38, 89, 115, 0.05);\n}\n\n[data-rsbs-overlay],\n[data-rsbs-root]:after {\n  max-width: auto;\n  max-width: var(--rsbs-max-w,auto);\n  margin-left: env(safe-area-inset-left);\n  margin-left: var(--rsbs-ml,env(safe-area-inset-left));\n  margin-right: env(safe-area-inset-right);\n  margin-right: var(--rsbs-mr,env(safe-area-inset-right));\n}\n\n[data-rsbs-overlay],\n[data-rsbs-backdrop],\n[data-rsbs-root]:after {\n  z-index: 3;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  touch-action: none;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\n[data-rsbs-backdrop] {\n  top: -60px;\n  bottom: -60px;\n  background-color: rgba(0, 0, 0, 0.6);\n  background-color: var(--rsbs-backdrop-bg,rgba(0, 0, 0, 0.6));\n  will-change: opacity;\n  cursor: pointer;\n  opacity: 1;\n}\n\n[data-rsbs-is-dismissable='false'] [data-rsbs-backdrop] {\n  cursor: ns-resize;\n}\n\n[data-rsbs-root]:after {\n  content: '';\n  pointer-events: none;\n  background: #fff;\n  background: var(--rsbs-bg,#fff);\n  height: 1px;\n  transform-origin: bottom;\n  transform: scale3d(1, 0, 1);\n  transform: scale3d(1, var(--rsbs-antigap-scale-y,0), 1);\n  will-change: transform;\n}\n\n[data-rsbs-footer],\n[data-rsbs-header] {\n  flex-shrink: 0;\n  cursor: ns-resize;\n  padding: 16px;\n}\n\n[data-rsbs-header] {\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(1 * 0.125));\n  box-shadow: 0 1px 0\n    rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));\n  z-index: 1;\n  padding-top: calc(20px + env(safe-area-inset-top));\n  padding-bottom: 8px;\n}\n\n[data-rsbs-header]:before {\n  position: absolute;\n  content: '';\n  display: block;\n  width: 36px;\n  height: 4px;\n  top: calc(8px + env(safe-area-inset-top));\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 2px;\n  background-color: hsla(0, 0%, 0%, 0.14);\n  background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14));\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n  [data-rsbs-header]:before {\n    transform: translateX(-50%) scaleY(0.75);\n  }\n}\n\n[data-rsbs-has-header='false'] [data-rsbs-header] {\n  box-shadow: none;\n  padding-top: calc(12px + env(safe-area-inset-top));\n}\n\n[data-rsbs-scroll] {\n  flex-shrink: 1;\n  flex-grow: 1;\n  -webkit-tap-highlight-color: revert;\n  -webkit-touch-callout: revert;\n  -webkit-user-select: auto;\n  -ms-user-select: auto;\n  -moz-user-select: auto;\n       user-select: auto;\n  overflow: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n}\n\n[data-rsbs-scroll]:focus {\n  outline: none;\n}\n\n[data-rsbs-has-footer='false'] [data-rsbs-content] {\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n[data-rsbs-content] {\n  /* The overflow hidden is to ensure any margin on child nodes are included when the resize observer is measuring the height */\n  overflow: hidden;\n}\n\n[data-rsbs-footer] {\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(1 * 0.125)),\n    0 2px 0 #fff;\n  box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125)),\n    0 2px 0 var(--rsbs-bg,#fff);\n  overflow: hidden;\n  z-index: 1;\n  padding-bottom: calc(16px + env(safe-area-inset-bottom));\n}\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-footer] > * {\n    opacity: 1;\n    opacity: var(--rsbs-content-opacity,1);\n  }\n\n[data-rsbs-is-dismissable='true'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-backdrop] {\n    opacity: 1;\n    opacity: var(--rsbs-backdrop-opacity,1);\n  }\n\n[data-rsbs-state='closed'],\n[data-rsbs-state='closing'] {\n  /* Allows interactions on the rest of the page before the close transition is finished */\n  pointer-events: none;\n}\n");const gg=(e,t)=>{let n=0,r=1/0;return t.forEach(((t,i)=>{const o=Math.abs(t-e);o<r&&(r=o,n=i)})),n},vg=({header:e,content:t,footer:n,open:r=!1,onClose:i,minimizedHeight:o,midHeight:a=200,maxFullHeight:l,defaultSnap:s="minimized",className:c,blocking:d,zIndex:u=1e3})=>{const p=ee(null),h=K.useRef([]),[f,g]=K.useState(null),v=window.innerWidth>768,m=h.current;let x="Expand sheet";if(null!=f){const e=gg(f,m);e>0&&e<m.length-1?x="Make full screen":e===m.length-1&&(x="Expanded sheet")}const b=!(null==f||!m.length||gg(f,m)!==m.length-1);return U(pg,{ref:p,css:fg(!!e,u),className:c,open:r,onDismiss:i,header:G("div",{children:[U("button",{type:"button",disabled:b,"aria-label":x,css:hg,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=m[m.length-1];if(v)return void p.current?.snapTo?.((()=>t));const n=f??m[0];let r=m.findIndex((e=>e>n));-1===r&&(r=m.length-1);const i=m[r];p.current?.snapTo?.((()=>i))},children:U("div",{})}),U("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:n,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:r})=>{const i=[20,o||e,a+(n?r:0),l||t-t/6];return h.current=i,i},onSpringEnd:()=>{const e=p.current?.height;e&&g(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:r})=>{let i=20;return"minimized"===s?i=o||e:"mid"===s?i=a+(n?r:0):"full"===s&&(i=l||t-t/6),i},blocking:d,children:r?t:null})},mg=e=>ue`
   a,
   p {
-    font-size: 16px;
+    font-size: ${"small"===e?"12px":"16px"};
     font-weight: 400;
-    line-height: 24px;
+    line-height: ${"small"===e?"16px":"24px"};
     color: ${Ce("neutral",600)};
     display: flex;
     align-items: center;
@@ -2562,8 +2562,8 @@ function Nh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
     text-transform: capitalize;
 
     svg {
-      height: 16px;
-      width: 16px;
+      height: ${"small"===e?"12px":"16px"};
+      width: ${"small"===e?"12px":"16px"};
       color: ${Ce("neutral",600)};
     }
   }
@@ -2580,10 +2580,10 @@ function Nh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   a:hover {
     text-decoration: underline;
   }
-`,xg=ue`
+`,xg=e=>ue`
   svg {
-    height: 12px;
-    width: 12px;
+    height: ${"small"===e?"8px":"12px"};
+    width: ${"small"===e?"8px":"12px"};
     color: ${Ce("neutral",600)};
   }
 `,bg=ue`
@@ -2592,7 +2592,7 @@ function Nh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   display: flex;
   justify-content: center;
   align-items: center;
-`,yg=({links:e,separator:t,maxItems:n=99,linkRouter:r})=>{const[i,o]=Q(e.length>n);te((()=>{o(e.length>n)}),[e.length]);const a=r;return U(N.Root,{children:U(N.List,{gap:"16px",children:i?G(X,{children:[U(N.Item,{css:mg,children:G(a,{to:e[0].link,href:e[0].link,children:[e[0].icon,e[0].label]})}),U(N.Separator,{css:xg,children:t||U(De,{rotate:"270"})}),U("li",{className:"chakra-breadcrumb__item",children:U("button",{css:bg,type:"button",onClick:()=>o(!1),children:"..."})}),U(N.Separator,{css:xg,children:t||U(De,{rotate:"270"})}),U(N.Item,{css:mg,children:G("p",{"aria-current":"page","aria-label":e[e.length-1].label,children:[e[e.length-1].icon,e[e.length-1].label]})})]}):e.map(((n,r)=>n?.label?G(de,{children:[U(N.Item,{css:mg,children:r<e.length-1?G(a,{to:n.link,href:n.link,children:[n.icon,n.label]}):G("p",{"aria-current":"page","aria-label":n.label,children:[n.label&&n.icon?n.icon:"",n.label]})}),r<e.length-1?U(N.Separator,{css:xg,children:t||U(De,{rotate:"270"})}):null]},n.label):null))})})},wg=(e,t)=>ue`
+`,yg=({links:e,separator:t,maxItems:n=99,linkRouter:r,size:i="default"})=>{const[o,a]=Q(e.length>n);te((()=>{a(e.length>n)}),[e.length]);const l=r;return U(N.Root,{children:U(N.List,{gap:"small"===i?"6px":"10px",children:o?G(X,{children:[U(N.Item,{css:mg(i),children:G(l,{to:e[0].link,href:e[0].link,children:[e[0].icon,e[0].label]})}),U(N.Separator,{css:xg(i),children:t||U(De,{rotate:"270"})}),U("li",{className:"chakra-breadcrumb__item",children:U("button",{css:bg,type:"button",onClick:()=>a(!1),children:"..."})}),U(N.Separator,{css:xg(i),children:t||U(De,{rotate:"270"})}),U(N.Item,{css:mg(i),children:G("p",{"aria-current":"page","aria-label":e[e.length-1].label,children:[e[e.length-1].icon,e[e.length-1].label]})})]}):e.map(((n,r)=>n?.label?G(de,{children:[U(N.Item,{css:mg(i),children:r<e.length-1?G(l,{to:n.link,href:n.link,children:[n.icon,n.label]}):G("p",{"aria-current":"page","aria-label":n.label,children:[n.label&&n.icon?n.icon:"",n.label]})}),r<e.length-1?U(N.Separator,{css:xg(i),children:t||U(De,{rotate:"270"})}):null]},n.label):null))})})},wg=(e,t)=>ue`
   min-height: 56px;
   width: 100vw;
   position: ${e?"sticky":"absolute"};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldresources/wri-design-systems",
-  "version": "2.172.0",
+  "version": "2.173.0",
   "description": "WRI UI Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",