npm - @cruk/cruk-react-components - Versions diffs - 4.2.2 → 5.0.0 - Mend

@cruk/cruk-react-components 4.2.2 → 5.0.0

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

package/lib/src/components/Pagination/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n theme: ThemeType;\n};\n\ntype PaginationStyledProps = ThemeProps & {\n active?: boolean;\n name?: string;\n disabled?: boolean;\n};\n\nexport const PagerWrapper = styled.div<PaginationStyledProps>`\n display: table;\n width: 100%;\n clear: both;\n text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n display: inline-block;\n padding-left: 0;\n margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<PaginationStyledProps>`\n font-weight: normal;\n font-family: ${({\n theme: {\n typography: { fontFamilyBase },\n },\n }: ThemeProps) => fontFamilyBase};\n font-size: ${({\n theme: {\n fontSizes: { s },\n },\n }: ThemeProps) => s};\n color: ${({ theme }: ThemeProps) => theme.colors.textLight};\n background-color: ${({ theme }: ThemeProps) =>\n theme.colors.paginationBackground};\n cursor: pointer;\n border-radius: 0;\n margin: ${({ theme }: ThemeProps) => theme.spacing.xxs};\n padding: 7px 11px;\n text-decoration: none;\n &:active,\n &:focus,\n &:hover {\n opacity: 0.88;\n text-decoration: underline;\n }\n &:visited {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: auto;\n }\n\n ${({ active, theme }: PaginationStyledProps) =>\n active &&\n css`\n color: ${theme.colors.textDark};\n background-color: ${theme.colors.paginationActive};\n cursor: default;\n &:hover {\n background-color: ${theme.colors.paginationActive};\n text-decoration: none;\n }\n `}\n\n ${({ name, theme, disabled }: PaginationStyledProps) =>\n (name === \"Prev\" || name === \"Next\") &&\n css`\n color: ${disabled ? theme.colors.disabled : theme.colors.paginationText};\n background-color: transparent;\n font-weight: bold;\n padding: 8px 6px;\n background-color: transparent;\n &:focus,\n &:hover {\n background-color: transparent;\n text-decoration: underline;\n }\n &:active,\n &:visited {\n text-decoration: none;\n }\n `}\n\n ${({ theme, disabled }: PaginationStyledProps) =>\n disabled &&\n css`\n color: $ ${theme.colors.disabled};\n cursor: not-allowed;\n pointer-events:none\n text-decoration: none;\n &:hover,\n &:focus,\n &:active,\n &:visited {\n color: ${theme.colors.disabled};\n text-decoration: none;\n }\n `}\n`;\n\nexport const PagerItem = styled.li<ThemeProps>`\n display: none;\n &:first-child,\n &:last-child {\n display: inline;\n }\n @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n display: inline;\n }\n span {\n border: none;\n min-width: 30px;\n padding: 5px;\n margin: 1px;\n border-radius: 0;\n border-width: ${(props) => props.theme.breakpoint.mobile};\n }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","active","css","templateObject_3","textDark","paginationActive","name","disabled","templateObject_4","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAaa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAuB,mFAOhDC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAAwBC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMtB,mBAKb,eACuC,0BAEvB,yDAGmB,0PA2BnD,SAmBA,SAgBA,SA7EY,SAACO,GAIE,OAFcA,EAAAC,MAAAC,WAAAC,cAEd,IACL,SAACH,GAII,OAFAA,EAAAC,MAAAG,UAAAC,CAEA,IACT,SAACL,GAA0B,OAAnBA,EAAAC,MAAyBK,OAAOC,SAAb,IAChB,SAACP,GACnB,OAD0BA,EAAAC,MACpBK,OAAOE,oBAAb,IAGQ,SAACR,GAA0B,OAAnBA,EAAAC,MAAyBQ,QAAQC,GAAd,IAiBnC,SAACV,OAAEW,EAAMX,EAAAW,OAAEV,EAAKD,EAAAC,MAChB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,IAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAAQjB,EAAAiB,SACxB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACsE,gVAA9DwB,EAAWhB,EAAMK,OAAOW,SAAWhB,EAAMK,OAAOa,eAF3D,IAkBA,SAACnB,OAAEC,EAAKD,EAAAC,MACR,OADkBD,EAAAiB,UAElBL,EAAGQ,IAAAA,EAAA3B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOW,SAQbhB,EAAMK,OAAOW,SAV1B,IAgBSI,EAAY/B,EAAOgC,GAAcC,IAAAA,EAAA9B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMiB,oKASH,eATrC,SAAC+B,GAAU,OAAAA,EAAMvB,MAAMwB,WAAWC,MAAM,IAS3C,SAACF,GAAU,OAAAA,EAAMvB,MAAMwB,WAAWC,MAAvB"}

package/lib/src/components/PopOver/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useRef as n,useState as o,useCallback as r,useEffect as i}from"react";import{useTheme as m,ThemeProvider as a}from"styled-components";import{useKey as c}from"../../hooks/useKey.js";import{crukTheme as l}from"../../themes/cruk.js";import{useEffectBrowser as s}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as u,PopOverModal as d}from"./styles.js";function f(f){var p=f.onPopOverIsOpenChange,h=f.children,E=f.minWidth,k=f.maxWidth,v=f.position,j=f.modalLabel,b=f.modalContent,g=f.css,x=f.full,y=void 0!==x&&x,C=n(null),W=o(!1),L=W[0],K=W[1],O=m(),w=e(e({},l),O),B=function(){return K(!L)},I=function(){return K(!1)},P=r((function(e){C.current&&!C.current.contains(e.target)&&I()}),[C.current]);return c((function(){I()}),{detectKeys:["Escape"]},[]),i((function(){p&&p(L)}),[L]),s((function(){return document.addEventListener("click",P,!0),function(){document.removeEventListener("click",P,!0)}}),[]),t.createElement(a,{theme:w},t.createElement(u,{full:y,css:g,ref:C},t.Children.map(h,(function(e){return t.cloneElement(e,{onClick:B,"aria-expanded":L,"aria-haspopup":"dialog"})})),L?t.createElement(d,{maxWidth:k\|\|"none",minWidth:E\|\|"auto",position:v\|\|"top",theme:w,role:"dialog","aria-label":j,"aria-modal":L},b):null))}export{f as PopOver,f as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/PopOver/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n useRef,\n useCallback,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n /** modalLabel: used for aria-label of modal */\n modalLabel: string;\n /** modalContent: contents in side the popover modal */\n modalContent: ReactNode;\n /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n position?: PopOverPositionType;\n /** full: enable child button extend full width */\n full?: boolean;\n /** maxWidth: popover modal max width */\n maxWidth?: string;\n /** minWidth: popover modal min width */\n minWidth?: string;\n /** onPopOverIsOpenChange: popover isOpen changed handler */\n onPopOverIsOpenChange?: (isOpen: boolean) => void;\n children?: ReactNode;\n css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n onPopOverIsOpenChange,\n children,\n minWidth,\n maxWidth,\n position,\n modalLabel,\n modalContent,\n css,\n full = false,\n}: PopOverProps) {\n const popRef = useRef<HTMLDivElement>(null);\n const [showPopOver, setShowPopOver] = useState(false);\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const toggle = () => setShowPopOver(!showPopOver);\n const closePopOver = () => setShowPopOver(false);\n\n // outside click closes popover\n const handleDocumentClick = useCallback(\n (e: MouseEvent) => {\n if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n closePopOver();\n }\n },\n [popRef.current],\n );\n\n useKey(\n () => {\n closePopOver();\n },\n {\n detectKeys: [\"Escape\"],\n },\n [],\n );\n\n useEffect(() => {\n if (onPopOverIsOpenChange) {\n onPopOverIsOpenChange(showPopOver);\n }\n }, [showPopOver]);\n\n useEffectBrowser(() => {\n document.addEventListener(\"click\", handleDocumentClick, true);\n return () => {\n document.removeEventListener(\"click\", handleDocumentClick, true);\n };\n }, []);\n\n return (\n <ThemeProvider theme={theme}>\n <PopOverWrapper full={full} css={css} ref={popRef}>\n {React.Children.map(\n children as ReactElement,\n (child: React.ReactElement) =>\n React.cloneElement(child, {\n onClick: toggle,\n \"aria-expanded\": showPopOver,\n \"aria-haspopup\": \"dialog\",\n }),\n )}\n {showPopOver ? (\n <PopOverModal\n maxWidth={maxWidth || \"none\"}\n minWidth={minWidth || \"auto\"}\n position={position || \"top\"}\n theme={theme}\n role=\"dialog\"\n aria-label={modalLabel}\n aria-modal={showPopOver}\n >\n {modalContent}\n </PopOverModal>\n ) : null}\n </PopOverWrapper>\n </ThemeProvider>\n );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","useCallback","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","ref","Children","map","child","cloneElement","onClick","PopOverModal","role"],"mappings":"sbAwCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAO,IAAAD,GAAKA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAC5BI,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAS,WAAM,OAAAN,GAAgBD,IAC/BQ,EAAe,WAAM,OAAAP,GAAe,EAAf,EAGrBQ,EAAsBC,GAC1B,SAACC,GACOf,EAAOgB,UAAYhB,EAAOgB,QAAQC,SAASF,EAAEG,SACjDN,GAEJ,GACA,CAACZ,EAAOgB,UA0BV,OAvBAG,GACE,WACEP,GACF,GACA,CACEQ,WAAY,CAAC,WAEf,IAGFC,GAAU,WACJ/B,GACFA,EAAsBc,EAE1B,GAAG,CAACA,IAEJkB,GAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASX,GAAqB,GACjD,WACLU,SAASE,oBAAoB,QAASZ,GAAqB,EAC7D,CACD,GAAE,IAGDa,EAACC,cAAAC,EAAc,CAAApB,MAAOA,GACpBkB,EAAAC,cAACE,EAAc,CAAC9B,KAAMA,EAAMF,IAAKA,EAAKiC,IAAK9B,GACxC0B,EAAMK,SAASC,IACdzC,GACA,SAAC0C,GACC,OAAAP,EAAMQ,aAAaD,EAAO,CACxBE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,UAHnB,IAMHA,EACCsB,gBAACU,EAAY,CACX3C,SAAUA,GAAY,OACtBD,SAAUA,GAAY,OACtBE,SAAUA,GAAY,MACtBc,MAAOA,EACP6B,KAAK,SACO,aAAA1C,EACA,aAAAS,GAEXR,GAED,MAIZ"}

package/lib/src/components/PopOver/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as t}from"../../../node_modules/tslib/tslib.es6.js";import n,{css as e}from"styled-components";var o,r,a,s=n.div(r\|\|(r=t(["\n position: relative;\n display: ",";\n ","\n"],["\n position: relative;\n display: ",";\n ","\n"])),(function(t){return t.full?"block":"inline-block"}),(function(n){return n.css&&e(o\|\|(o=t(["\n ","\n "],["\n ","\n "])),n.css)})),c=n.div(a\|\|(a=t(["\n position: absolute;\n display: flex;\n justify-content: center;\n word-wrap: break-word;\n z-index: 9999;\n max-width: ",";\n min-width: ",";\n font-size: ",";\n background-color: ",";\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.25);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n margin-bottom: ",";\n\n margin-top: ",";\n top: ",";\n\n bottom: ",";\n\n left: ",";\n right: ",';\n\n &:after,\n &:before {\n content: "";\n border-style: solid;\n border-width: 10px;\n width: 0;\n height: 0;\n position: absolute;\n top: ',";\n bottom: ",";\n\n left: ",";\n right: ",";\n }\n &:before {\n border-color: ",";\n }\n &:after {\n margin: ",";\n border-color: ",";\n }\n\n @media (min-width: ",") {\n margin-top: ",";\n\n margin-left: ",";\n margin-right: ",";\n\n top: ",";\n\n left: ",";\n right: ",';\n\n &:after,\n &:before {\n content: "";\n top: ',";\n bottom: ",";\n\n left: ",";\n right: ",";\n }\n &:before {\n border-color: ",";\n }\n &:after {\n margin: ",";\n border-color: ",";\n }\n }\n"],["\n position: absolute;\n display: flex;\n justify-content: center;\n word-wrap: break-word;\n z-index: 9999;\n max-width: ",";\n min-width: ",";\n font-size: ",";\n background-color: ",";\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.25);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n margin-bottom: ",";\n\n margin-top: ",";\n top: ",";\n\n bottom: ",";\n\n left: ",";\n right: ",';\n\n &:after,\n &:before {\n content: "";\n border-style: solid;\n border-width: 10px;\n width: 0;\n height: 0;\n position: absolute;\n top: ',";\n bottom: ",";\n\n left: ",";\n right: ",";\n }\n &:before {\n border-color: ",";\n }\n &:after {\n margin: ",";\n border-color: ",";\n }\n\n @media (min-width: ",") {\n margin-top: ",";\n\n margin-left: ",";\n margin-right: ",";\n\n top: ",";\n\n left: ",";\n right: ",';\n\n &:after,\n &:before {\n content: "";\n top: ',";\n bottom: ",";\n\n left: ",";\n right: ",";\n }\n &:before {\n border-color: ",";\n }\n &:after {\n margin: ",";\n border-color: ",";\n }\n }\n"])),(function(t){return t.maxWidth}),(function(t){return t.minWidth}),(function(t){return t.theme.fontSizes.s}),(function(t){return t.theme.colors.popoverBackground}),(function(t){switch(t.position){case"top":case"topLeft":case"bottomLeft":default:return"10px";case"left":case"right":case"bottom":return 0}}),(function(t){switch(t.position){case"bottom":case"bottomLeft":case"left":case"right":return"10px";default:return 0}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}),(function(t){return"top"===t.position?0:"auto"}),(function(t){switch(t.position){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"right":return"0"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}),(function(t){var n=t.position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"".concat(e.spacing.s);case"topLeft":case"right":case"bottomLeft":return"auto"}}),(function(t){var n=t.position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"right":case"bottomLeft":return"".concat(e.spacing.s)}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":case"right":case"bottom":case"bottomLeft":return"0 0 -1px 0"}}),(function(t){var n=t.theme;switch(t.position){case"top":case"topLeft":default:return"".concat(n.colors.popoverBackground," transparent transparent");case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent ".concat(n.colors.popoverBackground)}}),(function(t){return t.theme.breakpoint.desktop}),(function(t){switch(t.position){case"bottom":case"bottomLeft":return"10px";default:return 0}}),(function(t){return"right"===t.position?"10px":0}),(function(t){return"left"===t.position?"10px":0}),(function(t){switch(t.position){case"top":case"topLeft":default:return"auto";case"left":case"right":return 0;case"bottom":case"bottomLeft":return"100%"}}),(function(t){switch(t.position){case"top":return 0;case"topLeft":case"left":case"bottom":case"bottomLeft":default:return"auto";case"right":return"100%"}}),(function(t){switch(t.position){case"top":case"right":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"left":return"100%"}}),(function(t){var n=t.position,e=t.theme;switch(n){case"top":case"topLeft":default:return"100%";case"left":case"right":return"".concat(e.spacing.xs);case"bottom":case"bottomLeft":return"auto"}}),(function(t){switch(t.position){case"top":case"topLeft":case"left":case"right":default:return"auto";case"bottom":case"bottomLeft":return"100%"}}),(function(t){var n=t.position,e=t.theme;switch(n){case"top":case"bottom":default:return"".concat(e.spacing.s);case"topLeft":case"bottomLeft":return"auto";case"left":return"100%";case"right":return"-20px"}}),(function(t){var n=t.position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return"".concat(e.spacing.s);case"right":return"0"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":return"transparent transparent transparent rgba(0, 0, 0, 0.25)";case"right":return"transparent rgba(0, 0, 0, 0.25) transparent transparent";case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}),(function(t){switch(t.position){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":return"0 0 0 -1px";case"right":return"0 0 0 1px";case"bottom":case"bottomLeft":return"0 0 -1px 0"}}),(function(t){var n=t.theme;switch(t.position){case"top":case"topLeft":default:return"".concat(n.colors.popoverBackground," transparent transparent");case"left":return"transparent transparent transparent ".concat(n.colors.popoverBackground);case"right":return"transparent ".concat(n.colors.popoverBackground," transparent transparent");case"bottom":case"bottomLeft":return"transparent transparent ".concat(n.colors.popoverBackground)}}));export{c as PopOverModal,s as PopOverWrapper};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/PopOver/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/PopOver/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type PopOverPositionType } from \"../../types\";\n\nexport const PopOverWrapper = styled.div<{\n full: boolean;\n css?: string;\n}>`\n position: relative;\n display: ${({ full }) => (full ? \"block\" : \"inline-block\")};\n ${(props: { css?: string }) =>\n props.css &&\n css`\n ${props.css}\n `}\n`;\n\nexport const PopOverModal = styled.div<{\n position: PopOverPositionType;\n theme?: ThemeType;\n maxWidth: string;\n minWidth: string;\n}>`\n position: absolute;\n display: flex;\n justify-content: center;\n word-wrap: break-word;\n z-index: 9999;\n max-width: ${({ maxWidth }: { maxWidth: string }) => maxWidth};\n min-width: ${({ minWidth }: { minWidth: string }) => minWidth};\n font-size: ${({\n theme: {\n fontSizes: { s },\n },\n }) => s};\n background-color: ${({\n theme: {\n colors: { popoverBackground },\n },\n }) => popoverBackground};\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.25);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n margin-bottom: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"10px\";\n case \"topLeft\":\n return \"10px\";\n case \"left\":\n return 0;\n case \"right\":\n return 0;\n case \"bottom\":\n return 0;\n case \"bottomLeft\":\n return \"10px\";\n default:\n return \"10px\";\n }\n }};\n\n margin-top: ${({ position }) => {\n switch (position) {\n case \"bottom\":\n return \"10px\";\n case \"bottomLeft\":\n return \"10px\";\n case \"left\":\n return \"10px\";\n case \"right\":\n return \"10px\";\n default:\n return 0;\n }\n }};\n top: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"100%\";\n case \"right\":\n return \"100%\";\n case \"bottom\":\n return \"100%\";\n case \"bottomLeft\":\n return \"100%\";\n default:\n return \"auto\";\n }\n }};\n\n bottom: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"100%\";\n case \"topLeft\":\n return \"100%\";\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return \"auto\";\n default:\n return \"100%\";\n }\n }};\n\n left: ${({ position }) => {\n switch (position) {\n case \"top\":\n return 0;\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return \"auto\";\n default:\n return \"auto\";\n }\n }};\n right: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return 0;\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"0\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return 0;\n default:\n return \"auto\";\n }\n }};\n\n &:after,\n &:before {\n content: \"\";\n border-style: solid;\n border-width: 10px;\n width: 0;\n height: 0;\n position: absolute;\n top: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"100%\";\n case \"topLeft\":\n return \"100%\";\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return \"auto\";\n default:\n return \"100%\";\n }\n }};\n bottom: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"100%\";\n case \"right\":\n return \"100%\";\n case \"bottom\":\n return \"100%\";\n case \"bottomLeft\":\n return \"100%\";\n default:\n return \"auto\";\n }\n }};\n\n left: ${({ position, theme }) => {\n switch (position) {\n case \"top\":\n return `${theme.spacing.s}`;\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return `${theme.spacing.s}`;\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return `${theme.spacing.s}`;\n case \"bottomLeft\":\n return \"auto\";\n default:\n return `${theme.spacing.s}`;\n }\n }};\n right: ${({ position, theme }) => {\n switch (position) {\n case \"top\":\n return `auto`;\n case \"topLeft\":\n return `${theme.spacing.s}`;\n case \"left\":\n return \"auto\";\n case \"right\":\n return `${theme.spacing.s}`;\n case \"bottom\":\n return `auto`;\n case \"bottomLeft\":\n return `${theme.spacing.s}`;\n default:\n return `auto`;\n }\n }};\n }\n &:before {\n border-color: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n case \"topLeft\":\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n case \"left\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n case \"right\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n case \"bottom\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n case \"bottomLeft\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n default:\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n }\n }};\n }\n &:after {\n margin: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"-1px 0 0 0\";\n case \"topLeft\":\n return \"-1px 0 0 0\";\n case \"left\":\n return \"0 0 -1px 0\";\n case \"right\":\n return \"0 0 -1px 0\";\n case \"bottom\":\n return \"0 0 -1px 0\";\n case \"bottomLeft\":\n return \"0 0 -1px 0\";\n default:\n return \"-1px 0 0 0\";\n }\n }};\n border-color: ${({ theme, position }) => {\n switch (position) {\n case \"top\":\n return `${theme.colors.popoverBackground} transparent transparent`;\n case \"topLeft\":\n return `${theme.colors.popoverBackground} transparent transparent`;\n case \"left\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n case \"right\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n case \"bottom\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n case \"bottomLeft\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n default:\n return `${theme.colors.popoverBackground} transparent transparent`;\n }\n }};\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n margin-top: ${({ position }) => {\n switch (position) {\n case \"bottom\":\n return \"10px\";\n case \"bottomLeft\":\n return \"10px\";\n default:\n return 0;\n }\n }};\n\n margin-left: ${({ position }) => {\n switch (position) {\n case \"right\":\n return \"10px\";\n default:\n return 0;\n }\n }};\n margin-right: ${({ position }) => {\n switch (position) {\n case \"left\":\n return \"10px\";\n default:\n return 0;\n }\n }};\n\n top: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return 0;\n case \"right\":\n return 0;\n case \"bottom\":\n return \"100%\";\n case \"bottomLeft\":\n return \"100%\";\n default:\n return \"auto\";\n }\n }};\n\n left: ${({ position }) => {\n switch (position) {\n case \"top\":\n return 0;\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"100%\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return \"auto\";\n default:\n return \"auto\";\n }\n }};\n right: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return 0;\n case \"left\":\n return \"100%\";\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return 0;\n default:\n return \"auto\";\n }\n }};\n\n &:after,\n &:before {\n content: \"\";\n top: ${({ position, theme }) => {\n switch (position) {\n case \"top\":\n return \"100%\";\n case \"topLeft\":\n return \"100%\";\n case \"left\":\n return `${theme.spacing.xs}`;\n case \"right\":\n return `${theme.spacing.xs}`;\n case \"bottom\":\n return \"auto\";\n case \"bottomLeft\":\n return \"auto\";\n default:\n return \"100%\";\n }\n }};\n bottom: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"auto\";\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"auto\";\n case \"right\":\n return \"auto\";\n case \"bottom\":\n return \"100%\";\n case \"bottomLeft\":\n return \"100%\";\n default:\n return \"auto\";\n }\n }};\n\n left: ${({ position, theme }) => {\n switch (position) {\n case \"top\":\n return `${theme.spacing.s}`;\n case \"topLeft\":\n return \"auto\";\n case \"left\":\n return \"100%\";\n case \"right\":\n return \"-20px\";\n case \"bottom\":\n return `${theme.spacing.s}`;\n case \"bottomLeft\":\n return \"auto\";\n default:\n return `${theme.spacing.s}`;\n }\n }};\n right: ${({ position, theme }) => {\n switch (position) {\n case \"top\":\n return `auto`;\n case \"topLeft\":\n return `${theme.spacing.s}`;\n case \"left\":\n return \"auto\";\n case \"right\":\n return `0`;\n case \"bottom\":\n return `auto`;\n case \"bottomLeft\":\n return `${theme.spacing.s}`;\n default:\n return `auto`;\n }\n }};\n }\n &:before {\n border-color: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n case \"topLeft\":\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n case \"left\":\n return \"transparent transparent transparent rgba(0, 0, 0, 0.25)\";\n case \"right\":\n return \"transparent rgba(0, 0, 0, 0.25) transparent transparent\";\n case \"bottom\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n case \"bottomLeft\":\n return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n default:\n return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n }\n }};\n }\n &:after {\n margin: ${({ position }) => {\n switch (position) {\n case \"top\":\n return \"-1px 0 0 0\";\n case \"topLeft\":\n return \"-1px 0 0 0\";\n case \"left\":\n return \"0 0 0 -1px\";\n case \"right\":\n return \"0 0 0 1px\";\n case \"bottom\":\n return \"0 0 -1px 0\";\n case \"bottomLeft\":\n return \"0 0 -1px 0\";\n default:\n return \"-1px 0 0 0\";\n }\n }};\n border-color: ${({ theme, position }) => {\n switch (position) {\n case \"top\":\n return `${theme.colors.popoverBackground} transparent transparent`;\n case \"topLeft\":\n return `${theme.colors.popoverBackground} transparent transparent`;\n case \"left\":\n return `transparent transparent transparent ${theme.colors.popoverBackground}`;\n case \"right\":\n return `transparent ${theme.colors.popoverBackground} transparent transparent`;\n case \"bottom\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n case \"bottomLeft\":\n return `transparent transparent ${theme.colors.popoverBackground}`;\n default:\n return `${theme.colors.popoverBackground} transparent transparent`;\n }\n }};\n }\n }\n`;\n"],"names":["PopOverWrapper","styled","div","templateObject_2","__makeTemplateObject","_a","full","props","css","templateObject_1","PopOverModal","templateObject_3","maxWidth","minWidth","theme","fontSizes","s","colors","popoverBackground","position","spacing","breakpoint","desktop","xs"],"mappings":"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"}

