@cruk/cruk-react-components 4.2.2 → 5.0.1

package/lib/src/components/Pagination/styles.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var t,r,i,a,d,c,l,s=o.div(t||(t=n(["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"],["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"]))),u=o.ul(r||(r=n(["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"],["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"]))),p=o.a(c||(c=n(["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\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  ","\n\n  ","\n\n  ","\n"],["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\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  ","\n\n  ","\n\n  ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.s}),(function(n){return n.theme.colors.textLight}),(function(n){return n.theme.colors.paginationBackground}),(function(n){return n.theme.spacing.xxs}),(function(o){var t=o.$active,r=o.theme;return t&&e(i||(i=n(["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "])),r.colors.textDark,r.colors.paginationActive,r.colors.paginationActive)}),(function(o){var t=o.name,r=o.theme,i=o.disabled;return("Prev"===t||"Next"===t)&&e(a||(a=n(["\n      color: ",";\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      color: ",";\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    "])),i?r.colors.disabled:r.colors.paginationText)}),(function(o){var t=o.theme;return o.disabled&&e(d||(d=n(["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "])),t.colors.disabled,t.colors.disabled)})),b=o.li(l||(l=n(["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\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: ",";\n  }\n"],["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\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: ",";\n  }\n"])),(function(n){return n.theme.breakpoint.mobile}),(function(n){return n.theme.breakpoint.mobile}));export{b as PagerItem,p as PagerLink,u as PagerList,s as PagerWrapper};
+//# sourceMappingURL=styles.js.map

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

@@ -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\nexport const PagerWrapper = styled.div`\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<{\n  $active?: boolean;\n  name?: string;\n  disabled?: boolean;\n  theme: ThemeType;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => 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 }) =>\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 }) =>\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 }) =>\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<{ theme: ThemeType }>`\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":"2HAGa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAK9BC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,SA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,IACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,IACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,IACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,IAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,IAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,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,GAAwBC,IAAAA,EAAA9B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMO,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

@@ -0,0 +1,2 @@
+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,$=f.modalContent,b=f.css,g=f.full,x=void 0!==g&&g,y=n(null),C=o(!1),W=C[0],L=C[1],K=m(),O=e(e({},l),K),w=function(){return L(!W)},B=function(){return L(!1)},I=r((function(e){y.current&&!y.current.contains(e.target)&&B()}),[y.current]);return c((function(){B()}),{detectKeys:["Escape"]},[]),i((function(){p&&p(W)}),[W]),s((function(){return document.addEventListener("click",I,!0),function(){document.removeEventListener("click",I,!0)}}),[]),t.createElement(a,{theme:O},t.createElement(u,{$full:x,$css:b,ref:y},t.Children.map(h,(function(e){return t.cloneElement(e,{onClick:w,"aria-expanded":W,"aria-haspopup":"dialog"})})),W?t.createElement(d,{$maxWidth:k||"none",$minWidth:E||"auto",$position:v||"top",theme:O,role:"dialog","aria-label":j,"aria-modal":W},$):null))}export{f as PopOver,f as default};
+//# sourceMappingURL=index.js.map

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

@@ -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","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","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,EAACC,cAAAE,SAAsB9B,EAAI+B,KAAQjC,EAAKkC,IAAK/B,GAC1C0B,EAAMM,SAASC,IACd1C,GACA,SAAC2C,GACC,OAAAR,EAAMS,aAAaD,EAAO,CACxBE,QAASzB,EACT,gBAAiBP,EACjB,gBAAiB,UAHnB,IAMHA,EACCsB,EAACC,cAAAU,aACY5C,GAAY,OAAM6C,UAClB9C,GAAY,iBACZE,GAAY,MACvBc,MAAOA,EACP+B,KAAK,SACO,aAAA5C,eACAS,GAEXR,GAED,MAIZ"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -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) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n\nexport const PopOverModal = styled.div<{\n  $position: PopOverPositionType;\n  $maxWidth: string;\n  $minWidth: string;\n  theme?: ThemeType;\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};\n  min-width: ${({ $minWidth }) => $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","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

@@ -0,0 +1,2 @@
+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,$=void 0===y?0:y,E=h.isCircular,u=h.circleContents,k=h.circleSize,b=h.barColor,C=h.secondaryBarColor,g=h.secondaryPercentage,x=h.children,D=t(),N=e(e({},a),D),S=Number.isNaN($)?0:$,j=S>100?100:S,v="".concat(S,"%"),I=g&&!Number.isNaN(g)?g:0,P=I>100?100:I,W="".concat("string"==typeof u?u:""," ").concat(v,"% Complete"),z=u||v,B=58,w=2*Math.PI*B;return r.createElement(o,{theme:N},r.createElement(c,null,E?r.createElement(n,{$circleSize:k||"90px"},r.createElement(s,{viewBox:"0 0 ".concat(128," ").concat(128)},r.createElement(l,{cx:64,cy:64,r:B,strokeWidth:6}),r.createElement(m,{$isSecondary:!0,$barColor:C,cx:64,cy:64,r:B,strokeWidth:6,strokeDasharray:w,strokeDashoffset:w*(1-P/100),$strokeDashoffsetInit:w}),r.createElement(m,{$barColor:b,cx:64,cy:64,r:B,strokeWidth:6,strokeDasharray:w,strokeDashoffset:w*(1-j/100),$strokeDashoffsetInit:w})),r.createElement(i,null,z)):r.createElement(f,{$percentage:j,$secondaryPercentage:P},r.createElement(d,{$isSecondary:!0,$percentage:P,$barColor:C}),r.createElement(d,{$percentage:j,$barColor:b}),r.createElement(p,null,W)),x))}export{h as ProgressBar,h as default};
+//# sourceMappingURL=index.js.map

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

