npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/box-container/box-container.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.styles.~~tsx~~"],"sourcesContent":["import { ~~ChevronDownIcon~~ } from \"@~~lifesg~~/~~react-icons/chevron-down~~\";\~~nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\~~n\nimport {\n ~~V3_Border~~,\n ~~V3_Colour~~,\n ~~V3_Font~~,\n ~~V3_MediaQuery~~,\n ~~V3_Motion~~,\n ~~V3_Radius~~,\n ~~V3_Spacing~~,\n} from \"../~~v3_theme~~\";\~~nimport~~ ~~type~~ { ~~BoxContainerDisplayState~~ } ~~from~~ \"~~./types~~\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\~~n//~~ ~~=============================================================================\ninterface~~ ~~StyleProps~~ ~~{\n $expanded?:~~ ~~boolean;\~~n ~~$collapsible?:~~ ~~boolean~~;\n}\n\~~ninterface~~ ~~LabelIconStyleProps~~ ~~{\n $displayState?:~~ ~~BoxContainerDisplayState;\n}\n\ninterface~~ ~~HeaderStyleProps {\~~n ~~$interactive?:~~ ~~boolean~~;\n}\n\~~n// =============================================================================\n// STYLING\n// =============================================================================\~~nexport const ~~Container~~ = ~~styled.section~~`\n border: ${~~V3_Border~~[\"width-010\"]} ${~~V3_Border~~[\"solid\"]}\n ${~~V3_Colour~~[\"border\"]};\n border-radius: ${~~V3_Radius~~[\"sm\"]};\n margin-bottom: ${~~V3_Spacing~~[\"spacing-32\"]};\n`;\n\nexport const ~~Expandable~~ = ~~animated(styled.div~~`\n overflow: hidden;\n~~`);\~~n\nexport const ~~NonExpandable~~ = ~~styled.div~~`\n height: max-content;\n`;\n\nexport const ~~ChildContainer~~ = ~~styled.div~~`\n border-top: ${~~V3_Border~~[\"width-010\"]} ${~~V3_Border~~[\"solid\"]}\n ${~~V3_Colour~~[\"border\"]};\n`;\n\nexport const ~~Header~~ = ~~styled.div<HeaderStyleProps>`\~~n padding: ${~~V3_Spacing~~[\"spacing-16\"]} ${~~V3_Spacing~~[\"spacing-32\"]};\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n padding: ${~~V3_Spacing~~[\"spacing-16\"]} ${~~V3_Spacing~~[\"spacing-20\"]};\n display: block;\n }\n\~~n ${(props)~~ => ~~{\n if~~ ~~(props.$interactive)~~ ~~{\n return~~ css`\n cursor: pointer;\n `;\n }\~~n }}\n`;\n\~~nexport const ~~LabelText~~ = ~~styled.div~~`\n ${~~V3_Font~~[\"heading-sm-semibold\"]}\n color: ${~~V3_Colour~~[\"text\"]};\n word-wrap: break-word;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n margin-right: ${~~V3_Spacing~~[\"spacing-16\"]};\n`;\n\nexport const ~~LabelWrapper~~ = ~~styled.div~~`\n display: flex;\n`;\n\nexport const ~~AlertIcon~~ = ~~styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\~~n height: ${~~V3_Font~~.Spec[\"heading-size-sm\"]};\n width: ${~~V3_Font~~.Spec[\"heading-size-sm\"]};\n align-self: center;\n margin-right: ${~~V3_Spacing~~[\"spacing-40\"]};\n flex-shrink: 0;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n margin-right: 0;\n }\n\n ~~${(props) => {~~\~~n switch~~ ~~(props.$displayState)~~ ~~{\n case~~ ~~\"error\":\n return~~ css`\n color: ${~~V3_Colour~~[\"icon-error\"]};\n `;\n ~~case~~ \~~"warning\":\n return~~ css`\n color: ${~~V3_Colour~~[\"icon-warning\"]};\n `;\n ~~default:\n break;\n }~~\~~n }}\n`;\n\~~nexport const ~~CallToActionContainer~~ = ~~styled.div<StyleProps>`\~~n display: flex;\n margin-left: auto;\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n flex-direction: column;\n }\n ~~${(props)~~ => ~~{\n if~~ ~~(props.$collapsible)~~ ~~{\n return~~ css`\n margin-right: ${~~V3_Spacing~~[\"spacing-40\"]};\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n margin-right: 0;\n margin-top: ${~~V3_Spacing~~[\"spacing-16\"]};\n ~~}\n `;\n }\n~~ }}\n`;\n\nexport const ~~Handle~~ = ~~styled.button~~`\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ${~~V3_Spacing~~[\"spacing-16\"]};\n margin: -${~~V3_Spacing~~[\"spacing-16\"]};\n display: flex;\n align-items: center;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n margin: -${~~V3_Spacing~~[\"spacing-16\"]} -${~~V3_Spacing~~[\"spacing-16\"]} -${~~V3_Spacing~~[\~~n \~~"spacing-16\"\n ]} 0;\n margin-left: auto;\n }\n`;\n\nexport const ~~HandleIconContainer~~ = styled.div<StyleProps>`\n transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n color: ${~~V3_Colour~~[\"icon\"]};\n height: ${~~V3_Font~~.Spec[\"heading-size-sm\"]};\n width: ${~~V3_Font~~.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["~~Container~~","~~styled~~","~~section~~","~~V3_Border~~","~~V3_Colour~~","~~V3_Radius~~","~~V3_Spacing~~","~~Expandable~~","~~animated~~","~~div~~","~~NonExpandable~~","~~ChildContainer~~","~~Header~~","~~V3_MediaQuery~~","~~MaxWidth~~","sm","~~props~~","~~$interactive~~","css","LabelText","V3_Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","V3_Motion","HandleIcon","ChevronDownIcon"],"mappings":"~~iYAoCO~~,MAAMA,~~EAAYC~~,~~EAAOC~~,~~OAAO;cACzBC~~,~~EAAU~~,~~gBAAgBA~~,~~EAAiB;UAC/CC~~,~~EAAkB;qBACPC~~,~~EAAc;qBACdC~~,~~EAAW;EAGnBC~~,~~EAAaC~~,~~EAASP~~,~~EAAOQ~~,~~GAAG;;GAIhCC~~,~~EAAgBT~~,~~EAAOQ~~,~~GAAG;;EAI1BE~~,~~EAAiBV,EAAOQ,GAAG;kBACtBN,EAAU,gBAAgBA,~~EAAiB~~;UACnDC~~,~~EAAkB;EAGfQ~~,~~EAASX~~,~~EAAOQ~~,~~GAAqB;eACnCH~~,~~EAAW~~,~~iBAAiBA~~,~~EAAW;;;;;MAKhDO~~,~~EAAcC~~,~~SAASC;mBACVT~~,~~EAAW,iBAAiBA,EAAW;;;;MAInDU,IACC,GAAIA,EAAMC,aACN,OAAOC,CAAG;;aAGd;EAIKC,EAAYlB,EAAOQ,GAAG;MAC7BW,EAAQ;aACDhB,~~EAAgB~~;;;;;oBAKTE~~,~~EAAW;EAGlBe~~,~~EAAepB~~,~~EAAOQ~~,~~GAAG;;EAIzBa~~,~~EAAYrB~~,~~EAAOsB~~,~~EAA+C;cACjEH~~,~~EAAQI,KAAK;aACdJ,EAAQI,KAAK;;oBAENlB,EAAW;;;MAGzBO,EAAcC,SAASC;;;;MAItBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,CAAG;6BACGd,~~EAAU;kBAE3B,IAAK,UACD,OAAOc,CAAG;6BACGd,EAAU;;EAQ1BsB,EAAwBzB,EAAOQ,GAAe;;;MAGrDI,EAAcC,SAASC;;;MAGtBC,IACC,GAAIA,EAAMW,aACN,OAAOT,CAAG;gCACUZ,EAAW;kBACzBO,EAAcC,SAASC;;kCAEPT,EAAW;;aAGrC;EAIKsB,EAAS3B,EAAO4B,MAAM;;;;eAIpBvB,EAAW;eACXA,EAAW;;;;MAIpBO,EAAcC,SAASC;mBACVT,EAAW,kBAAkBA,EAAW,kBAAkBA,EAC7D;;;EAMHwB,EAAsB7B,EAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAU,mBAAmBA,EAAU;EAG5CC,EAAahC,EAAOiC,EAAgB;aACpC9B,EAAgB;cACfgB,EAAQI,KAAK;aACdJ,EAAQI,KAAK;"}
1	+ {"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const handleIconContainer = css`\n transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n transform: rotate(0deg);\n`;\n\nexport const container = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n height: max-content;\n`;\n\nexport const childContainer = css`\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n display: block;\n }\n`;\n\nexport const headerInteractive = css`\n cursor: pointer;\n`;\n\nexport const labelText = css`\n ${Font[\"heading-sm-semibold\"]}\n color: ${Colour[\"text\"]};\n word-wrap: break-word;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n display: flex;\n`;\n\nexport const alertIcon = css`\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n align-self: center;\n margin-right: ${Spacing[\"spacing-40\"]};\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n }\n`;\n\nexport const alertIconError = css`\n color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n display: flex;\n margin-left: auto;\n\n ${MediaQuery.MaxWidth.sm} {\n flex-direction: column;\n }\n`;\n\nexport const callToActionContainerCollapsible = css`\n margin-right: ${Spacing[\"spacing-40\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const handle = css`\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ${Spacing[\"spacing-16\"]};\n margin: calc(${Spacing[\"spacing-16\"]} * -1);\n display: flex;\n align-items: center;\n\n ${MediaQuery.MaxWidth.sm} {\n margin: calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1) 0;\n margin-left: auto;\n }\n`;\n\nexport const handleIcon = css`\n color: ${Colour[\"icon\"]};\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["handleIconContainer","handleIconContainerExpanded","handleIconContainerCollapsed","container","expandable","nonExpandable","childContainer","header","headerInteractive","labelText","labelWrapper","alertIcon","alertIconError","alertIconWarning","callToActionContainer","callToActionContainerCollapsible","handle","handleIcon"],"mappings":"uEAYO,MAAMA,EAAmB,UAInBC,EAA2B,UAI3BC,EAA4B,WAI5BC,EAAS,WAMTC,EAAU,WAIVC,EAAa,WAIbC,EAAc,UAIdC,EAAM,UAYNC,EAAiB,WAIjBC,EAAS,UAUTC,EAAY,UAIZC,EAAS,UAYTC,EAAc,UAIdC,EAAgB,WAIhBC,EAAqB,WASrBC,EAAgC,UAShCC,EAAM,UAiBNC,EAAU"}

package/box-container/box-container.styles_5y84d5.css ADDED Viewed

@@ -0,0 +1,18 @@
+.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);margin-bottom:var(--fds-spacing-32);}
+.e15rrad0{overflow:hidden;}
+.n17lxubw{height:-webkit-max-content;height:-moz-max-content;height:max-content;}
+.ca1fnin{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-20);display:block;}
+.h145wmf6{cursor:pointer;}
+.lu9b4gz{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);color:var(--fds-colour-text);word-wrap:break-word;overflow-wrap:anywhere;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-16);}
+.lx78u15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a2tumfu{height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-right:var(--fds-spacing-40);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a2tumfu{margin-right:0;}
+.aaq4hg3{color:var(--fds-colour-icon-error);}
+.a163x1mt{color:var(--fds-colour-icon-warning);}
+.c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
+.hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}