package/lib/src/components/ProgressBar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t,ThemeProvider as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ProgressBarWrapper as c,CircularWrapper as n,CircleSvg as s,EmptyCircle as l,FullCircle as m,CircularValue as i,LineProgressBarWrapper as f,LineProgressBar as d,ScreenReaderOnly as p}from"./styles.js";function h(h){var y=h.percentage,E=void 0===y?0:y,u=h.isCircular,k=h.circleContents,b=h.circleSize,C=h.barColor,g=h.secondaryBarColor,x=h.secondaryPercentage,D=h.children,N=t(),S=e(e({},a),N),j=Number.isNaN(E)?0:E,v=j>100?100:j,I="".concat(j,"%"),P=x&&!Number.isNaN(x)?x:0,W=P>100?100:P,z="".concat("string"==typeof k?k:""," ").concat(I,"% Complete"),B=k\|\|I,w=58,M=2Math.PIw;return r.createElement(o,{theme:S},r.createElement(c,null,u?r.createElement(n,{circleSize:b\|\|"90px"},r.createElement(s,{viewBox:"0 0 ".concat(128," ").concat(128)},r.createElement(l,{cx:64,cy:64,r:w,strokeWidth:6}),r.createElement(m,{isSecondary:!0,barColor:g,cx:64,cy:64,r:w,strokeWidth:6,strokeDasharray:M,strokeDashoffset:M(1-W/100),strokeDashoffsetInit:M}),r.createElement(m,{barColor:C,cx:64,cy:64,r:w,strokeWidth:6,strokeDasharray:M,strokeDashoffset:M(1-v/100),strokeDashoffsetInit:M})),r.createElement(i,null,B)):r.createElement(f,{percentage:v,secondaryPercentage:W},r.createElement(d,{isSecondary:!0,percentage:W,barColor:g}),r.createElement(d,{percentage:v,barColor:C}),r.createElement(p,null,z)),D))}export{h as ProgressBar,h as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/ProgressBar/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n ProgressBarWrapper,\n CircularWrapper,\n CircleSvg,\n EmptyCircle,\n FullCircle,\n CircularValue,\n LineProgressBarWrapper,\n LineProgressBar,\n ScreenReaderOnly,\n} from \"./styles\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n /** percentage value of the progressbar */\n percentage: number;\n /** percentage value of a secondary (highter) amount of the progressbar */\n secondaryPercentage?: number;\n /** flag which converts line bar to donut chart */\n isCircular?: boolean;\n /** contents inside the donut chart */\n circleContents?: ReactNode;\n /** diameter of the donut chart */\n circleSize?: string;\n /** foreground colour of chart bar */\n barColor?: string;\n /** foreground colour of chart secondary bar */\n secondaryBarColor?: string;\n children?: ReactNode;\n};\n\n/**\n * Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n*/\nexport function ProgressBar({\n percentage = 0,\n isCircular,\n circleContents,\n circleSize,\n barColor,\n secondaryBarColor,\n secondaryPercentage,\n children,\n}: ProgressBarProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n const percentString = `${percentageNumber}%`;\n\n const secondaryPercentageNumber =\n secondaryPercentage && !Number.isNaN(secondaryPercentage)\n ? secondaryPercentage\n : 0;\n\n const secondaryPercentageLimited =\n secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n const descriptivePercentageString = `${\n typeof circleContents === \"string\" ? circleContents : \"\"\n } ${percentString}% Complete`;\n const textOrPercentString = circleContents || percentString;\n\n const strokeWidth = 6;\n const d = 128;\n const r = d / 2 - strokeWidth;\n const c = 2 * Math.PI * r;\n\n return (\n <ThemeProvider theme={theme}>\n <ProgressBarWrapper>\n {isCircular ? (\n <CircularWrapper circleSize={circleSize || DEFAULT_CIRCLE_SIZE}>\n <CircleSvg viewBox={`0 0 ${d} ${d}`}>\n <EmptyCircle\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n />\n <FullCircle\n isSecondary\n barColor={secondaryBarColor}\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n strokeDasharray={c}\n strokeDashoffset={c * (1 - secondaryPercentageLimited / 100)}\n strokeDashoffsetInit={c}\n />\n\n <FullCircle\n barColor={barColor}\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n strokeDasharray={c}\n strokeDashoffset={c * (1 - percentageLimited / 100)}\n strokeDashoffsetInit={c}\n />\n </CircleSvg>\n <CircularValue>{textOrPercentString}</CircularValue>\n </CircularWrapper>\n ) : (\n <LineProgressBarWrapper\n percentage={percentageLimited}\n secondaryPercentage={secondaryPercentageLimited}\n >\n <LineProgressBar\n isSecondary\n percentage={secondaryPercentageLimited}\n barColor={secondaryBarColor}\n />\n\n <LineProgressBar\n percentage={percentageLimited}\n barColor={barColor}\n />\n <ScreenReaderOnly>{descriptivePercentageString}</ScreenReaderOnly>\n </LineProgressBarWrapper>\n )}\n {children}\n </ProgressBarWrapper>\n </ThemeProvider>\n );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","_a","_b","percentage","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","foundTheme","useTheme","theme","__assign","defaultTheme","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","createElement","ThemeProvider","ProgressBarWrapper","CircularWrapper","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","isSecondary","strokeDasharray","strokeDashoffset","strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","LineProgressBar","ScreenReaderOnly"],"mappings":"0ZAyCM,SAAUA,EAAYC,OAC1BC,EAAcD,EAAAE,WAAdA,OAAU,IAAAD,EAAG,EAACA,EACdE,EAAUH,EAAAG,WACVC,EAAcJ,EAAAI,eACdC,EAAUL,EAAAK,WACVC,EAAQN,EAAAM,SACRC,EAAiBP,EAAAO,kBACjBC,EAAmBR,EAAAQ,oBACnBC,EAAQT,EAAAS,SAEFC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAoBC,OAAOC,MAAMf,GAA2B,EAAbA,EAC/CgB,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAGC,OAAAL,OAEnBM,EACJb,IAAwBQ,OAAOC,MAAMT,GACjCA,EACA,EAEAc,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBhB,EAA8BA,EAAiB,GACpD,KAAAgB,OAAAD,gBACEK,EAAsBpB,GAAkBe,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,EAACC,cAAAC,EAAc,CAAApB,MAAOA,GACpBkB,EAAAC,cAACE,EAAkB,KAChB9B,EACC2B,EAAAC,cAACG,EAAe,CAAC7B,WAAYA,GAjEX,QAkEhByB,EAACC,cAAAI,GAAUC,QAAS,cATpB,IAS4B,KAAAhB,OAT5B,MAUEU,EAACC,cAAAM,GACCC,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAfM,IAiBRV,EAACC,cAAAU,GACCC,aAAW,EACXpC,SAAUC,EACV+B,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAvBM,EAwBNG,gBAAiBhB,EACjBiB,iBAAkBjB,GAAK,EAAIL,EAA6B,KACxDuB,qBAAsBlB,IAGxBG,EAACC,cAAAU,GACCnC,SAAUA,EACVgC,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAlCM,EAmCNG,gBAAiBhB,EACjBiB,iBAAkBjB,GAAK,EAAIT,EAAoB,KAC/C2B,qBAAsBlB,KAG1BG,EAAAC,cAACe,EAAe,KAAAtB,IAGlBM,EAACC,cAAAgB,GACC7C,WAAYgB,EACZV,oBAAqBc,GAErBQ,EAACC,cAAAiB,EACC,CAAAN,aACA,EAAAxC,WAAYoB,EACZhB,SAAUC,IAGZuB,EAACC,cAAAiB,GACC9C,WAAYgB,EACZZ,SAAUA,IAEZwB,EAAAC,cAACkB,EAAgB,KAAE1B,IAGtBd,GAIT"}

