npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

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 (1629) hide show

package/timepicker/timepicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":["inputSelectorElement"],"mappings":"~~iEAKO~~,MAAMA,EAAoB"}
1	+ {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n cursor: inherit;\n`;\n"],"names":["inputSelectorElement"],"mappings":"kEAKO,MAAMA,EAAoB"}

package/timepicker/timepicker.styles_1jm33yw.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @layer fds{.ixpxnsh{height:calc(3rem - 2px);cursor:inherit;}}

package/timetable/timetable-header/timetable-header.styles_11gl1h4.css CHANGED Viewed

@@ -1,6 +1,6 @@
-.r1dkvl6z{color:var(--fds-colour-icon);}@-webkit-keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+@layer fds{.r1dkvl6z{color:var(--fds-colour-icon);}@-webkit-keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
 .r1u01cjw svg{-webkit-animation:timetable-refresh-icon-spin 4s linear infinite;animation:timetable-refresh-icon-spin 4s linear infinite;}
 .n17unxsd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-bottom:var(--fds-spacing-16);-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
 .n1oy278s{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;gap:var(--fds-spacing-8);}
 .r64l2hv{color:var(--fds-colour-text-subtler);}
-.d13zs1sk{width:400px;}
+.d13zs1sk{width:400px;}}

package/timetable/timetable-row/row-bar.styles_1x0vrsz.css CHANGED Viewed

	@@ -1 +1 @@
1	- .r1vzjzkv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
1	+ @layer fds{.r1vzjzkv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}}

package/timetable/timetable-row/row-cell.styles_y1dl5j.css CHANGED Viewed

@@ -1,7 +1,7 @@
-.brs2fuo{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+@layer fds{.brs2fuo{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .b1tkj60f{box-shadow:inset -0.5px 0px var(--fds-colour-border-primary);}
 .w3l6hrm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:2px;height:65px;}
 .g1ly7zml{width:2px;height:100%;}
 .byp749t{--fds-internal-timetable-rowCellBlock-width:initial;--fds-internal-timetable-rowCellBlock-mainColor:initial;--fds-internal-timetable-rowCellBlock-altColor:initial;height:100%;width:var(--fds-internal-timetable-rowCellBlock-width);border-radius:var(--fds-radius-sm);box-sizing:border-box;padding:var(--fds-spacing-4);}
 .bhkclis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
-.bbb5nib{color:var(--fds-colour-text-subtler);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.bbb5nib{color:var(--fds-colour-text-subtler);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}}

package/timetable/timetable.styles_7rp8kz.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+@layer fds{.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
 .t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
 .t1rmyx7n{padding-bottom:128px;}
 .t1gzwlj3:hover{cursor:not-allowed;}
@@ -43,4 +43,4 @@
         var(--fds-colour-neutral-100) 18%,
         var(--fds-colour-neutral-95) 33%
     );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
-.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}}

package/toast/toast.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./toast.styles_ngrlup.css";const t="wqf508q",s="c1ll5mdk",l="t1mt05g8",o="t1j1n9on",e="t1see4ey",m="dmmbr7j",d="a10z10pl",n="d1jd4l4i";export{d as actionButton,s as contentWrapper,m as description,n as dismissButton,o as textContainer,l as textIconWrapper,e as title,t as wrapper};
+import"./toast.styles_1e0l60w.css";const t="wqf508q",s="c1ll5mdk",e="t1mt05g8",l="t1j1n9on",o="t1see4ey",m="dmmbr7j",d="a10z10pl",_="d1jd4l4i";export{d as actionButton,s as contentWrapper,m as description,_ as dismissButton,l as textContainer,e as textIconWrapper,o as title,t as wrapper};
 //# sourceMappingURL=toast.styles.js.map

package/toast/toast.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast.styles.js","sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: row;\n position: relative;\n margin: 0;\n top: 0;\n right: 0;\n padding: 1rem;\n border-radius: ${Radius[\"md\"]};\n z-index: 10;\n align-items: center;\n gap: 2rem;\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n }\n\n &[data-fixed=\"true\"] {\n position: fixed;\n margin: 1rem;\n }\n\n &[data-type=\"success\"] {\n background: ${Colour[\"bg-success\"]};\n border: 1px solid ${Colour[\"border-success\"]};\n color: ${Colour[\"text-success\"]};\n }\n\n &[data-type=\"warning\"] {\n background: ${Colour[\"bg-warning\"]};\n border: 1px solid ${Colour[\"border-warning\"]};\n color: ${Colour[\"text-warning\"]};\n }\n\n &[data-type=\"error\"] {\n background: ${Colour[\"bg-error\"]};\n border: 1px solid ${Colour[\"border-error\"]};\n color: ${Colour[\"text-error\"]};\n }\n\n &[data-type=\"info\"] {\n background: ${Colour[\"bg-info\"]};\n border: 1px solid ${Colour[\"border-info\"]};\n color: ${Colour[\"text-info\"]};\n }\n`;\n\nexport const contentWrapper = css`\n display: flex;\n align-items: center;\n gap: 2rem;\n flex: 1;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 0.75rem;\n }\n`;\n\nexport const textIconWrapper = css`\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n & > svg {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-top: 0.0625rem;\n margin-right: 0.5rem;\n }\n\n &[data-type=\"success\"] > svg {\n color: ${Colour[\"icon-success\"]};\n }\n\n &[data-type=\"warning\"] > svg {\n color: ${Colour[\"icon-warning\"]};\n }\n\n &[data-type=\"error\"] > svg {\n color: ${Colour[\"icon-error\"]};\n }\n\n &[data-type=\"info\"] > svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const title = css`\n display: flex;\n ${Font[\"body-baseline-semibold\"]}\n color: inherit;\n`;\n\nexport const description = css`\n color: inherit;\n`;\n\nexport const actionButton = css`\n align-self: center;\n margin-left: auto;\n height: auto;\n width: fit-content;\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: flex-start;\n margin-left: 2rem;\n }\n`;\n\nexport const dismissButton = css`\n padding: 0.75rem;\n margin: -0.75rem;\n align-self: stretch;\n color: inherit;\n\n &:hover {\n background: transparent;\n }\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n color: inherit;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: center;\n }\n`;\n"],"names":["wrapper","contentWrapper","textIconWrapper","textContainer","title","description","actionButton","dismissButton"],"mappings":"~~uDAIO~~,MAAMA,EAAO,UA+CPC,EAAc,WAedC,EAAe,WA8BfC,EAAa,WAKbC,EAAK,WAMLC,EAAW,UAIXC,EAAY,WAaZC,EAAa"}
1	+ {"version":3,"file":"toast.styles.js","sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: row;\n position: relative;\n margin: 0;\n top: 0;\n right: 0;\n padding: 1rem;\n border-radius: ${Radius[\"md\"]};\n z-index: 10;\n align-items: center;\n gap: 2rem;\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n }\n\n &[data-fixed=\"true\"] {\n position: fixed;\n margin: 1rem;\n }\n\n &[data-type=\"success\"] {\n background: ${Colour[\"bg-success\"]};\n border: 1px solid ${Colour[\"border-success\"]};\n color: ${Colour[\"text-success\"]};\n }\n\n &[data-type=\"warning\"] {\n background: ${Colour[\"bg-warning\"]};\n border: 1px solid ${Colour[\"border-warning\"]};\n color: ${Colour[\"text-warning\"]};\n }\n\n &[data-type=\"error\"] {\n background: ${Colour[\"bg-error\"]};\n border: 1px solid ${Colour[\"border-error\"]};\n color: ${Colour[\"text-error\"]};\n }\n\n &[data-type=\"info\"] {\n background: ${Colour[\"bg-info\"]};\n border: 1px solid ${Colour[\"border-info\"]};\n color: ${Colour[\"text-info\"]};\n }\n`;\n\nexport const contentWrapper = css`\n display: flex;\n align-items: center;\n gap: 2rem;\n flex: 1;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 0.75rem;\n }\n`;\n\nexport const textIconWrapper = css`\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n & > svg {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-top: 0.0625rem;\n margin-right: 0.5rem;\n }\n\n &[data-type=\"success\"] > svg {\n color: ${Colour[\"icon-success\"]};\n }\n\n &[data-type=\"warning\"] > svg {\n color: ${Colour[\"icon-warning\"]};\n }\n\n &[data-type=\"error\"] > svg {\n color: ${Colour[\"icon-error\"]};\n }\n\n &[data-type=\"info\"] > svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const title = css`\n display: flex;\n ${Font[\"body-baseline-semibold\"]}\n color: inherit;\n`;\n\nexport const description = css`\n color: inherit;\n`;\n\nexport const actionButton = css`\n align-self: center;\n margin-left: auto;\n height: auto;\n width: fit-content;\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: flex-start;\n margin-left: 2rem;\n }\n`;\n\nexport const dismissButton = css`\n padding: 0.75rem;\n margin: -0.75rem;\n align-self: stretch;\n color: inherit;\n\n &:hover {\n background: transparent;\n }\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n color: inherit;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: center;\n }\n`;\n"],"names":["wrapper","contentWrapper","textIconWrapper","textContainer","title","description","actionButton","dismissButton"],"mappings":"wDAIO,MAAMA,EAAO,UA+CPC,EAAc,WAedC,EAAe,WA8BfC,EAAa,WAKbC,EAAK,WAMLC,EAAW,UAIXC,EAAY,WAaZC,EAAa"}