package/breadcrumb/breadcrumb.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { BreadcrumbProps } from "./types";
-export declare const Breadcrumb: ({ links, fadeColor, fadePosition, itemStyle, id, separatorStyle, ...otherProps }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Breadcrumb: ({ links, fadeColor, fadePosition, id, separatorStyle, className, ...otherProps }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;

package/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{useState as o,useRef as n,useContext as l}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{ThemeContext as d}from"styled-components";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{useEvent as a}from"../util/use-event.js";import{useEventListener as c}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as h}from"../util/use-isomorphic-layout-effect.js";import{V3_Breakpoint as f}from"../v3_theme/index.js";import{Wrapper as m,Content as u,CurrentLabel as p,PreviousLink as g,Item as b,Caret as j,Slash as y,Fade as v}from"./breadcrumb.style.js";const W=W=>{var{links:w,fadeColor:x,fadePosition:k="both",itemStyle:S,id:$,separatorStyle:C="chevron"}=W,O=e(W,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const[z,A]=o(!1),[L,P]=o(!1),[R,_]=o(!1),M="left"===k||"both"===k,B="right"===k||"both"===k,q=n(null),D=n(null),E=l(d),F=f["lg-max"]({theme:E}),G=a((()=>{const e=D.current,r=q.current;e&&r&&w&&w.length>1&&window.innerWidth<=F&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),H=a((()=>{const e=window.innerWidth<=F;A(e);const r=D.current,t=q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return P(r.scrollLeft>=1),void _(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);P(!1),_(!1)}));if(c("resize",H),c("scroll",H,D.current),h((()=>{G(),H()}),[G,H]),s({onResize:G,targetRef:q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!w)return null;return r(m,Object.assign({ref:q,id:$||"breadcrumb"},O,{children:[t("nav",{"aria-label":"Breadcrumb",children:t(u,{ref:D,children:w.map(((e,i)=>{let o;return e.children?(o=i!==w.length-1&&e.href?t(g,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):t(p,{weight:"semibold",forwardedAs:"span",children:e.children}),r(b,Object.assign({$styleProps:S},i===w.length-1&&{"aria-current":"page"},{children:[o,i<w.length-1&&("chevron"===C?t(j,{"aria-hidden":!0}):t(y,{inline:!0,"aria-hidden":!0,children:"/"}))]}),i)):null}))})}),z&&(()=>{let e;return e=Array.isArray(x)&&x.length>0?{left:x,right:x}:x||{left:void 0,right:void 0},r(i,{children:[L&&M&&t(v,{$backgroundColor:e.left,$position:"left"}),R&&B&&t(v,{$backgroundColor:e.right,$position:"right"})]})})()]}))};export{W as Breadcrumb};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useDesignToken as h}from"../theme/utils/use-design-token.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as x,caret as N,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:A="chevron",className:P}=L,_=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[q,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=h(d["lg-max"]),Y=m(X||"1200px");let Z;Z=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Z?void 0:Z.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Z?void 0:Z.right)||void 0===z?void 0:z.join(", ")});const $=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=Y&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),ee=f((()=>{const e=window.innerWidth<=Y;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",ee),p("scroll",ee,T.current),j((()=>{$(),ee()}),[$,ee]),a({onResize:$,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,P)},_,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:x},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===A?t(o,{"aria-hidden":!0,className:N}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),q&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
 //# sourceMappingURL=breadcrumb.js.map

package/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n Caret,\n Content,\n CurrentLabel,\n Fade,\n Item,\n PreviousLink,\n Slash,\n Wrapper,\n} from \"./breadcrumb.style\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n itemStyle,\n id,\n separatorStyle = \"chevron\",\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const theme = useContext(ThemeContext);\n const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <CurrentLabel weight=\"semibold\" forwardedAs=\"span\">\n {link.children}\n </CurrentLabel>\n );\n } else {\n element = (\n <PreviousLink\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n />\n );\n }\n\n return (\n <Item\n key={index}\n $styleProps={itemStyle}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <Caret aria-hidden />\n ) : (\n <Slash inline aria-hidden>\n /\n </Slash>\n ))}\n </Item>\n );\n });\n };\n\n const renderFade = () => {\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n // Single array, apply same color\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (!fadeColor) {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n } else {\n fadeColorSet = fadeColor as FadeColorSet;\n }\n\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <Fade\n $backgroundColor={fadeColorSet.left}\n $position=\"left\"\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <Fade\n $backgroundColor={fadeColorSet.right}\n $position=\"right\"\n />\n )}\n </>\n );\n };\n\n return (\n <Wrapper ref={wrapperRef} id={id \|\| \"breadcrumb\"} {...otherProps}>\n <nav aria-label=\"Breadcrumb\">\n <Content ref={contentRef}>{renderLinks()}</Content>\n </nav>\n {showFade && renderFade()}\n </Wrapper>\n );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","onResize","useEvent","content","current","wrapper","length","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","Wrapper","Object","assign","ref","_jsx","children","Content","map","link","index","element","href","PreviousLink","weight","underlineStyle","CurrentLabel","forwardedAs","Item","$styleProps","Caret","Slash","inline","fadeColorSet","Array","isArray","left","right","undefined","_Fragment","Fade","$position","$backgroundColor","renderFade"],"mappings":"syBAkBO,MAAMA,EAAcC,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,GAAkB,IAC3CC,EAAcC,GAAmBF,GAAkB,IACnDG,EAAeC,GAAoBJ,GAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAuB,MACpCC,EAAaD,EAAyB,MAMtCE,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAE7CK,EAAWC,GAAS,KACtB,MAAMC,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAGvBD,GACAE,GACA7B,GACAA,EAAM8B,OAAS,GACfC,OAAOC,YAAcT,IAErBI,EAAQM,WAAaN,EAAQO,YAAcL,EAAQM,YACvD,IAGEC,EAAuBV,GAAS,KAClC,MAAMW,EAAeN,OAAOC,YAAcT,EAC1Cd,EAAY4B,GAEZ,MAAMV,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAC3B,GAAID,GAAWE,GAAWQ,GAClBV,EAAQO,YAAcL,EAAQM,YAO9B,OALAvB,EAAgBe,EAAQM,YAAc,QACtCnB,EACIa,EAAQO,YAAcP,EAAQM,WAAa,EACvCJ,EAAQM,aAMxBvB,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAwB,EAAiB,SAAUF,GAC3BE,EAAiB,SAAUF,EAAsBjB,EAAWS,SAE5DW,GAA0B,KACtBd,IACAW,GAAsB,GACvB,CAACX,EAAUW,IAGdI,EAAkB,CACdf,WACAgB,UAAWxB,EACXyB,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ5C,EAAO,OAAO,KAmFnB,OACI6C,EAACC,EAAOC,OAAAC,OAAA,CAACC,IAAKhC,EAAYb,GAAIA,GAAM,cAAkBE,aAClD4C,EAAA,MAAA,CAAA,aAAgB,aAAYC,SACxBD,EAACE,EAAO,CAACH,IAAK9B,WAnFfnB,EAAMqD,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAUvD,EAAM8B,OAAS,GAAMwB,EAAKG,KAQhCP,EAACQ,EAAYX,OAAAC,OAAA,CAAA,EACLM,EAAI,CACRK,OAAO,WACPC,eAAe,UATnBV,EAACW,EAAY,CAACF,OAAO,WAAWG,YAAY,OAAMX,SAC7CG,EAAKH,WAcdN,EAACkB,EAAIhB,OAAAC,OAAA,CAAAgB,YAEY7D,GACRoD,IAAUvD,EAAM8B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAqB,SAAA,CAEDK,EACAD,EAAQvD,EAAM8B,OAAS,IACA,YAAnBzB,EACG6C,EAACe,EAAK,CAAA,eAAA,IAENf,EAACgB,EAAK,CAACC,QAAM,EAAA,eAAA,EAAAhB,SAAA,UAXhBI,IArBF,IAoCA,QA8CV/C,GAzCU,MACf,IAAI4D,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQrE,IAAcA,EAAU6B,OAAS,EAEhC,CACXyC,KAAMtE,EACNuE,MAAOvE,GAEHA,GACO,CACXsE,UAAME,EACND,WAAOC,GAOX5B,EAAA6B,EAAA,CAAAvB,SAAA,CACKxC,GAAgBI,GACbmC,EAACyB,oBACqBP,EAAaG,KAAIK,UACzB,SAGjB/D,GAAiBG,GACdkC,EAACyB,EAAI,CAAAE,iBACiBT,EAAaI,gBACrB,YAGnB,EASUM,MACP"}
1	+ {"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n id,\n separatorStyle = \"chevron\",\n className,\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n const tabletBreakpoint = parsePxOrRemValue(\n tabletBreakpointToken \|\| \"1200px\"\n );\n\n // =============================================================================\n // FADE COLOR CALCULATION\n // =============================================================================\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (fadeColor) {\n fadeColorSet = fadeColor as FadeColorSet;\n } else {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n }\n\n // =============================================================================\n // CSS VARIABLES\n // =============================================================================\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n });\n\n useApplyStyle(fadeRightRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <Typography.BodyMD\n weight=\"semibold\"\n as=\"span\"\n className={styles.currentLabel}\n >\n {link.children}\n </Typography.BodyMD>\n );\n } else {\n element = (\n <Typography.LinkMD\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n className={styles.previousLink}\n />\n );\n }\n\n return (\n <li\n key={index}\n className={styles.item}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <ChevronRightIcon\n aria-hidden\n className={styles.caret}\n />\n ) : (\n <Typography.BodyMD\n inline\n aria-hidden\n className={styles.slash}\n >\n /\n </Typography.BodyMD>\n ))}\n </li>\n );\n });\n };\n\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n />\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n id={id \|\| \"breadcrumb\"}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <nav aria-label=\"Breadcrumb\">\n <ul ref={contentRef} className={styles.content}>\n {renderLinks()}\n </ul>\n </nav>\n {showFade && renderFade()}\n </div>\n );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"q5CAYO,MAAMA,EAAcC,aAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,GACrBA,EAAEC,eACFA,EAAiB,UAASC,UAC1BA,GAASN,EACNO,EAAUC,EAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,GAAkB,IAC3CC,EAAcC,GAAmBF,GAAkB,IACnDG,EAAeC,GAAoBJ,GAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAuB,MACpCC,EAAaD,EAAyB,MACtCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAMtCI,EAAwBC,EAAeC,EAAW,WAClDC,EAAmBC,EACrBJ,GAAyB,UAM7B,IAAIK,EAGAA,EADAC,MAAMC,QAAQ5B,IAAcA,EAAU6B,OAAS,EAChC,CACXC,KAAM9B,EACN+B,MAAO/B,GAEJA,GAGQ,CACX8B,UAAME,EACND,WAAOC,GAOfC,EAAcd,EAAa,CACvB,CAACe,EAAcC,KAAKC,iBAAoC,QAAlBC,EAAAX,eAAAA,EAAcI,YAAI,IAAAO,OAAA,EAAAA,EAAEC,KAAK,QAGnEL,EAAcb,EAAc,CACxB,CAACc,EAAcC,KAAKC,iBAAqC,QAAnBG,EAAAb,eAAAA,EAAcK,aAAK,IAAAQ,OAAA,EAAAA,EAAED,KAAK,QAGpE,MAAME,EAAWC,GAAS,KACtB,MAAMC,EAAUxB,EAAWyB,QACrBC,EAAU5B,EAAW2B,QAGvBD,GACAE,GACA7C,GACAA,EAAM8B,OAAS,GACfgB,OAAOC,YAActB,IAErBkB,EAAQK,WAAaL,EAAQM,YAAcJ,EAAQK,YACvD,IAGEC,GAAuBT,GAAS,KAClC,MAAMU,EAAeN,OAAOC,YAActB,EAC1ChB,EAAY2C,GAEZ,MAAMT,EAAUxB,EAAWyB,QACrBC,EAAU5B,EAAW2B,QAC3B,GAAID,GAAWE,GAAWO,GAClBT,EAAQM,YAAcJ,EAAQK,YAO9B,OALAtC,EAAgB+B,EAAQK,YAAc,QACtClC,EACI6B,EAAQM,YAAcN,EAAQK,WAAa,EACvCH,EAAQK,aAMxBtC,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAuC,EAAiB,SAAUF,IAC3BE,EAAiB,SAAUF,GAAsBhC,EAAWyB,SAE5DU,GAA0B,KACtBb,IACAU,IAAsB,GACvB,CAACV,EAAUU,KAGdI,EAAkB,CACdd,WACAe,UAAWvC,EACXwC,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ3D,EAAO,OAAO,KA8EnB,OACI4D,uBACIC,IAAK5C,EACLd,GAAIA,GAAM,aACVE,UAAWyD,EAAKC,EAAgB1D,IAC5BC,EAAU,CAAA0D,SAAA,CAEdC,sBAAgB,aAAYD,SACxBC,QAAIJ,IAAK1C,EAAYd,UAAW6D,WAnFjClE,EAAMmE,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKJ,UAeNM,EAXAD,IAAUrE,EAAM8B,OAAS,GAAMsC,EAAKG,KAYhCN,EAACO,EAAWC,OAAMC,OAAAC,OAAA,GACVP,EAAI,CACRQ,OAAO,WACPC,eAAe,OACfxE,UAAWyE,KAdfb,EAACO,EAAWO,OAAM,CACdH,OAAO,WACPI,GAAG,OACH3E,UAAW4E,EAAmBjB,SAE7BI,EAAKJ,WAedJ,EAAA,KAAAc,OAAAC,OAAA,CAEItE,UAAW6E,GACNb,IAAUrE,EAAM8B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAkC,SAAA,CAEDM,EACAD,EAAQrE,EAAM8B,OAAS,IACA,YAAnB1B,EACG6D,EAACkB,EAAgB,CAAA,eAAA,EAEb9E,UAAW+E,IAGfnB,EAACO,EAAWO,QACRM,QAAM,EAAA,eAAA,EAENhF,UAAWiF,qBAjBlBjB,IA1BF,IAgDF,QAoCR7D,GA7BDoD,EAAA2B,EAAA,CAAAvB,SAAA,CACKrD,GAAgBI,GACbkD,EAAA,MAAA,CACIJ,IAAKzC,EACLf,UAAWyD,EAAK0B,EAAaC,KAGpC5E,GAAiBG,GACdiD,EAAA,MAAA,CACIJ,IAAKxC,EACLhB,UAAWyD,EAAK0B,EAAaE,WAoBvC"}

package/breadcrumb/breadcrumb.styles.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    fade: {
+        backgroundColor: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const fade: import("@linaria/core").LinariaClassName;
+export declare const fadeLeft: import("@linaria/core").LinariaClassName;
+export declare const fadeRight: import("@linaria/core").LinariaClassName;
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const caret: import("@linaria/core").LinariaClassName;
+export declare const slash: import("@linaria/core").LinariaClassName;
+export declare const currentLabel: import("@linaria/core").LinariaClassName;
+export declare const previousLink: import("@linaria/core").LinariaClassName;

package/breadcrumb/breadcrumb.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./breadcrumb.styles_1nl4aua.css";const r={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},a="wcpniaz",o="c10gatr7",c="fbyhxo7",d="f1xa0lk7",b="f1oxmxuo",e="ikhkv84",m="co9wmrd",n="spyv6ve",f="c1mfqdvn",s="pm022dc";export{m as caret,o as content,f as currentLabel,c as fade,d as fadeLeft,b as fadeRight,e as item,s as previousLink,n as slash,r as tokens,a as wrapper};
2	+ //# sourceMappingURL=breadcrumb.styles.js.map

package/breadcrumb/breadcrumb.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"breadcrumb.styles.js","sources":["../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n fade: {\n backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n position: relative;\n width: 100%;\n z-index: 1;\n margin: ${Spacing[\"spacing-32\"]} 0;\n\n ${MediaQuery.MaxWidth.xl} {\n margin: ${Spacing[\"spacing-24\"]} 0;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n margin: ${Spacing[\"spacing-16\"]} 0;\n }\n`;\n\nexport const content = css`\n display: inline-flex;\n width: 100%;\n flex-wrap: wrap;\n white-space: nowrap;\n margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n font-size: ${Font.Spec[\"body-size-md\"]};\n overflow-x: scroll;\n overflow-y: hidden;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE 10+ */\n &::-webkit-scrollbar {\n display: none; /* Chrome/Safari/Webkit */\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-wrap: nowrap;\n }\n`;\n\nexport const fade = css`\n ${tokens.fade.backgroundColor}: initial;\n width: ${Spacing[\"spacing-64\"]};\n height: calc(1lh + ${Spacing[\"spacing-4\"]});\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n ${MediaQuery.MaxWidth.lg} {\n left: calc(${Spacing[\"spacing-8\"]} * -1);\n background-image: linear-gradient(\n to right,\n var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n rgba(255, 255, 255, 0.001)\n );\n }\n`;\n\nexport const fadeRight = css`\n ${MediaQuery.MaxWidth.lg} {\n right: ${Spacing[\"spacing-8\"]};\n background-image: linear-gradient(\n to left,\n var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n rgba(255, 255, 255, 0.001)\n );\n }\n`;\n\nexport const item = css`\n display: flex;\n flex-direction: row;\n align-items: center;\n line-height: inherit;\n font-size: inherit;\n`;\n\nexport const caret = css`\n height: 1em;\n width: 1em;\n color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n display: inline-block;\n color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["tokens","fade","backgroundColor","wrapper","content","fadeLeft","fadeRight","item","caret","slash","currentLabel","previousLink"],"mappings":"kEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,gBAAiB,mDAOZC,EAAO,UAePC,EAAO,WAoBPH,EAAI,UAUJI,EAAQ,WAWRC,EAAS,WAWTC,EAAI,UAQJC,EAAK,UAMLC,EAAK,UAKLC,EAAY,WAIZC,EAAY"}

package/breadcrumb/breadcrumb.styles_1nl4aua.css ADDED Viewed

@@ -0,0 +1,18 @@
+.wcpniaz{position:relative;width:100%;z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}
+.c10gatr7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;white-space:nowrap;margin-left:calc(var(--fds-spacing-8) * -1);font-size:var(--fds-font-body-size-md);overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}.c10gatr7::-webkit-scrollbar{display:none;}:where(body.fds-breakpoint-lg-max) .c10gatr7{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}
+.fbyhxo7{--fds-internal-breadcrumb-fade-backgroundColor:initial;width:var(--fds-spacing-64);height:calc(1lh + var(--fds-spacing-4));position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;}
+:where(body.fds-breakpoint-lg-max) .f1xa0lk7{left:calc(var(--fds-spacing-8) * -1);background-image:linear-gradient(
+            to right,
+            var(--fds-internal-breadcrumb-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+:where(body.fds-breakpoint-lg-max) .f1oxmxuo{right:var(--fds-spacing-8);background-image:linear-gradient(
+            to left,
+            var(--fds-internal-breadcrumb-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.ikhkv84{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;font-size:inherit;}
+.co9wmrd{height:1em;width:1em;color:var(--fds-colour-icon-subtle);}
+.spyv6ve{display:inline-block;color:var(--fds-colour-text-subtlest);}
+.c1mfqdvn{margin:var(--fds-spacing-8)!important;}
+.pm022dc{margin:var(--fds-spacing-8)!important;}

package/breadcrumb/types.d.ts CHANGED Viewed

@@ -8,7 +8,6 @@ export interface BreadcrumbProps {
     links: React.AnchorHTMLAttributes<HTMLAnchorElement>[];
     fadeColor?: string[] | FadeColorSet | undefined;
     fadePosition?: FadePosition | undefined;
-    itemStyle?: string | undefined;
     separatorStyle?: SeparatorStyle | undefined;
     className?: string | undefined;
     id?: string | undefined;

package/button/button.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 import React from "react";
 import type { ButtonProps } from "./types";
-export declare const Button: {
+export declare const Button: ((props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType="default">` */
     Default: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="small">` */
     Small: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="large">` */
     Large: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 };

package/button/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import l from"react";import{Main as d,Spinner as i}from"./button.style.js";import{hasValidChildren as n}from"./button-helper.js";const s=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"default",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};s.displayName="Button.Default";const r=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"small",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};r.displayName="Button.Small";const o=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"large",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};o.displayName="Button.Large";const b={Default:l.forwardRef(s),Small:l.forwardRef(r),Large:l.forwardRef(o)};export{b as Button};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinnerHasChildren as d,mainStyleLinkDanger as c,mainStyleLink as b,mainStyleLightDanger as u,mainStyleLight as m,mainStyleSecondaryDanger as f,mainStyleSecondary as p,mainStyleDefaultDanger as g,mainStyleDefault as y,mainStyleDisabled as v,mainSizeLargeIconOnly as h,mainSizeLarge as j,mainSizeSmallIconOnly as O,mainSizeSmall as N,mainSizeDefaultIconOnly as T,mainSizeDefault as z}from"./button.styles.js";import{hasValidChildren as k}from"./button-helper.js";const w={disabled:{base:v,danger:v},default:{base:y,danger:g},secondary:{base:p,danger:f},light:{base:m,danger:u},link:{base:b,danger:c}},B={default:{base:z,iconOnly:T},small:{base:N,iconOnly:O},large:{base:j,iconOnly:h}},D=(e,a)=>{var n,i;return a?null===(n=w[e])||void 0===n?void 0:n.danger:null===(i=w[e])||void 0===i?void 0:i.base},R=(e,a)=>{var n,s,l;return a?i(null===(n=B[e])||void 0===n?void 0:n.base,null===(s=B[e])||void 0===s?void 0:s.iconOnly):null===(l=B[e])||void 0===l?void 0:l.base},x=(c,b)=>{const{children:u,className:m,disabled:f=!1,loading:p=!1,styleType:g="default",sizeType:y="default",danger:v=!1,focusableWhenDisabled:h=!1,icon:j,iconPosition:O="left",onClick:N}=c,T=e(c,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=k(u),w=!!j&&!z,B=f?"disabled":g;return a("button",Object.assign({ref:b,"data-testid":T["data-testid"]||"button",disabled:f&&!h,"aria-disabled":f,"aria-busy":p,onClick:f?void 0:N,className:i(o,j&&"right"===O&&t,!w&&r,D(B,v),R(y,w),m)},T,{children:[p?n(l,{className:i(z&&d)}):j?s.cloneElement(j,{"aria-hidden":!0}):null,z&&n("span",{children:u})]}))};x.displayName="Button";const C=s.forwardRef(x),L=(e,a)=>{var i;return n(C,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};L.displayName="Button.Default";const P=(e,a)=>n(C,Object.assign({},e,{sizeType:"small",ref:a}));P.displayName="Button.Small";const S=(e,a)=>n(C,Object.assign({},e,{sizeType:"large",ref:a}));S.displayName="Button.Large";const W=Object.assign(C,{Default:s.forwardRef(L),Small:s.forwardRef(P),Large:s.forwardRef(S)});export{W as Button};
 //# sourceMappingURL=button.js.map

package/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport ~~type~~ { ~~MainStyleProps~~ } from \"~~./button.style~~\";\nimport { ~~Main,~~ ~~Spinner~~ } from \"./button.~~style~~\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\~~n/*\n~~ NOTE: ~~Due~~ to ~~the~~ ~~way~~ we ~~intend~~ to ~~customise~~ ~~both~~ ~~components,~~ ~~with~~ ~~forwardRef behaviour~~\n * we ~~are~~ ~~unable~~ to ~~create~~ a ~~single~~ ~~component~~ ~~and~~ ~~have~~ ~~them~~ ~~share.\n~~ \n Will refactor if there is a better way\~~n */\~~nconst ~~DefaultComponent~~ = ~~(props~~: ~~ButtonProps,~~ ~~ref~~: ~~ButtonRef)~~ => {\n ~~const~~ {\n ~~children~~,\n ~~disabled~~ ~~= false~~,\n ~~loading = false~~,\n ~~styleType~~ = \~~"default\",\~~n ~~danger~~ ~~= false~~,\n ~~focusableWhenDisabled~~ ~~= false~~,\n ~~onClick,\n ...otherProps\n~~ } ~~= props;\~~n\n ~~const mainStyle~~: ~~MainStyleProps =~~ {\n ~~$buttonStyle~~: ~~disabled ? \"disabled\" : styleType~~,\n ~~$buttonSizeStyle~~: ~~\"default\"~~,\n ~~$buttonIsDanger: danger~~,\n };\n\n ~~return (~~\n ~~<Main~~\n ~~ref={ref}\n data-testid={otherProps~~[~~\"data-testid\"~~] \|\| \~~"button\"}\n disabled={disabled~~ && ~~!focusableWhenDisabled}\n aria-disabled~~=~~{disabled}\n aria-busy={loading}\n onClick={disabled~~ ? ~~undefined~~ : ~~onClick}\~~n ~~{...mainStyle}~~\n ~~{...otherProps}\n~~ ~~>\n {loading~~ && ~~<Spinner $hasChildren={hasValidChildren(children~~)~~} />}~~\n ~~<span>{children}</span>\n~~ ~~</Main>\n );\n};\nDefaultComponent.displayName~~ ~~= \"Button.Default\"~~;\n\nconst ~~SmallComponent~~ = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n disabled = false,\n loading = false,\n styleType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n onClick,\n ...otherProps\n } = props;\n\n const ~~mainStyle:~~ ~~MainStyleProps~~ = {\n ~~$buttonStyle:~~ disabled ? \"disabled\" : styleType~~,\n $buttonSizeStyle: \"small\",\n $buttonIsDanger: danger,\n }~~;\n\n return (\n <~~Main~~\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n {~~...mainStyle~~}\n {...otherProps}\n >\n {loading && <~~Spinner $hasChildren~~={~~hasValidChildren~~(~~children~~)} />}\n <span>{children}</span>\n </~~Main~~>\n );\n};\~~nSmallComponent~~.displayName = \"Button~~.Small~~\";\n\nconst ~~LargeComponent~~ = (props: ButtonProps, ref: ButtonRef) => {\n ~~const~~ {~~\n children,\n disabled~~ = ~~false,\n loading~~ ~~= false,\n styleType =~~ \"default\"~~,\n danger~~ = ~~false,\~~n ~~focusableWhenDisabled~~ = ~~false,\~~n ~~onClick,\n ...otherProps~~\~~n }~~ = props~~;\n\n const mainStyle~~: ~~MainStyleProps~~ ~~= {\n $buttonStyle~~: ~~disabled~~ ? \~~"disabled\"~~ : ~~styleType,\n $buttonSizeStyle: \~~"~~large~~\"~~,\n $buttonIsDanger:~~ ~~danger,\n };\n\n return (\n <Main\n~~ ref={ref}\n ~~data-testid~~=~~{otherProps[\"data-testid\"]~~ \|\| \"~~button~~\"}\~~n disabled={disabled~~ && ~~!focusableWhenDisabled}\n aria-disabled~~=~~{disabled}\n aria-busy={loading}\n onClick={disabled~~ ? ~~undefined~~ : ~~onClick}~~\n {...~~mainStyle~~}\~~n {...otherProps}\n >\n {loading~~ ~~&& <Spinner $hasChildren~~={~~hasValidChildren(children)~~} ~~/>}\~~n ~~<span>{children}</span>\n </Main>\n~~ );\~~n};\nLargeComponent~~.displayName = \"Button.Large\";\n\nexport const Button = {\n Default: React.forwardRef(~~DefaultComponent~~),\n Small: React.forwardRef(~~SmallComponent~~),\n Large: React.forwardRef(~~LargeComponent~~),\n};\n"],"names":["~~DefaultComponent~~","props","ref","children","~~disabled~~","loading","styleType","~~danger~~","~~focusableWhenDisabled~~","onClick","otherProps","~~__rest~~","~~mainStyle~~","~~$buttonStyle~~","~~$buttonSizeStyle~~","~~$buttonIsDanger~~","~~_jsxs~~","~~Main~~","~~Object~~","~~assign~~","~~undefined~~","~~_jsx~~","~~Spinner~~","~~$hasChildren~~","~~hasValidChildren~~","~~displayName~~","~~SmallComponent~~","~~LargeComponent~~","~~Button~~","~~Default~~","~~React~~","~~forwardRef~~","Small","Large"],"mappings":"~~kOAaA~~,MAAMA,~~EAAmB~~,~~CAACC~~,~~EAAoBC~~,~~KAC1C~~,~~MAAMC~~,~~SACFA~~,~~EAAQC~~,~~SACRA~~,~~GAAW~~,~~EAAKC~~,~~QAChBA~~,~~GAAU~~,~~EAAKC~~,~~UACfA~~,~~EAAY~~,~~UAASC~~,~~OACrBA~~,~~GAAS~~,~~EAAKC~~,~~sBACdA~~,~~GAAwB~~,~~EAAKC~~,~~QAC7BA~~,~~GAEAR~~,~~EADGS~~,~~EAAUC~~,~~EACbV~~,~~EATE~~,~~CAAA~~,~~WAAA~~,~~WAAA~~,~~UAAA~~,~~YAAA~~,~~SAAA~~,~~wBAAA~~,~~YAWAW~~,~~EAA4B~~,~~CAC9BC~~,~~aAAcT~~,~~EAAW~~,~~WAAaE~~,~~EACtCQ~~,~~iBAAkB~~,~~UAClBC~~,~~gBAAiBR~~,~~GAGrB~~,~~OACIS~~,~~EAACC~~,~~EAAIC~~,~~OAAAC~~,~~OAAA~~,~~CACDjB~~,~~IAAKA~~,~~EAAG~~,~~cACKQ~~,~~EAAW~~,~~gBAAkB~~,~~SAC1CN~~,~~SAAUA~~,~~IAAaI~~,~~EAAqB~~,~~gBAC7BJ~~,~~EAAQ~~,~~YACZC~~,~~EACXI~~,~~QAASL~~,~~OAAWgB~~,~~EAAYX~~,~~GAC5BG~~,~~EACAF~~,~~EAAU~~,~~CAAAP~~,~~SAAA~~,~~CAEbE~~,~~GAAWgB~~,~~EAACC~~,~~EAAO~~,~~CAAAC~~,~~aAAeC~~,~~EAAiBrB~~,~~KACpDkB~~,~~EAAA~~,OAAA,~~CAAAlB~~,~~SAAOA~~,~~OACJ~~,~~EAGfH~~,~~EAAiByB~~,~~YAAc~~,~~iBAE/B~~,~~MAAMC~~,~~EAAiB~~,~~CAACzB~~,EAAoBC,~~KACxC~~,MAAMC,SACFA,EAAQC,~~SACRA~~,GAAW,~~EAAKC~~,QAChBA,GAAU,EAAKC,UACfA,EAAY,~~UAASC~~,~~OACrBA~~,GAAS,~~EAAKC~~,sBACdA,GAAwB,EAAKC,~~QAC7BA~~,~~GAEAR~~,~~EADGS~~,~~EAAUC~~,~~EACbV~~,~~EATE~~,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,~~YAWAW~~,~~EAA4B~~,~~CAC9BC~~,~~aAAcT~~,~~EAAW~~,~~WAAaE~~,~~EACtCQ~~,~~iBAAkB~~,~~QAClBC~~,~~gBAAiBR~~,~~GAGrB~~,~~OACIS~~,~~EAACC~~,~~EAAIC~~,~~OAAAC~~,~~OAAA,CACDjB,~~IAAKA,EAAG,~~cACKQ~~,EAAW,gBAAkB,~~SAC1CN~~,SAAUA,~~IAAaI~~,~~EAAqB~~,~~gBAC7BJ,~~EAAQ,~~YACZC~~,~~EACXI~~,~~QAASL~~,~~OAAWgB~~,~~EAAYX~~,~~GAC5BG~~,~~EACAF~~,~~EAAU~~,~~CAAAP~~,~~SAAA~~,~~CAEbE~~,~~GAAWgB~~,~~EAACC~~,~~EAAO~~,~~CAAAC~~,~~aAAeC~~,~~EAAiBrB~~,~~KACpDkB~~,~~EAAA~~,~~OAAA~~,~~CAAAlB~~,~~SAAOA~~,~~OACJ~~,~~EAGfuB~~,~~EAAeD~~,~~YAAc~~,~~eAE7B~~,~~MAAME~~,~~EAAiB~~,~~CAAC1B~~,~~EAAoBC~~,~~KACxC~~,~~MAAMC~~,~~SACFA~~,~~EAAQC~~,~~SACRA~~,~~GAAW~~,~~EAAKC~~,~~QAChBA~~,~~GAAU~~,~~EAAKC~~,~~UACfA~~,~~EAAY~~,~~UAASC~~,~~OACrBA~~,~~GAAS~~,~~EAAKC~~,~~sBACdA~~,~~GAAwB~~,~~EAAKC~~,~~QAC7BA~~,~~GAEAR~~,~~EADGS~~,~~EAAUC~~,~~EACbV~~,~~EATE~~,~~CAAA~~,~~WAAA~~,~~WAAA~~,~~UAAA~~,~~YAAA~~,~~SAAA~~,~~wBAAA~~,~~YAWAW~~,~~EAA4B~~,~~CAC9BC~~,~~aAAcT~~,~~EAAW~~,~~WAAaE~~,~~EACtCQ~~,~~iBAAkB~~,~~QAClBC~~,~~gBAAiBR~~,~~GAGrB~~,~~OACIS~~,~~EAACC~~,~~EAAIC~~,~~OAAAC~~,~~OAAA~~,~~CACDjB,~~IAAKA,~~EAAG~~,~~cACKQ~~,~~EAAW~~,~~gBAAkB~~,~~SAC1CN~~,~~SAAUA~~,~~IAAaI~~,~~EAAqB~~,~~gBAC7BJ~~,~~EAAQ~~,~~YACZC~~,~~EACXI~~,~~QAASL~~,~~OAAWgB~~,~~EAAYX~~,~~GAC5BG~~,~~EACAF~~,~~EAAU~~,~~CAAAP~~,~~SAAA~~,~~CAEbE~~,~~GAAWgB~~,~~EAACC~~,~~EAAO~~,~~CAAAC~~,~~aAAeC~~,~~EAAiBrB~~,~~KACpDkB~~,~~EAAA~~,~~OAAA~~,~~CAAAlB~~,~~SAAOA~~,~~OACJ~~,~~EAGfwB~~,~~EAAeF~~,YAAc,~~eAEtB~~,~~MAAMG~~,~~EAAS~~,~~CAClBC~~,~~QAASC~~,~~EAAMC~~,~~WAAW/B~~,~~GAC1BgC~~,~~MAAOF~~,~~EAAMC~~,~~WAAWL~~,~~GACxBO~~,~~MAAOH~~,~~EAAMC~~,~~WAAWJ~~"}
1	+ {"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n disabled: {\n base: styles.mainStyleDisabled,\n danger: styles.mainStyleDisabled,\n },\n default: {\n base: styles.mainStyleDefault,\n danger: styles.mainStyleDefaultDanger,\n },\n secondary: {\n base: styles.mainStyleSecondary,\n danger: styles.mainStyleSecondaryDanger,\n },\n light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n default: {\n base: styles.mainSizeDefault,\n iconOnly: styles.mainSizeDefaultIconOnly,\n },\n small: {\n base: styles.mainSizeSmall,\n iconOnly: styles.mainSizeSmallIconOnly,\n },\n large: {\n base: styles.mainSizeLarge,\n iconOnly: styles.mainSizeLargeIconOnly,\n },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n danger\n ? styleClassMap[effectiveStyle]?.danger\n : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n iconOnly\n ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n className,\n disabled = false,\n loading = false,\n styleType = \"default\",\n sizeType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n icon,\n iconPosition = \"left\",\n onClick,\n ...otherProps\n } = props;\n\n const hasChildren = hasValidChildren(children);\n const iconOnly = !!icon && !hasChildren;\n const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n return (\n <button\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n className={clsx(\n styles.main,\n icon &&\n iconPosition === \"right\" &&\n styles.mainIconPositionRight,\n !iconOnly && styles.mainHasMinWidth,\n getStyleClass(effectiveStyle, danger),\n getSizeClass(sizeType, iconOnly),\n className\n )}\n {...otherProps}\n >\n {loading ? (\n <ComponentLoadingSpinner\n className={clsx(hasChildren && styles.spinnerHasChildren)}\n />\n ) : icon ? (\n React.cloneElement(icon, { \"aria-hidden\": true })\n ) : null}\n {hasChildren && <span>{children}</span>}\n </button>\n );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` /\n Default: React.forwardRef(DefaultButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` /\n Small: React.forwardRef(SmallButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"owBAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EAA2B,UAAtBhB,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KAA4B,UAAtBe,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UACrC,UAAtBF,EAAae,UAAS,IAAAE,OAAA,EAAAA,EAAEhC,IAAI,EAEhCiC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAAStC,SACTA,GAAW,EAAKuC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAAST,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKsC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BnB,IAAawB,IAASI,EACtBnB,EAAiB3B,EAAW,WAAawC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C7C,SAAUA,IAAayC,kBACRzC,EAAQ,YACZuC,EACXK,QAAS5C,OAAWiD,EAAYL,EAChCN,UAAWN,EACPkB,EACAR,GACqB,UAAjBC,GACAQ,GACHjC,GAAYkC,EACb1B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBoB,IAEAO,EAAU,CAAAR,SAAA,CAEbE,EACGc,EAACC,EAAuB,CACpBhB,UAAWN,EAAKc,GAAeS,KAEnCb,EACAc,EAAMC,aAAaf,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUwB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW1B,GAE9B2B,EAAyB,CAAC1B,EAAoBC,WAAmB,OACnEiB,EAACM,EAAUG,OAAAC,OAAA,CAAA,EAAK5B,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,EAE9EyB,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC7B,EAAoBC,IAC9CiB,EAACM,mBAAexB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD4B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACM,mBAAexB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD6B,EAAqBP,YAAc,qBAEtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}

package/button/button.styles.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainIconPositionRight: import("@linaria/core").LinariaClassName;
+export declare const mainHasMinWidth: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDefault: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDefaultDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleSecondary: import("@linaria/core").LinariaClassName;
+export declare const mainStyleSecondaryDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLight: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLightDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLink: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLinkDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDisabled: import("@linaria/core").LinariaClassName;
+export declare const mainSizeDefault: import("@linaria/core").LinariaClassName;
+export declare const mainSizeDefaultIconOnly: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmallIconOnly: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLargeIconOnly: import("@linaria/core").LinariaClassName;
+export declare const spinnerHasChildren: import("@linaria/core").LinariaClassName;

package/button/button.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./button.styles_142m6cx.css";const m="mf6do54",t="moaxzdy",n="m1en642a",o="m1jxbf2q",s="mharb8i",c="mbs4ndg",a="m1taerhv",b="m8hnmz5",e="m53fwwa",x="m1557ko0",r="m70z5yw",y="mc532iy",f="m1knftbn",h="m18n5exw",i="m3n7mqo",w="m1ytkx3r",_="m1c1mlhm",d="me78sau",k="s17i3scc";export{m as main,n as mainHasMinWidth,t as mainIconPositionRight,f as mainSizeDefault,h as mainSizeDefaultIconOnly,_ as mainSizeLarge,d as mainSizeLargeIconOnly,i as mainSizeSmall,w as mainSizeSmallIconOnly,o as mainStyleDefault,s as mainStyleDefaultDanger,y as mainStyleDisabled,b as mainStyleLight,e as mainStyleLightDanger,x as mainStyleLink,r as mainStyleLinkDanger,c as mainStyleSecondary,a as mainStyleSecondaryDanger,k as spinnerHasChildren};
2	+ //# sourceMappingURL=button.styles.js.map

package/button/button.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const main = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n gap: 0.5rem;\n border-radius: ${Radius.sm};\n\n svg,\n img {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const mainIconPositionRight = css`\n flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n background-color: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-primary-hover\"]};\n }\n }\n`;\n\nexport const mainStyleDefaultDanger = css`\n background-color: ${Colour[\"bg-error-strong\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-error-strong-hover\"]};\n }\n }\n`;\n\nexport const mainStyleSecondary = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-primary\"]};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-error-strong\"]};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLight = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLightDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLink = css`\n background-color: transparent;\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLinkDanger = css`\n background-color: transparent;\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n color: ${Colour[\"text-disabled\"]};\n &:hover {\n box-shadow: none;\n }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n height: 3rem;\n ${Font[\"heading-xs-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n height: 3rem;\n width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ${Font[\"body-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n height: 2.5rem;\n width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n height: 4rem;\n ${Font[\"heading-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n height: 4rem;\n width: 4rem;\n`;\n\nexport const spinnerHasChildren = css`\n margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinnerHasChildren"],"mappings":"0DAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAkB"}

package/button/button.styles_142m6cx.css ADDED Viewed

@@ -0,0 +1,19 @@
+.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-radius-sm);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.m1en642a{min-width:4rem;}
+.m1jxbf2q{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.m1jxbf2q:hover,.m1jxbf2q:active{background-color:var(--fds-colour-bg-primary-hover);}}
+.mharb8i{background-color:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.mharb8i:hover,.mharb8i:active{background-color:var(--fds-colour-bg-error-strong-hover);}}
+.mbs4ndg{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (pointer: fine){.mbs4ndg:hover,.mbs4ndg:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1taerhv{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-error-strong);color:var(--fds-colour-text-error);}@media (pointer: fine){.m1taerhv:hover,.m1taerhv:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m8hnmz5{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-primary);}@media (pointer: fine){.m8hnmz5:hover,.m8hnmz5:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m53fwwa{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-error);}@media (pointer: fine){.m53fwwa:hover,.m53fwwa:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1557ko0{background-color:transparent;color:var(--fds-colour-text-primary);}@media (pointer: fine){.m1557ko0:hover,.m1557ko0:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m70z5yw{background-color:transparent;color:var(--fds-colour-text-error);}@media (pointer: fine){.m70z5yw:hover,.m70z5yw:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.mc532iy{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;color:var(--fds-colour-text-disabled);}.mc532iy:hover{box-shadow:none;}
+.m1knftbn{height:3rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}:where(body.fds-breakpoint-xxs-max) .m1knftbn{height:auto;}
+.m18n5exw{height:3rem;width:3rem;}
+.m3n7mqo{height:2.5rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}:where(body.fds-breakpoint-xxs-max) .m3n7mqo{height:auto;}
+.m1ytkx3r{height:2.5rem;width:2.5rem;}
+.m1c1mlhm{height:4rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}:where(body.fds-breakpoint-xxs-max) .m1c1mlhm{height:auto;}
+.me78sau{height:4rem;width:4rem;}
+.s17i3scc{margin-right:0.5rem;}

package/button/types.d.ts CHANGED Viewed

@@ -1,28 +1,26 @@
 import type React from "react";
-import type { ComponentLoadingSpinnerProps } from "../shared/component-loading-spinner";
 export type ButtonStyleType = "default" | "secondary" | "light" | "link";
-export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export type ButtonSizeType = "large" | "default" | "small";
+export type ButtonIconPosition = "left" | "right";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     "data-testid"?: string | undefined;
     /** The style type of the button. Values: "default" | "secondary" | "light" | "link" */
     styleType?: ButtonStyleType | undefined;
+    /** The size of the button. Values: "large" | "default" | "small" */
+    sizeType?: ButtonSizeType | undefined;
     /** If specified, the component will have a red color scheme being applied */
     danger?: boolean | undefined;
-    /** If true, the button remains focusable when disabled. Defaults to false. */
-    focusableWhenDisabled?: boolean | undefined;
-}
-export interface ButtonProps extends ButtonBaseProps {
     /** Indicates if a loading spinner is to be displayed */
     loading?: boolean | undefined;
+    /** If true, the button remains focusable when disabled. Defaults to false. */
+    focusableWhenDisabled?: boolean | undefined;
+    /**
+     * The icon to be rendered in the button. When provided without children, the
+     * button renders in icon-only mode (square). Requires aria-label on the button
+     * for accessibility in icon-only mode.
+     */
+    icon?: JSX.Element | undefined;
+    /** Specifies where the icon will be positioned relative to the label. */
+    iconPosition?: ButtonIconPosition | undefined;
 }
 export type ButtonRef = React.Ref<HTMLButtonElement>;
-/** @deprecated For internal use only */
-export type MainButtonStyle = "default" | "disabled" | "secondary" | "light" | "link";
-/** @deprecated For internal use only */
-export type MainButtonSize = "default" | "small" | "large";
-/** @deprecated For internal use only */
-export interface MainStyleProps extends ComponentLoadingSpinnerProps {
-    $buttonStyle: MainButtonStyle;
-    $buttonSizeStyle?: MainButtonSize | undefined;
-    $buttonIsDanger?: boolean;
-    $buttonWithIcon?: boolean;
-}

package/calendar/calendar.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { CalendarProps } from "./types";
-export declare const Calendar: ({ className, styleType, value, onSelect, ...otherProps }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/calendar/calendar.js CHANGED Viewed

@@ -1,15 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as a,useEffect as t}from"react";import o,{css as i}from"styled-components";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as n}from"../shared/internal-calendar/internal-calendar.js";import{V3_Spacing as s,V3_Border as l,V3_Colour as d,V3_Radius as c}from"../v3_theme/index.js";const m=o=>{var{className:i,styleType:s="bordered",value:l,onSelect:d}=o,c=e(o,["className","styleType","value","onSelect"]);const[m,h]=a(l);return t((()=>{h(l)}),[l]),r(p,{className:i,$hasBorder:"bordered"===s,children:r(n,Object.assign({value:m,initialCalendarDate:m,isFocusable:!0,onSelect:e=>{h(e),null==d||d(e)}},c))})},p=o.div`
-    --vertical-inset: ${s["spacing-24"]};
-    --horizontal-inset: ${s["spacing-32"]};
-    --header-bottom-spacing: ${s["spacing-8"]};
-    width: 41rem;
-    ${e=>{if(e.$hasBorder)return i`
-                border: ${l["width-010"]} ${l.solid}
-                    ${d.border};
-                border-radius: ${c.lg};
-                overflow: hidden;
-            `}}
-`;export{m as Calendar};
+import{jsx as a}from"react/jsx-runtime";import e from"clsx";import{useState as l,useEffect as t}from"react";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as i}from"../shared/internal-calendar/internal-calendar.js";import{wrapper as n,wrapperBordered as o}from"./calendar.styles.js";const r=r=>{const{className:d,styleType:s="bordered",variant:c,id:v,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,"data-testid":S}=r,x="multi"===r.variant,C=x?void 0:r.value,f=x?r.values:void 0,g=x?r.minSelectable:void 0,w=x?r.maxSelectable:void 0,[j,M]=l((()=>void 0!==f?f:void 0!==C?[C]:[]));t((()=>{M(void 0===f?void 0===C?[]:[C]:f)}),[C,f]);return a("div",{className:e(n,"bordered"===s&&o,d),id:v,"data-testid":S,children:a(i,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:c,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,onSelect:a=>{var e,l;M([a]),"multi"!==r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a),null===(l=r.onSelect)||void 0===l||l.call(r,a))},onChange:a=>{var e;M(a),"multi"===r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a))},minSelectable:g,maxSelectable:w})})};export{r as Calendar};
 //# sourceMappingURL=calendar.js.map

package/calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { ~~useEffect, useState }~~ from \"~~react~~\";\nimport ~~styled~~, { ~~css~~ } from \"~~styled-components~~\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { ~~V3_Border,~~ ~~V3_Colour,~~ ~~V3_Radius, V3_Spacing }~~ from \"~~../v3_theme~~\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = ({\n className,\n styleType = \"bordered\",\n ~~value~~,\n ~~onSelect~~,\n ~~...otherProps~~\n}: ~~CalendarProps)~~ => {\n // ~~=============================================================================\~~n // ~~CONST,~~ ~~STATE,~~ ~~REF\~~n // ~~=============================================================================\~~n const ~~[selectedDate,~~ ~~setSelectedDate]~~ = ~~useState<~~string \| undefined>(~~value~~); // ~~YYYY-MM-DD~~\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n ~~setSelectedDate~~(~~value~~);\n }, [~~value~~]);\n\n // =============================================================================\n // ~~RENDER~~ ~~FUNCTION~~\n // =============================================================================\n ~~return~~ (\n ~~<Wrapper~~ ~~className={className}~~ ~~$hasBorder={styleType~~ === \"~~bordered~~\"~~}>\~~n ~~<InternalCalendar\~~n ~~value={selectedDate~~}\n ~~initialCalendarDate={selectedDate}~~\n ~~isFocusable={true~~}\n ~~onSelect~~={(~~value~~) => {\n ~~setSelectedDate~~(~~value~~);\n ~~onSelect?.~~(~~value~~)~~;\n }}\n~~ {~~...otherProps}~~\n ~~/>\~~n ~~</Wrapper>\~~n ~~);\n~~};\n\n// =============================================================================\n// ~~STYLE~~ ~~INTERFACE~~\n// =============================================================================\~~ninterface StyleProps {\~~n ~~$hasBorder?:~~ ~~boolean;\~~n}\n\n~~// =============================================================================\~~n// ~~STYLING~~\~~n//~~ ~~=============================================================================\nconst~~ ~~Wrapper = styled~~.~~div<StyleProps>`\~~n ~~--vertical-inset: ${V3_Spacing[~~\~~"spacing-24~~\"]};\n ~~--horizontal~~-~~inset: $~~{~~V3_Spacing[~~\~~"spacing-32~~\"]};\n ~~--header-bottom-spacing: $~~{~~V3_Spacing~~[~~\"spacing-8\"~~]};\n\n ~~width: 41rem;\~~n\n ${~~(props) =>~~ {\n ~~if (props.$hasBorder)~~ {\n ~~return css`\~~n ~~border: $~~{~~V3_Border[~~\~~"width-010~~\~~"]} $~~{~~V3_Border.solid~~}\n ${~~V3_Colour.border~~};\n ~~border-radius: $~~{~~V3_Radius[~~\~~"lg\"]};\~~n ~~overflow: hidden;\~~n ~~`;\~~n }\n }}\n~~`;\n~~"],"names":["Calendar","_a","className","styleType","~~value~~","~~onSelect~~","~~otherProps~~","~~__rest~~","~~selectedDate~~","~~setSelectedDate~~","~~useState~~","~~useEffect~~","~~_jsx~~","~~Wrapper~~","~~$hasBorder~~","~~children~~","~~InternalCalendar~~","~~Object~~","~~assign~~","~~initialCalendarDate~~","~~isFocusable~~","~~styled~~","~~div~~","~~V3_Spacing~~","~~props~~","~~css~~","~~V3_Border~~","~~solid~~","~~V3_Colour~~","~~border~~","~~V3_Radius~~"],"mappings":"~~8ZAOO~~,MAAMA,EAAYC,~~IAAA~~,~~IAAAC~~,~~UACrBA~~,EAASC,UACTA,EAAY,WAAUC,~~MACtBA~~,~~EAAKC~~,~~SACLA~~,~~GAAQJ~~,~~EACLK~~,~~EAAUC~~,~~EAAAN~~,~~EALQ~~,~~8CAUrB~~,~~MAAOO~~,~~EAAcC~~,~~GAAmBC~~,~~EAA6BN~~,~~GAYrE~~,~~OAPAO~~,GAAU,~~KACNF~~,~~EAAgBL~~,~~EAAM~~,~~GACvB~~,CAACA,~~IAMAQ~~,~~EAACC~~,~~EAAO~~,~~CAACX~~,~~UAAWA~~,~~EAASY~~,~~WAA4B~~,~~aAAdX~~,~~EAAwBY~~,~~SAC/DH~~,~~EAACI~~,~~EAAgBC~~,~~OAAAC~~,~~OAAA~~,CACbd,~~MAAOI~~,~~EACPW~~,~~oBAAqBX~~,~~EACrBY~~,aAAa,~~EACbf~~,~~SAAWD~~,~~IACPK~~,~~EAAgBL~~,~~GAChBC~~,~~SAAAA~~,~~EAAWD~~,~~EAAM~~,~~GAEjBE~~,~~KAEF~~,~~EAcZO~~,~~EAAUQ~~,~~EAAOC~~,~~GAAe;wBACdC~~,~~EAAW;0BACTA~~,~~EAAW;+BACNA~~,~~EAAW;;;;MAInCC~~,~~IACC~~,~~GAAIA~~,~~EAAMV~~,~~WACN~~,~~OAAOW~~,~~CAAG;0BACIC~~,~~EAAU~~,~~gBAAgBA~~,~~EAAUC;sBACxCC~~,~~EAAUC;iCACCC~~,~~EAAc;;aAGvC;~~"}
1	+ {"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant,\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAOO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAOC,GACPA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/calendar/calendar.styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const wrapper: import("@linaria/core").LinariaClassName;
2	+ export declare const wrapperBordered: import("@linaria/core").LinariaClassName;

package/calendar/calendar.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./calendar.styles_11ho5x8.css";const c="wavc298",a="w1incl4u";export{c as wrapper,a as wrapperBordered};
2	+ //# sourceMappingURL=calendar.styles.js.map

package/calendar/calendar.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"calendar.styles.js","sources":["../../src/calendar/calendar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n ${calendarDropdownStyles.tokens.verticalInset}: ${Spacing[\"spacing-24\"]};\n ${calendarDropdownStyles.tokens.horizontalInset}: ${Spacing[\"spacing-32\"]};\n ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n \"spacing-8\"\n ]};\n\n width: 41rem;\n`;\n\nexport const wrapperBordered = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"lg\"]};\n overflow: hidden;\n`;\n"],"names":["wrapper","wrapperBordered"],"mappings":"8DAKO,MAAMA,EAAO,UAUPC,EAAe"}

package/calendar/calendar.styles_11ho5x8.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
2	+ .w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}

package/calendar/types.d.ts CHANGED Viewed

@@ -1,16 +1,37 @@
 import type { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
-export interface CalendarProps extends CommonCalendarProps {
+export type { Variant as CalendarVariant } from "../shared/internal-calendar/types";
+interface CalendarBaseProps extends CommonCalendarProps {
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
     /** Specifies if the component should have a border around it. Values `no-border` | `bordered` */
     styleType?: "no-border" | "bordered" | undefined;
-    /** Selected date in `YYYY-MM-DD` format */
-    value?: string | undefined;
     /** Called when day cell is hovered, returns value in `YYYY-MM-DD` */
     onHover?: ((value: string) => void) | undefined;
-    /** Called when date is selected, returns value in `YYYY-MM-DD` format */
-    onSelect?: ((value: string) => void) | undefined;
     /** Called when there is a change in the current visible month and year */
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }
+export interface CalendarSingleProps extends CalendarBaseProps {
+    variant?: "single" | undefined;
+    /** Selected date in `YYYY-MM-DD` format */
+    value?: string | undefined;
+    /** Called when the selected date changes. Returns the selected date in `YYYY-MM-DD` format */
+    onChange?: ((value: string) => void) | undefined;
+    /**
+     * Called when the selected date changes. Returns the selected date in `YYYY-MM-DD` format
+     * @deprecated Use `onChange` instead
+     */
+    onSelect?: ((value: string) => void) | undefined;
+}
+export interface CalendarMultiProps extends CalendarBaseProps {
+    variant: "multi";
+    /** Selected dates in `YYYY-MM-DD` format */
+    values?: string[] | undefined;
+    /** Minimum number of dates that must be selected */
+    minSelectable?: number | undefined;
+    /** Maximum number of dates that can be selected */
+    maxSelectable?: number | undefined;
+    /** Called when the selection changes. Returns all selected dates in `YYYY-MM-DD` format */
+    onChange?: ((values: string[]) => void) | undefined;
+}
+export type CalendarProps = CalendarSingleProps | CalendarMultiProps;

package/card/card.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { CardProps } from "./types";
-export declare const Card: ({ children, ...otherProps }: CardProps) => JSX.Element;
+export declare const Card: ({ children, className, "data-testid": dataTestId, ...otherProps }: CardProps) => JSX.Element;

package/card/card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{Typography as i}from"../typography/index.js";import{StyledCard as e}from"./card.style.js";const o=o=>{var{children:s}=o,d=r(o,["children"]);const a=d["data-testid"]||"card";return t(e,Object.assign({},d,{"data-testid":a,children:"string"==typeof s?t(i.BodyBL,{children:s}):s}))};export{o as Card};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"clsx";import{useContext as o}from"react";import{ThemeContext as i}from"../theme/theme-provider/context.js";import{Typography as s}from"../typography/index.js";import{card as a,cardDarkMode as m,cardLightMode as d}from"./card.styles.js";const c=c=>{var{children:l,className:n,"data-testid":p="card"}=c,f=t(c,["children","className","data-testid"]);const h=o(i),j="dark"===(null==h?void 0:h.mode);return r("div",Object.assign({},f,{"data-testid":p,className:e(a,j?m:d,n),children:"string"==typeof l?r(s.BodyBL,{children:l}):l}))};export{c as Card};
 //# sourceMappingURL=card.js.map