package/lib/src/components/ProgressBar/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o,keyframes as e}from"styled-components";var r,i,s,a,h,c,d,f,l,p,u,g,b,x,m,k="16px",w=function(){return e(s\|\|(s=n(["\n 0% {\n width: 0px;\n height: 0px;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n width: 64px;\n height: 64px;\n right: -32px;\n }\n"],["\n 0% {\n width: 0px;\n height: 0px;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n width: 64px;\n height: 64px;\n right: -32px;\n }\n"])))},y=function(){return e(a\|\|(a=n(["\n 0% {\n transform: scale(1);\n border-radius: 0px;\n\n }\n 50% {\n transform:scale(1.025);\n }\n 100% {\n transform: scale(1);\n border-radius: 0px;\n }\n"],["\n 0% {\n transform: scale(1);\n border-radius: 0px;\n\n }\n 50% {\n transform:scale(1.025);\n }\n 100% {\n transform: scale(1);\n border-radius: 0px;\n }\n"])))},v=t.div(h\|\|(h=n(["\n margin-top: ",";\n"],["\n margin-top: ",";\n"])),k),D=t.div(d\|\|(d=n(["\n position: relative;\n height: ",";\n margin-bottom: 0;\n background-color: ",";\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n ","\n"],["\n position: relative;\n height: ",";\n margin-bottom: 0;\n background-color: ",";\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n ","\n"])),k,(function(n){return n.theme.colors.progressBarBackground}),(function(t){var e=t.percentage,r=t.secondaryPercentage;return(100===e\|\|100===r)&&o(c\|\|(c=n(["\n animation: "," 0.3s 0.5s 1 ease-out;\n "],["\n animation: "," 0.3s 0.5s 1 ease-out;\n "])),y)})),S=t.div(l\|\|(l=n(["\n position: absolute;\n left: 0;\n height: ",";\n background-color: ",";\n box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n transition: width 0.6s ease;\n width: ",'%;\n\n &::before {\n content: "";\n display: inline-block;\n position: absolute;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 0px;\n height: 0px;\n border-radius: 50%;\n opacity: 0;\n filter: blur(2px);\n background-color: ',";\n\n ","\n }\n"],["\n position: absolute;\n left: 0;\n height: ",";\n background-color: ",";\n box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n transition: width 0.6s ease;\n width: ",'%;\n\n &::before {\n content: "";\n display: inline-block;\n position: absolute;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 0px;\n height: 0px;\n border-radius: 50%;\n opacity: 0;\n filter: blur(2px);\n background-color: ',";\n\n ","\n }\n"])),k,(function(n){var t=n.barColor,o=n.isSecondary,e=n.theme;return t\|\|o?e.colors.progressBarSecondary:e.colors.progressBar}),(function(n){return n.percentage}),(function(n){var t=n.barColor,o=n.isSecondary,e=n.theme.colors,r=e.progressBar,i=e.progressBarSecondary;return t\|\|o?i:r}),(function(t){return 100===t.percentage&&o(f\|\|(f=n(["\n animation: "," 0.33s 0.75s 3 ease-in;\n "],["\n animation: "," 0.33s 0.75s 3 ease-in;\n "])),w)})),z=t.span(p\|\|(p=n(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"],["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"]))),B=t.div(u\|\|(u=n(["\n position: relative;\n width: ",";\n height: ",";\n background: none;\n margin: 0 auto;\n box-shadow: none;\n"],["\n position: relative;\n width: ",";\n height: ",";\n background: none;\n margin: 0 auto;\n box-shadow: none;\n"])),(function(n){return n.circleSize}),(function(n){return n.circleSize})),I=t.svg(g\|\|(g=n(["\n position: absolute;\n transform: rotate(-90deg);\n fill: none;\n stroke-linecap: round;\n width: 100%;\n height: 100%;\n"],["\n position: absolute;\n transform: rotate(-90deg);\n fill: none;\n stroke-linecap: round;\n width: 100%;\n height: 100%;\n"]))),C=t.circle(b\|\|(b=n(["\n stroke: ",";\n"],["\n stroke: ",";\n"])),(function(n){return n.theme.tokenColors.grey_200})),j=t.circle(x\|\|(x=n(["\n stroke: ",";\n animation: ","\n 1s linear;\n"],["\n stroke: ",";\n animation: ","\n 1s linear;\n"])),(function(n){var t=n.isSecondary,o=n.barColor,e=n.theme.colors,r=e.circularProgress,i=e.circularProgressSecondary;return o\|\|t?i:r}),(function(t){var o=t.isSecondary,s=t.strokeDashoffset,a=t.strokeDashoffsetInit;return o?function(t){var o=t.strokeDashoffsetInit,r=t.strokeDashoffset;return e(i\|\|(i=n(["\n 0% {\n stroke-dashoffset: "," ;\n }\n 100% {\n stroke-dashoffset: "," ;\n }\n"],["\n 0% {\n stroke-dashoffset: "," ;\n }\n 100% {\n stroke-dashoffset: "," ;\n }\n"])),o,r)}({strokeDashoffset:s,strokeDashoffsetInit:a}):function(t){var o=t.strokeDashoffsetInit,i=t.strokeDashoffset;return e(r\|\|(r=n(["\n 0% {\n stroke-dashoffset: "," ;\n }\n 50% {\n stroke-dashoffset: "," ;\n }\n 100% {\n stroke-dashoffset: "," ;\n }\n"],["\n 0% {\n stroke-dashoffset: "," ;\n }\n 50% {\n stroke-dashoffset: "," ;\n }\n 100% {\n stroke-dashoffset: "," ;\n }\n"])),o,i,i)}({strokeDashoffset:s,strokeDashoffsetInit:a})})),P=t.div(m\|\|(m=n(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n z-index: 2;\n font-size: ",";\n line-height: ",";\n text-align: center;\n height: 100%;\n color: ",";\n"],["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n z-index: 2;\n font-size: ",";\n line-height: ",";\n text-align: center;\n height: 100%;\n color: ",";\n"])),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.colors.textDark}));export{I as CircleSvg,P as CircularValue,B as CircularWrapper,C as EmptyCircle,j as FullCircle,S as LineProgressBar,D as LineProgressBarWrapper,v as ProgressBarWrapper,z as ScreenReaderOnly};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/ProgressBar/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype ThemeProp = {\n theme: ThemeType;\n};\n\ntype LineProgressBarProps = {\n percentage: number;\n barColor?: string;\n isSecondary?: boolean;\n theme: ThemeType;\n};\ntype LineProgressWrapperProps = {\n percentage: number;\n secondaryPercentage: number;\n theme: ThemeType;\n};\n\ntype CircleProps = ThemeProp & {\n strokeDashoffsetInit: number;\n strokeDashoffset: number;\n barColor?: string;\n isSecondary?: boolean;\n theme: ThemeType;\n};\n\ntype CircleWrapperProps = {\n circleSize: string;\n theme: ThemeType;\n};\n\ntype CircleKeyCircleFillKeyFramesProps = {\n strokeDashoffsetInit: number;\n strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n strokeDashoffsetInit,\n strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n 0% {\n stroke-dashoffset: ${strokeDashoffsetInit} ;\n }\n 50% {\n stroke-dashoffset: ${strokeDashoffset} ;\n }\n 100% {\n stroke-dashoffset: ${strokeDashoffset} ;\n }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n strokeDashoffsetInit,\n strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n 0% {\n stroke-dashoffset: ${strokeDashoffsetInit} ;\n }\n 100% {\n stroke-dashoffset: ${strokeDashoffset} ;\n }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n 0% {\n width: 0px;\n height: 0px;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n width: 64px;\n height: 64px;\n right: -32px;\n }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n 0% {\n transform: scale(1);\n border-radius: 0px;\n\n }\n 50% {\n transform:scale(1.025);\n }\n 100% {\n transform: scale(1);\n border-radius: 0px;\n }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<LineProgressWrapperProps>`\n position: relative;\n height: ${BAR_HEIGHT};\n margin-bottom: 0;\n background-color: ${({\n theme: {\n colors: { progressBarBackground },\n },\n }) => progressBarBackground};\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n ${({ percentage, secondaryPercentage }) =>\n (percentage === 100 || secondaryPercentage === 100) &&\n css`\n animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n `}\n`;\n\nexport const LineProgressBar = styled.div<LineProgressBarProps>`\n position: absolute;\n left: 0;\n height: ${BAR_HEIGHT};\n background-color: ${({ barColor, isSecondary, theme }) =>\n !!barColor || !!isSecondary\n ? theme.colors.progressBarSecondary\n : theme.colors.progressBar};\n box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n transition: width 0.6s ease;\n width: ${({ percentage }) => percentage}%;\n\n &::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 0px;\n height: 0px;\n border-radius: 50%;\n opacity: 0;\n filter: blur(2px);\n background-color: ${({\n barColor,\n isSecondary,\n theme: {\n colors: { progressBar, progressBarSecondary },\n },\n }) => (barColor || isSecondary ? progressBarSecondary : progressBar)};\n\n ${({ percentage }) =>\n percentage === 100 &&\n css`\n animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n `}\n }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n`;\n\nexport const CircularWrapper = styled.div<CircleWrapperProps>`\n position: relative;\n width: ${({ circleSize }) => circleSize};\n height: ${({ circleSize }) => circleSize};\n background: none;\n margin: 0 auto;\n box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n position: absolute;\n transform: rotate(-90deg);\n fill: none;\n stroke-linecap: round;\n width: 100%;\n height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<ThemeProp>`\n stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<CircleProps>`\n stroke: ${({\n isSecondary,\n barColor,\n theme: {\n colors: { circularProgress, circularProgressSecondary },\n },\n }) =>\n barColor || isSecondary ? circularProgressSecondary : circularProgress};\n animation: ${({ isSecondary, strokeDashoffset, strokeDashoffsetInit }) =>\n isSecondary\n ? SecondaryCircleFillKeyFrames({\n strokeDashoffset,\n strokeDashoffsetInit,\n })\n : CircleFillKeyFrames({ strokeDashoffset, strokeDashoffsetInit })}\n 1s linear;\n`;\n\nexport const CircularValue = styled.div<ThemeProp>`\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n z-index: 2;\n font-size: ${({\n theme: {\n fontSizes: { l },\n },\n }) => l};\n line-height: ${({\n theme: {\n fontSizes: { l },\n },\n }: ThemeProp) => l};\n text-align: center;\n height: 100%;\n color: ${({\n theme: {\n colors: { textDark },\n },\n }: ThemeProp) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","theme","colors","progressBarBackground","percentage","secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","barColor","isSecondary","progressBarSecondary","progressBar","_b","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","tokenColors","grey_200","FullCircle","templateObject_14","circularProgress","circularProgressSecondary","strokeDashoffset","strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15","fontSizes","l","textDark"],"mappings":"0IAGA,kCAAMA,EAAa,OA+DbC,EAA0B,WAAM,OAAAC,EAASC,IAAAA,EAAAC,EAAA,CAAA,gMAAA,CAAA,kMAAT,EAiBhCC,EAAwB,WAAM,OAAAH,EAASI,IAAAA,EAAAF,EAAA,CAAA,sLAAA,CAAA,wLAAT,EAevBG,EAAqBC,EAAOC,IAAGC,IAAAA,EAAAN,EAAA,CAAA,mBAAA,OAAA,CAAA,mBAClB,SAAVJ,GAGHW,EAAyBH,EAAOC,IAA6BG,IAAAA,EAAAR,EAAA,CAAA,sCAAA,+CAAA,6DAAA,MAAA,CAAA,sCAEpD,+CAMO,6DAOxB,QAbOJ,GAEU,SAACa,GAIf,OAF6BA,EAAAC,MAAAC,OAAAC,qBAE7B,IAGJ,SAACH,OAAEI,EAAUJ,EAAAI,WAAEC,EAAmBL,EAAAK,oBAClC,OAAgB,MAAfD,GAA8C,MAAxBC,IACvBC,EAAGC,IAAAA,EAAAhB,EAAA,CAAA,sBAAA,gCAAA,CAAA,sBACiC,kCAArBC,EAFf,IAMSgB,EAAkBb,EAAOC,IAAyBa,IAAAA,EAAAlB,EAAA,CAAA,kDAAA,0BAAA,kGAAA,kTAAA,YAAA,WAAA,CAAA,kDAGzC,0BAIU,kGAGS,kTAsB+B,YAMjE,aAnCKJ,GACU,SAACa,GAAE,IAAAU,aAAUC,EAAWX,EAAAW,YAAEV,EAAKD,EAAAC,MACjD,OAAES,GAAcC,EACZV,EAAMC,OAAOU,qBACbX,EAAMC,OAAOW,WAFjB,IAKO,SAACb,GAAmB,OAAPA,EAAAI,UAAO,IAgBP,SAACJ,OACnBU,EAAQV,EAAAU,SACRC,EAAWX,EAAAW,YAETG,EAA6Cd,EAAAC,MAAAC,OAAnCW,EAAWC,EAAAD,YAAED,EAAoBE,EAAAF,qBAEzC,OAACF,GAAYC,EAAcC,EAAuBC,CAAlD,IAEJ,SAACb,GACD,OAAe,MADFA,EAAAI,YAEbE,EAAGS,IAAAA,EAAAxB,EAAA,CAAA,wBAAA,mCAAA,CAAA,wBACmC,qCAAvBH,EAFf,IAOO4B,EAAmBrB,EAAOsB,KAAIC,IAAAA,EAAA3B,EAAA,CAAA,0JAAA,CAAA,6JAW9B4B,EAAkBxB,EAAOC,IAAuBwB,IAAAA,EAAA7B,EAAA,CAAA,qCAAA,gBAAA,oEAAA,CAAA,qCAEpB,gBACC,uEAD/B,SAACS,GAAmB,OAAPA,EAAAqB,UAAO,IACnB,SAACrB,GAAmB,OAAPA,EAAAqB,UAAO,IAMnBC,EAAY3B,EAAO4B,IAAGC,IAAAA,EAAAjC,EAAA,CAAA,qIAAA,CAAA,wIAStBkC,EAAc9B,EAAO+B,OAAMC,IAAAA,EAAApC,EAAA,CAAA,eAAA,OAAA,CAAW,eACE,UAAzC,SAACS,GAAc,OAAPA,EAAAC,MAAa2B,YAAYC,QAAlB,IAGdC,EAAanC,EAAO+B,OAAmBK,IAAAA,EAAAxC,EAAA,CAAA,eAAA,mBAAA,sBAAA,CAAA,eAQsB,mBAOD,yBAd7D,SAACS,OACTW,EAAWX,EAAAW,YACXD,EAAQV,EAAAU,SAENI,EAAuDd,EAAAC,MAAAC,OAA7C8B,EAAgBlB,EAAAkB,iBAAEC,EAAyBnB,EAAAmB,0BAGvD,OAAAvB,GAAYC,EAAcsB,EAA4BD,CAAtD,IACW,SAAChC,GAAE,IAAAW,gBAAauB,EAAgBlC,EAAAkC,iBAAEC,EAAoBnC,EAAAmC,qBAC/D,OAAAxB,EAvJ+B,SAACX,OACpCmC,EAAoBnC,EAAAmC,qBACpBD,EAAgBlC,EAAAkC,iBACuB,OAAA7C,EAAS+C,IAAAA,EAAA7C,EAAA,CAAA,qCAAA,8CAAA,aAAA,CAAA,qCAEJ,8CAGJ,eAHhB4C,EAGAD,EALe,CAqJ/BG,CAA6B,CAC3BH,iBAAgBA,EAChBC,qBAAoBA,IAzKJ,SAACnC,OAC3BmC,EAAoBnC,EAAAmC,qBACpBD,EAAgBlC,EAAAkC,iBACuB,OAAA7C,EAASiD,IAAAA,EAAA/C,EAAA,CAAA,qCAAA,6CAAA,8CAAA,aAAA,CAAA,qCAEJ,6CAGJ,8CAGA,eANhB4C,EAGAD,EAGAA,EARe,CAwK/BK,CAAoB,CAAEL,mBAAkBC,qBAAoBA,GALhE,IASOK,EAAgB7C,EAAOC,IAAG6C,IAAAA,EAAAlD,EAAA,CAAA,6MAAA,qBAAA,uDAAA,OAAA,CAAW,6MAezC,qBAKW,uDAOO,UAhBZ,SAACS,GAIR,OAFYA,EAAAC,MAAAyC,UAAAC,CAEZ,IACS,SAAC3C,GAIC,OAFCA,EAAAC,MAAAyC,UAAAC,CAED,IAGR,SAAC3C,GAIO,OAFKA,EAAAC,MAAAC,OAAA0C,QAEL"}

package/lib/src/components/Radio/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import t,{forwardRef as l}from"react";import{useTheme as s,ThemeProvider as a}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{StyledLabel as d,StyledInput as m,SelectedBorder as n,CheckWrapper as c,Check as u,VerticalAlign as E}from"./styles.js";var f=l((function(l,f){var p=s(),h=e(e({},o),p);l.children;var b=r(l,["children"]);return t.createElement(a,{theme:h},t.createElement(d,{hasError:l.hasError\|\|!!l.errorMessage\|\|!1,className:l.className,checked:l.checked\|\|!1,disabled:l.disabled\|\|!1},t.createElement(m,e({},b,{disabled:l.disabled\|\|!1,type:"radio",ref:f,"aria-describedby":l.id&&l.errorMessage?"".concat(l.id,"-error"):void 0})),t.createElement(n,null),h.utilities.useDefaultFromControls?null:t.createElement(c,null,t.createElement(u,null)),t.createElement(E,null,l.children\|\|l.value)),!!l.errorMessage&&t.createElement(i,{marginTop:"xxs",id:l.id?"".concat(l.id,"-error"):void 0},l.errorMessage))}));export{f as Radio,f as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/Radio/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type Ref,\n forwardRef,\n type ReactNode,\n type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n StyledLabel,\n StyledInput,\n SelectedBorder,\n CheckWrapper,\n Check,\n VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n /** flag for error styling */\n hasError?: boolean;\n /** error message text */\n errorMessage?: string;\n children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = forwardRef(\n (props: RadioProps, ref?: Ref<HTMLInputElement>) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { children, ...propsWithoutChildren } = props;\n return (\n <ThemeProvider theme={theme}>\n <StyledLabel\n hasError={props.hasError || !!props.errorMessage || false}\n className={props.className}\n checked={props.checked || false}\n disabled={props.disabled || false}\n >\n <StyledInput\n {...propsWithoutChildren}\n disabled={props.disabled || false}\n type=\"radio\"\n ref={ref}\n aria-describedby={\n !!props.id && !!props.errorMessage\n ? `${props.id}-error`\n : undefined\n }\n />\n <SelectedBorder />\n {theme.utilities.useDefaultFromControls ? null : (\n <CheckWrapper>\n <Check />\n </CheckWrapper>\n )}\n <VerticalAlign>{props.children || props.value}</VerticalAlign>\n </StyledLabel>\n {!!props.errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {props.errorMessage}\n </ErrorText>\n )}\n </ThemeProvider>\n );\n },\n);\n\nexport default Radio;\n"],"names":["Radio","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","children","propsWithoutChildren","__rest","React","createElement","ThemeProvider","StyledLabel","hasError","errorMessage","className","checked","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"4ZAmCaA,EAAQC,GACnB,SAACC,EAAmBC,GAClB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGyCF,EAA9BO,aAAKC,EAAoBC,EAAKT,EAAxC,CAAqC,aAC3C,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EACC,CAAAC,SAAUd,EAAMc,YAAcd,EAAMe,eAAgB,EACpDC,UAAWhB,EAAMgB,UACjBC,QAASjB,EAAMiB,UAAW,EAC1BC,SAAUlB,EAAMkB,WAAY,GAE5BR,EAAAC,cAACQ,EAAWd,EAAA,CAAA,EACNG,EAAoB,CACxBU,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,QACLnB,IAAKA,EAEH,mBAAED,EAAMqB,IAAQrB,EAAMe,aAClB,GAAAO,OAAGtB,EAAMqB,GAAU,eACnBE,KAGRb,EAAAC,cAACa,EAAiB,MACjBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAACC,cAAAiB,EAAQ,OAGblB,EAACC,cAAAkB,EAAe,KAAA7B,EAAMO,UAAYP,EAAM8B,UAEvC9B,EAAMe,cACPL,EAACC,cAAAoB,EACC,CAAAC,UAAU,MACVX,GAAIrB,EAAMqB,GAAK,UAAGrB,EAAMqB,GAAE,eAAWE,GAEpCvB,EAAMe,cAKjB"}

package/lib/src/components/Radio/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as i}from"styled-components";var e,t,r,l,a,s,c,d,b,p="1.5rem",h="0.75rem",g=o.div(e\|\|(e=n(["\n display: inline-block;\n height: ",";\n width: ",";\n position: absolute;\n top: calc(50% - ("," / 2));\n left: ",";\n"],["\n display: inline-block;\n height: ",";\n width: ",";\n position: absolute;\n top: calc(50% - ("," / 2));\n left: ",";\n"])),p,p,p,(function(n){return n.theme.spacing.xs})),u=o.span(t\|\|(t=n(["\n display: block;\n position: relative;\n border: 2px solid ",";\n pointer-events: none;\n border-radius: 100%;\n height: ",";\n width: ",';\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 5;\n transition:\n border 0.25s linear,\n box-shadow 0.25s linear;\n\n &:before {\n display: block;\n position: absolute;\n content: "";\n border-radius: 100%;\n pointer-events: none;\n height: ',";\n width: ",";\n top: calc(50% - ("," / 2));\n left: calc(50% - ("," / 2));\n margin: auto;\n background-color: rgba(255, 255, 255, 0);\n transition: background-color 0.25s linear;\n }\n"],["\n display: block;\n position: relative;\n border: 2px solid ",";\n pointer-events: none;\n border-radius: 100%;\n height: ",";\n width: ",';\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 5;\n transition:\n border 0.25s linear,\n box-shadow 0.25s linear;\n\n &:before {\n display: block;\n position: absolute;\n content: "";\n border-radius: 100%;\n pointer-events: none;\n height: ',";\n width: ",";\n top: calc(50% - ("," / 2));\n left: calc(50% - ("," / 2));\n margin: auto;\n background-color: rgba(255, 255, 255, 0);\n transition: background-color 0.25s linear;\n }\n"])),(function(n){return n.theme.colors.selectionBorder}),p,p,h,h,h,h),f=o.label(l\|\|(l=n(["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n line-height: ",";\n font-size: ",";\n font-family: ",";\n\n background-color: ",";\n width: 100%;\n position: relative;\n\n cursor: ",";\n display: inline-block;\n\n color: ",";\n padding: ",";\n vertical-align: middle;\n\n ","\n"],["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n line-height: ",";\n font-size: ",";\n font-family: ",";\n\n background-color: ",";\n width: 100%;\n position: relative;\n\n cursor: ",";\n display: inline-block;\n\n color: ",";\n padding: ",";\n vertical-align: middle;\n\n ","\n"])),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontSizeBase}),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.disabled?"not-allowed":"pointer"}),(function(n){var o=n.theme;return n.disabled?o.colors.disabled:o.colors.textDark}),(function(n){var o=n.theme;return"calc( (".concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xl)}),(function(o){var e=o.theme,t=o.disabled,l=o.checked,a=o.hasError;return e.utilities.useDefaultFromControls?null:i(r\|\|(r=n(["\n min-height: 2rem;\n\n "," "," {\n border: solid 2px\n ",";\n &:before {\n background-color: ",";\n }\n }\n\n &:hover "," "," {\n border: solid 2px\n ",";\n }\n "],["\n min-height: 2rem;\n\n "," "," {\n border: solid 2px\n ",";\n &:before {\n background-color: ",";\n }\n }\n\n &:hover "," "," {\n border: solid 2px\n ",";\n }\n "])),g,u,t?e.colors.disabled:a?e.colors.danger:l?e.colors.check:e.colors.inputBorder,l?e.colors.check:"rgba(255, 255, 255, 0)",g,u,t?e.colors.disabled:e.colors.check)})),m=o.span(a\|\|(a=n(["\n display: inline;\n vertical-align: middle;\n line-height: 100%;\n background-color: ",";\n min-height: 2em;\n z-index: 1;\n"],["\n display: inline;\n vertical-align: middle;\n line-height: 100%;\n background-color: ",";\n min-height: 2em;\n z-index: 1;\n"])),(function(n){return n.theme.colors.backgroundLight})),x=o.div(s\|\|(s=n(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0);\n z-index: 0;\n"],["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0);\n z-index: 0;\n"]))),k=o.input(b\|\|(b=n(["\n ,\n :after,\n :before {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n margin-right: ",";\n\n ","\n"],["\n ,\n :after,\n :before {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n margin-right: ",";\n\n ","\n"])),(function(n){return n.theme.spacing.xxs}),(function(o){var e=o.theme;return e.utilities.useDefaultFromControls?i(c\|\|(c=n(["\n position: absolute;\n display: inline-block;\n transform: translate(-50%, -50%);\n top: 50%;\n margin: 0;\n padding: 0;\n left: ",";\n "],["\n position: absolute;\n display: inline-block;\n transform: translate(-50%, -50%);\n top: 50%;\n margin: 0;\n padding: 0;\n left: ",";\n "])),e.spacing.s):i(d\|\|(d=n(["\n position: absolute;\n left: ",";\n opacity: 0;\n\n &:focus ~ "," {\n outline: none !important;\n box-shadow: inset 0 0 0 2px ",";\n box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n }\n "],["\n position: absolute;\n left: ",";\n opacity: 0;\n\n &:focus ~ "," {\n outline: none !important;\n box-shadow: inset 0 0 0 2px ",";\n box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n }\n "])),e.spacing.xxs,x,e.colors.inputBorder)}));export{u as Check,g as CheckWrapper,x as SelectedBorder,k as StyledInput,f as StyledLabel,m as VerticalAlign};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/Radio/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\ntype ThemeProp = {\n theme: ThemeType;\n};\n\nexport const CheckWrapper = styled.div<ThemeProp>`\n display: inline-block;\n height: ${RADIO_SIZE};\n width: ${RADIO_SIZE};\n position: absolute;\n top: calc(50% - (${RADIO_SIZE} / 2));\n left: ${({\n theme: {\n spacing: { xs },\n },\n }) => xs};\n`;\n\nexport const Check = styled.span<ThemeProp>`\n display: block;\n position: relative;\n border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n pointer-events: none;\n border-radius: 100%;\n height: ${RADIO_SIZE};\n width: ${RADIO_SIZE};\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 5;\n transition:\n border 0.25s linear,\n box-shadow 0.25s linear;\n\n &:before {\n display: block;\n position: absolute;\n content: \"\";\n border-radius: 100%;\n pointer-events: none;\n height: ${RADIO_INNER_SIZE};\n width: ${RADIO_INNER_SIZE};\n top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n margin: auto;\n background-color: rgba(255, 255, 255, 0);\n transition: background-color 0.25s linear;\n }\n`;\n\ntype StyledLabelProps = {\n hasError: boolean;\n disabled: boolean;\n checked: boolean;\n theme: ThemeType;\n};\n\nexport const StyledLabel = styled.label<StyledLabelProps>`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-size: ${({ theme }) => theme.typography.fontSizeBase};\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n width: 100%;\n position: relative;\n\n cursor: ${({ disabled }) => (disabled ? \"not-allowed\" : \"pointer\")};\n display: inline-block;\n\n color: ${({ theme, disabled }) =>\n disabled ? theme.colors.disabled : theme.colors.textDark};\n padding: ${({ theme }) =>\n `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n vertical-align: middle;\n\n ${({ theme, disabled: isDisabled, checked, hasError }) =>\n theme.utilities.useDefaultFromControls\n ? null\n : css`\n min-height: 2rem;\n\n ${CheckWrapper} ${Check} {\n border: solid 2px\n ${isDisabled\n ? theme.colors.disabled\n : hasError\n ? theme.colors.danger\n : checked\n ? theme.colors.check\n : theme.colors.inputBorder};\n &:before {\n background-color: ${checked\n ? theme.colors.check\n : `rgba(255, 255, 255, 0)`};\n }\n }\n\n &:hover ${CheckWrapper} ${Check} {\n border: solid 2px\n ${isDisabled ? theme.colors.disabled : theme.colors.check};\n }\n `}\n`;\n\nexport const VerticalAlign = styled.span<ThemeProp>`\n display: inline;\n vertical-align: middle;\n line-height: 100%;\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n min-height: 2em;\n z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0);\n z-index: 0;\n`;\n\ntype StyledInputType = {\n disabled: boolean;\n theme: ThemeType;\n};\n\nexport const StyledInput = styled.input<StyledInputType>`\n *,\n *:after,\n *:before {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n margin-right: ${({\n theme: {\n spacing: { xxs },\n },\n }) => xxs};\n\n ${({ theme }) =>\n theme.utilities.useDefaultFromControls\n ? css`\n position: absolute;\n display: inline-block;\n transform: translate(-50%, -50%);\n top: 50%;\n margin: 0;\n padding: 0;\n left: ${theme.spacing.s};\n `\n : css`\n position: absolute;\n left: ${theme.spacing.xxs};\n opacity: 0;\n\n &:focus ~ ${SelectedBorder} {\n outline: none !important;\n box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n }\n `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","isDisabled","checked","hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s"],"mappings":"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"}