package/toast/{toast.styles_ngrlup.css → toast.styles_1e0l60w.css} RENAMED Viewed

@@ -1,8 +1,8 @@
-.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+@layer fds{.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
 .c1ll5mdk{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;gap:2rem;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.75rem;}
 .t1mt05g8{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:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.t1mt05g8>svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;height:1.5rem;margin-top:0.0625rem;margin-right:0.5rem;}.t1mt05g8[data-type="success"]>svg{color:var(--fds-colour-icon-success);}.t1mt05g8[data-type="warning"]>svg{color:var(--fds-colour-icon-warning);}.t1mt05g8[data-type="error"]>svg{color:var(--fds-colour-icon-error);}.t1mt05g8[data-type="info"]>svg{color:var(--fds-colour-icon-info);}
 .t1j1n9on{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
+.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
 .dmmbr7j{color:inherit;}
 .a10z10pl{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-left:auto;height:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a10z10pl{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:2rem;}
-.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}}

package/toggle/toggle-icon.styles_ba71y.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+@layer fds{.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
 .wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
 .w1tlwg9n{color:var(--fds-colour-icon-selected);}
-.w1d4lch6{color:var(--fds-colour-icon-selected-disabled);}
+.w1d4lch6{color:var(--fds-colour-icon-selected-disabled);}}

package/toggle/toggle.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./toggle.styles_1yzqsu.css";const t={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},l="h1fyul7s",e="tybgacj",i="tvkjim3",n="t1aku79x",s="c11szvws",a="n12ofp2c",o="u1l0nsei",g="c17z2k4k",c="tfiow01",p="td5xote",m="t15nuck4",b="tnwn55u",r="t1graj5g",w="t1qqpl3b",f="t1l2ct9g",y="t1tat3es",d="t1nsq3eo",u="t1cyflot",k="txm5wyu",C="i14lgw6r",q="tovnc4j",v="iangfw6",x="l1oixyvr",L="t1elmp69",j="tv1hw4w",z="s17sf3sp",h="i1l466bv",_="ih3od2r",A="r1izng22",G="d194isif",H="ehwglic",I="ejwzsce",M="e1q8ywpe",P="c1mf9nso",T="c9t56r4",B="c1y0x62l",D="c1gmwtb7",E="aeqryui";export{E as alertContainer,P as children,T as childrenIsFinalItem,g as colorBorderError,B as colorTextDisabled,D as colorTextError,s as container,G as disabledColorCursor,M as errorContainer,H as expandButton,I as expandButtonPaddingTopRequired,l as headerContainer,h as indicatorLabelContainer,_ as indicatorLabelContainerAddPadding,C as input,v as inputContainer,x as label,a as noIndicatorContainer,A as removeButton,z as subLabel,e as textContainer,u as toggleContainer,f as toggleContainerDisabled,w as toggleContainerDisabledSelected,r as toggleContainerError,k as toggleContainerHoverDefault,d as toggleContainerHoverSelected,b as toggleContainerNoBorder,p as toggleContainerNoBorderDisabled,c as toggleContainerNoBorderDisabledSelected,m as toggleContainerNoBorderSelected,y as toggleContainerSelected,q as toggleInputDisabled,L as toggleLabelDefault,j as toggleLabelSelected,n as toggleTextContainerDisabledSelected,i as toggleTextContainerSelected,t as tokens,o as useContentWidthContainer};
+import"./toggle.styles_1t5qrye.css";const t={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},e="h1fyul7s",l="tybgacj",i="tvkjim3",n="t1aku79x",s="c11szvws",a="n12ofp2c",o="u1l0nsei",g="c17z2k4k",c="tfiow01",p="td5xote",m="t15nuck4",r="tnwn55u",b="t1graj5g",w="t1qqpl3b",f="t1l2ct9g",y="t1tat3es",d="t1nsq3eo",k="t1cyflot",u="txm5wyu",C="i14lgw6r",q="tovnc4j",v="iangfw6",x="l1oixyvr",L="t1elmp69",j="tv1hw4w",h="s17sf3sp",z="i1l466bv",_="ih3od2r",A="r1izng22",G="d194isif",H="ehwglic",I="ejwzsce",M="e1q8ywpe",P="c1mf9nso",T="c9t56r4",B="c1y0x62l",D="c1gmwtb7",E="aeqryui";export{E as alertContainer,P as children,T as childrenIsFinalItem,g as colorBorderError,B as colorTextDisabled,D as colorTextError,s as container,G as disabledColorCursor,M as errorContainer,H as expandButton,I as expandButtonPaddingTopRequired,e as headerContainer,z as indicatorLabelContainer,_ as indicatorLabelContainerAddPadding,C as input,v as inputContainer,x as label,a as noIndicatorContainer,A as removeButton,h as subLabel,l as textContainer,k as toggleContainer,f as toggleContainerDisabled,w as toggleContainerDisabledSelected,b as toggleContainerError,u as toggleContainerHoverDefault,d as toggleContainerHoverSelected,r as toggleContainerNoBorder,p as toggleContainerNoBorderDisabled,c as toggleContainerNoBorderDisabledSelected,m as toggleContainerNoBorderSelected,y as toggleContainerSelected,q as toggleInputDisabled,L as toggleLabelDefault,j as toggleLabelSelected,n as toggleTextContainerDisabledSelected,i as toggleTextContainerSelected,t as tokens,o as useContentWidthContainer};
 //# sourceMappingURL=toggle.styles.js.map

package/toggle/toggle.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n label: {\n desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n },\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: anywhere;\n width: 100%;\n overflow: hidden;\n color: ${Colour.text};\n`;\n\nexport const toggleTextContainerSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n position: relative;\n display: inline-flex;\n min-width: 10.375rem;\n border-radius: ${Radius[\"sm\"]};\n border-width: 1px;\n border-style: solid;\n overflow: hidden;\n flex-direction: column;\n height: fit-content;\n background: ${Colour.bg};\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const noIndicatorContainer = css`\n justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n min-width: unset;\n`;\n\nexport const colorBorderError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n border: none;\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n border: none;\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n border: none;\n`;\n\nexport const toggleContainerError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n border-color: ${Colour[\"border-selected-disabled\"]};\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n border-color: ${Colour[\"border-disabled\"]};\n background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n border-color: ${Colour[\"border-selected\"]};\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerHoverSelected = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-selected-hover\"]};\n\n & .${textContainer} {\n color: ${Colour[\"text-selected-hover\"]};\n }\n\n & .${toggleIconStyles.wrapperBase} {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n }\n }\n`;\n\nexport const toggleContainer = css`\n border-color: ${Colour.border};\n`;\n\nexport const toggleContainerHoverDefault = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n }\n`;\n\nexport const input = css`\n position: absolute;\n height: 100%;\n width: 100%;\n cursor: pointer;\n top: 0;\n left: 0;\n opacity: 0;\n\n /* Hide appearance but keep it focusable using keyboard interactions */\n appearance: none;\n background: transparent;\n border: none;\n`;\n\nexport const toggleInputDisabled = css`\n cursor: not-allowed;\n`;\n\nexport const inputContainer = css`\n display: flex;\n`;\n\nexport const label = css`\n overflow: hidden;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n\n ${tokens.label.desktopLineClamp}: initial;\n ${tokens.label.tabletLineClamp}: initial;\n ${tokens.label.mobileLineClamp}: initial;\n\n -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n ${MediaQuery.MaxWidth.lg} {\n -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n }\n ${MediaQuery.MaxWidth.sm} {\n -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n }\n`;\n\nexport const toggleLabelDefault = css`\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n ${Font[\"body-md-regular\"]}\n margin-top: 0.5rem;\n\n z-index: 1; // forces sublabel to render above the input\n pointer-events: none; // to allow click events to be passed to the input\n\n strong,\n b {\n ${Font[\"body-md-semibold\"]}\n }\n`;\n\nexport const indicatorLabelContainer = css`\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n color: ${Colour[\"text-error\"]};\n white-space: nowrap;\n ${Font[\"body-md-semibold\"]}\n height: fit-content;\n padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n color: ${Colour[\"text-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n color: ${Colour[\"text-primary\"]};\n ${Font[\"body-baseline-semibold\"]}\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background-color: ${Colour.bg};\n cursor: pointer;\n padding: 0 1rem 0.6875rem 1rem;\n width: 100%;\n\n svg {\n width: 1em;\n height: 1em;\n margin-left: 0.5rem;\n }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n width: 100%;\n color: ${Colour[\"text-error\"]};\n border: none;\n background: ${Colour.bg};\n cursor: pointer;\n padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n padding: 0 1rem;\n padding-top: 0.6875rem;\n padding-bottom: 0.5rem;\n background-color: ${Colour.bg};\n color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n width: 100%;\n user-select: none;\n`;\n"],"names":["tokens","label","desktopLineClamp","tabletLineClamp","mobileLineClamp","headerContainer","textContainer","toggleTextContainerSelected","toggleTextContainerDisabledSelected","container","noIndicatorContainer","useContentWidthContainer","colorBorderError","toggleContainerNoBorderDisabledSelected","toggleContainerNoBorderDisabled","toggleContainerNoBorderSelected","toggleContainerNoBorder","toggleContainerError","toggleContainerDisabledSelected","toggleContainerDisabled","toggleContainerSelected","toggleContainerHoverSelected","toggleContainer","toggleContainerHoverDefault","input","toggleInputDisabled","inputContainer","toggleLabelDefault","toggleLabelSelected","subLabel","indicatorLabelContainer","indicatorLabelContainerAddPadding","removeButton","disabledColorCursor","expandButton","expandButtonPaddingTopRequired","errorContainer","children","childrenIsFinalItem","colorTextDisabled","colorTextError","alertContainer"],"mappings":"~~yDAKO~~,MAAMA,EAAS,CAClBC,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,gDAQZC,EAAe,WAMfC,EAAa,UASbC,EAA2B,UAI3BC,EAAmC,WAInCC,EAAS,WAkBTC,EAAoB,WAIpBC,EAAwB,WAIxBC,EAAgB,WAIhBC,EAAuC,UAKvCC,EAA+B,UAI/BC,EAA+B,WAK/BC,EAAuB,UAIvBC,EAAoB,WAIpBC,EAA+B,WAK/BC,EAAuB,WAKvBC,EAAuB,WAKvBC,EAA4B,WAgB5BC,EAAe,WAIfC,EAA2B,UAQ3BC,EAAK,WAeLC,EAAmB,UAInBC,EAAc,UAIdzB,EAAK,WAoBL0B,EAAkB,WAIlBC,EAAmB,UAInBC,EAAQ,WAaRC,EAAuB,WAQvBC,EAAiC,UAIjCC,EAAY,WAWZC,EAAmB,WAKnBC,EAAY,UAmBZC,EAA8B,UAI9BC,EAAc,WASdC,EAAQ,WAQRC,EAAmB,UAInBC,EAAiB,WAIjBC,EAAc,WAIdC,EAAc"}
1	+ {"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n label: {\n desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n },\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: anywhere;\n width: 100%;\n overflow: hidden;\n color: ${Colour.text};\n`;\n\nexport const toggleTextContainerSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n position: relative;\n display: inline-flex;\n min-width: 10.375rem;\n border-radius: ${Radius[\"sm\"]};\n border-width: 1px;\n border-style: solid;\n overflow: hidden;\n flex-direction: column;\n height: fit-content;\n background: ${Colour.bg};\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const noIndicatorContainer = css`\n justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n min-width: unset;\n`;\n\nexport const colorBorderError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n border: none;\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n border: none;\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n border: none;\n`;\n\nexport const toggleContainerError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n border-color: ${Colour[\"border-selected-disabled\"]};\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n border-color: ${Colour[\"border-disabled\"]};\n background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n border-color: ${Colour[\"border-selected\"]};\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerHoverSelected = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-selected-hover\"]};\n\n & .${textContainer} {\n color: ${Colour[\"text-selected-hover\"]};\n }\n\n & .${toggleIconStyles.wrapperBase} {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n }\n }\n`;\n\nexport const toggleContainer = css`\n border-color: ${Colour.border};\n`;\n\nexport const toggleContainerHoverDefault = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n }\n`;\n\nexport const input = css`\n position: absolute;\n height: 100%;\n width: 100%;\n cursor: pointer;\n top: 0;\n left: 0;\n opacity: 0;\n\n /* Hide appearance but keep it focusable using keyboard interactions */\n appearance: none;\n background: transparent;\n border: none;\n`;\n\nexport const toggleInputDisabled = css`\n cursor: not-allowed;\n`;\n\nexport const inputContainer = css`\n display: flex;\n`;\n\nexport const label = css`\n overflow: hidden;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n\n ${tokens.label.desktopLineClamp}: initial;\n ${tokens.label.tabletLineClamp}: initial;\n ${tokens.label.mobileLineClamp}: initial;\n\n -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n ${MediaQuery.MaxWidth.lg} {\n -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n }\n ${MediaQuery.MaxWidth.sm} {\n -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n }\n`;\n\nexport const toggleLabelDefault = css`\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n ${Font[\"body-md-regular\"]}\n margin-top: 0.5rem;\n\n z-index: 1; // forces sublabel to render above the input\n pointer-events: none; // to allow click events to be passed to the input\n\n strong,\n b {\n ${Font[\"body-md-semibold\"]}\n }\n`;\n\nexport const indicatorLabelContainer = css`\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n color: ${Colour[\"text-error\"]};\n white-space: nowrap;\n ${Font[\"body-md-semibold\"]}\n height: fit-content;\n padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n color: ${Colour[\"text-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n color: ${Colour[\"text-primary\"]};\n ${Font[\"body-baseline-semibold\"]}\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background-color: ${Colour.bg};\n cursor: pointer;\n padding: 0 1rem 0.6875rem 1rem;\n width: 100%;\n\n svg {\n width: 1em;\n height: 1em;\n margin-left: 0.5rem;\n }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n width: 100%;\n color: ${Colour[\"text-error\"]};\n border: none;\n background: ${Colour.bg};\n cursor: pointer;\n padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n padding: 0 1rem;\n padding-top: 0.6875rem;\n padding-bottom: 0.5rem;\n background-color: ${Colour.bg};\n color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n width: 100%;\n user-select: none;\n`;\n"],"names":["tokens","label","desktopLineClamp","tabletLineClamp","mobileLineClamp","headerContainer","textContainer","toggleTextContainerSelected","toggleTextContainerDisabledSelected","container","noIndicatorContainer","useContentWidthContainer","colorBorderError","toggleContainerNoBorderDisabledSelected","toggleContainerNoBorderDisabled","toggleContainerNoBorderSelected","toggleContainerNoBorder","toggleContainerError","toggleContainerDisabledSelected","toggleContainerDisabled","toggleContainerSelected","toggleContainerHoverSelected","toggleContainer","toggleContainerHoverDefault","input","toggleInputDisabled","inputContainer","toggleLabelDefault","toggleLabelSelected","subLabel","indicatorLabelContainer","indicatorLabelContainerAddPadding","removeButton","disabledColorCursor","expandButton","expandButtonPaddingTopRequired","errorContainer","children","childrenIsFinalItem","colorTextDisabled","colorTextError","alertContainer"],"mappings":"0DAKO,MAAMA,EAAS,CAClBC,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,gDAQZC,EAAe,WAMfC,EAAa,UASbC,EAA2B,UAI3BC,EAAmC,WAInCC,EAAS,WAkBTC,EAAoB,WAIpBC,EAAwB,WAIxBC,EAAgB,WAIhBC,EAAuC,UAKvCC,EAA+B,UAI/BC,EAA+B,WAK/BC,EAAuB,UAIvBC,EAAoB,WAIpBC,EAA+B,WAK/BC,EAAuB,WAKvBC,EAAuB,WAKvBC,EAA4B,WAgB5BC,EAAe,WAIfC,EAA2B,UAQ3BC,EAAK,WAeLC,EAAmB,UAInBC,EAAc,UAIdzB,EAAK,WAoBL0B,EAAkB,WAIlBC,EAAmB,UAInBC,EAAQ,WAaRC,EAAuB,WAQvBC,EAAiC,UAIjCC,EAAY,WAWZC,EAAmB,WAKnBC,EAAY,UAmBZC,EAA8B,UAI9BC,EAAc,WASdC,EAAQ,WAQRC,EAAmB,UAInBC,EAAiB,WAIjBC,EAAc,WAIdC,EAAc"}