@@ -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","$circleSize","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","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,gBAACI,EAAe,CAAAC,YAAc9B,GAjEZ,QAkEhByB,EAACC,cAAAK,GAAUC,QAAS,cATpB,IAS4B,KAAAjB,OAT5B,MAUEU,EAACC,cAAAO,GACCC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAfM,IAiBRX,EAAAC,cAACW,EAEY,CAAAC,cAAA,EAAAC,UAAArC,EACXgC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBM,EAwBNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIL,EAA6B,KAAIyB,sBACrCpB,IAGzBG,EAAAC,cAACW,EACY,CAAAE,UAAAtC,EACXiC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAlCM,EAmCNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIT,EAAoB,KACxB6B,sBAAApB,KAG3BG,EAAAC,cAACiB,EAAa,KAAExB,IAGlBM,EAACC,cAAAkB,EACc,CAAAC,YAAAhC,uBACSI,GAEtBQ,EAAAC,cAACoB,EAAe,CAAAR,cAAA,EAAAO,YAED5B,EAA0BsB,UAC5BrC,IAGbuB,EAAAC,cAACoB,EAAe,CAAAD,YACDhC,EAAiB0B,UACnBtC,IAEbwB,EAAAC,cAACqB,EAAgB,KAAE7B,IAGtBd,GAIT"}

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

@@ -0,0 +1,2 @@
+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),$=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)})),D=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)})),S=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"]))),z=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})),B=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"]))),I=t.circle(b||(b=n(["\n  stroke: ",";\n"],["\n  stroke: ",";\n"])),(function(n){return n.theme.tokenColors.grey_200})),C=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})})),j=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{B as CircleSvg,j as CircularValue,z as CircularWrapper,I as EmptyCircle,C as FullCircle,D as LineProgressBar,$ as LineProgressBarWrapper,v as ProgressBarWrapper,S as ScreenReaderOnly};
+//# sourceMappingURL=styles.js.map

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