package/lib/src/components/RadioConsent/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{StyledFieldSet as m,StyledLegend as o,StyledRadio as a}from"./styles.js";function u(u){var s=n(),i=e(e({},l),s),c=u.legend,f=u.attributes,p=u.onChange,d=u.selectedValue,h=void 0===d?"":d,v=u.name;return t.createElement(r,{theme:i},t.createElement(m,null,t.createElement(o,null,c),f.map((function(e){return t.createElement(a,{numberOfAttributes:f.length\|\|0,key:e.value,checked:h===e.value,onChange:p,name:v,value:e.value},e.option)}))))}export{u as RadioConsent,u as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/RadioConsent/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledFieldSet, StyledLegend, StyledRadio } from \"./styles\";\n\ntype Attribute = {\n value: string;\n option: string;\n};\n\nexport type RadioConsentProps = {\n /** because each radio has its own label this is the consent group label text */\n legend: string;\n /** array of option for radio constent group where option is the option name and value is the option value */\n attributes: Attribute[];\n /** on change handler callback passed change event */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /** set the value of selected option */\n selectedValue?: string;\n /** name of field this is what groups all the options together */\n name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <StyledFieldSet>\n <StyledLegend>{legend}</StyledLegend>\n {attributes.map((item: Attribute) => (\n <StyledRadio\n numberOfAttributes={attributes.length || 0}\n key={item.value}\n checked={selectedValue === item.value}\n onChange={onChange}\n name={name}\n value={item.value}\n >\n {item.option}\n </StyledRadio>\n ))}\n </StyledFieldSet>\n </ThemeProvider>\n );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","foundTheme","useTheme","theme","__assign","defaultTheme","legend","attributes","onChange","_a","selectedValue","name","React","createElement","ThemeProvider","StyledFieldSet","StyledLegend","map","item","StyledRadio","numberOfAttributes","length","key","value","checked","option"],"mappings":"0RA+BM,SAAUA,EAAaC,GAC3B,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAEGK,EAA2DN,EAAKM,OAAxDC,EAAmDP,EAAzCO,WAAEC,EAAuCR,EAAKQ,SAAlCC,EAA6BT,EAAKU,cAAlCA,OAAgB,IAAAD,EAAA,GAAEA,EAAEE,EAASX,EAAKW,KAExE,OACEC,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAAAC,cAACE,EAAc,KACbH,EAACC,cAAAG,EAAc,KAAAV,GACdC,EAAWU,KAAI,SAACC,GAAoB,OACnCN,EAAAC,cAACM,EAAW,CACVC,mBAAoBb,EAAWc,QAAU,EACzCC,IAAKJ,EAAKK,MACVC,QAASd,IAAkBQ,EAAKK,MAChCf,SAAUA,EACVG,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,OAT2B,KAe7C"}