package/{cjs/toggle/toggle.styles_1yzqsu.css → toggle/toggle.styles_1t5qrye.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.h1fyul7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+@layer fds{.h1fyul7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
 .tybgacj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:anywhere;width:100%;overflow:hidden;color:var(--fds-colour-text);}
 .tvkjim3{color:var(--fds-colour-text-selected);}
 .t1aku79x{color:var(--fds-colour-text-selected-disabled);}
@@ -21,18 +21,18 @@
 .tovnc4j{cursor:not-allowed;}
 .iangfw6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .l1oixyvr{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;overflow-wrap:break-word;--fds-internal-toggle-label-desktopLineClamp:initial;--fds-internal-toggle-label-tabletLineClamp:initial;--fds-internal-toggle-label-mobileLineClamp:initial;-webkit-line-clamp:var(--fds-internal-toggle-label-desktopLineClamp, none);}:where(body.fds-breakpoint-lg-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
-.t1elmp69{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
-.tv1hw4w{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
-.s17sf3sp{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-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:0.5rem;z-index:1;pointer-events:none;}.s17sf3sp strong,.s17sf3sp b{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);}
+.t1elmp69{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.tv1hw4w{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s17sf3sp{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:0.5rem;z-index:1;pointer-events:none;}.s17sf3sp strong,.s17sf3sp b{font-family:var(--fds-font-family-body);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);}
 .i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
 .ih3od2r{padding:0.6875rem 0rem 0.6875rem 1rem;}
-.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;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);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
+.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;font-family:var(--fds-font-family-body);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);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
 .d194isif{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
-.ehwglic{color:var(--fds-colour-text-primary);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
+.ehwglic{color:var(--fds-colour-text-primary);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
 .ejwzsce{padding-top:0.6875rem;}
 .e1q8ywpe{width:100%;color:var(--fds-colour-text-error);border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
 .c1mf9nso{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
 .c9t56r4{padding-bottom:0.6875rem;}
 .c1y0x62l{color:var(--fds-colour-text-disabled);}
 .c1gmwtb7{color:var(--fds-colour-text-error);}
-.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}}

package/typography/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{BodySM as i,BodyMD as n,BodyBL as d,BodyXS as o,LinkMD as L,LinkBL as a,HeadingMD as e,HeadingSM as g,LinkSM as y,LinkXS as B,HeadingXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:e,HeadingSM:g,HeadingXS:H,BodyBL:d,BodyMD:n,BodySM:i,BodyXS:o,LinkBL:a,LinkMD:L,LinkSM:y,LinkXS:B};export{k as Typography};
+import{BodyMD as i,BodyBL as n,BodySM as d,BodyXS as o,LinkMD as L,LinkBL as a,HeadingMD as e,HeadingSM as g,LinkSM as y,LinkXS as B,HeadingXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:e,HeadingSM:g,HeadingXS:H,BodyBL:n,BodyMD:i,BodySM:d,BodyXS:o,LinkBL:a,LinkMD:L,LinkSM:y,LinkXS:B};export{k as Typography};
 //# sourceMappingURL=index.js.map

package/typography/typography-text.styles_1734x2k.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.hfl3ekz{font-size:var(--fds-font-heading-size-xxl);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
+@layer fds{.hfl3ekz{font-size:var(--fds-font-heading-size-xxl);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
 .h1wbj2xe{font-size:var(--fds-font-heading-size-xl);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
 .h1ml8c05{font-size:var(--fds-font-heading-size-lg);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
 .h12i879k{font-size:var(--fds-font-heading-size-md);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
@@ -11,4 +11,4 @@
 .lqvxzn1{font-weight:var(--fds-font-weight-light);}
 .r1kcu5nk{font-weight:var(--fds-font-weight-regular);}
 .s1pdcykv{font-weight:var(--fds-font-weight-semibold);}
-.b1rin8wh{font-weight:var(--fds-font-weight-bold);}
+.b1rin8wh{font-weight:var(--fds-font-weight-bold);}}

package/typography/typography.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{typographyBase as m,hyperlinkBase as l,noUnderline as d,underline as p,externalIcon as h,tokens as y,lineClamp as g,paragraph as c,displayInline as u,displayBlock as f}from"./typography.styles.js";import{typographySize as j,typographyWeight as x}from"./typography-text.styles.js";const b=e=>e||"regular",L=e=>j[e],N=e=>x[e],k=(e,r)=>r?c:e?u:f,S=(r,i,l)=>{const d=a.forwardRef((function(l,d){var{className:p,as:h,inline:c,maxLines:u,paragraph:f,weight:j}=l,x=e(l,["className","as","inline","maxLines","paragraph","weight"]);const S=b(j),B=a.useRef(null),v=o(B,d),w=((e,r,t)=>!!e&&(t||!r))(u,c,f);n(B,{[y.typographyBase.maxLines]:w?u:null});return t(c?"span":h||r,Object.assign({ref:v,className:s(m,L(i),N(S),k(c,f),w&&g,p)},x))}));return d.displayName=`Typography.${l}`,d},B=(e,r,t)=>S(e,r,t),v=B("h1","heading-xxl","HeadingXXL"),w=B("h2","heading-xl","HeadingXL"),H=B("h3","heading-lg","HeadingLG"),M=B("h4","heading-md","HeadingMD"),X=B("h5","heading-sm","HeadingSM"),D=B("h6","heading-xs","HeadingXS"),R=(e,r)=>S("p",e,r),q=R("body-baseline","BodyBL"),O=R("body-md","BodyMD"),T=R("body-sm","BodySM"),$=R("body-xs","BodyXS"),_=(n,o)=>{const y=a.forwardRef((function(a,o){var{weight:y,children:g,external:c,underlineStyle:u="underline",className:f}=a,j=e(a,["weight","children","external","underlineStyle","className"]);const x=b(y);return r("a",Object.assign({ref:o,className:s(m,l,L(n),N(x),"none"===u?d:p,f)},j,{children:[g,c&&t(i,{className:h})]}))}));return y.displayName=`Typography.${o}`,y},G=_("body-baseline","LinkBL"),z=_("body-md","LinkMD"),A=_("body-sm","LinkSM"),C=_("body-xs","LinkXS");export{q as BodyBL,O as BodyMD,T as BodySM,$ as BodyXS,H as HeadingLG,M as HeadingMD,X as HeadingSM,w as HeadingXL,D as HeadingXS,v as HeadingXXL,G as LinkBL,z as LinkMD,A as LinkSM,C as LinkXS};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{typographyBase as m,typographyBody as l,hyperlinkBase as d,noUnderline as p,underline as h,externalIcon as y,tokens as g,typographyHeader as c,lineClamp as u,paragraph as f,displayInline as j,displayBlock as x}from"./typography.styles.js";import{typographySize as b,typographyWeight as L}from"./typography-text.styles.js";const N=e=>e||"regular",k=e=>b[e],S=e=>L[e],B=(e,r)=>r?f:e?j:x,v=(r,i,d,p)=>{const h=a.forwardRef((function(d,h){var{className:y,as:f,inline:j,maxLines:x,paragraph:b,weight:L}=d,v=e(d,["className","as","inline","maxLines","paragraph","weight"]);const w=N(L),H=a.useRef(null),M=o(H,h),X=((e,r,t)=>!!e&&(t||!r))(x,j,b);n(H,{[g.typographyBase.maxLines]:X?x:null});return t(j?"span":f||r,Object.assign({ref:M,className:s(m,p?c:l,k(i),S(w),B(j,b),X&&u,y)},v))}));return h.displayName=`Typography.${d}`,h},w=(e,r,t)=>v(e,r,t,!0),H=w("h1","heading-xxl","HeadingXXL"),M=w("h2","heading-xl","HeadingXL"),X=w("h3","heading-lg","HeadingLG"),D=w("h4","heading-md","HeadingMD"),R=w("h5","heading-sm","HeadingSM"),q=w("h6","heading-xs","HeadingXS"),O=(e,r)=>v("p",e,r,!1),T=O("body-baseline","BodyBL"),$=O("body-md","BodyMD"),_=O("body-sm","BodySM"),G=O("body-xs","BodyXS"),z=(n,o)=>{const g=a.forwardRef((function(a,o){var{weight:g,children:c,external:u,underlineStyle:f="underline",className:j}=a,x=e(a,["weight","children","external","underlineStyle","className"]);const b=N(g);return r("a",Object.assign({ref:o,className:s(m,l,d,k(n),S(b),"none"===f?p:h,j)},x,{children:[c,u&&t(i,{className:y})]}))}));return g.displayName=`Typography.${o}`,g},A=z("body-baseline","LinkBL"),C=z("body-md","LinkMD"),E=z("body-sm","LinkSM"),F=z("body-xs","LinkXS");export{T as BodyBL,$ as BodyMD,_ as BodySM,G as BodyXS,X as HeadingLG,D as HeadingMD,R as HeadingSM,M as HeadingXL,q as HeadingXS,H as HeadingXXL,A as LinkBL,C as LinkMD,E as LinkSM,F as LinkXS};
 //# sourceMappingURL=typography.js.map

package/typography/typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"~~whCAeA~~,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,~~EAAMf~~,OACVA,~~EAAMgB~~,SACNA,~~EAAQf~~,UACRA,EAASR,OACTA,~~GAAMkB~~,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,~~EAAa3B~~,EAAcC,~~GAC3B2B~~,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,~~EA7BU~~,EACpBR,~~EACAhB~~,EACAC,~~MACGe~~,~~IAAaf~~,IAAcD,~~GAyBNyB~~,CAAgBT,~~EAAUhB~~,EAAQC,~~GAEtDyB~~,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,~~EAHY7B~~,EAAS,~~OAASe~~,~~GAAUT~~,~~EAGhCwB~~,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,~~EACAvC~~,EAA2BC,GAC3BE,~~EAA6BsB~~,~~GAC7BpB~~,EAA8BC,EAAQC,~~GACtCuB~~,~~GAAeU~~,~~EACfrB~~,IAEAI,GAGhB,IAKA,OAFIT,~~EACFD~~,YAAc,cAAcA,~~IACvBC~~,CAAc,~~EAGnB2B~~,EAAgB,~~CAClB7B~~,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,~~GAGnC6B~~,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,~~CAAC/C~~,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,~~GAGnCoC~~,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,~~CACxBpD~~,EACAY,KAEA,~~MAAMyC~~,~~EAAYvC~~,EAAMC,YACpB,SACIC,EAQAC,GARA,~~IAAAnB~~,OACIA,~~EAAMwD~~,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,~~YAAWtC~~,UAC5BA,GAASF,~~EACNyC~~,~~EAAKlC~~,EAAAP,EANZ,+DAUA,MAAMQ,~~EAAa3B~~,EAAcC,GAEjC,~~OACI4D~~,EAAA,~~IAAAvB~~,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAqB,~~EACA5D~~,EAA2BC,GAC3BE,~~EAA6BsB~~,GACV,~~SAAnBgC~~,EACMI,EACAC,~~EACN3C~~,~~IAEAuC~~,EAAK,CAAAH,SAAA,CAERA,EACAC,~~GACGrB~~,~~EAAC4B~~,EAAY,~~CAAC5C~~,~~UAAW6C~~,OAIzC,IAMJ,OAFIV,~~EACFzC~~,YAAc,cAAcA,~~IACvByC~~,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}
1	+ {"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string,\n isHeading: boolean\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n isHeading ? styles.typographyHeader : styles.typographyBody,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName, true);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName, false);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.typographyBody,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","isHeading","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.typographyHeader","styles.typographyBody","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"kkCAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,EACAC,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMhB,OACVA,EAAMiB,SACNA,EAAQhB,UACRA,EAASR,OACTA,GAAMmB,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,EAAa5B,EAAcC,GAC3B4B,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,EA9BU,EACpBR,EACAjB,EACAC,MACGgB,IAAahB,IAAcD,GA0BN0B,CAAgBT,EAAUjB,EAAQC,GAEtD0B,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,EAHY9B,EAAS,OAASgB,GAAUV,EAGhCyB,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,EACA1B,EAAY2B,EAA0BC,EACtC1C,EAA2BC,GAC3BE,EAA6BuB,GAC7BrB,EAA8BC,EAAQC,GACtCwB,GAAeY,EACfvB,IAEAI,GAGhB,IAKA,OAFIT,EACFF,YAAc,cAAcA,IACvBE,CAAc,EAGnB6B,EAAgB,CAClBhC,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAAa,GAGhDgC,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,CAAClD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAAa,GAGhDuC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBvD,EACAY,KAEA,MAAM4C,EAAYzC,EAAMC,YACpB,SACIC,EAQAC,GARA,IAAApB,OACIA,EAAM2D,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWxC,UAC5BA,GAASF,EACN2C,EAAKpC,EAAAP,EANZ,+DAUA,MAAMQ,EAAa5B,EAAcC,GAEjC,OACI+D,EAAA,IAAAzB,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAE,EACAqB,EACA/D,EAA2BC,GAC3BE,EAA6BuB,GACV,SAAnBkC,EACMI,EACAC,EACN7C,IAEAyC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGvB,EAAC8B,EAAY,CAAC9C,UAAW+C,OAIzC,IAMJ,OAFIV,EACF5C,YAAc,cAAcA,IACvB4C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

package/typography/typography.styles.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ export declare const tokens: {
     };
 };
 export declare const typographyBase: import("@linaria/core").LinariaClassName;
+export declare const typographyHeader: import("@linaria/core").LinariaClassName;
+export declare const typographyBody: import("@linaria/core").LinariaClassName;
 export declare const displayInline: import("@linaria/core").LinariaClassName;
 export declare const displayBlock: import("@linaria/core").LinariaClassName;
 export declare const paragraph: import("@linaria/core").LinariaClassName;

package/typography/typography.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./typography-text.styles_1734x2k.css";import"./typography.styles_1jqils.css";const p={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},s="ts2ljtd",t="du0nvfw",y="d1ruq6ql",a="p1cfdq56",o="l4n1hjq",r="h1ydob6f",e="u1w2xa0l",h="nspw24h",l="e3g791q";export{y as displayBlock,t as displayInline,l as externalIcon,r as hyperlinkBase,o as lineClamp,h as noUnderline,a as paragraph,p as tokens,s as typographyBase,e as underline};
+import"./typography-text.styles_1734x2k.css";import"./typography.styles_1wd82dn.css";const t={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},p="ts2ljtd",s="tu0nvfw",y="t1ruq6ql",a="d1cfdq56",o="d4n1hjq",r="p1ydob6f",e="l1w2xa0l",d="hspw24h",h="u3g791q",n="nlbpwo0",l="e1f7dy7t";export{o as displayBlock,a as displayInline,l as externalIcon,d as hyperlinkBase,e as lineClamp,n as noUnderline,r as paragraph,t as tokens,p as typographyBase,y as typographyBody,s as typographyHeader,h as underline};
 //# sourceMappingURL=typography.styles.js.map

package/typography/typography.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-~~family~~: ${Font.Spec[\"font-~~family~~\"]};\n font-~~variant~~: ${Font.Spec[\"font-~~variant~~\"]};\n ~~color~~: ${~~Colour~~.~~text~~};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: ~~middle~~;\n`;\n"],"names":["tokens","typographyBase","maxLines","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"~~wIAOO~~,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,~~UAOdE~~,EAAa,~~UAKbC~~,EAAY,~~WAKZC~~,EAAS,WAKTC,EAAS,~~UAITC~~,EAAa,~~WAUbC~~,EAAS,~~WAITC~~,EAAW,UAIXC,EAAY"}
1	+ {"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-variant: ${Font.Spec[\"font-variant\"]};\n color: ${Colour.text};\n`;\n\nexport const typographyHeader = css`\n font-family: ${Font.Spec[\"font-family-heading\"]};\n`;\n\nexport const typographyBody = css`\n font-family: ${Font.Spec[\"font-family-body\"]};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: top;\n`;\n"],"names":["tokens","typographyBase","maxLines","typographyHeader","typographyBody","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"yIAOO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,UAMdE,EAAgB,UAIhBC,EAAc,WAIdC,EAAa,WAKbC,EAAY,UAKZC,EAAS,WAKTC,EAAS,WAITC,EAAa,UAUbC,EAAS,UAITC,EAAW,UAIXC,EAAY"}

package/typography/typography.styles_1wd82dn.css ADDED Viewed

@@ -0,0 +1,11 @@
+@layer fds{.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.tu0nvfw{font-family:var(--fds-font-family-heading);}
+.t1ruq6ql{font-family:var(--fds-font-family-body);}
+.d1cfdq56{display:inline;margin-bottom:0;}
+.d4n1hjq{display:block;margin-bottom:0;}
+.p1ydob6f{display:block;margin-bottom:1.05em;}
+.l1w2xa0l{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.hspw24h{color:var(--fds-colour-hyperlink);}.hspw24h:hover,.hspw24h:active,.hspw24h:focus{color:var(--fds-colour-text-hover);}
+.u3g791q{-webkit-text-decoration:underline;text-decoration:underline;}
+.nlbpwo0{-webkit-text-decoration:none;text-decoration:none;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:top;}}

package/uneditable-section/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "./types";
-export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const UneditableSection: ((props: import("./types").UneditableSectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
     ItemSection: (props: import("./types").UneditableSectionItemSectionProps & import("react").RefAttributes<HTMLUListElement>) => React.ReactElement | null;
     Item: ({ label, value, displayWidth, maskState, maskLoadingState, maskChar, maskRange, unmaskRange, maskRegex, disableMaskUnmask, alert, maskTransformer, onMask, onUnmask, onTryAgain, fullWidth, }: import("./section-item").UneditableSectionItemComponentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/uneditable-section/section-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./section-item.styles_1dfjzc4.css";const e="cfqoxdt",t="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,e as container,i as errorIcon,p as errorLabel,t as iconContainer,l as loadingLabel,s as spinner,o as tryAgainLabel};
+import"./section-item.styles_mwx8ht.css";const t="cfqoxdt",e="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,t as container,i as errorIcon,p as errorLabel,e as iconContainer,l as loadingLabel,s as spinner,o as tryAgainLabel};
 //# sourceMappingURL=section-item.styles.js.map

package/uneditable-section/section-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: break-word;\n\n &[data-width=\"half\"] {\n grid-column: auto / span 4;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 1;\n }\n }\n\n &[data-width=\"full\"] {\n grid-column: auto / span 8;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 2;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &[data-width=\"half\"],\n &[data-width=\"full\"] {\n grid-column: 1 / -1;\n\n &[data-full-width=\"true\"] {\n grid-column: 1 / -1;\n }\n }\n }\n`;\n\nexport const iconContainer = css`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const clickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n margin-right: 0.5rem;\n color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n margin-top: 0.5rem;\n`;\n"],"names":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"~~4EAOO~~,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}
1	+ {"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: break-word;\n\n &[data-width=\"half\"] {\n grid-column: auto / span 4;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 1;\n }\n }\n\n &[data-width=\"full\"] {\n grid-column: auto / span 8;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 2;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &[data-width=\"half\"],\n &[data-width=\"full\"] {\n grid-column: 1 / -1;\n\n &[data-full-width=\"true\"] {\n grid-column: 1 / -1;\n }\n }\n }\n`;\n\nexport const iconContainer = css`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const clickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n margin-right: 0.5rem;\n color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n margin-top: 0.5rem;\n`;\n"],"names":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"2EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

package/uneditable-section/section-item.styles_mwx8ht.css ADDED Viewed

@@ -0,0 +1,9 @@
+@layer fds{.cfqoxdt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;}.cfqoxdt[data-width="half"]{grid-column:auto/span 4;}.cfqoxdt[data-width="half"][data-full-width="true"]{grid-column:auto/span 1;}.cfqoxdt[data-width="full"]{grid-column:auto/span 8;}.cfqoxdt[data-width="full"][data-full-width="true"]{grid-column:auto/span 2;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"]{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"][data-full-width="true"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"][data-full-width="true"]{-ms-grid-column:1/-1;grid-column:1/-1;}
+.i6tvpcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-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;color:var(--fds-colour-icon-primary);margin-left:0.5rem;}.i6tvpcl svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.c988p37{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-wrap:anywhere;text-align:left;}.c988p37 span{overflow-wrap:anywhere;text-align:left;}
+.l1fg6lie{color:var(--fds-colour-text-disabled);}
+.s186v6u4{margin-right:0.5rem;color:var(--fds-colour-text-disabled);}
+.e13rb6hl{color:var(--fds-colour-icon-warning);margin-right:0.5rem;height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);}
+.e13pxbfu{color:var(--fds-colour-text-warning);}
+.t1dzpnph{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;margin-left:0.5rem;}
+.a1celal9{margin-top:0.5rem;}}

package/uneditable-section/uneditable-section.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
+import React from "react";
 import type { UneditableSectionProps } from "./types";
-export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UneditableSectionBase: (props: UneditableSectionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/uneditable-section/uneditable-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e,Fragment as n}from"react/jsx-runtime";import s from"clsx";import{Layout as o}from"../layout/index.js";import{Typography as r}from"../typography/index.js";import{UneditableSectionItem as a}from"./section-item.js";import{wrapperBackground as c,wrapper as l,title as m,columnWidthStretch as d,description as h,customSection as p,gridUl as u,gridUlFullWidth as g}from"./uneditable-section.styles.js";const b=b=>{var{items:f,title:j,description:y,topSection:N,bottomSection:k,children:v,background:x=!0,stretch:S,fullWidth:M,onMask:A,onUnmask:O,onTryAgain:T,className:U}=b,W=t(b,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const B=t=>()=>{A&&A(t)},_=t=>()=>{O&&O(t)},w=t=>()=>{T&&T(t)},C=()=>{if(f&&f.length>0){const t=f.map(((t,e)=>i(a,Object.assign({},t,{onMask:B(t),onUnmask:_(t),onTryAgain:w(t),fullWidth:M}),e)));return i("ul",{className:s(u,S&&d,M&&g),children:t})}return null},H=()=>v||e(n,{children:[j&&i(r.HeadingSM,{as:"h2",weight:"semibold",className:s(m,S&&d),children:j}),y&&i(r.BodyBL,{className:s(h,S&&d),children:y}),N&&i("div",{"data-id":"top-section",className:s(p,S&&d),children:N}),C(),k&&i("div",{"data-id":"bottom-section",className:s(p,S&&d),children:k})]});return M?i("div",Object.assign({className:s(x&&c,U)},W,{children:H()})):i(o.Content,Object.assign({className:s(l,x&&c,U)},W,{type:"grid",children:H()}))};export{b as UneditableSectionBase};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e,jsxs as i,Fragment as n}from"react/jsx-runtime";import o from"clsx";import s from"react";import{Layout as r}from"../layout/index.js";import{Typography as a}from"../typography/index.js";import{UneditableSectionItem as c}from"./section-item.js";import{wrapperBackground as l,wrapper as m,title as d,columnWidthStretch as h,description as p,customSection as f,gridUl as u,gridUlFullWidth as g}from"./uneditable-section.styles.js";const b=s.forwardRef(((s,b)=>{var{items:y,title:N,description:j,topSection:k,bottomSection:S,children:v,background:x=!0,stretch:M,fullWidth:U,onMask:A,onUnmask:O,onTryAgain:T,className:W}=s,w=t(s,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const B=t=>()=>{A&&A(t)},_=t=>()=>{O&&O(t)},C=t=>()=>{T&&T(t)},H=()=>{if(y&&y.length>0){const t=y.map(((t,i)=>e(c,Object.assign({},t,{onMask:B(t),onUnmask:_(t),onTryAgain:C(t),fullWidth:U}),i)));return e("ul",{className:o(u,M&&h,U&&g),children:t})}return null},L=()=>v||i(n,{children:[N&&e(a.HeadingSM,{as:"h2",weight:"semibold",className:o(d,M&&h),children:N}),j&&e(a.BodyBL,{className:o(p,M&&h),children:j}),k&&e("div",{"data-id":"top-section",className:o(f,M&&h),children:k}),H(),S&&e("div",{"data-id":"bottom-section",className:o(f,M&&h),children:S})]});return U?e("div",Object.assign({ref:b,className:o(x&&l,W)},w,{children:L()})):e(r.Content,Object.assign({ref:b,className:o(m,x&&l,W)},w,{type:"grid",children:L()}))}));b.displayName="UneditableSection";export{b as UneditableSectionBase};
 //# sourceMappingURL=uneditable-section.js.map

package/uneditable-section/uneditable-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n UneditableSectionItemProps,\n UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\~~nexport~~ ~~const~~ ~~UneditableSectionBase~~ = ({\n items,\n title,\n description,\n topSection,\n bottomSection,\n children,\n background = true,\n stretch,\n fullWidth,\n onMask,\n onUnmask,\n onTryAgain,\n className,\n ...otherProps\n}: UneditableSectionProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleItemMask = (item: UneditableSectionItemProps) => () => {\n if (onMask) onMask(item);\n };\n\n const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n if (onUnmask) onUnmask(item);\n };\n\n const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n if (onTryAgain) onTryAgain(item);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderItems = () => {\n if (items && items.length > 0) {\n const renderedItems = items.map((item, index) => {\n return (\n <UneditableSectionItem\n key={index}\n {...item}\n onMask={handleItemMask(item)}\n onUnmask={handleItemUnmask(item)}\n onTryAgain={handleTryAgain(item)}\n fullWidth={fullWidth}\n />\n );\n });\n\n return (\n <ul\n className={clsx(\n styles.gridUl,\n stretch && styles.columnWidthStretch,\n fullWidth && styles.gridUlFullWidth\n )}\n >\n {renderedItems}\n </ul>\n );\n }\n\n return null;\n };\n\n const renderChildren = () => {\n if (children) {\n return children;\n }\n\n return (\n <>\n {title && (\n <Typography.HeadingSM\n as=\"h2\"\n weight=\"semibold\"\n className={clsx(\n styles.title,\n stretch && styles.columnWidthStretch\n )}\n >\n {title}\n </Typography.HeadingSM>\n )}\n {description && (\n <Typography.BodyBL\n className={clsx(\n styles.description,\n stretch && styles.columnWidthStretch\n )}\n >\n {description}\n </Typography.BodyBL>\n )}\n {topSection && (\n <div\n data-id=\"top-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {topSection}\n </div>\n )}\n {renderItems()}\n {bottomSection && (\n <div\n data-id=\"bottom-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {bottomSection}\n </div>\n )}\n </>\n );\n };\n\n if (fullWidth) {\n return (\n <div\n className={clsx(\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n >\n {renderChildren()}\n </div>\n );\n }\n return (\n <Layout.Content\n className={clsx(\n styles.wrapper,\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n type=\"grid\"\n >\n {renderChildren()}\n </Layout.Content>\n );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"~~qdAWO~~,~~MAAMA~~,~~EAAyBC~~,~~IAAA~~,IAAAC,~~MAClCA~~,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,~~GAASb~~,~~EACNc~~,EAAUC,~~EAAAf~~,~~EAdqB~~,~~yJAmBlC~~,~~MAAMgB~~,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,~~uBACIZ~~,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,~~YAEHmB~~,OAKTR,EAACoB,EAAOC,~~QAAOnB~~,~~OAAAC~~,~~OAAA~~,~~CACXf,~~UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}
1	+ {"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n UneditableSectionItemProps,\n UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n {\n items,\n title,\n description,\n topSection,\n bottomSection,\n children,\n background = true,\n stretch,\n fullWidth,\n onMask,\n onUnmask,\n onTryAgain,\n className,\n ...otherProps\n }: UneditableSectionProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleItemMask = (item: UneditableSectionItemProps) => () => {\n if (onMask) onMask(item);\n };\n\n const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n if (onUnmask) onUnmask(item);\n };\n\n const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n if (onTryAgain) onTryAgain(item);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderItems = () => {\n if (items && items.length > 0) {\n const renderedItems = items.map((item, index) => {\n return (\n <UneditableSectionItem\n key={index}\n {...item}\n onMask={handleItemMask(item)}\n onUnmask={handleItemUnmask(item)}\n onTryAgain={handleTryAgain(item)}\n fullWidth={fullWidth}\n />\n );\n });\n\n return (\n <ul\n className={clsx(\n styles.gridUl,\n stretch && styles.columnWidthStretch,\n fullWidth && styles.gridUlFullWidth\n )}\n >\n {renderedItems}\n </ul>\n );\n }\n\n return null;\n };\n\n const renderChildren = () => {\n if (children) {\n return children;\n }\n\n return (\n <>\n {title && (\n <Typography.HeadingSM\n as=\"h2\"\n weight=\"semibold\"\n className={clsx(\n styles.title,\n stretch && styles.columnWidthStretch\n )}\n >\n {title}\n </Typography.HeadingSM>\n )}\n {description && (\n <Typography.BodyBL\n className={clsx(\n styles.description,\n stretch && styles.columnWidthStretch\n )}\n >\n {description}\n </Typography.BodyBL>\n )}\n {topSection && (\n <div\n data-id=\"top-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {topSection}\n </div>\n )}\n {renderItems()}\n {bottomSection && (\n <div\n data-id=\"bottom-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {bottomSection}\n </div>\n )}\n </>\n );\n };\n\n if (fullWidth) {\n return (\n <div\n ref={ref}\n className={clsx(\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n >\n {renderChildren()}\n </div>\n );\n }\n return (\n <Layout.Content\n ref={ref}\n className={clsx(\n styles.wrapper,\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n type=\"grid\"\n >\n {renderChildren()}\n </Layout.Content>\n );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0eAaA,MA0JaA,EAAwBC,EAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAACoB,EAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

package/uneditable-section/uneditable-section.styles_aj9zun.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
+@layer fds{.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
 .wbsp4gm{padding-top:2rem;padding-bottom:2rem;}
 .w3q0cqh{background:var(--fds-colour-bg-strong);}
 .t29kg6u{margin-bottom:1rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .t29kg6u{-ms-grid-column:1/-1;grid-column:1/-1;}
 .dkpvxbb{margin-bottom:2rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .dkpvxbb{-ms-grid-column:1/-1;grid-column:1/-1;}
 .ctukz41{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .ctukz41{-ms-grid-column:1/-1;grid-column:1/-1;}
 .g11duom5{grid-column:span 8;-webkit-column-gap:2rem;column-gap:2rem;row-gap:2rem;display:-ms-grid;display:grid;-ms-grid-columns:repeat(8, minmax(0, 1fr));grid-template-columns:repeat(8, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .g11duom5{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .g11duom5{-webkit-column-gap:1.5rem;column-gap:1.5rem;}:where(body.fds-breakpoint-sm-max) .g11duom5{-webkit-column-gap:1rem;column-gap:1rem;}.g11duom5:not(:last-child){margin-bottom:2rem;}
-.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}
+.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}}

package/unit-number/unit-number-input.styles_8yizj.css CHANGED Viewed

@@ -1,7 +1,7 @@
-.h1ujh1ah{margin-right:0.5rem;}
+@layer fds{.h1ujh1ah{margin-right:0.5rem;}
 .i1a7rbgo input{text-align:center;}
 .fqv7th5{width:2.5rem;}
 .u1g8qqjx{margin-left:0.5rem;width:6rem;}.u1g8qqjx input{text-align:left;}
 .u52196f{margin:0 0.25rem;}
 .urthzty{color:var(--fds-colour-text-disabled);}
-.rwsbmaf{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;height:calc(3rem - 2px);}
+.rwsbmaf{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;height:calc(3rem - 2px);}}

package/util/is-styled-components.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+type StyledComponentBrand = {
+    readonly _sc: symbol;
+};
+export default function isStyledComponent(target: any): target is StyledComponentBrand;
+export {};

package/util/is-styled-components.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function t(t){return null!=t&&("function"==typeof t\|\|"object"==typeof t)&&"styledComponentId"in t}export{t as default};
2	+ //# sourceMappingURL=is-styled-components.js.map

package/util/is-styled-components.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"is-styled-components.js","sources":["../../src/util/is-styled-components.ts"],"sourcesContent":["/*\n Extracted isStyledComponent function from styled-components repo \n Refer to the original implementation here:\n https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/isStyledComponent.ts\n*/\n\ntype StyledComponentBrand = { readonly _sc: symbol };\n\nexport default function isStyledComponent(\n target: any\n): target is StyledComponentBrand {\n return (\n target != null &&\n (typeof target === \"function\" || typeof target === \"object\") &&\n \"styledComponentId\" in target\n );\n}\n"],"names":["isStyledComponent","target"],"mappings":"AAQc,SAAUA,EACpBC,GAEA,OACc,MAAVA,IACmB,mBAAXA,GAA2C,iBAAXA,IACxC,sBAAuBA,CAE/B"}

package/util/styling-helper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{BorderThickness as e}from"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as t}from"../theme/tokens/radius.js";import{isTokenWithPrefix as r,isTokenFromSet as o}from"../theme/utils/token-resolver.js";import"./calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"./simple-id-generator.js";import"./string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";const m=new Set(Object.values(t)),s=new Set(Object.values(e)),i=e=>o(e,m),p=e=>o(e,s),n=e=>r(e,"var(--fds-colour-");export{n as isColourToken,i as isRadiusToken,p as isThicknessToken};
+import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{BorderThickness as e}from"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as t}from"../theme/tokens/radius.js";import"./calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"./simple-id-generator.js";import"./string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{isTokenWithPrefix as r,isTokenFromSet as o}from"../theme/utils/token-resolver.js";const m=new Set(Object.values(t)),s=new Set(Object.values(e)),i=e=>o(e,m),p=e=>o(e,s),n=e=>r(e,"var(--fds-colour-");export{n as isColourToken,i as isRadiusToken,p as isThicknessToken};
 //# sourceMappingURL=styling-helper.js.map

package/util/styling-helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styling-helper.js","sources":["../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n ColourCSSVariableString,\n RadiusCSSVariableString,\n} from \"../theme\";\nimport {\~~n BorderThickness,\n~~ isTokenFromSet~~,\n~~ isTokenWithPrefix~~,\n Radius,\n~~} from \"../theme\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n value: unknown\n): value is RadiusCSSVariableString => {\n return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n value,\n thicknessTokenSet\n );\n};\n\nexport const isColourToken = (\n value: unknown\n): value is ColourCSSVariableString => {\n return isTokenWithPrefix<ColourCSSVariableString>(\n value,\n \"var(--fds-colour-\"\n );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix"],"mappings":"~~gmBAYA~~,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAE3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA"}
1	+ {"version":3,"file":"styling-helper.js","sources":["../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n ColourCSSVariableString,\n RadiusCSSVariableString,\n} from \"../theme\";\nimport { BorderThickness, Radius } from \"../theme\";\nimport { isTokenFromSet, isTokenWithPrefix } from \"../theme/utils\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n value: unknown\n): value is RadiusCSSVariableString => {\n return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n value,\n thicknessTokenSet\n );\n};\n\nexport const isColourToken = (\n value: unknown\n): value is ColourCSSVariableString => {\n return isTokenWithPrefix<ColourCSSVariableString>(\n value,\n \"var(--fds-colour-\"\n );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix"],"mappings":"gmBAQA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAE3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA"}

package/badge/badge.styles_1yrxocm.css DELETED Viewed

@@ -1,16 +0,0 @@
-.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
-.bt512pc{position:absolute;top:0;right:0;-webkit-transform:translate(50%, -25%) translate(
-            var(--fds-internal-badge-wrapper-offsetX, 0px),
-            var(--fds-internal-badge-wrapper-offsetY, 0px)
-        );-moz-transform:translate(50%, -25%) translate(
-            var(--fds-internal-badge-wrapper-offsetX, 0px),
-            var(--fds-internal-badge-wrapper-offsetY, 0px)
-        );-ms-transform:translate(50%, -25%) translate(
-            var(--fds-internal-badge-wrapper-offsetX, 0px),
-            var(--fds-internal-badge-wrapper-offsetY, 0px)
-        );transform:translate(50%, -25%) translate(
-            var(--fds-internal-badge-wrapper-offsetX, 0px),
-            var(--fds-internal-badge-wrapper-offsetY, 0px)
-        );}
-.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}