@lifesg/react-design-system 2.5.0-canary.5 → 2.5.0

package/cjs/index.js

@@ -669,6 +669,22 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
 `,Breadcrumb=e=>{var{links:t,fadeColor:r,fadePosition:n="both",itemStyle:i,id:a}=e,o=__rest$1(e,["links","fadeColor","fadePosition","itemStyle","id"]);const[s,l]=React.useState(!!n),[c,d]=React.useState("left"===n||"both"===n),[u,p]=React.useState("right"===n||"both"===n),h=React.useRef(null),f=React.useRef(null);useResizeDetector({onResize:React.useCallback((()=>{const e=f.current,r=h.current;e&&r&&t&&t.length>1&&window.innerWidth<=MediaWidths$1.tablet&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)}),[t.length]),targetRef:h,refreshMode:"debounce",refreshRate:50});const m=()=>{if(s){l(window.innerWidth<MediaWidths$1.tablet);const e=f.current,t=h.current;e&&t&&e.scrollWidth>t.offsetWidth?(l(!0),d(e.scrollLeft>=1),p(e.scrollWidth-e.scrollLeft>t.offsetWidth)):l(!1)}};if(React.useEffect((()=>{const e=f.current;return m(),window.addEventListener("resize",m),e&&e.addEventListener("scroll",m),()=>{window.removeEventListener("resize",m),e&&e.removeEventListener("scroll",m)}}),[]),!t)return null;return jsxRuntime.jsxs(Wrapper$x,Object.assign({ref:h,id:a||"breadcrumb"},o,{children:[jsxRuntime.jsx("nav",{children:jsxRuntime.jsx(Content$6,Object.assign({ref:f},{children:t.map(((e,r)=>{let n;return e.children?(n=r!==t.length-1&&e.href?jsxRuntime.jsx(PreviousLink,Object.assign({},e,{weight:"semibold"})):jsxRuntime.jsx(CurrentLabel,Object.assign({weight:"semibold"},{children:e.children})),jsxRuntime.jsxs(Item$5,Object.assign({$styleProps:i},{children:[n,r<t.length-1&&jsxRuntime.jsx(Caret,{})]}),r)):null}))}))}),s&&(()=>{let e;return e=Array.isArray(r)&&r.length>0?{left:r,right:r}:r||{left:void 0,right:void 0},jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[c&&jsxRuntime.jsx(Fade$1,{$backgroundColor:e.left,$position:"left"}),u&&jsxRuntime.jsx(Fade$1,{$backgroundColor:e.right,$position:"right"})]})})()]}))},MainButtonWithIcon=styled__default.default(Main$2)`
     flex-direction: ${e=>"right"===e.$buttonIconPosition?"row-reverse":"row"};
     gap: 0.5rem;
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    ${e=>"small"===e.$buttonSizeStyle?styled.css`
+                    svg {
+                        height: 1rem;
+                        width: 1rem;
+                    }
+                `:styled.css`
+                    svg {
+                        height: 1.125rem;
+                        width: 1.125rem;
+                    }
+                `}
 `,DefaultComponent=(e,t)=>{const{children:r,disabled:n=!1,styleType:i="default",danger:a=!1,icon:o,iconPosition:s="left"}=e,l=__rest$1(e,["children","disabled","styleType","danger","icon","iconPosition"]),c={$buttonIconPosition:s,$buttonStyle:n?"disabled":i,$buttonSizeStyle:"default",$buttonIsDanger:a};return jsxRuntime.jsxs(MainButtonWithIcon,Object.assign({ref:t,"data-testid":l["data-testid"]||"button-with-icon",disabled:n},c,l,{children:[o,jsxRuntime.jsx("span",{children:r})]}))},SmallComponent=(e,t)=>{const{children:r,disabled:n=!1,styleType:i="default",danger:a=!1,icon:o,iconPosition:s="left"}=e,l=__rest$1(e,["children","disabled","styleType","danger","icon","iconPosition"]),c={$buttonIconPosition:s,$buttonStyle:n?"disabled":i,$buttonSizeStyle:"small",$buttonIsDanger:a};return jsxRuntime.jsxs(MainButtonWithIcon,Object.assign({ref:t,"data-testid":l["data-testid"]||"button-with-icon",disabled:n},c,l,{children:[o,jsxRuntime.jsx("span",{children:r})]}))},ButtonWithIcon={Default:React__namespace.default.forwardRef(DefaultComponent),Small:React__namespace.default.forwardRef(SmallComponent)},CalendarWrapper=styled__default.default.div`
     max-width: 41rem;
     min-width: 21rem;