package/lib/src/components/RadioConsent/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Radio as e}from"../Radio/index.js";var i,o,r,a=t(e)(i\|\|(i=n(["\n display: block;\n float: left;\n text-align: left;\n margin-left: ",";\n max-width: ",";\n width: ",";\n"],["\n display: block;\n float: left;\n text-align: left;\n margin-left: ",";\n max-width: ",";\n width: ",";\n"])),(function(n){return n.theme.spacing.s}),"5em",(function(n){var t=n.numberOfAttributes,e=n.theme;return"calc(((100% - ".concat("20%",") / ").concat(t,") - ").concat(e.spacing.s,")")})),l=t.legend(o\|\|(o=n(["\n width: ",";\n display: block;\n float: left;\n font-family: ",";\n"],["\n width: ",";\n display: block;\n float: left;\n font-family: ",";\n"])),"20%",(function(n){return n.theme.typography.fontFamilyBase})),d=t.fieldset(r\|\|(r=n(["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n display: block;\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 "," 0;\n width: 100%;\n"],["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n display: block;\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 "," 0;\n width: 100%;\n"])),(function(n){return n.theme.spacing.s}));export{d as StyledFieldSet,l as StyledLegend,a as StyledRadio};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/RadioConsent/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport RadioInput from \"../Radio\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst LEGEND_WIDTH = \"20%\";\nconst MAX_WIDTH = \"5em\";\n\ntype ThemeProp = {\n theme: ThemeType;\n};\n\ntype StyleRadioWidthProp = { numberOfAttributes: number } & ThemeProp;\n\nexport const StyledRadio = styled(RadioInput)<StyleRadioWidthProp>`\n display: block;\n float: left;\n text-align: left;\n margin-left: ${({ theme }) => theme.spacing.s};\n max-width: ${MAX_WIDTH};\n width: ${({ numberOfAttributes, theme }) =>\n `calc(((100% - ${LEGEND_WIDTH}) / ${numberOfAttributes}) - ${theme.spacing.s})`};\n`;\n\nexport const StyledLegend = styled.legend<ThemeProp>`\n width: ${LEGEND_WIDTH};\n display: block;\n float: left;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<ThemeProp>`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n display: block;\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n width: 100%;\n`;\n"],"names":["StyledRadio","styled","RadioInput","templateObject_1","__makeTemplateObject","_a","theme","spacing","s","numberOfAttributes","concat","StyledLegend","legend","templateObject_2","typography","fontFamilyBase","StyledFieldSet","fieldset","templateObject_3"],"mappings":"2JAMA,UASaA,EAAcC,EAAOC,EAAPD,CAAkBE,IAAAA,EAAAC,EAAA,CAAA,4EAAA,mBAAA,eAAA,OAAA,CAAqB,4EAInB,mBACvB,eAE2D,UAHlE,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,GAZd,OAcP,SAACH,OAAEI,EAAkBJ,EAAAI,mBAAEH,EAAKD,EAAAC,MACnC,MAAA,iBAAAI,OAhBiB,MAgBY,QAAAA,OAAOD,EAAkB,QAAAC,OAAOJ,EAAMC,QAAQC,EAAI,IAA/E,IAGSG,EAAeV,EAAOW,OAAMC,IAAAA,EAAAT,EAAA,CAAA,cAAA,wDAAA,OAAA,CAAW,cAC7B,wDAGwC,SAvB1C,OAuBJ,SAACC,GAAc,OAAPA,EAAAC,MAAaQ,WAAWC,cAAjB,IAGnBC,EAAiBf,EAAOgB,SAAQC,IAAAA,EAAAd,EAAA,CAAA,0LAAA,yBAAA,CAAW,0LAWV,4BAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd"}

package/lib/src/components/Select/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{LabelWrapper as d}from"../LabelWrapper/index.js";import{ErrorText as s}from"../ErrorText/index.js";import m from"./styles.js";var n=t((function(t,n){var l=t.errorMessage,c=t.hasError,p=t.required,u=t.label,b=t.hintText,f=t.hideRequiredInLabel,h=r(t,["errorMessage","hasError","required","label","hintText","hideRequiredInLabel"]),x=o(),E=e(e({},a),x);return i.createElement(d,{label:u,hintText:b,required:!f&&p\|\|!1},i.createElement(m,e({},h,{ref:n,theme:E,required:p,"aria-invalid":c\|\|!!l\|\|!1,"aria-describedby":h.id&&l?"".concat(h.id,"-error"):void 0,hasError:c\|\|!!l\|\|!1})),!!l&&i.createElement(s,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},l))}));export{n as Select,n as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/Select/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type SelectHTMLAttributes,\n type Ref,\n forwardRef,\n type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n /** error message text */\n errorMessage?: string;\n /** flag for error styling of component */\n hasError?: boolean;\n /** label text */\n label: string;\n /** hind text or custom component */\n hintText?: ReactNode;\n /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n hideRequiredInLabel?: boolean;\n /** react DOM reference of object used scrolling to it with errors etc */\n ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = forwardRef(\n (\n {\n errorMessage,\n hasError,\n required,\n label,\n hintText,\n hideRequiredInLabel,\n ...props\n }: SelectProps,\n ref?: Ref<HTMLSelectElement>,\n ) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={(!hideRequiredInLabel && required) || false}\n >\n <StyledSelect\n {...props}\n ref={ref}\n theme={theme}\n required={required}\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n hasError={hasError || !!errorMessage || false}\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n },\n);\n\nexport default Select;\n"],"names":["Select","forwardRef","_a","ref","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","ErrorText","marginTop"],"mappings":"6VAkCaA,EAASC,GACpB,SACEC,EASAC,GARE,IAAAC,iBACAC,aACAC,aACAC,UACAC,aACAC,wBACGC,EAPLC,EAAAT,EAAA,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,wBAWMU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXX,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDW,EAACE,cAAAC,EACKL,EAAA,CAAA,EAAAL,EACJ,CAAAP,IAAKA,EACLW,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAE1C,mBAAEM,EAAMW,IAAQjB,EAAe,GAAGkB,OAAAZ,EAAMW,GAAU,eAAGE,EAEvDlB,SAAUA,KAAcD,IAAgB,OAEvCA,GACDa,gBAACO,EAAS,CACRC,UAAU,MACVJ,GAAIX,EAAMW,GAAK,GAAGC,OAAAZ,EAAMW,kBAAaE,GAEpCnB,GAKX"}