@@ -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 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<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\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<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\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<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\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<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\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<{\n  theme: ThemeType;\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    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => 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":"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"}

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

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

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

@@ -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, hasError, errorMessage, ...rest } = 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            {...rest}\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","hasError","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,GAGiDF,EAAKO,SAALP,EAA5BQ,SAA4BR,eAAT,IAAAS,IAAST,EAAhD,CAA6C,WAAA,WAAA,iBACnD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMQ,YAAcR,EAAMe,eAAgB,EACrDC,UAAWhB,EAAMgB,UACjBC,QAASjB,EAAMiB,UAAW,EAC1BC,SAAUlB,EAAMkB,WAAY,GAE5BR,EAAAC,cAACQ,EAAWd,EAAA,CAAA,EACNI,EAAI,CACRS,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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -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\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\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<{\n  theme: ThemeType;\n}>`\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\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  disabled: boolean;\n  checked: boolean;\n  theme: ThemeType;\n}>`\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<{\n  theme: ThemeType;\n}>`\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\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\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    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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=index.js.map

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

@@ -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,CAAAC,oBACWb,EAAWc,QAAU,EAC1CC,IAAKJ,EAAKK,MACVC,QAASd,IAAkBQ,EAAKK,MAChCf,SAAUA,EACVG,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,OAT2B,KAe7C"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -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 StyleRadioWidthProp = { $numberOfAttributes: number; theme: ThemeType };\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<{\n  theme: ThemeType;\n}>`\n  width: ${LEGEND_WIDTH};\n  display: block;\n  float: left;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n  theme: ThemeType;\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 ${({ 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,UAKaA,EAAcC,EAAOC,EAAPD,CAAkBE,IAAAA,EAAAC,EAAA,CAAA,4EAAA,mBAAA,eAAA,OAAA,CAAqB,4EAInB,mBACvB,eAE4D,UAHnE,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,GARd,OAUP,SAACH,OAAEI,EAAmBJ,EAAAI,oBAAEH,EAAKD,EAAAC,MACpC,MAAA,iBAAAI,OAZiB,MAYY,QAAAA,OAAOD,EAAmB,QAAAC,OAAOJ,EAAMC,QAAQC,EAAI,IAAhF,IAGSG,EAAeV,EAAOW,OAAMC,IAAAA,EAAAT,EAAA,CAAA,cAAA,wDAAA,OAAA,CAEvC,cACqB,wDAGwC,SArB1C,OAqBJ,SAACC,GAAc,OAAPA,EAAAC,MAAaQ,WAAWC,cAAjB,IAGnBC,EAAiBf,EAAOgB,SAAQC,IAAAA,EAAAd,EAAA,CAAA,0LAAA,yBAAA,CAE3C,0LAW4C,4BAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=index.js.map

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

@@ -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","$hasError","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,EAAK,mBAE7CM,EAAMW,IAAQjB,EAAe,GAAGkB,OAAAZ,EAAMW,kBAAaE,EAE5CC,UAAAnB,KAAcD,IAAgB,OAExCA,GACDa,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAGC,OAAAZ,EAAMW,kBAAaE,GAEpCnB,GAKX"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -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,EAASL,EAAAK,UAAEC,EAAaN,EAAAM,cAC1C,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAaC,EACTL,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

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

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

@@ -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\ninterface SpacingPropsInterface {\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 type SpacingPropsInternal = {\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\ninterface SpacingPropsInternalInterface {\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 spacingPropsToSpacingPropsInternal(\n  props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n  const internalProps = {\n    ...props,\n    margin: undefined,\n    marginTop: undefined,\n    marginRight: undefined,\n    marginBottom: undefined,\n    marginLeft: undefined,\n    marginVertical: undefined,\n    marginHorizontal: undefined,\n    padding: undefined,\n    paddingTop: undefined,\n    paddingRight: undefined,\n    paddingBottom: undefined,\n    paddingLeft: undefined,\n    paddingVertical: undefined,\n    paddingHorizontal: undefined,\n    $margin: props.margin,\n    $marginTop: props.marginTop,\n    $marginRight: props.marginRight,\n    $marginBottom: props.marginBottom,\n    $marginLeft: props.marginLeft,\n    $marginVertical: props.marginVertical,\n    $marginHorizontal: props.marginHorizontal,\n    $padding: props.padding,\n    $paddingTop: props.paddingTop,\n    $paddingRight: props.paddingRight,\n    $paddingBottom: props.paddingBottom,\n    $paddingLeft: props.paddingLeft,\n    $paddingVertical: props.paddingVertical,\n    $paddingHorizontal: props.paddingHorizontal,\n  };\n  return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, 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":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","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":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,CAEgB,SAAAe,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAXQkB,WACVC,EAUEnB,EAVUmB,aACZC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAPMwB,SACRM,EAME9B,EANgB8B,mBAClBD,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEiC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,WAAWQ,OAAAR,EAAgB,gBAAG,GAC9CS,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,EAAKtB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CuB,EAAKlB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DmB,EAAKlB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DmB,EAAKxB,EAAcO,EAAMD,QAAQN,GAAe,KAChDyB,EAAKxB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDyB,EAAKxB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDyB,EAAKxB,EAAeI,EAAMD,QAAQH,GAAgB,KAElDyB,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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=index.js.map

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

@@ -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","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,UAAiBV,GACfC,MAAMC,QAAQX,IACbA,EAAMoB,KAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAOC,OAAAF,GACnB,OACEP,EAACC,cAAAS,GACCF,IAAKA,EACIG,QAAAJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAACC,cAAAY,EAAS,KAAAN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,KAEHlB,GAIT"}

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

@@ -0,0 +1,2 @@
+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){var r=t.$total;return r&&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/r)})),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};
+//# sourceMappingURL=styles.js.map

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

@@ -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\nexport const StepList = styled.ul<{\n  $total: number;\n}>`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${({ $total }) =>\n    $total &&\n    css`\n      li {\n        width: ${100 / $total}%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    `}\n`;\n\nexport const StepBar = styled.span<{\n  theme: ThemeType;\n}>`\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<{\n  theme: ThemeType;\n}>`\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\nexport const StepItem = styled.li<{\n  $active: boolean;\n  $done: boolean;\n  theme: ThemeType;\n}>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  ${({ theme, $active }) =>\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","_a","$total","css","templateObject_2","StepBar","span","templateObject_4","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,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,SATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,IAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAEhC,kHAK8D,2EAGJ,kNAUS,uEAb/C,SAACI,GAAc,OAAPA,EAAAO,MAAaC,OAAOC,cAAb,IAGf,SAACT,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAUN,SAACV,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAOjCC,EAAWlB,EAAOY,KAE7BO,IAAAA,EAAAhB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAAA,0IAU8B,sBAKA,mDATb,SAACI,GAEJ,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IACU,SAACb,GAEH,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IAKKE,EAAWtB,EAAOuB,GAAEC,IAAAA,EAAArB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAI/B,wFAI6D,UAQ1D,OAWA,SAnBY,SAACI,GAAc,OAAPA,EAAAO,MAAaW,WAAWC,cAAjB,IAE5B,SAACnB,OAAEO,EAAKP,EAAAO,MACR,OADiBP,EAAAoB,SAEjBlB,EAAGmB,IAAAA,EAAAzB,EAAA,CAAA,WAAA,6BAAA,oBAAA,CAAA,WACQ,6BAC8B,sBADrCQ,EACgBG,EAAMC,OAAOc,SAHjC,IAMA,SAACtB,OAAEuB,EAAKvB,EAAAuB,MAAEhB,EAAKP,EAAAO,MACf,OAAAgB,GACArB,EAAGsB,IAAAA,EAAA5B,EAAA,CAAA,WAAA,wDAAA,4DAAA,+BAAA,CAAA,WACQ,wDAEkC,4DAES,iCAJlDQ,EAEoBG,EAAMC,OAAOc,SAEJf,EAAMC,OAAOc,SAN9C"}

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

@@ -0,0 +1,2 @@
+import{__assign as t,__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{forwardRef as r}from"react";import{useTheme as i}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as l}from"../Spacing/index.js";import{TextStyled as x}from"./styles.js";var a=r((function(r,a){var n=i(),s=t(t({},m),n),f=r.textColor,p=r.textAlign,d=r.textSize,g=r.textWeight,$=r.textFontFamily,c=r.wordBreak,w=r.overflowWrap,F=e(r,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap"]),W=l(F);return o.createElement(x,t({$textColor:f,$textAlign:p,$textSize:d,$textWeight:g,$textFontFamily:$,$wordBreak:c,$overflowWrap:w},W,{theme:s,ref:a}))}));export{a as Text,a as default};
+//# sourceMappingURL=index.js.map

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

@@ -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  type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} 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  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <TextStyled\n      $textColor={textColor}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      theme={theme}\n      ref={ref as LegacyRef<HTMLParagraphElement>}\n    />\n  );\n});\n\nexport default Text;\n"],"names":["Text","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","rest","__rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"0UAkDaA,EAAOC,GAAW,SAACC,EAAkBC,GAChD,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EAQEP,YAPFQ,EAOER,EAAKQ,UANPC,EAMET,EAAKS,SALPC,EAKEV,EALQU,WACVC,EAIEX,EAJYW,eACdC,EAGEZ,YAFFa,EAEEb,EAAKa,aADJC,EAAIC,EACLf,EATE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,iBAWAgB,EAA2BC,EAAmCH,GAEpE,OACEI,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPH,IAAKA,IAGX"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } 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 = SpacingPropsInternal & {\n  $textColor?: string;\n  $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n  $textSize?: FontSizeType;\n  $textWeight?: number | string;\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 as ColorKeyType] !== \"undefined\"\n      ? colors[$textColor as ColorKeyType]\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,oBAEG,oBACI,uBACa,eAIlC,oBACmB,mBAOV,qBACa,qBAET,oDAQa,0DAMR,SAhCtC,SAACC,OAAEC,EAAeD,EAAAC,gBAAEC,EAAKF,EAAAE,MACtC,OAAAD,GAAmBC,EAAMC,WAAWC,cAApC,IACY,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,QAAd,IACjB,SAACL,GAAsB,OAAPA,EAAAM,eAAwB,YAAjB,IAC/B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAAUR,EAAAQ,WACvC,OAAAA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE,QAFzB,IAGY,SAACT,GAAmB,OAAPA,EAAAU,YAAqB,MAAd,IACrB,SAACV,OACZW,EAGCX,EAAAE,MAFCU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASd,EAAAc,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,IACf,SAACf,OAAEgB,EAAWhB,EAAAgB,YAAEd,EAAKF,EAAAE,MAClC,OAAAc,GAAed,EAAMC,WAAWc,cAAhC,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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=index.js.map

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

@@ -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","$hasError","$lineCount","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,EAAK,mBAE7CQ,EAAMY,IAAQpB,EAAe,GAAAqB,OAAGb,EAAMY,GAAU,eAAGE,EAASC,UAErDtB,KAAcD,IAAgB,EACzCK,OAAQA,EACImB,WAAAjB,EACZK,MAAOA,EACPb,IAAKA,EAEL,oBAAA,OACCC,GACDe,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIZ,EAAMY,GAAK,GAAGC,OAAAb,EAAMY,kBAAaE,GAEpCtB,GAKX"}

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=styles.js.map

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

@@ -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  $lineCount: number;\n  resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\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,2CAGQ,eAC1B,wCAEgB,mBAChB,qDAIW,iFAID,6CAGD,iBACP,eAWrC,UA/BA,SAACC,GAAe,OAAPA,EAAAC,MAAO,IACN,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,IAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAASL,EAAAK,UAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBACzD,UAAAF,OAAAD,EAAYH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,IAE3B,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,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MAC5B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAa,IAAtD,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

@@ -0,0 +1,2 @@
+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,$=t.hintText,I=t.isValid,T=t.isValidVisible,g=t.isInvalidVisible,j=t.label,L=t.hideRequiredInLabel,q=e(t,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel"]),R=a(),y=i(i({},l),R),B=r.createElement(r.Fragment,null,!!E&&r.createElement(d,{theme:y},E),r.createElement(m,{$hasError:v||!!p||!1,$isValid:void 0!==I?I:!v&&!p,"aria-invalid":v||!!p||!1,$isValidVisible:T||!1,$isInvalidVisible:g||!1,theme:y},r.createElement(n,i({$hasError:v||!!p||!1,$isValid:void 0!==I?I:!v&&!p,"aria-invalid":v||!!p||!1,"aria-describedby":q.id&&p?"".concat(q.id,"-error"):void 0,$isValidVisible:T||!1,$isInvalidVisible:g||!1},q,{theme:y,"data-hj-suppress":!0,ref:x}))),!!u&&r.createElement(h,{theme:y},u));return r.createElement(o,{label:j,hintText:$,required:q.required||!1,hideRequiredInLabel:L},!!f&&r.createElement(b,{theme:y},f),u||E?r.createElement(c,null,B):B,!!V&&r.createElement(b,{theme:y},V),!!p&&r.createElement(s,{marginTop:"xxs",id:q.id?"".concat(q.id,"-error"):void 0},p))}));export{x as TextField,x as default};
+//# sourceMappingURL=index.js.map

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

@@ -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","$hasError","$isValid","$isValidVisible","$isInvalidVisible","StyledInput","id","undefined","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","concat"],"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,EAAkB,CAAAC,UACNpB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK2B,gBAChCnB,IAAkB,EAAKoB,kBACrBnB,IAAoB,EACvCO,MAAOA,GAEPI,EAAAC,cAACQ,EAAWZ,EAAA,CAAAQ,UACCpB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7CY,EAAMkB,IAAQ9B,EAAe,UAAGY,EAAMkB,GAAE,eAAWC,EAEtCJ,gBAAAnB,IAAkB,EAChBoB,kBAAAnB,IAAoB,GACnCG,EAAK,CACTI,MAAOA,EAAK,oBAAA,EAEZjB,IAAKA,QAGNI,GAAciB,EAAAC,cAACW,EAAW,CAAAhB,MAAOA,GAAQb,IAIhD,OACEiB,gBAACa,EAAY,CACXvB,MAAOA,EACPJ,SAAUA,EACV4B,SAAUtB,EAAMsB,WAAY,EAC5BvB,oBAAqBA,KAElBP,GAAYgB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQZ,GAClCD,GAAgBD,EACjBkB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3ClB,GAAemB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQf,KACrCD,GACDoB,gBAACiB,EAAS,CACRC,UAAU,MACVR,GAAIlB,EAAMkB,GAAK,GAAGS,OAAA3B,EAAMkB,kBAAaC,GAEpC/B,GAKX"}