package/lib/src/components/Select/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,c="3rem",i=o.select(t\|\|(t=n(["\n appearance: none;\n background: linear-gradient(\n 45deg,\n "," 50%,\n "," 50%\n ),\n linear-gradient(\n 135deg,\n "," 50%,\n "," 50%\n );\n background-color: ",";\n background-position:\n calc(100% - 16px) 50%,\n calc(100% - 10px) 50%;\n background-size: 6px 6px;\n background-repeat: no-repeat;\n border: ",";\n color: ",";\n display: block;\n font-size: ",";\n min-height: ",";\n padding: ",";\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"],["\n appearance: none;\n background: linear-gradient(\n 45deg,\n "," 50%,\n "," 50%\n ),\n linear-gradient(\n 135deg,\n "," 50%,\n "," 50%\n );\n background-color: ",";\n background-position:\n calc(100% - 16px) 50%,\n calc(100% - 10px) 50%;\n background-size: 6px 6px;\n background-repeat: no-repeat;\n border: ",";\n color: ",";\n display: block;\n font-size: ",";\n min-height: ",";\n padding: ",";\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.hasError,e=n.errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(r\|\|e?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),c,(function(n){var o=n.theme;return"calc( (".concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e\|\|(e=n(["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "],["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "])),t.colors.tertiary)}));export{i as StyledSelect,i as default};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/Select/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n hasError: boolean;\n errorMessage?: string;\n theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n appearance: none;\n background: linear-gradient(\n 45deg,\n ${({ theme }) => theme.colors.backgroundLight} 50%,\n ${({ theme }) => theme.colors.selectBackground} 50%\n ),\n linear-gradient(\n 135deg,\n ${({ theme }) => theme.colors.selectBackground} 50%,\n ${({ theme }) => theme.colors.backgroundLight} 50%\n );\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-position:\n calc(100% - 16px) 50%,\n calc(100% - 10px) 50%;\n background-size: 6px 6px;\n background-repeat: no-repeat;\n border: ${({ theme, hasError, errorMessage }) =>\n `solid ${theme.utilities.inputBorderWidth} ${\n hasError || errorMessage\n ? theme.colors.textError\n : theme.colors.textInputBorder\n }`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-size: ${({ theme }) => theme.fontSizes.m};\n min-height: ${BUTTON_HEIGHT};\n padding: ${({ theme }) =>\n `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xs}`};\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","_a","theme","colors","backgroundLight","selectBackground","hasError","errorMessage","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","templateObject_1","__makeTemplateObject","tertiary"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,2oBAAyB,8EAIF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,UA5CJ,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IAIf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IACf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAED,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAMzB,SAACH,GAAE,IAAAC,UAAOI,EAAQL,EAAAK,SAAEC,EAAYN,EAAAM,aACxC,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAYC,EACRL,EAAMC,OAAOQ,UACbT,EAAMC,OAAOS,gBAHnB,IAKO,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,IAEX,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,GACdlB,GACH,SAACI,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUL,EAAa,SAAAW,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,EAAY,YAAAP,OAAAX,kBAAqBK,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,WAAqB,YAAAT,OAAAN,EAAMgB,QAAQC,GAA9P,IAIgB,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,IAGf,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IACtB,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IAGxB,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBvB,EAAMC,OAAOuB,SAJrC"}

package/lib/src/components/Spacing/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function n(n,t){var a=n.margin,i=n.marginHorizontal,c=n.marginVertical,o=n.marginTop,p=n.marginRight,g=n.marginBottom,r=n.marginLeft,m=n.padding,l=n.paddingHorizontal,d=n.paddingVertical,u=n.paddingTop,s=n.paddingRight,e=n.paddingBottom,f=n.paddingLeft,h=a?t.spacing[a]:null,b=c?t.spacing[c]:null,z=i?t.spacing[i]:null,B=o?t.spacing[o]:null,H=p?t.spacing[p]:null,L=g?t.spacing[g]:null,R=r?t.spacing[r]:null,T=h?"margin: ".concat(h," !important;"):"",V=B?"margin-top: ".concat(B," !important;"):b?"margin-top: ".concat(b," !important;"):"",v=H?"margin-right: ".concat(H," !important;"):z?"margin-right: ".concat(z," !important;"):"",x=L?"margin-bottom: ".concat(L," !important;"):b?"margin-bottom: ".concat(b," !important;"):"",j=R?"margin-left: ".concat(R," !important;"):z?"margin-left: ".concat(z," !important;"):"",k=m?t.spacing[m]:null,q=d?t.spacing[d]:null,w=l?t.spacing[l]:null,y=u?t.spacing[u]:null,A=s?t.spacing[s]:null,C=e?t.spacing[e]:null,D=f?t.spacing[f]:null,E=k?"padding: ".concat(k," !important;"):"",F=y?"padding-top: ".concat(y," !important;"):q?"padding-top: ".concat(q," !important;"):"",G=A?"padding-right: ".concat(A," !important;"):w?"padding-right: ".concat(w," !important;"):"",I=C?"padding-bottom: ".concat(C," !important;"):q?"padding-bottom: ".concat(q," !important;"):"",J=D?"padding-left: ".concat(D," !important;"):w?"padding-left: ".concat(w," !important;"):"";return"\n ".concat(T,"\n ").concat(V,"\n ").concat(v,"\n ").concat(x,"\n ").concat(j,"\n ").concat(E,"\n ").concat(F,"\n ").concat(G,"\n ").concat(I,"\n ").concat(J,"\n ")}export{n as Spacing,n as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/Spacing/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\nexport function Spacing(props: SpacingProps, theme: ThemeType) {\n const {\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n } = props;\n\n const ma = margin ? theme.spacing[margin] : null;\n const mv = marginVertical ? theme.spacing[marginVertical] : null;\n const mh = marginHorizontal ? theme.spacing[marginHorizontal] : null;\n const mt = marginTop ? theme.spacing[marginTop] : null;\n const mr = marginRight ? theme.spacing[marginRight] : null;\n const mb = marginBottom ? theme.spacing[marginBottom] : null;\n const ml = marginLeft ? theme.spacing[marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = padding ? theme.spacing[padding] : null;\n const pv = paddingVertical ? theme.spacing[paddingVertical] : null;\n const ph = paddingHorizontal ? theme.spacing[paddingHorizontal] : null;\n const pt = paddingTop ? theme.spacing[paddingTop] : null;\n const pr = paddingRight ? theme.spacing[paddingRight] : null;\n const pb = paddingBottom ? theme.spacing[paddingBottom] : null;\n const pl = paddingLeft ? theme.spacing[paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default Spacing;\n"],"names":["Spacing","props","theme","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","ma","spacing","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"AAmBgB,SAAAA,EAAQC,EAAqBC,GAEzC,IAAAC,EAcEF,EAAKE,OAbPC,EAaEH,EAAKG,iBAZPC,EAYEJ,iBAXFK,EAWEL,EAXOK,UACTC,EAUEN,EAVSM,YACXC,EASEP,EAAKO,aARPC,EAQER,EAAKQ,WAPPC,EAOET,EAPKS,QACPC,EAMEV,EANeU,kBACjBC,EAKEX,EAAKW,gBAJPC,EAIEZ,EAAKY,WAHPC,EAGEb,eAFFc,EAEEd,gBADFe,EACEf,cAEEgB,EAAKd,EAASD,EAAMgB,QAAQf,GAAU,KACtCgB,EAAKd,EAAiBH,EAAMgB,QAAQb,GAAkB,KACtDe,EAAKhB,EAAmBF,EAAMgB,QAAQd,GAAoB,KAC1DiB,EAAKf,EAAYJ,EAAMgB,QAAQZ,GAAa,KAC5CgB,EAAKf,EAAcL,EAAMgB,QAAQX,GAAe,KAChDgB,EAAKf,EAAeN,EAAMgB,QAAQV,GAAgB,KAClDgB,EAAKf,EAAaP,EAAMgB,QAAQT,GAAc,KAE9CgB,EAAWR,EAAK,WAAWS,OAAAT,EAAgB,gBAAG,GAC9CU,EAAWN,EACb,eAAeK,OAAAL,EAAgB,gBAC/BF,EACE,eAAeO,OAAAP,EAAgB,gBAC/B,GACAS,EAAWN,EACb,iBAAiBI,OAAAJ,EAAgB,gBACjCF,EACE,iBAAiBM,OAAAN,EAAgB,gBACjC,GACAS,EAAWN,EACb,kBAAkBG,OAAAH,EAAgB,gBAClCJ,EACE,kBAAkBO,OAAAP,EAAgB,gBAClC,GACAW,EAAWN,EACb,gBAAgBE,OAAAF,EAAgB,gBAChCJ,EACE,gBAAgBM,OAAAN,EAAgB,gBAChC,GAEAW,EAAKrB,EAAUR,EAAMgB,QAAQR,GAAW,KACxCsB,EAAKpB,EAAkBV,EAAMgB,QAAQN,GAAmB,KACxDqB,EAAKtB,EAAoBT,EAAMgB,QAAQP,GAAqB,KAC5DuB,EAAKrB,EAAaX,EAAMgB,QAAQL,GAAc,KAC9CsB,EAAKrB,EAAeZ,EAAMgB,QAAQJ,GAAgB,KAClDsB,EAAKrB,EAAgBb,EAAMgB,QAAQH,GAAiB,KACpDsB,EAAKrB,EAAcd,EAAMgB,QAAQF,GAAe,KAEhDsB,EAAWP,EAAK,YAAYL,OAAAK,EAAgB,gBAAG,GAC/CQ,EAAWL,EACb,gBAAgBR,OAAAQ,EAAgB,gBAChCF,EACE,gBAAgBN,OAAAM,EAAgB,gBAChC,GACAQ,EAAWL,EACb,kBAAkBT,OAAAS,EAAgB,gBAClCF,EACE,kBAAkBP,OAAAO,EAAgB,gBAClC,GACAQ,EAAWL,EACb,mBAAmBV,OAAAU,EAAgB,gBACnCJ,EACE,mBAAmBN,OAAAM,EAAgB,gBACnC,GACAU,EAAWL,EACb,iBAAiBX,OAAAW,EAAgB,gBACjCJ,EACE,iBAAiBP,OAAAO,EAAgB,gBACjC,GAEN,MAAO,SAAAP,OACHD,EACA,UAAAC,OAAAC,mBACAC,EAAQ,UAAAF,OACRG,EACA,UAAAH,OAAAI,mBACAQ,EAAQ,UAAAZ,OACRa,EACA,UAAAb,OAAAc,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}

package/lib/src/components/Step/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as n}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as s,StepTick as c}from"./styles.js";function i(i){var u=i.steps,p=void 0===u?[]:u,d=i.current,f=void 0===d?1:d,y=i.children,E=r(),v=e(e({},o),E),h=Array.isArray(p)?Object.keys(p).length:0;return t.createElement(n,{theme:v},t.createElement(l,null,t.createElement(m,{total:h},Array.isArray(p)&&p.map((function(e,r){var n="step".concat(r);return t.createElement(a,{key:n,active:r+1===f,done:r+1<f},t.createElement(s,null,r+1<f&&t.createElement(c,null)),e)}))),y))}export{i as Step,i as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/Step/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n /** current step number */\n current: number;\n /** list of step */\n steps: string[];\n children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const totalSteps: number = Array.isArray(steps)\n ? Object.keys(steps).length\n : 0;\n\n return (\n <ThemeProvider theme={theme}>\n <StepWrapper>\n <StepList total={totalSteps}>\n {Array.isArray(steps) &&\n steps.map((step, i) => {\n const key = `step${i}`;\n return (\n <StepItem\n key={key}\n active={i + 1 === current}\n done={i + 1 < current}\n >\n <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n {step}\n </StepItem>\n );\n })}\n </StepList>\n {children}\n </StepWrapper>\n </ThemeProvider>\n );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","foundTheme","useTheme","theme","__assign","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","total","map","step","i","key","concat","StepItem","active","done","StepBar","StepTick"],"mappings":"2SAsBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAQ,IAAAD,EAAA,KAAIE,EAAAH,EAAAI,QAAAA,OAAU,IAAAD,EAAA,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQX,GACrCY,OAAOC,KAAKb,GAAOc,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,EAAS,CAAAC,MAAOX,GACdC,MAAMC,QAAQX,IACbA,EAAMqB,KAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAOC,OAAAF,GACnB,OACER,gBAACW,EAAQ,CACPF,IAAKA,EACLG,OAAQJ,EAAI,IAAMrB,EAClB0B,KAAML,EAAI,EAAIrB,GAEda,EAACC,cAAAa,EAAS,KAAAN,EAAI,EAAIrB,GAAWa,EAAAC,cAACc,EAAQ,OACrCR,EAGP,KAEHnB,GAIT"}

package/lib/src/components/Step/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o}from"styled-components";var r,e,i,a,l,d,p,s,c=t.div(r\|\|(r=n(["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"],["\n box-sizing: border-box;\n ,\n :after,\n :before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"]))),b=t.ul(i\|\|(i=n(["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"],["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"])),(function(t){return t.total&&o(e\|\|(e=n(["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "],["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "])),100/t.total)})),x=t.span(a\|\|(a=n(["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"],["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"])),(function(n){return n.theme.colors.stepBackground}),(function(n){return n.theme.colors.stepBorder}),(function(n){return n.theme.colors.stepBorder})),f=t.span(l\|\|(l=n(["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"],["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"])),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)}),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)})),g=t.li(s\|\|(s=n(["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"],["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(t){var r=t.theme;return t.active&&o(d\|\|(d=n(["\n "," {\n border-color: ",";\n }\n "],["\n "," {\n border-color: ",";\n }\n "])),x,r.colors.tertiary)}),(function(t){var r=t.done,e=t.theme;return r&&o(p\|\|(p=n(["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "],["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "])),x,e.colors.tertiary,e.colors.tertiary)}));export{x as StepBar,g as StepItem,b as StepList,f as StepTick,c as StepWrapper};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/Step/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n`;\n\ntype StepListProps = {\n total: number;\n};\n\ntype ThemeProps = {\n theme: ThemeType;\n};\n\nexport const StepList = styled.ul<StepListProps>`\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ${(props) =>\n props.total &&\n css`\n li {\n width: ${100 / props.total}%;\n }\n li:last-child span:after {\n display: none;\n }\n `}\n`;\n\nexport const StepBar = styled.span<ThemeProps>`\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ${({ theme }) => theme.colors.stepBackground};\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: transparent;\n border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n`;\n\nexport const StepTick = styled.span<ThemeProps>`\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n border-right: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n margin-top: 4px;\n margin-left: 8px;\n`;\n\ntype StepItemProps = {\n active: boolean;\n done: boolean;\n theme: ThemeType;\n};\n\nexport const StepItem = styled.li<StepItemProps>`\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n ${({ theme, active }: StepItemProps) =>\n active &&\n css`\n ${StepBar} {\n border-color: ${theme.colors.tertiary};\n }\n `}\n ${({ done, theme }) =>\n done &&\n css`\n ${StepBar} {\n border: none;\n background-color: ${theme.colors.tertiary};\n &:after {\n border-bottom: 2px solid ${theme.colors.tertiary};\n }\n }\n `}\n`;\n"],"names":["StepWrapper","styled","div","templateObject_1","__makeTemplateObject","StepList","ul","templateObject_3","props","total","css","templateObject_2","StepBar","span","templateObject_4","_a","theme","colors","stepBackground","stepBorder","StepTick","templateObject_5","textLight","concat","StepItem","li","templateObject_8","typography","fontFamilyBase","active","templateObject_6","tertiary","done","templateObject_7"],"mappings":"2HAGa,oBAAAA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAmBxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAAe,gIAiB3C,SATD,SAACI,GACD,OAAAA,EAAMC,OACNC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAE2B,0FAAjB,IAAMI,EAAMC,MAHzB,IAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAAY,kHAKkB,2EAGJ,kNAUS,uEAb/C,SAACW,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,cAAb,IAGf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,UAAb,IAUN,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,UAAb,IAOjCC,EAAWnB,EAAOY,KAAgBQ,IAAAA,EAAAjB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAAA,0IAUf,sBAKA,mDATb,SAACW,GAEJ,IAAAO,EAASP,EAAAC,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IACU,SAACP,GAEH,IAAAO,EAASP,EAAAC,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IAWKE,EAAWvB,EAAOwB,GAAEC,IAAAA,EAAAtB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAAe,wFAIe,UAQ1D,OAWA,SAnBY,SAACW,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,cAAjB,IAE5B,SAACb,OAAEC,EAAKD,EAAAC,MACR,OADgBD,EAAAc,QAEhBnB,EAAGoB,IAAAA,EAAA1B,EAAA,CAAA,WAAA,6BAAA,oBAAA,CAAA,WACQ,6BAC8B,sBADrCQ,EACgBI,EAAMC,OAAOc,SAHjC,IAMA,SAAChB,OAAEiB,EAAIjB,EAAAiB,KAAEhB,EAAKD,EAAAC,MACd,OAAAgB,GACAtB,EAAGuB,IAAAA,EAAA7B,EAAA,CAAA,WAAA,wDAAA,4DAAA,+BAAA,CAAA,WACQ,wDAEkC,4DAES,iCAJlDQ,EAEoBI,EAAMC,OAAOc,SAEJf,EAAMC,OAAOc,SAN9C"}

package/lib/src/components/Text/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{TextStyled as s}from"./styles.js";var f=t((function(t,f){var i=o(),l=e(e({},m),i);return r.createElement(s,e({},t,{ref:f,theme:l}))}));export{f as Text,f as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/Text/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** text colour */\n textColor?: string;\n /** text horizontal alignment */\n textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n /** font size FontSizeType t-shirt sizes */\n textSize?: FontSizeType;\n /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n textWeight?: number | string;\n /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n textFontFamily?: string;\n /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n as?: ElementType;\n /** word-break behaviour */\n wordBreak?: WordBreakType;\n /** overflow-wrap behaviour */\n overflowWrap?: OverflowWrapType;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLElement>;\n };\n\nexport const Text = forwardRef((props: TextProps, ref?: Ref<HTMLElement>) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return <TextStyled {...props} ref={ref} theme={theme} />;\n});\n\nexport default Text;\n"],"names":["Text","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","TextStyled"],"mappings":"qPA8CaA,EAAOC,GAAW,SAACC,EAAkBC,GAChD,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OAAOK,EAACC,cAAAC,EAAeJ,EAAA,CAAA,EAAAL,EAAO,CAAAC,IAAKA,EAAKG,MAAOA,IACjD"}

package/lib/src/components/Text/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Spacing as o}from"../Spacing/index.js";var e,r=t.p(e\|\|(e=n(["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"],["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"])),(function(n){var t=n.textFontFamily,o=n.theme;return t\|\|o.typography.fontFamilyBase}),(function(n){return n.wordBreak\|\|"normal"}),(function(n){return n.overflowWrap\|\|"break-word"}),(function(n){var t=n.theme.colors,o=n.textColor;return o&&void 0!==t[o]?t[o]:o\|\|t.textDark}),(function(n){return n.textAlign\|\|"left"}),(function(n){var t=n.theme,o=t.fontSizes,e=t.fontSizes.m,r=n.textSize;return r?o[r]:e}),(function(n){return n.theme.typography.lineHeight}),(function(n){var t=n.textWeight,o=n.theme;return t\|\|o.typography.fontWeightBase}),(function(n){var t=n.as,o=n.theme.spacing.xs;return void 0===t\|\|"p"===t?"".concat(o):0}),(function(n){return o(n,n.theme)}));export{r as TextStyled};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/Text/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ElementType } from \"react\";\n\nimport spacing, { type SpacingProps } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingProps & {\n textColor?: ColorKeyType;\n textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n textSize?: FontSizeType;\n textWeight?: number;\n as?: ElementType;\n wordBreak?: WordBreakType;\n overflowWrap?: OverflowWrapType;\n textFontFamily?: string;\n theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n font-family: ${({ textFontFamily, theme }) =>\n textFontFamily || theme.typography.fontFamilyBase};\n word-break: ${({ wordBreak }) => wordBreak || \"normal\"};\n overflow-wrap: ${({ overflowWrap }) => overflowWrap || \"break-word\"};\n color: ${({ theme: { colors }, textColor }) =>\n textColor && typeof colors[textColor] !== \"undefined\"\n ? colors[textColor]\n : textColor || colors.textDark};\n text-align: ${({ textAlign }) => textAlign || \"left\"};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n textSize,\n }) => (textSize ? fontSizes[textSize] : m)};\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-weight: ${({ textWeight, theme }) =>\n textWeight || theme.typography.fontWeightBase};\n padding: 0;\n margin: 0;\n margin-bottom: ${({\n as,\n theme: {\n spacing: { xs },\n },\n }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","templateObject_1","__makeTemplateObject","_a","textFontFamily","theme","typography","fontFamilyBase","wordBreak","overflowWrap","colors","textColor","textDark","textAlign","_b","fontSizes","m","textSize","lineHeight","textWeight","fontWeightBase","as","xs","spacing","props"],"mappings":"+JAwBO,MAAMA,EAAaC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,oBAAA,uBAAA,eAAA,oBAAA,mBAAA,qBAAA,qBAAA,oDAAA,0DAAA,MAAA,CAAiB,oBAEE,oBACG,uBACa,eAIjC,oBACkB,mBAOV,qBACe,qBAEV,oDAQc,0DAMR,SAhCtC,SAACC,OAAEC,EAAcD,EAAAC,eAAEC,EAAKF,EAAAE,MACrC,OAAAD,GAAkBC,EAAMC,WAAWC,cAAnC,IACY,SAACJ,GAAkB,OAAPA,EAAAK,WAAoB,QAAb,IAChB,SAACL,GAAqB,OAAPA,EAAAM,cAAuB,YAAhB,IAC9B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAASR,EAAAQ,UACtC,OAAAA,QAA0C,IAAtBD,EAAOC,GACvBD,EAAOC,GACPA,GAAaD,EAAOE,QAFxB,IAGY,SAACT,GAAkB,OAAPA,EAAAU,WAAoB,MAAb,IACpB,SAACV,OACZW,EAGCX,EAAAE,MAFCU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAAQd,EAAAc,SACJ,OAACA,EAAWF,EAAUE,GAAYD,CAAlC,IACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,IACf,SAACf,OAAEgB,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MACjC,OAAAc,GAAcd,EAAMC,WAAWc,cAA/B,IAGe,SAACjB,OAChBkB,EAAElB,EAAAkB,GAEWC,EAAEnB,EAAAE,MAAAkB,QAAAD,GAEX,YAAe,IAAPD,GAA6B,MAAPA,EAAa,UAAGC,GAAO,CAArD,IAMJ,SAACE,GAAU,OAAAD,EAAQC,EAAOA,EAAMnB"}

package/lib/src/components/TextAreaField/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as n}from"../LabelWrapper/index.js";import m from"./styles.js";var d=t((function(t,d){var l=t.errorMessage,p=t.hasError,c=t.hintText,u=t.label,f=t.resize,h=void 0===f?"vertical":f,x=t.lineCount,b=void 0===x?3:x,v=r(t,["errorMessage","hasError","hintText","label","resize","lineCount"]),E=o(),j=e(e({},s),E);return i.createElement(n,{label:u,hintText:c,required:v.required\|\|!1},i.createElement(m,e({},v,{"aria-invalid":p\|\|!!l\|\|!1,"aria-describedby":v.id&&l?"".concat(v.id,"-error"):void 0,hasError:p\|\|!!l\|\|!1,resize:h,lineCount:b,theme:j,ref:d,"data-hj-suppress":!0})),!!l&&i.createElement(a,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},l))}));export{d as TextAreaField,d as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/TextAreaField/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type TextareaHTMLAttributes,\n type Ref,\n forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n /** error message text */\n errorMessage?: string;\n /** flag for error styling */\n hasError?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** resize behaviour using the resize button on the bottom right of the component */\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n /** number of visible lines of text before scroll is required this affect the height of the input field */\n lineCount?: number;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = forwardRef(\n (\n {\n errorMessage,\n hasError,\n hintText,\n label,\n resize = \"vertical\",\n lineCount = 3,\n ...props\n }: TextAreaFieldProps,\n ref?: Ref<HTMLTextAreaElement>,\n ) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n >\n <StyledTextArea\n {...props}\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n hasError={hasError || !!errorMessage || false}\n resize={resize}\n lineCount={lineCount}\n theme={theme}\n ref={ref}\n data-hj-suppress\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n },\n);\n\nexport default TextAreaField;\n"],"names":["TextAreaField","forwardRef","_a","ref","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","undefined","ErrorText","marginTop"],"mappings":"6VAkCaA,EAAgBC,GAC3B,SACEC,EASAC,GARE,IAAAC,EAAYF,EAAAE,aACZC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAKL,EAAAK,MACLC,EAAmBN,EAAAO,OAAnBA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,EAACA,EACVE,EAAKC,EAAAX,EAPV,qEAWMY,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,GACCd,MAAOA,EACPD,SAAUA,EACVgB,SAAUV,EAAMU,WAAY,GAE5BH,EAACC,cAAAG,EACKN,EAAA,CAAA,EAAAL,EACU,CAAA,eAAAP,KAAcD,IAAgB,EAE1C,mBAAEQ,EAAMY,IAAQpB,EAAe,GAAAqB,OAAGb,EAAMY,GAAE,eAAWE,EAEvDrB,SAAUA,KAAcD,IAAgB,EACxCK,OAAQA,EACRE,UAAWA,EACXK,MAAOA,EACPb,IAAKA,EAEL,oBAAA,OACCC,GACDe,gBAACQ,EAAS,CACRC,UAAU,MACVJ,GAAIZ,EAAMY,GAAK,GAAGC,OAAAb,EAAMY,kBAAaE,GAEpCtB,GAKX"}

package/lib/src/components/TextAreaField/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,i=o.textarea(t\|\|(t=n(["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"],["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"])),(function(n){return n.resize}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.hasError;return"solid ".concat(o.utilities.inputBorderWidth,"\n ").concat(r?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.m}),(function(n){var o=n.lineCount,r=n.theme;return"calc(".concat(r.typography.lineHeight," * ").concat(o,")")}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e\|\|(e=n(["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "],["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "])),t.colors.tertiary)}));export{i as StyledTextArea,i as default};
2	+ //# sourceMappingURL=styles.js.map

package/lib/src/components/TextAreaField/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n hasError: boolean;\n resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n lineCount: number;\n theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n resize: ${({ resize }) => resize};\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-image: none;\n border: ${({ theme, hasError }) => `solid ${theme.utilities.inputBorderWidth}\n ${hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: 6px 8px;\n width: 100%;\n height: ${({ lineCount, theme }) =>\n `calc(${theme.typography.lineHeight} * ${lineCount})`};\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","templateObject_2","__makeTemplateObject","_a","resize","theme","colors","backgroundLight","hasError","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","templateObject_1","tertiary"],"mappings":"2HAUA,QAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,0BAAA,2CAAA,eAAA,wCAAA,mBAAA,qDAAA,iFAAA,6CAAA,iBAAA,eAAA,OAAA,CAAqB,eACzB,0BAC+B,2CAGO,eACzB,wCAEgB,mBAChB,qDAIU,iFAIA,6CAGD,iBACP,eAWrC,UA/BA,SAACC,GAAe,OAAPA,EAAAC,MAAO,IACN,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,IAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAAQL,EAAAK,SAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBACxD,UAAAF,OAAAD,EAAWH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,IAE1B,SAACV,GAAc,OAAPA,EAAAE,MAAaC,OAAOQ,QAAb,IAET,SAACX,GAAc,OAAPA,EAAAE,MAAaU,WAAWC,cAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAE,MAAaY,UAAUC,CAAhB,IAGlB,SAACf,OAAEgB,EAAShB,EAAAgB,UAAEd,EAAKF,EAAAE,MAC3B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAY,IAArD,IAIgB,SAAChB,GAAc,OAAPA,EAAAE,MAAaC,OAAOe,SAAb,IAGf,SAAClB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IACtB,SAACnB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IAGxB,SAACnB,GAAE,IAAAE,EAAKF,EAAAE,MACR,OAACA,EAAMK,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAvB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBG,EAAMC,OAAOoB,SAJrC"}

package/lib/src/components/TextField/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as e,__assign as i}from"../../../node_modules/tslib/tslib.es6.js";import r,{forwardRef as t}from"react";import{useTheme as a}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import{ExtraLeft as d,StyledInputWrapper as m,StyledInput as n,ExtraRight as h,Extra as b,ExtraWrapper as c}from"./styles.js";var x=t((function(t,x){var p=t.errorMessage,V=t.extraBottom,E=t.extraLeft,u=t.extraRight,f=t.extraTop,v=t.hasError,I=t.hintText,T=t.isValid,g=t.isValidVisible,j=t.isInvalidVisible,L=t.label,q=t.hideRequiredInLabel,R=e(t,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel"]),y=a(),B=i(i({},l),y),M=r.createElement(r.Fragment,null,!!E&&r.createElement(d,{theme:B},E),r.createElement(m,{hasError:v\|\|!!p\|\|!1,isValid:void 0!==T?T:!v&&!p,"aria-invalid":v\|\|!!p\|\|!1,isValidVisible:g\|\|!1,isInvalidVisible:j\|\|!1,theme:B},r.createElement(n,i({hasError:v\|\|!!p\|\|!1,isValid:void 0!==T?T:!v&&!p,"aria-invalid":v\|\|!!p\|\|!1,"aria-describedby":R.id&&p?"".concat(R.id,"-error"):void 0,isValidVisible:g\|\|!1,isInvalidVisible:j\|\|!1},R,{theme:B,"data-hj-suppress":!0,ref:x}))),!!u&&r.createElement(h,{theme:B},u));return r.createElement(o,{label:L,hintText:I,required:R.required\|\|!1,hideRequiredInLabel:q},!!f&&r.createElement(b,{theme:B},f),u\|\|E?r.createElement(c,null,M):M,!!V&&r.createElement(b,{theme:B},V),!!p&&r.createElement(s,{marginTop:"xxs",id:R.id?"".concat(R.id,"-error"):void 0},p))}));export{x as TextField,x as default};
2	+ //# sourceMappingURL=index.js.map

package/lib/src/components/TextField/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n ExtraLeft,\n ExtraRight,\n Extra,\n ExtraWrapper,\n StyledInput,\n StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n /** error message text */\n errorMessage?: string;\n /** custom component/text that appears underneath the input field */\n extraBottom?: ReactNode;\n /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n extraLeft?: ReactNode;\n /** custom component/text that appears to the right of the input field for example a search button */\n extraRight?: ReactNode;\n /** custom component/text that appears above the input field for example a url domain */\n extraTop?: ReactNode;\n /** flag for error styling */\n hasError?: boolean;\n /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n isValid?: boolean;\n /** flag to hide or show the check icon when valid */\n isValidVisible?: boolean;\n /** flag to hide or show the cross icon when invalid */\n isInvalidVisible?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n hideRequiredInLabel?: boolean;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = forwardRef(\n (\n {\n errorMessage,\n extraBottom,\n extraLeft,\n extraRight,\n extraTop,\n hasError,\n hintText,\n isValid,\n isValidVisible,\n isInvalidVisible,\n label,\n hideRequiredInLabel,\n ...props\n }: TextFieldProps,\n ref?: Ref<HTMLInputElement>,\n ) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const renderContent = (\n <>\n {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n <StyledInputWrapper\n hasError={hasError || !!errorMessage || false}\n isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n isValidVisible={isValidVisible || false}\n isInvalidVisible={isInvalidVisible || false}\n theme={theme}\n >\n <StyledInput\n hasError={hasError || !!errorMessage || false}\n isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n isValidVisible={isValidVisible || false}\n isInvalidVisible={isInvalidVisible || false}\n {...props}\n theme={theme}\n data-hj-suppress\n ref={ref}\n />\n </StyledInputWrapper>\n {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n </>\n );\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n hideRequiredInLabel={hideRequiredInLabel}\n >\n {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n {!!extraRight || !!extraLeft ? (\n <ExtraWrapper>{renderContent}</ExtraWrapper>\n ) : (\n renderContent\n )}\n {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n },\n);\n\nexport default TextField;\n"],"names":["TextField","forwardRef","_a","ref","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","StyledInput","id","concat","undefined","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop"],"mappings":"gcAqDaA,EAAYC,GACvB,SACEC,EAeAC,GAdE,IAAAC,EAAYF,EAAAE,aACZC,EAAWH,EAAAG,YACXC,EAASJ,EAAAI,UACTC,eACAC,aACAC,aACAC,EAAQR,EAAAQ,SACRC,EAAOT,EAAAS,QACPC,EAAcV,EAAAU,eACdC,EAAgBX,EAAAW,iBAChBC,EAAKZ,EAAAY,MACLC,EAAmBb,EAAAa,oBAChBC,EAAKC,EAAAf,EAbV,sKAiBMgB,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKpB,GAAakB,EAACC,cAAAE,EAAU,CAAAP,MAAOA,GAAQd,GAC1CkB,EAAAC,cAACG,EACC,CAAAnB,SAAUA,KAAcL,IAAgB,EACxCO,aACqB,IAAZA,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAC5CQ,eAAgBA,IAAkB,EAClCC,iBAAkBA,IAAoB,EACtCO,MAAOA,GAEPI,EAAAC,cAACI,EACCR,EAAA,CAAAZ,SAAUA,KAAcL,IAAgB,EACxCO,aACqB,IAAZA,EACHA,GACCF,IAAaL,EAAY,eAElBK,KAAcL,IAAgB,EAAK,mBAE7CY,EAAMc,IAAQ1B,EAAe,GAAG2B,OAAAf,EAAMc,GAAU,eAAGE,EAEvDpB,eAAgBA,IAAkB,EAClCC,iBAAkBA,IAAoB,GAClCG,EAAK,CACTI,MAAOA,EAAK,oBAAA,EAEZjB,IAAKA,QAGNI,GAAciB,EAAAC,cAACQ,EAAW,CAAAb,MAAOA,GAAQb,IAIhD,OACEiB,gBAACU,EAAY,CACXpB,MAAOA,EACPJ,SAAUA,EACVyB,SAAUnB,EAAMmB,WAAY,EAC5BpB,oBAAqBA,KAElBP,GAAYgB,EAACC,cAAAW,EAAM,CAAAhB,MAAOA,GAAQZ,GAClCD,GAAgBD,EACjBkB,gBAACa,EAAY,KAAEd,GAA6B,IAI3ClB,GAAemB,EAACC,cAAAW,EAAM,CAAAhB,MAAOA,GAAQf,KACrCD,GACDoB,gBAACc,EAAS,CACRC,UAAU,MACVT,GAAId,EAAMc,GAAK,GAAGC,OAAAf,EAAMc,kBAAaE,GAEpC5B,GAKX"}

package/lib/src/components/TextField/styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as A}from"styled-components";var t,e,i,r,a,l,b,g,c,u,d,s="48px",m=o.span(t\|\|(t=n(["\n box-sizing: border-box;\n display: block;\n background-color: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: ",";\n margin: 0;\n line-height: 1rem;\n width: auto;\n"],["\n box-sizing: border-box;\n display: block;\n background-color: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: ",";\n margin: 0;\n line-height: 1rem;\n width: auto;\n"])),(function(n){return n.theme.colors.textInputExtraInfo}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontWeightLight}),(function(n){var o=n.theme;return"calc((".concat(s," - 1em ) / 2) ").concat(o.spacing.xs)})),h=o(m)(e\|\|(e=n(["\n box-sizing: border-box;\n width: auto;\n vertical-align: middle;\n height: ",";\n\n button {\n min-height: "," !important;\n }\n"],["\n box-sizing: border-box;\n width: auto;\n vertical-align: middle;\n height: ",";\n\n button {\n min-height: "," !important;\n }\n"])),s,(function(n){var o=n.theme;return"calc(".concat(s," - (2 * ").concat(o.utilities.inputBorderWidth,"))")})),p=o(m)(i\|\|(i=n(["\n box-sizing: border-box;\n width: auto;\n border: ",";\n transition: border-color 150ms linear;\n border-left: 0;\n background-color: transparent;\n padding: 0;\n height: ",";\n vertical-align: middle;\n\n button {\n min-height: "," !important;\n }\n"],["\n box-sizing: border-box;\n width: auto;\n border: ",";\n transition: border-color 150ms linear;\n border-left: 0;\n background-color: transparent;\n padding: 0;\n height: ",";\n vertical-align: middle;\n\n button {\n min-height: "," !important;\n }\n"])),(function(n){var o=n.theme;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(o.colors.textInputBorder)}),s,(function(n){var o=n.theme;return"calc(".concat(s," - (2 * ").concat(o.utilities.inputBorderWidth,"))")})),Z=o.span(r\|\|(r=n(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n"],["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n"]))),W=o.span(b\|\|(b=n(["\n box-sizing: border-box;\n position: relative;\n display: block;\n flex: 1 1;\n &:after {\n display: ",';\n position: absolute;\n width: 2em;\n z-index: 1;\n bottom: 0;\n right: 0;\n content: "";\n top: 0;\n background-repeat: no-repeat;\n background-position: ',";\n ","\n ","\n }\n"],["\n box-sizing: border-box;\n position: relative;\n display: block;\n flex: 1 1;\n &:after {\n display: ",';\n position: absolute;\n width: 2em;\n z-index: 1;\n bottom: 0;\n right: 0;\n content: "";\n top: 0;\n background-repeat: no-repeat;\n background-position: ',";\n ","\n ","\n }\n"])),(function(n){var o=n.isValidVisible;return n.isInvalidVisible\|\|o?"block":"none"}),(function(n){var o=n.theme;return"calc( 100% - ".concat(o.spacing.xxs,") 50% ")}),(function(o){var t=o.isValid,e=o.isInvalidVisible;return!t&&e&&A(a\|\|(a=n(['\n background-image: url("data:image/png;base64,','");\n '],['\n background-image: url("data:image/png;base64,','");\n '])),"iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAK0mlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU9kWhs+96Y0WQDqhN0E6AaSEHkB6F5WQBBIIMSYEEbsyqOBYUBFBZQCHquDoCMhYEAsWRLFhnyCDgjoOFmyozAUeYWbeeu+tt9c693x3Z5999r65Z63/AkDxY4lEAlgJgCxhtjgq0IeWkJhEww0CCGgDAlADtiy2RMSIiAgFiE3Pf7f3d5BoxG5aT+T699//q6lwuBI2AFAywqkcCTsL4Q5kDLFF4mwAUHWI32hptmiCuxFWFSMFIiyb4PQpfjfBqZOMxk/GxET5IqwDAJ7MYonTASCbI35aDjsdyUMOQthWyOELEc5F2JPNY3EQbkN4dlbW4gn+DWFzJF4EAIWMMD31LznT/5Y/VZ6fxUqX81Rfk4b340tEAtay//PR/G/LEkin9zBFBpknDopCZuTfhO5mLg6RszA1LHya+ZzJ+EnmSYNip5kt8U2aZg7LL0S+VhAWOs1p/ACmPE82M2aauRL/6GkWL46S75Um9mVMM0s8s680M1bu53GZ8vx5vJj4ac7hx4VNsyQzOmQmxlfuF0uj5PVzhYE+M/sGyHvPkvylXz5TvjabFxMk7501Uz9XyJjJKUmQ18bh+vnPxMTK40XZPvK9RIIIeTxXECj3S3Ki5WuzkZdzZm2E/BlmsIIjphlEgFDgAByBK3KNB5HZ3NzsiSZ8F4uWifnpvGwaAzlpXBpTyLaZTbO3tbcDYOLcTr0Kb+9OnkdIHT/jS0POl2MDclZcZ3yCDQCcuQ6AwsYZn9FbAAgTfgFbKs6Z8qEnLhhABIpAFWgCPWAEzIE1sAfOwB14A38QDMJBDEgECwEb8EAWEIOlYAVYCwpAEdgGdoEyUAGqQR04BI6AVnACnAEXwBVwHdwGD4AMDIIXYAS8B2MQBOEgCkSFNCF9yASyguwhOuQJ+UOhUBSUCKVA6ZAQkkIroPVQEVQMlUGVUD30E3QcOgNdgnqhe1A/NAy9gT7DKJgMq8K6sCk8B6bDDDgEjoEXwOnwEjgPzoe3wKVwFXwQboHPwFfg27AMfgGPogCKhFJHGaCsUXSULyoclYRKQ4lRq1CFqBJUFaoJ1Y7qQt1EyVAvUZ/QWDQVTUNbo93RQehYNBu9BL0KvRldhq5Dt6DPoW+i+9Ej6G8YCkYHY4VxwzAxCZh0zFJMAaYEU4M5hjmPuY0ZxLzHYrHqWDOsCzYIm4jNwC7HbsbuwzZjO7C92AHsKA6H08RZ4Txw4TgWLhtXgNuDO4g7jbuBG8R9xJPw+nh7fAA+CS/Er8OX4Bvwp/A38M/wYwQlggnBjRBO4BCWEbYSDhDaCdcIg4QxojLRjOhBjCFmENcSS4lNxPPEh8S3JBLJkORKiiTxSWtIpaTDpIukftInsgrZkuxLTiZLyVvIteQO8j3yWwqFYkrxpiRRsilbKPWUs5THlI8KVAUbBaYCR2G1QrlCi8INhVeKBEUTRYbiQsU8xRLFo4rXFF8qEZRMlXyVWEqrlMqVjiv1KY0qU5XtlMOVs5Q3KzcoX1IeUsGpmKr4q3BU8lWqVc6qDFBRVCOqL5VNXU89QD1PHVTFqpqpMlUzVItUD6n2qI6oqag5qsWp5aqVq51Uk6mj1E3VmeoC9a3qR9TvqH+epTuLMYs7a9Osplk3Zn3Q0Nbw1uBqFGo0a9zW+KxJ0/TXzNTcrtmq+UgLrWWpFam1VGu/1nmtl9qq2u7abO1C7SPa93VgHUudKJ3lOtU63Tqjunq6gboi3T26Z3Vf6qnreetl6O3UO6U3rE/V99Tn6+/UP63/nKZGY9AEtFLaOdqIgY5BkIHUoNKgx2DM0Mww1nCdYbPhIyOiEd0ozWinUafRiLG+8TzjFcaNxvdNCCZ0E57JbpMukw+mZqbxphtMW02HzDTMmGZ5Zo1mD80p5l7mS8yrzG9ZYC3oFpkW+yyuW8KWTpY8y3LLa1awlbMV32qfVe9szGzX2cLZVbP7rMnWDOsc60brfht1m1CbdTatNq/mGM9JmrN9Ttecb7ZOtgLbA7YP7FTsgu3W2bXbvbG3tGfbl9vfcqA4BDisdmhzeO1o5ch13O9414nqNM9pg1On01dnF2exc5PzsIuxS4rLXpc+uio9gr6ZftEV4+rjutr1hOsnN2e3bLcjbn+4W7tnuje4D801m8ude2DugIehB8uj0kPmSfNM8fzBU+Zl4MXyqvJ64m3kzfGu8X7GsGBkMA4yXvnY+oh9jvl88HXzXenb4YfyC/Qr9OvxV/GP9S/zfxxgGJAe0BgwEugUuDywIwgTFBK0PaiPqctkM+uZI8EuwSuDz4WQQ6JDykKehFqGikPb58HzguftmPcwzCRMGNYaDsKZ4TvCH0WYRSyJ+CUSGxkRWR75NMouakVUVzQ1elF0Q/T7GJ+YrTEPYs1jpbGdcYpxyXH1cR/i/eKL42UJcxJWJlxJ1ErkJ7Yl4ZLikmqSRuf7z981fzDZKbkg+c4CswW5Cy4t1FooWHhykeIi1qKjKZiU+JSGlC+scFYVazSVmbo3dYTty97NfsHx5uzkDHM9uMXcZ2keacVpQ+ke6TvSh3levBLeS74vv4z/OiMooyLjQ2Z4Zm3muCBe0JyFz0rJOi5UEWYKzy3WW5y7uFdkJSoQyZa4Ldm1ZEQcIq6RQJIFkrZsVUQgdUvNpd9J+3M8c8pzPi6NW3o0VzlXmNu9zHLZpmXP8gLyflyOXs5e3rnCYMXaFf0rGSsrV0GrUld1rjZanb96cE3gmrq1xLWZa6+us11XvO7d+vj17fm6+WvyB74L/K6xQKFAXNC3wX1DxUb0Rv7Gnk0Om/Zs+lbIKbxcZFtUUvRlM3vz5e/tvi/9fnxL2paerc5b92/DbhNuu7Pda3tdsXJxXvHAjnk7WnbSdhbufLdr0a5LJY4lFbuJu6W7ZaWhpW17jPds2/OljFd2u9ynvHmvzt5Nez/s4+y7sd97f1OFbkVRxecf+D/crQysbKkyrSqpxlbnVD89EHeg60f6j/U1WjVFNV9rhbWyuqi6c/Uu9fUNOg1bG+FGaePwweSD1w/5HWprsm6qbFZvLjoMDksPP/8p5ac7R0KOdB6lH2362eTnvceoxwpboJZlLSOtvFZZW2Jb7/Hg453t7u3HfrH5pfaEwYnyk2ont54inso/NX467/Roh6jj5Zn0MwOdizofnE04e+tc5Lme8yHnL14IuHC2i9F1+qLHxROX3C4dv0y/3HrF+UpLt1P3satOV4/1OPe0XHO51nbd9Xp779zeUze8bpy56Xfzwi3mrSu3w2733om9c7cvuU92l3N36J7g3uv7OffHHqx5iHlY+EjpUcljncdVv1r82ixzlp3s9+vvfhL95MEAe+DFb5LfvgzmP6U8LXmm/6x+yH7oxHDA8PXn858PvhC9GHtZ8Lvy73tfmb/6+Q/vP7pHEkYGX4tfj7/Z/Fbzbe07x3edoxGjj99nvR/7UPhR82PdJ/qnrs/xn5+NLf2C+1L61eJr+7eQbw/Hs8bHRSwxa1IKoJABp6UB8KYW0cWJAFAR/UCcP6WrJw2a+haYJPCfeEp7T5ozANVrAJiQXBOSqsIbABPknojMEciI8Qawg4N8/MskaQ72U7lIrYg0KRkff4voRpwFAF/7xsfHWsfHv9Ygxd4HoOP9lJ6flMhXAcihTtB9t27wT5vS+n/p8Z8zmKjAEfxz/hPZzxa5BBEfaQAAAGJlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA5KGAAcAAAASAAAAUKACAAQAAAABAAAAGKADAAQAAAABAAAAGQAAAABBU0NJSQAAAFNjcmVlbnNob3QQNRc8AAACO2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpVc2VyQ29tbWVudD5TY3JlZW5zaG90PC9leGlmOlVzZXJDb21tZW50PgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MzU8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KNUAWJwAAAt1JREFUSA21lk9IFFEcx79vdtdZdycqTERBKhBUKLIOSXjpEITiFvbvULeS7N+tP+jNWx3qltSKXewWpYVSEQhdOkoKgf9WEASLLNT8s64zu6/3e/HGmd2ZbVH8wcx7vz/v85v35r35DeNCkE9SKWRGRpCZmAD/9VtGsn0l0KqrodXVAbqebzSCfl4+Po7U0y6kBj+AL614hrHdBvTmRuh3boPV1HjH5MxgZQWph4+QfNYD5J/bJpABxTdboXe0A4axaRc95kzA5+aweuESrLGEK6hQJVhbhejrV2AVFfYQOwGfn8dqUwxWYsZ2bqUTrDqA6PsBsNJSOVxTkOT1G9uGE4sekFhKZAKr9yU2Pn9RNtmyUABFDcddNi/FK45YxCTRYFpIPn6SM9bo7kLkbR/C55pzfMpAcONFXMbpTaeUWbaSKdhaemgI6dkfLicp5sCguDOE4889kyh4INYMPjMD8+uoi0FMYgc6Sko6rdFvLicp1tgkMD2JYCwmLjEL0Zc24XPBEwksn2lB5vt8DkOLhhFoD+mdmZ//Tmh2hFeSdGJaLot88jxwyUqbYIuVBzlfXstmu3R6D+F4XNg4MsPD0Orrwf8HF9FsVwRsYW8ZL+TEhi+eRbibkog0s7NYPt3kuSwyQN3ECdeYEVGqb0trHhLvQgkrL0fRiXql+rbE1gL7K30DyJH9QlP3H5DVd3c5YcTWgseOOm2ufjacdkuypxfrbW0FJSG2FmpsdEGV4gVXW3G9b7CgJJLNN0z+5/ARvrCnzHVZ/f30oeWZqSm+VHvI5VOxyavXODctcZl87fIVVwwxia0hFETxvbvqwe2WTjIVHb9DRIFqJrRls0+yZAq2/bleaznv+cHjZtpO6teh5XTGFZ1sQKT/jQy3E+x4PaACEX3XB6pKWxVZ0QRDFRvi2AWHFCp1xqePKL7VSlu9cKGaLMbQWGe5lExnTXYSd+6vwpmF+tv8L/oLio+JWZ6NQZEAAAAASUVORK5CYII=")}),(function(o){var t=o.isValid,e=o.isValidVisible;return t&&e&&A(l\|\|(l=n(['\n background-image: url("data:image/png;base64,','");\n '],['\n background-image: url("data:image/png;base64,','");\n '])),"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")})),C=o.input(d\|\|(d=n(["\n box-sizing: border-box;\n background-color: ",";\n background-image: none;\n border: ",";\n border-radius: 0;\n color: ",";\n display: block;\n font-size: ",";\n line-height: ",";\n min-width: 3em;\n padding: ",";\n\n /* Make sure text doesn't go behind the valid indicatior icon /\n ","\n\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n\n ","\n &:-webkit-autofill,\n &:-webkit-autofill:focus {\n box-shadow: 0 0 0 3em white inset !important;\n }\n"],["\n box-sizing: border-box;\n background-color: ",";\n background-image: none;\n border: ",";\n border-radius: 0;\n color: ",";\n display: block;\n font-size: ",";\n line-height: ",";\n min-width: 3em;\n padding: ",";\n\n / Make sure text doesn't go behind the valid indicatior icon /\n ","\n\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n\n ","\n &:-webkit-autofill,\n &:-webkit-autofill:focus {\n box-shadow: 0 0 0 3em white inset !important;\n }\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.hasError,A=n.theme;return"solid ".concat(A.utilities.inputBorderWidth," ").concat(o?A.colors.textError:A.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.lineHeight}),(function(n){var o=n.theme;return"calc((".concat(s," - (").concat(o.utilities.inputBorderWidth," 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)}),(function(o){var t=o.isValidVisible,e=o.isInvalidVisible;return(t\|\|e)&&A(g\|\|(g=n(["\n padding-right: 3rem;\n "],["\n padding-right: 3rem;\n "])))}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:A(c\|\|(c=n(["\n &:focus {\n outline: 0;\n border-color: ",";\n ~ "," {\n border-color: ",";\n }\n }\n "],["\n &:focus {\n outline: 0;\n border-color: ",";\n ~ "," {\n border-color: ",";\n }\n }\n "])),t.colors.tertiary,p,t.colors.tertiary)}),(function(o){var t=o.hasError,e=o.theme;return t&&A(u\|\|(u=n(["\n ~ "," {\n border-color: ",";\n }\n "],["\n ~ "," {\n border-color: ",";\n }\n "])),p,e.colors.textError)}));export{m as Extra,h as ExtraLeft,p as ExtraRight,Z as ExtraWrapper,C as StyledInput,W as StyledInputWrapper};
2	+ //# sourceMappingURL=styles.js.map