@cruk/cruk-react-components 6.0.0 → 6.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_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  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $checked: boolean;\n  $disabled: boolean;\n  $hasError: 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  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: 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  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, $disabled }) => $disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, $disabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<{\n  theme: ThemeType;\n}>`\n  margin-right: 5px !important;\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          /* This hides the original input */\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          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_SIZE","CheckWrapper","styled","div","theme","spacing","xs","Check","span","colors","selectionBorder","StyledLabel","label","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","utilities","inputBorderWidth","m","xl","$checked","$hasError","useDefaultFromControls","css","danger","check","inputBorder","colours","SelectedBorder","StyledInput","input","s","xxs"],"mappings":"2CAGA,MAAMA,EAAiB,SAIVC,EAAeC,EAAOC,GAEjC;;YAEUH;WACDA;;qBAEUA;UACX,EACNI,OACEC,SAAWC,UAETA;EAGKC,EAAQL,EAAOM,IAE1B;;;sBAGoB,EAAGJ,WAAYA,EAAMK,OAAOC;YACtCV;WACDA;;;;;;;;;;;;;;;;EAkBEW,EAAcT,EAAOU,KAKhC;;;;;;;iBAOe,EAAGR,WAAYA,EAAMS,WAAWC;eAClC,EAAGV,WAAYA,EAAMS,WAAWE;iBAC9B,EAAGX,WAAYA,EAAMS,WAAWG;;sBAE3B,EAAGZ,WAAYA,EAAMK,OAAOQ;;;YAGtC,EAAGC,eAAiBA,EAAY,cAAgB;;;WAGjD,EAAGd,QAAOc,eACjBA,EAAYd,EAAMK,OAAOU,SAAWf,EAAMK,OAAOW;aACxC,EAAGhB,WACZ,kBAA+BA,EAAMiB,UAAUC,2BAA2BlB,EAAMS,WAAWC,qBAAqBV,EAAMC,QAAQkB,oBAAiCnB,EAAMiB,UAAUC,2BAA2BlB,EAAMS,WAAWC,qBAAqBV,EAAMC,QAAQmB;cACpPvB,KAAgBM;;;;;;;cAOhB,EAAGH,QAAOc,eAAgBA,GAAad,EAAMK,OAAOU;;;;IAI9D,EAAGf,QAAOc,YAAWO,WAAUC,eAC/BtB,EAAMiB,UAAUM,uBACZ,KACAC,CAAG;;;YAGC3B,KAAgBM;4BArFH;gBAuFTW,EACEd,EAAMK,OAAOU,SACbO,EACEtB,EAAMK,OAAOoB,OACbJ,EACErB,EAAMK,OAAOqB,MACb1B,EAAMK,OAAOsB;;;oBAGf9B,KAAgBM;4BAhGX;gBAkGTW,EAAYd,EAAMK,OAAOU,SAAWf,EAAM4B;;;EAK7CC,EAAiB/B,EAAOC,GAAG;;;;;;EAS3B+B,EAAchC,EAAOiC,KAEhC;;;IAGE,EAAG/B,WACHA,EAAMiB,UAAUM,uBACZC,CAAG;;;;;;;kBAOOxB,EAAMC,QAAQ+B;UAExBR,CAAG;;;kBAGOxB,EAAMC,QAAQgC;;;sBAGVJ;;0CAEoB7B,EAAMK,OAAOsB;;;;wBAI/B9B;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_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  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $checked: boolean;\n  $disabled: boolean;\n  $hasError: 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  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: 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  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, $disabled }) => $disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, $disabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<{\n  theme: ThemeType;\n}>`\n  margin-right: 5px !important;\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          /* This hides the original input */\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          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_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","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","colours","SelectedBorder","templateObject_5","StyledInput","input","templateObject_8","templateObject_6","s","templateObject_7","xxs"],"mappings":"2HAGA,oBAAMA,EAAiB,SAIVC,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,eAAA,gDAAA,oBAAA,OAAA,CAEpC,yCAEwB,eACD,gDAEU,oBAKzB,SAREL,EACDA,EAEUA,GACX,SAACM,GAIH,OAFWA,EAAAC,MAAAC,QAAAC,EAEX,IAGKC,EAAQR,EAAOS,KAAIC,IAAAA,EAAAP,EAAA,CAAA,mEAAA,gBAAA,eAAA,8QAAA,CAE9B,mEAG+D,gBACvC,eACD,iRAFH,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOC,eAAb,GACzBd,EACDA,GAkBEe,EAAcb,EAAOc,MAKhCC,IAAAA,EAAAZ,EAAA,CAAA,iHAAA,mBAAA,qBAAA,4BAAA,yCAAA,oCAAA,iBAAA,kBAAA,IAAA,+JAAA,sBAAA,MAAA,CAAA,iHAOyD,mBACA,qBACI,4BAEE,yCAGK,oCAIT,iBAEyM,kBAC5O,IAAS,+JAOuC,sBAyBjE,SA9CQ,SAACC,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,UAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAC,MAAaW,WAAWE,YAAjB,IACb,SAACd,GAAc,OAAPA,EAAAC,MAAaW,WAAWG,cAAjB,IAEV,SAACf,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,IAGzB,SAAChB,GAAkB,OAAPA,EAAAiB,UAAoB,cAAgB,SAA7B,IAGpB,SAACjB,OAAEC,EAAKD,EAAAC,MACf,OAD0BD,EAAAiB,UACdhB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOY,QAAjD,IACS,SAACnB,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBApEkB,MAoEK,SAAAmB,OAAQnB,EAAMoB,UAAUC,iBAAgB,YAAAF,OAAWnB,EAAMW,WAAWC,8BAAqBZ,EAAMC,QAAQqB,EAAY,YAAAH,OApExH,sBAoE6InB,EAAMoB,UAAUC,oCAA2BrB,EAAMW,WAAWC,WAAqB,YAAAO,OAAAnB,EAAMC,QAAQsB,GAA9P,GACU7B,EAAgBS,GAOhB,SAACJ,OAAEC,EAAKD,EAAAC,MAAkB,OAAPD,EAAAiB,WAAoBhB,EAAMM,OAAOW,QAA1B,IAIpC,SAAClB,OAAEC,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UAAEQ,EAAQzB,EAAAyB,SAAEC,EAAS1B,EAAA0B,UACxC,OAAAzB,EAAMoB,UAAUM,uBACZ,KACAC,EAAGC,IAAAA,EAAA9B,EAAA,CAAA,8CAAA,IAAA,iCAAA,mBAAA,uCAAA,IAAA,iCAAA,mBAAA,4BAAA,CAAA,8CAGa,IAAS,iCACW,mBAOE,uCAGd,IAAS,iCACG,mBACqB,8BAbrDJ,EAAgBS,EArFH,MAuFTa,EACEhB,EAAMM,OAAOW,SACbQ,EACEzB,EAAMM,OAAOuB,OACbL,EACExB,EAAMM,OAAOwB,MACb9B,EAAMM,OAAOyB,YAGfrC,EAAgBS,EAhGX,MAkGTa,EAAYhB,EAAMM,OAAOW,SAAWjB,EAAMgC,QAlBtD,IAuBSC,EAAiBtC,EAAOC,IAAGsC,IAAAA,EAAApC,EAAA,CAAA,qFAAA,CAAA,wFAS3BqC,EAAcxC,EAAOyC,MAAKC,IAAAA,EAAAvC,EAAA,CAAA,0CAAA,MAAA,CAErC,0CA6BO,SA1BL,SAACC,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAAAA,EAAMoB,UAAUM,uBACZC,EAAGW,IAAAA,EAAAxC,EAAA,CAAA,qMAAA,eAAA,CAAA,qMAOsB,iBAAfE,EAAMC,QAAQsC,GAExBZ,EAAGa,IAAAA,EAAA1C,EAAA,CAAA,mGAAA,mDAAA,sFAAA,8GAAA,6EAAA,CAAA,mGAGwB,mDAGC,sFAE8B,8GAI9B,+EATlBE,EAAMC,QAAQwC,IAGVR,EAEoBjC,EAAMM,OAAOyB,YAI/BrC,EAtBpB"}

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

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as r,useEffect as n}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as i}from"../../themes/cruk.js";import{IconFa as l}from"../IconFa/index.js";import{CustomHeader as d,DefaultHeader as c,FlippingIcon as m,CollapseContent as s,transitionDurationSeconds as p}from"./styles.js";function h({id:h,headerTitleText:u,headerTitleTextColor:x,headerTitleTextSize:f,headerTitleTextFontFamily:$,headerComponent:y,startOpen:T,onOpenChange:b,children:E}){const[k,C]=t(T||!1),[g,F]=t(T?"initial":"0"),j=r(null),v=r(null),S=a(),I={...i,...S},w=()=>{const{current:e}=j;v?.current&&clearTimeout(v?.current);const t=!k;C(t),null!==e&&F(`${e.scrollHeight}px`),!1===t?setTimeout((()=>F("0")),10):v.current=setTimeout((()=>F("initial")),1e3*p),void 0!==b&&b(t)};return n((()=>{C(T||!1),F(T?"initial":"0")}),[T]),e.createElement("div",{id:h},y?e.createElement(d,{theme:I,"aria-controls":`${h}-header`,"aria-expanded":k,id:`${h}-header`,onClick:w,"aria-disabled":!1,"aria-label":u,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),w())},role:"button",tabIndex:0},y):e.createElement(c,{"aria-controls":`${h}-header`,"aria-expanded":k,id:`${h}-header`,onClick:w,theme:I,type:"button",appearance:"tertiary",$textColor:x,$textSize:f,$textFontFamily:$},u,e.createElement(m,{$open:k},e.createElement(l,{faIcon:o}))),e.createElement(s,{theme:I,id:`${h}-content`,ref:j,role:"region","aria-hidden":!k,"aria-labelledby":`${h}-header`,$contentHeight:g,$openStatus:k},E))}export{h as Collapse,h as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{IconFa as c}from"../IconFa/index.js";import{CustomHeader as d,DefaultHeader as m,FlippingIcon as u,CollapseContent as s,transitionDurationSeconds as p}from"./styles.js";function f(f){var h=f.id,x=f.headerTitleText,y=f.headerTitleTextColor,T=f.headerTitleTextSize,b=f.headerTitleTextFontFamily,v=f.headerComponent,E=f.startOpen,k=f.onOpenChange,C=f.children,$=n(E||!1),g=$[0],j=$[1],F=n(E?"initial":"0"),S=F[0],I=F[1],w=r(null),z=r(null),D=a(),H=e(e({},l),D),O=function(){var e=w.current;(null==z?void 0:z.current)&&clearTimeout(null==z?void 0:z.current);var t=!g;j(t),null!==e&&I("".concat(e.scrollHeight,"px")),!1===t?setTimeout((function(){return I("0")}),10):z.current=setTimeout((function(){return I("initial")}),1e3*p),void 0!==k&&k(t)};return o((function(){j(E||!1),I(E?"initial":"0")}),[E]),t.createElement("div",{id:h},v?t.createElement(d,{theme:H,"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,"aria-disabled":!1,"aria-label":x,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),O())},role:"button",tabIndex:0},v):t.createElement(m,{"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,theme:H,type:"button",appearance:"tertiary",$textColor:y,$textSize:T,$textFontFamily:b},x,t.createElement(u,{$open:g},t.createElement(c,{faIcon:i}))),t.createElement(s,{theme:H,id:"".concat(h,"-content"),ref:w,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(h,"-header"),$contentHeight:S,$openStatus:g},C))}export{f as Collapse,f as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const foundTheme = useTheme();\n  const theme: ThemeType = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          theme={theme}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          theme={theme}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={headerTitleTextColor}\n          $textSize={headerTitleTextSize}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        theme={theme}\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","openStatus","setOpenStatus","useState","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","defaultTheme","toggleCollapse","current","clearTimeout","newOpenState","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"8aAiDM,SAAUA,GAASC,GACvBA,EAAEC,gBACFA,EAAeC,qBACfA,EAAoBC,oBACpBA,EAAmBC,0BACnBA,EAAyBC,gBACzBA,EAAeC,UACfA,EAASC,aACTA,EAAYC,SACZA,IAEA,MAAOC,EAAYC,GAAiBC,EAASL,IAAa,IACnDM,EAAeC,GAAoBF,EACxCL,EAAY,UAAY,KAEpBQ,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EAAmB,IACpBC,KACAH,GAGCI,EAAiB,KACrB,MAAMC,QAAEA,GAAYR,EAChBE,GAAiBM,SAASC,aAAaP,GAAiBM,SAC5D,MAAME,GAAgBf,EACtBC,EAAcc,GAEE,OAAZF,GACFT,EAAiB,GAAGS,EAAQG,mBAGT,IAAjBD,EAEFE,YAAW,IAAMb,EAAiB,MAAM,IAExCG,EAAgBM,QAAUI,YACxB,IAAMb,EAAiB,YACK,IAA5Bc,QAGiBC,IAAjBrB,GACFA,EAAaiB,IAyBjB,OAVAK,GAAU,KACRnB,EAAcJ,IAAa,GAGzBO,EADEP,EACe,UAEA,OAElB,CAACA,IAGFwB,EAAAC,cAAA,MAAA,CAAK/B,GAAIA,GACNK,EACCyB,EAACC,cAAAC,GACCb,MAAOA,EAAK,gBACG,GAAGnB,2BACHS,EACfT,GAAI,GAAGA,WACPiC,QAASZ,EACM,iBAAA,eACHpB,EACZiC,UAhCeC,IAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNhB,MA0BIiB,KAAK,SACLC,SAAU,GAETlC,GAGHyB,gBAACU,EAAa,CAAA,gBACG,GAAGxC,WACH,gBAAAS,EACfT,GAAI,GAAGA,WACPiC,QAASZ,EACTF,MAAOA,EACPsB,KAAK,SACLC,WAAW,WAAUC,WACTzC,EACD0C,UAAAzC,kBACMC,GAEhBH,EACD6B,EAACC,cAAAc,SAAoBpC,GACnBqB,EAACC,cAAAe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACd9B,MAAOA,EACPnB,GAAI,GAAGA,YACPkD,IAAKpC,EACLwB,KAAK,wBACS7B,EACG,kBAAA,GAAGT,WAAWmD,eACfvC,EAAawC,YAChB3C,GAEZD,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const foundTheme = useTheme();\n  const theme: ThemeType = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          theme={theme}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          theme={theme}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={headerTitleTextColor}\n          $textSize={headerTitleTextSize}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        theme={theme}\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","__assign","defaultTheme","toggleCollapse","current","undefined","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"kfAiDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAiB,WACb,IAAAC,EAAYT,EAAOS,SACvBP,aAAAQ,EAAAR,EAAiBO,UAASE,aAAaT,eAAAA,EAAiBO,SAC5D,IAAMG,GAAgBjB,EACtBC,EAAcgB,GAEE,OAAZH,GACFV,EAAiB,GAAGc,OAAAJ,EAAQK,aAAY,QAGrB,IAAjBF,EAEFG,YAAW,WAAM,OAAAhB,EAAiB,IAAI,GAAE,IAExCG,EAAgBO,QAAUM,YACxB,WAAM,OAAAhB,EAAiB,aACK,IAA5BiB,QAGiBN,IAAjBnB,GACFA,EAAaqB,EAEhB,EAuBD,OAVAK,GAAU,WACRrB,EAAcN,IAAa,GAGzBS,EADET,EACe,UAEA,IAErB,GAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAACC,cAAAC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA6B,OAAG7B,EAAE,WACTqC,QAASb,EACM,iBAAA,eACHvB,EACZqC,UAhCc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEH,EAwBOkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAGf,OAAA7B,aACH,gBAAAW,EACfX,GAAI,UAAGA,EAAE,WACTqC,QAASb,EACTH,MAAOA,EACPwB,KAAK,SACLC,WAAW,WAAUC,WACT7C,EACD8C,UAAA7C,kBACMC,GAEhBH,EACDiC,EAACC,cAAAc,SAAoBtC,GACnBuB,EAACC,cAAAe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACdhC,MAAOA,EACPrB,GAAI,GAAA6B,OAAG7B,EAAY,YACnBsD,IAAKtC,EACL0B,KAAK,wBACS/B,EACG,kBAAA,GAAAkB,OAAG7B,EAAW,WAAAuD,eACfzC,EAAa0C,YAChB7C,GAEZH,GAIT"}

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

@@ -1,32 +1,2 @@
-import o from"styled-components";import{Button as t}from"../Button/index.js";const e=.5,i=o.span`
-  display: inline-block;
-  transform: ${({$open:o})=>o?"translateY(0.1em) scaleY(-1)":"initial"};
-  transition-duration: ${.5}s;
-`,n=o(t)`
-  display: flex;
-  color: ${({theme:o,$textColor:t})=>t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor};
-  font-size: ${({theme:{fontSizes:o,fontSizes:{m:t}},$textSize:e})=>e?o[e]:t};
-  font-family: ${({theme:o,$textFontFamily:t})=>t||o.typography.fontFamilyBase};
-  font-weight: normal;
-  margin-bottom: 0;
-  height: initial;
-  text-decoration: none;
-  text-align: left;
-  border-radius: 0;
-  &:hover,
-  &:focus {
-    color: ${({theme:{colors:o},$textColor:t})=>t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor};
-  }
-`,r=o.div`
-  margin: 0;
-  transition: ${.5}s ease;
-  height: ${({$contentHeight:o})=>o};
-  visibility: ${({$openStatus:o})=>o?"visible":"hidden"};
-  overflow: hidden;
-  & > p {
-    margin-top: 0;
-  }
-`,l=o.div`
-  cursor: pointer;
-`;export{r as CollapseContent,l as CustomHeader,n as DefaultHeader,i as FlippingIcon,e as transitionDurationSeconds};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Button as t}from"../Button/index.js";var i,e,r,a,l=.5,s=o.span(i||(i=n(["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"],["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"])),(function(n){return n.$open?"translateY(0.1em) scaleY(-1)":"initial"}),.5),f=o(t)(e||(e=n(["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"],["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"])),(function(n){var o=n.theme,t=n.$textColor;return t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor}),(function(n){var o=n.theme,t=o.fontSizes,i=o.fontSizes.m,e=n.$textSize;return e?t[e]:i}),(function(n){var o=n.theme;return n.$textFontFamily||o.typography.fontFamilyBase}),(function(n){var o=n.theme.colors,t=n.$textColor;return t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor})),m=o.div(r||(r=n(["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"],["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"])),.5,(function(n){return n.$contentHeight}),(function(n){return n.$openStatus?"visible":"hidden"})),c=o.div(a||(a=n(["\n  cursor: pointer;\n"],["\n  cursor: pointer;\n"])));export{m as CollapseContent,c as CustomHeader,f as DefaultHeader,s as FlippingIcon,l as transitionDurationSeconds};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  theme: ThemeType;\n  $textColor?: string;\n  $textSize?: FontSizeType;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ theme, $textColor }) =>\n    !!$textColor &&\n    typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$textColor as ColorKeyType]\n      : $textColor || theme.colors.collapseHeaderColor};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  font-family: ${({ theme, $textFontFamily }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ theme: { colors }, $textColor }) =>\n      $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n        ? colors[$textColor as ColorKeyType]\n        : $textColor || colors.collapseHeaderColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","$open","DefaultHeader","Button","theme","$textColor","colors","collapseHeaderColor","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","$contentHeight","$openStatus","CustomHeader"],"mappings":"6EASO,MAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,IAAwB;;eAE5C,EAAGC,WACdA,EAAQ,+BAAiC;yBALJ;EAS5BC,EAAgBH,EAAOI,EAKlC;;WAES,EAAGC,QAAOC,gBACfA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC;eACpB,EACXH,OACEI,YACAA,WAAaC,MAEfC,eACKA,EAAYF,EAAUE,GAAaD;iBAC3B,EAAGL,QAAOO,qBACvBA,GAAmBP,EAAMQ,WAAWC;;;;;;;;;aAS3B,EAAGT,OAASE,UAAUD,gBAC7BA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC;;EAIlBO,EAAkBf,EAAOgB,GAGpC;;gBAhDuC;YAmD7B,EAAGC,oBAAiDA;gBAChD,EAAGC,iBACfA,EAAc,UAAY;;;;;EAOjBC,EAAenB,EAAOgB,GAAG;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  theme: ThemeType;\n  $textColor?: string;\n  $textSize?: FontSizeType;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ theme, $textColor }) =>\n    !!$textColor &&\n    typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$textColor as ColorKeyType]\n      : $textColor || theme.colors.collapseHeaderColor};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  font-family: ${({ theme, $textFontFamily }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ theme: { colors }, $textColor }) =>\n      $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n        ? colors[$textColor as ColorKeyType]\n        : $textColor || colors.collapseHeaderColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","templateObject_1","__makeTemplateObject","_a","$open","DefaultHeader","Button","templateObject_2","theme","$textColor","colors","collapseHeaderColor","_b","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","templateObject_3","$contentHeight","$openStatus","CustomHeader","templateObject_4"],"mappings":"6JASO,YAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,KAAwBC,IAAAA,EAAAC,EAAA,CAAA,4CAAA,6BAAA,QAAA,CAAA,4CAGL,6BACJ,WAFnC,SAACC,GACZ,OADmBA,EAAAC,MACX,+BAAiC,SAAzC,GALqC,IAS5BC,EAAgBN,EAAOO,EAAPP,CAK3BQ,IAAAA,EAAAL,EAAA,CAAA,gCAAA,mBAAA,qBAAA,+KAAA,YAAA,CAAA,gCAMoD,mBAOR,qBAEQ,+KAYJ,eAzBvC,SAACC,OAAEK,EAAKL,EAAAK,MAAEC,EAAUN,EAAAM,WAC3B,OAAEA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC,mBAH/B,IAIW,SAACR,OACZS,EAGCT,EAAAK,MAFCK,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASZ,EAAAY,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACX,OAAEK,EAAKL,EAAAK,MACrB,OADsCL,EAAAa,iBACnBR,EAAMS,WAAWC,cAApC,IASS,SAACf,OAAWO,EAAMP,EAAAK,MAAAE,OAAID,EAAUN,EAAAM,WACvC,OAAAA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC,mBAFzB,IAMOQ,EAAkBpB,EAAOqB,IAGpCC,IAAAA,EAAAnB,EAAA,CAAA,iCAAA,sBAAA,oBAAA,gEAAA,CAAA,iCAEuC,sBACqC,oBAExC,kEArDG,IAmD7B,SAACC,GAAmD,OAAnCA,EAAAmB,cAAmC,IAChD,SAACnB,GACb,OAD0BA,EAAAoB,YACZ,UAAY,QAA1B,IAOSC,EAAezB,EAAOqB,IAAGK,IAAAA,EAAAvB,EAAA,CAAA,0BAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t}from"styled-components";import{ErrorText as r}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as n}from"../TextField/index.js";import{Fieldset as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as m,ErrorTextWrapper as i}from"./styles.js";function d({label:d,hintText:u,day:s,month:p,year:y,dayName:h="day",monthName:c="month",yearName:x="year",dayHasError:E,monthHasError:g,yearHasError:b,errorMessage:f,onChange:q=()=>{},onBlur:F=()=>{},onFocus:L=()=>{},disabled:C,required:B}){const M=t();return e.createElement(o,null,e.createElement(a,{as:"legend",textWeight:M.typography.fontWeightLabels||700,marginBottom:"xxs",textFontFamily:M.typography.fontFamilyLabel},d,!!B&&e.createElement("span",{style:{fontWeight:M.typography.fontWeightBase}}," (required)")),u&&e.createElement(a,null,u),e.createElement(l,null,e.createElement(n,{label:"Day",type:"text",name:h,required:!!B,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:s,onChange:q,onBlur:F,onFocus:L,hasError:E,disabled:C})),e.createElement(l,null,e.createElement(n,{label:"Month",type:"text",name:c,required:!!B,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:q,onBlur:F,onFocus:L,hasError:g,disabled:C})),e.createElement(m,null,e.createElement(n,{label:"Year",type:"text",name:x,required:!!B,hideRequiredInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:y,onChange:q,onBlur:F,onFocus:L,hasError:b,disabled:C})),f&&e.createElement(i,null,e.createElement(r,{marginTop:"xxs"},f)))}export{d as DateField,d as default};
+import e from"react";import{useTheme as t}from"styled-components";import{ErrorText as r}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as n}from"../TextField/index.js";import{Fieldset as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as i,ErrorTextWrapper as m}from"./styles.js";function d(d){var u=d.label,s=d.hintText,p=d.day,y=d.month,h=d.year,c=d.dayName,x=void 0===c?"day":c,E=d.monthName,g=void 0===E?"month":E,b=d.yearName,f=void 0===b?"year":b,v=d.dayHasError,q=d.monthHasError,F=d.yearHasError,L=d.errorMessage,C=d.onChange,B=void 0===C?function(){}:C,M=d.onBlur,T=void 0===M?function(){}:M,j=d.onFocus,W=void 0===j?function(){}:j,H=d.disabled,I=d.required,N=t();return e.createElement(o,null,e.createElement(a,{as:"legend",textWeight:N.typography.fontWeightLabels||700,marginBottom:"xxs",textFontFamily:N.typography.fontFamilyLabel},u,!!I&&e.createElement("span",{style:{fontWeight:N.typography.fontWeightBase}}," (required)")),s&&e.createElement(a,null,s),e.createElement(l,null,e.createElement(n,{label:"Day",type:"text",name:x,required:!!I,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:B,onBlur:T,onFocus:W,hasError:v,disabled:H})),e.createElement(l,null,e.createElement(n,{label:"Month",type:"text",name:g,required:!!I,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:y,onChange:B,onBlur:T,onFocus:W,hasError:q,disabled:H})),e.createElement(i,null,e.createElement(n,{label:"Year",type:"text",name:f,required:!!I,hideRequiredInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:h,onChange:B,onBlur:T,onFocus:W,hasError:F,disabled:H})),L&&e.createElement(m,null,e.createElement(r,{marginTop:"xxs"},L)))}export{d as DateField,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { useTheme } from \"styled-components\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n} from \"./styles\";\nimport { type ThemeType } from \"../../types\";\n\nexport type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n};\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: DateFieldProps) {\n  const theme = useTheme();\n  const typedTheme = theme as ThemeType;\n  return (\n    <Fieldset>\n      <Text\n        as=\"legend\"\n        textWeight={typedTheme.typography.fontWeightLabels || 700}\n        marginBottom=\"xxs\"\n        textFontFamily={typedTheme.typography.fontFamilyLabel}\n      >\n        {label}\n        {!!required && (\n          <span\n            style={{\n              fontWeight: typedTheme.typography.fontWeightBase,\n            }}\n          >\n            {` (required)`}\n          </span>\n        )}\n      </Text>\n      {hintText && <Text>{hintText}</Text>}\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\n      )}\n    </Fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","label","hintText","day","month","year","dayName","monthName","yearName","dayHasError","monthHasError","yearHasError","errorMessage","onChange","onBlur","onFocus","disabled","required","typedTheme","useTheme","React","Fieldset","createElement","Text","as","textWeight","typography","fontWeightLabels","marginBottom","textFontFamily","fontFamilyLabel","style","fontWeight","fontWeightBase","DateTextFieldWrapper","TextField","type","name","hideRequiredInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"6UA6CgBA,GAAUC,MACxBA,EAAKC,SACLA,EAAQC,IACRA,EAAGC,MACHA,EAAKC,KACLA,EAAIC,QACJA,EAAU,MAAKC,UACfA,EAAY,QAAOC,SACnBA,EAAW,OAAMC,YACjBA,EAAWC,cACXA,EAAaC,aACbA,EAAYC,aACZA,EAAYC,SACZA,EAAW,OAEVC,OACDA,EAAS,OAERC,QACDA,EAAU,OAETC,SACDA,EAAQC,SACRA,IAEA,MACMC,EADQC,IAEd,OACEC,gBAACC,EAAQ,KACPD,EAACE,cAAAC,EACC,CAAAC,GAAG,SACHC,WAAYP,EAAWQ,WAAWC,kBAAoB,IACtDC,aAAa,MACbC,eAAgBX,EAAWQ,WAAWI,iBAErC7B,IACEgB,GACDG,EAAAE,cAAA,OAAA,CACES,MAAO,CACLC,WAAYd,EAAWQ,WAAWO,iBAGnC,gBAIN/B,GAAYkB,EAAAE,cAACC,EAAI,KAAErB,GACpBkB,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRlC,MAAM,MACNmC,KAAK,OACLC,KAAM/B,EACNW,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOxC,EACPU,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUnC,EACVO,SAAUA,KAGdI,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRlC,MAAM,QACNmC,KAAK,OACLC,KAAM9B,EACNU,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOvC,EACPS,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUlC,EACVM,SAAUA,KAGdI,EAAAE,cAACuB,EAAyB,KACxBzB,EAAAE,cAACa,EAAS,CACRlC,MAAM,OACNmC,KAAK,OACLC,KAAM7B,EACNS,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOtC,EACPQ,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUjC,EACVK,SAAUA,KAGbJ,GACCQ,EAAAE,cAACwB,EAAgB,KACf1B,EAAAE,cAACyB,EAAS,CAACC,UAAU,OAAOpC,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { useTheme } from \"styled-components\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n} from \"./styles\";\nimport { type ThemeType } from \"../../types\";\n\nexport type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n};\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: DateFieldProps) {\n  const theme = useTheme();\n  const typedTheme = theme as ThemeType;\n  return (\n    <Fieldset>\n      <Text\n        as=\"legend\"\n        textWeight={typedTheme.typography.fontWeightLabels || 700}\n        marginBottom=\"xxs\"\n        textFontFamily={typedTheme.typography.fontFamilyLabel}\n      >\n        {label}\n        {!!required && (\n          <span\n            style={{\n              fontWeight: typedTheme.typography.fontWeightBase,\n            }}\n          >\n            {` (required)`}\n          </span>\n        )}\n      </Text>\n      {hintText && <Text>{hintText}</Text>}\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\n      )}\n    </Fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","undefined","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","typedTheme","useTheme","React","Fieldset","createElement","Text","as","textWeight","typography","fontWeightLabels","marginBottom","textFontFamily","fontFamilyLabel","style","fontWeight","fontWeightBase","DateTextFieldWrapper","TextField","type","name","hideRequiredInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"oUA6CM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAeN,EAAAO,QAAfA,OAAOC,IAAAF,EAAG,MAAKA,EACfG,EAAmBT,EAAAU,UAAnBA,OAASF,IAAAC,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWb,EAAAa,YACXC,EAAad,EAAAc,cACbC,EAAYf,EAAAe,aACZC,iBACAC,EAAAjB,EAAAkB,SAAAA,OAAWV,IAAAS,EAAA,WAEX,EAACA,EACDE,EAECnB,EAAAoB,OAFDA,OAASZ,IAAAW,EAAA,WAET,EAACA,EACDE,EAECrB,EAAAsB,QAFDA,OAAUd,IAAAa,EAAA,WAEV,IACAE,EAAQvB,EAAAuB,SACRC,EAAQxB,EAAAwB,SAGFC,EADQC,IAEd,OACEC,gBAACC,EAAQ,KACPD,EAACE,cAAAC,EACC,CAAAC,GAAG,SACHC,WAAYP,EAAWQ,WAAWC,kBAAoB,IACtDC,aAAa,MACbC,eAAgBX,EAAWQ,WAAWI,iBAErCpC,IACEuB,GACDG,EAAAE,cAAA,OAAA,CACES,MAAO,CACLC,WAAYd,EAAWQ,WAAWO,iBAGnC,gBAINtC,GAAYyB,EAAAE,cAACC,EAAI,KAAE5B,GACpByB,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRzC,MAAM,MACN0C,KAAK,OACLC,KAAMrC,EACNiB,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAO/C,EACPe,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUtC,EACVU,SAAUA,KAGdI,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRzC,MAAM,QACN0C,KAAK,OACLC,KAAMlC,EACNc,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAO9C,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUrC,EACVS,SAAUA,KAGdI,EAAAE,cAACuB,EAAyB,KACxBzB,EAAAE,cAACa,EAAS,CACRzC,MAAM,OACN0C,KAAK,OACLC,KAAMhC,EACNY,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAO7C,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUpC,EACVQ,SAAUA,KAGbP,GACCW,EAAAE,cAACwB,EAAgB,KACf1B,EAAAE,cAACyB,EAAS,CAACC,UAAU,OAAOvC,IAKtC"}

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

@@ -1,27 +1,2 @@
-import i from"styled-components";import{Text as e}from"../Text/index.js";const o=i.fieldset`
-  margin: 0;
-  padding: 0;
-  border: 0;
-  *,
-  *:after,
-  *:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-`;i(e)`
-  font-family: ${({theme:i})=>i.typography.fontFamilyLabel};
-`;const t=i.div`
-  display: inline-block;
-  width: 60px;
-  margin-right: ${({theme:i})=>i.spacing.xs};
-  span {
-    margin-bottom: 0.25rem; // this is smaller than xxs spacing
-    font-weight: ${({theme:i})=>i.typography.fontWeightBase};
-  }
-`,r=i(t)`
-  width: 80px;
-`,n=i.div`
-  clear: left;
-`;export{t as DateTextFieldWrapper,n as ErrorTextWrapper,o as Fieldset,r as LargeDateTextFieldWrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{Text as o}from"../Text/index.js";var r=i.fieldset(e||(e=n(["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"],["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"])));i(o)(t||(t=n(["\n  font-family: ",";\n"],["\n  font-family: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}));var e,t,a,s,b,m=i.div(a||(a=n(["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"],["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.spacing.xs}),(function(n){return n.theme.typography.fontWeightBase})),d=i(m)(s||(s=n(["\n  width: 80px;\n"],["\n  width: 80px;\n"]))),g=i.div(b||(b=n(["\n  clear: left;\n"],["\n  clear: left;\n"])));export{m as DateTextFieldWrapper,g as ErrorTextWrapper,r as Fieldset,d as LargeDateTextFieldWrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const TextAsLabel = styled(Text)<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n`;\n\nexport const DateTextFieldWrapper = styled.div<{ theme: ThemeType }>`\n  display: inline-block;\n  width: 60px;\n  margin-right: ${({ theme }) => theme.spacing.xs};\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled(DateTextFieldWrapper)`\n  width: 80px;\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","Text","theme","typography","fontFamilyLabel","DateTextFieldWrapper","div","spacing","xs","fontWeightBase","LargeDateTextFieldWrapper","ErrorTextWrapper"],"mappings":"yEAIa,MAAAA,EAAWC,EAAOC,QAAQ;;;;;;;;;;;EAaZD,EAAOE,EAA2B;iBAC5C,EAAGC,WAAYA,EAAMC,WAAWC;EAGpC,MAAAC,EAAuBN,EAAOO,GAAyB;;;kBAGlD,EAAGJ,WAAYA,EAAMK,QAAQC;;;mBAG5B,EAAGN,WAAYA,EAAMC,WAAWM;;EAItCC,EAA4BX,EAAOM,EAAqB;;EAIxDM,EAAmBZ,EAAOO,GAAG;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const TextAsLabel = styled(Text)<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n`;\n\nexport const DateTextFieldWrapper = styled.div<{ theme: ThemeType }>`\n  display: inline-block;\n  width: 60px;\n  margin-right: ${({ theme }) => theme.spacing.xs};\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled(DateTextFieldWrapper)`\n  width: 80px;\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","templateObject_1","__makeTemplateObject","Text","templateObject_2","_a","theme","typography","fontFamilyLabel","DateTextFieldWrapper","div","templateObject_3","spacing","xs","fontWeightBase","LargeDateTextFieldWrapper","templateObject_4","ErrorTextWrapper","templateObject_5"],"mappings":"yJAIa,IAAAA,EAAWC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,0LAAA,CAAA,6LAaZH,EAAOI,EAAPJ,CAAYK,IAAAA,EAAAF,EAAA,CAAA,oBAAA,OAAA,CAAsB,oBACG,UAA/C,SAACG,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IAGzB,cAAMC,EAAuBV,EAAOW,IAAyBC,IAAAA,EAAAT,EAAA,CAAA,+DAAA,kGAAA,YAAA,CAAA,+DAGnB,kGAGgB,eAH/C,SAACG,GAAc,OAAPA,EAAAC,MAAaM,QAAQC,EAAd,IAGd,SAACR,GAAc,OAAPA,EAAAC,MAAaC,WAAWO,cAAjB,IAIrBC,EAA4BhB,EAAOU,EAAPV,CAA4BiB,IAAAA,EAAAd,EAAA,CAAA,sBAAA,CAAA,yBAIxDe,EAAmBlB,EAAOW,IAAGQ,IAAAA,EAAAhB,EAAA,CAAA,sBAAA,CAAA"}

package/lib/src/components/Divider.js

@@ -1,18 +1,2 @@
-import e from"react";import t from"styled-components";const o=t.div`
-  align-items: center;
-  display: flex;
-  flex-basis: 100%;
-  padding-bottom: 10px;
-  padding-top: 10px;
-  text-align: center;
-  width: 100%;
-  &:before,
-  &:after {
-    background-color: #333;
-    content: "";
-    display: inline-block;
-    flex-grow: 1;
-    height: 1px;
-  }
-`,n=({children:t})=>e.createElement(o,null,t);export{n as Divider,n as default};
+import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import e from"react";import t from"styled-components";var i,o=t.div(i||(i=n(['\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: "";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n'],['\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: "";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n']))),l=function(n){var t=n.children;return e.createElement(o,null,t)};export{l as Divider,l as default};
 //# sourceMappingURL=Divider.js.map

package/lib/src/components/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nconst StyledDivider = styled.div`\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: \"\";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n`;\n\nexport const Divider = ({ children }: { children?: ReactNode }) => (\n  <StyledDivider>{children}</StyledDivider>\n);\n\nexport default Divider;\n"],"names":["StyledDivider","styled","div","Divider","children","React","createElement"],"mappings":"sDAGA,MAAMA,EAAgBC,EAAOC,GAAG;;;;;;;;;;;;;;;;EAkBnBC,EAAU,EAAGC,cACxBC,EAACC,cAAAN,OAAeI"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nconst StyledDivider = styled.div`\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: \"\";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n`;\n\nexport const Divider = ({ children }: { children?: ReactNode }) => (\n  <StyledDivider>{children}</StyledDivider>\n);\n\nexport default Divider;\n"],"names":["StyledDivider","styled","div","templateObject_1","__makeTemplateObject","Divider","_a","children","React","createElement"],"mappings":"mIAGA,MAAMA,EAAgBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,0SAAA,CAAA,6SAkBnBC,EAAU,SAACC,GAAE,IAAAC,EAAQD,EAAAC,SAAiC,OACjEC,EAACC,cAAAT,EAAe,KAAAO,EADiD"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as o}from"styled-components";import{faTriangleExclamation as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as t}from"../../themes/cruk.js";import{StyledErrorText as s}from"./styles.js";import{IconFa as m}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";function i({children:i,as:a="span",...f}){const l=o(),c={...t,...l},p="string"==typeof i&&i.length;return e.createElement(s,{forwardedAs:a,...f,theme:c,role:"alert"},p?e.createElement(n,{as:"span",marginRight:"xxs"},e.createElement(m,{faIcon:r,size:"1em"})):null,i)}export{i as ErrorText,i as default};
+import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{faTriangleExclamation as s}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{StyledErrorText as n}from"./styles.js";import{IconFa as i}from"../IconFa/index.js";import{Box as a}from"../Box/index.js";function l(l){var d=l.children,f=l.as,p=void 0===f?"span":f,c=e(l,["children","as"]),u=t(),x=o(o({},m),u),h="string"==typeof d&&d.length;return r.createElement(n,o({forwardedAs:p},c,{theme:x,role:"alert"}),h?r.createElement(a,{as:"span",marginRight:"xxs"},r.createElement(i,{faIcon:s,size:"1em"})):null,d)}export{l as ErrorText,l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText forwardedAs={as} {...props} theme={theme} role=\"alert\">\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","children","as","props","foundTheme","useTheme","theme","defaultTheme","shouldShowIcon","length","React","createElement","StyledErrorText","forwardedAs","role","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"4VAqBgB,SAAAA,GAAUC,SAAEA,EAAQC,GAAEA,EAAK,UAAWC,IACpD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAqC,iBAAbP,GAAyBA,EAASQ,OAChE,OACEC,EAACC,cAAAC,EAAgB,CAAAC,YAAaX,KAAQC,EAAOG,MAAOA,EAAOQ,KAAK,SAC7DN,EACCE,EAACC,cAAAI,EAAI,CAAAb,GAAG,OAAOc,YAAY,OACzBN,EAAAC,cAACM,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHnB,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText forwardedAs={as} {...props} theme={theme} role=\"alert\">\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","children","_b","as","undefined","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","shouldShowIcon","length","React","createElement","StyledErrorText","forwardedAs","role","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"4aAqBM,SAAUA,EAAUC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAAF,EAAAG,GAAAA,OAAKC,IAAAF,EAAA,OAAMA,EAAKG,EAAKC,EAAAN,EAAjC,mBAClBO,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAqC,iBAAbX,GAAyBA,EAASY,OAChE,OACEC,EAACC,cAAAC,EAAgBN,EAAA,CAAAO,YAAad,GAAQE,EAAK,CAAEI,MAAOA,EAAOS,KAAK,UAC7DN,EACCE,EAACC,cAAAI,EAAI,CAAAhB,GAAG,OAAOiB,YAAY,OACzBN,EAAAC,cAACM,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHvB,EAGP"}

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

@@ -1,6 +1,2 @@
-import o from"styled-components";import{Text as t}from"../Text/index.js";const e=o(t)`
-  display: inline-block;
-  color: ${({theme:o})=>o.colors.textError};
-  font-weight: ${({theme:o})=>o.typography.fontWeightHeavy};
-`;export{e as StyledErrorText,e as default};
+import{__makeTemplateObject as o}from"../../../node_modules/tslib/tslib.es6.js";import n from"styled-components";import{Text as t}from"../Text/index.js";var e,r=n(t)(e||(e=o(["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"],["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"])),(function(o){return o.theme.colors.textError}),(function(o){return o.theme.typography.fontWeightHeavy}));export{r as StyledErrorText,r as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledErrorText = styled(Text)<ThemeProps>`\n  display: inline-block;\n  color: ${({ theme }) => theme.colors.textError};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeavy};\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","theme","colors","textError","typography","fontWeightHeavy"],"mappings":"+EAOaA,EAAkBC,EAAOC,EAAiB;;WAE5C,EAAGC,WAAYA,EAAMC,OAAOC;iBACtB,EAAGF,WAAYA,EAAMG,WAAWC;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledErrorText = styled(Text)<ThemeProps>`\n  display: inline-block;\n  color: ${({ theme }) => theme.colors.textError};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeavy};\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","templateObject_1","__makeTemplateObject","_a","theme","colors","textError","typography","fontWeightHeavy"],"mappings":"yJAOa,MAAAA,EAAkBC,EAAOC,EAAPD,CAAwBE,IAAAA,EAAAC,EAAA,CAAA,wCAAA,qBAAA,OAAA,CAAA,wCAEP,qBACgB,UADrD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,SAAb,IACT,SAACH,GAAc,OAAPA,EAAAC,MAAaG,WAAWC,eAAjB"}

package/lib/src/components/Flex.js

@@ -1,8 +1,2 @@
-import e from"react";import t from"styled-components";import{spacing as m,spacingPropsToSpacingPropsInternal as o}from"./Spacing/index.js";const i=t.div`
-  display: block;
-  @media (min-width: ${({theme:e})=>e.breakpoint.tablet}) {
-    display: flex;
-  }
-  ${e=>m(e,e.theme)}
-`;function n(t){const m=o(t);return e.createElement(i,{theme:t.theme,...m})}export{n as Flex,n as default};
+import{__makeTemplateObject as e,__assign as n}from"../../node_modules/tslib/tslib.es6.js";import t from"react";import i from"styled-components";import{spacing as r,spacingPropsToSpacingPropsInternal as m}from"./Spacing/index.js";var o,a=i.div(o||(o=e(["\n  display: block;\n  @media (min-width: ",") {\n    display: flex;\n  }\n  ","\n"],["\n  display: block;\n  @media (min-width: ",") {\n    display: flex;\n  }\n  ","\n"])),(function(e){return e.theme.breakpoint.tablet}),(function(e){return r(e,e.theme)}));function l(e){var i=m(e);return t.createElement(a,n({theme:e.theme},i))}export{l as Flex,l as default};
 //# sourceMappingURL=Flex.js.map

package/lib/src/components/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/Flex.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n  spacing,\n  type SpacingPropsInternal,\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"./Spacing\";\nimport { type ThemeType } from \"../types\";\n\ntype StyledProps = SpacingPropsInternal & {\n  theme: ThemeType;\n};\n\nconst FlexStyled = styled.div<StyledProps>`\n  display: block;\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: flex;\n  }\n  ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\ntype Props = SpacingProps & {\n  theme: ThemeType;\n};\nexport function Flex(props: Props) {\n  const spacingProps = spacingPropsToSpacingPropsInternal(props);\n\n  return <FlexStyled theme={props.theme} {...spacingProps} />;\n}\n\nexport default Flex;\n"],"names":["FlexStyled","styled","div","theme","breakpoint","tablet","props","spacing","Flex","spacingProps","spacingPropsToSpacingPropsInternal","React","createElement"],"mappings":"2IAcA,MAAMA,EAAaC,EAAOC,GAAgB;;uBAEnB,EAAGC,WAAYA,EAAMC,WAAWC;;;IAGlDC,GAAUC,EAAQD,EAAOA,EAAMH;EAM9B,SAAUK,EAAKF,GACnB,MAAMG,EAAeC,EAAmCJ,GAExD,OAAOK,EAAAC,cAACZ,EAAU,CAACG,MAAOG,EAAMH,SAAWM,GAC7C"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/Flex.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n  spacing,\n  type SpacingPropsInternal,\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"./Spacing\";\nimport { type ThemeType } from \"../types\";\n\ntype StyledProps = SpacingPropsInternal & {\n  theme: ThemeType;\n};\n\nconst FlexStyled = styled.div<StyledProps>`\n  display: block;\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: flex;\n  }\n  ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\ntype Props = SpacingProps & {\n  theme: ThemeType;\n};\nexport function Flex(props: Props) {\n  const spacingProps = spacingPropsToSpacingPropsInternal(props);\n\n  return <FlexStyled theme={props.theme} {...spacingProps} />;\n}\n\nexport default Flex;\n"],"names":["FlexStyled","styled","div","templateObject_1","__makeTemplateObject","_a","theme","breakpoint","tablet","props","spacing","Flex","spacingProps","spacingPropsToSpacingPropsInternal","React","createElement","__assign"],"mappings":"sOAcA,MAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6CAAA,mCAAA,MAAA,CAAa,6CAEmB,mCAGN,SAHhC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,MAAjB,IAGlC,SAACC,GAAU,OAAAC,EAAQD,EAAOA,EAAMH,UAM9B,SAAUK,EAAKF,GACnB,IAAMG,EAAeC,EAAmCJ,GAExD,OAAOK,EAAAC,cAACf,EAAUgB,EAAA,CAACV,MAAOG,EAAMH,OAAWM,GAC7C"}

package/lib/src/components/Fontface.js

@@ -1,2 +1,2 @@
-import{crukTheme as o}from"../themes/cruk.js";import{rflTheme as f}from"../themes/rfl.js";import{su2cTheme as t}from"../themes/su2c.js";import{bowelbabeTheme as n}from"../themes/bowelbabe.js";const r=o=>o.map((o=>`\n        @font-face {\n          font-family: ${o.family};\n          src: ${o?.urlWoff2?`url("${o.urlWoff2}") format('woff2')`:""}${o.urlWoff&&o?.urlWoff2?", ":""}\n          ${o?.urlWoff?`url("${o.urlWoff}") format('woff')`:""};\n          font-weight: ${o.fontWeight||"normal"};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `)).join(""),m=`\n${r(o.typography.customFonts)}\n${r(f.typography.customFonts)}\n${r(t.typography.customFonts)}\n${r(n.typography.customFonts)}\n`;export{m as Fontface,r as buildCustomFonts,m as default};
+import{crukTheme as o}from"../themes/cruk.js";import{rflTheme as t}from"../themes/rfl.js";import{su2cTheme as n}from"../themes/su2c.js";import{bowelbabeTheme as f}from"../themes/bowelbabe.js";var c=function(o){return o.map((function(o){return"\n        @font-face {\n          font-family: ".concat(o.family,";\n          src: ").concat((null==o?void 0:o.urlWoff2)?'url("'.concat(o.urlWoff2,"\") format('woff2')"):"").concat(o.urlWoff&&(null==o?void 0:o.urlWoff2)?", ":"","\n          ").concat((null==o?void 0:o.urlWoff)?'url("'.concat(o.urlWoff,"\") format('woff')"):"",";\n          font-weight: ").concat(o.fontWeight||"normal",";\n          font-style: normal;\n          font-display: fallback;\n        }\n      ")})).join("")},r="\n".concat(c(o.typography.customFonts),"\n").concat(c(t.typography.customFonts),"\n").concat(c(n.typography.customFonts),"\n").concat(c(f.typography.customFonts),"\n");export{r as Fontface,c as buildCustomFonts,r as default};
 //# sourceMappingURL=Fontface.js.map

package/lib/src/components/Fontface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fontface.js","sources":["../../../src/components/Fontface.ts"],"sourcesContent":["import { type CustomFontType } from \"../types\";\nimport { crukTheme } from \"../themes/cruk\";\nimport { rflTheme } from \"../themes/rfl\";\nimport { su2cTheme } from \"../themes/su2c\";\nimport { bowelbabeTheme } from \"../themes/bowelbabe\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nexport const buildCustomFonts = (customFonts: CustomFontType[]) =>\n  customFonts\n    .map(\n      (font) => `\n        @font-face {\n          font-family: ${font.family};\n          src: ${\n            font?.urlWoff2 ? `url(\"${font.urlWoff2}\") format('woff2')` : \"\"\n          }${!!font.urlWoff && !!font?.urlWoff2 ? \", \" : \"\"}\n          ${font?.urlWoff ? `url(\"${font.urlWoff}\") format('woff')` : \"\"};\n          font-weight: ${font.fontWeight || \"normal\"};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const Fontface = `\n${buildCustomFonts(crukTheme.typography.customFonts)}\n${buildCustomFonts(rflTheme.typography.customFonts)}\n${buildCustomFonts(su2cTheme.typography.customFonts)}\n${buildCustomFonts(bowelbabeTheme.typography.customFonts)}\n`;\n\nexport default Fontface;\n"],"names":["buildCustomFonts","customFonts","map","font","family","urlWoff2","urlWoff","fontWeight","join","Fontface","crukTheme","typography","rflTheme","su2cTheme","bowelbabeTheme"],"mappings":"sMAOaA,EAAoBC,GAC/BA,EACGC,KACEC,GAAS,kDAESA,EAAKC,2BAElBD,GAAME,SAAW,QAAQF,EAAKE,6BAA+B,KAC1DF,EAAKG,SAAaH,GAAME,SAAW,KAAO,iBAC7CF,GAAMG,QAAU,QAAQH,EAAKG,2BAA6B,+BAC7CH,EAAKI,YAAc,mGAMvCC,KAAK,IAEGC,EAAW,KACtBT,EAAiBU,EAAUC,WAAWV,iBACtCD,EAAiBY,EAASD,WAAWV,iBACrCD,EAAiBa,EAAUF,WAAWV,iBACtCD,EAAiBc,EAAeH,WAAWV"}
+{"version":3,"file":"Fontface.js","sources":["../../../src/components/Fontface.ts"],"sourcesContent":["import { type CustomFontType } from \"../types\";\nimport { crukTheme } from \"../themes/cruk\";\nimport { rflTheme } from \"../themes/rfl\";\nimport { su2cTheme } from \"../themes/su2c\";\nimport { bowelbabeTheme } from \"../themes/bowelbabe\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nexport const buildCustomFonts = (customFonts: CustomFontType[]) =>\n  customFonts\n    .map(\n      (font) => `\n        @font-face {\n          font-family: ${font.family};\n          src: ${\n            font?.urlWoff2 ? `url(\"${font.urlWoff2}\") format('woff2')` : \"\"\n          }${!!font.urlWoff && !!font?.urlWoff2 ? \", \" : \"\"}\n          ${font?.urlWoff ? `url(\"${font.urlWoff}\") format('woff')` : \"\"};\n          font-weight: ${font.fontWeight || \"normal\"};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const Fontface = `\n${buildCustomFonts(crukTheme.typography.customFonts)}\n${buildCustomFonts(rflTheme.typography.customFonts)}\n${buildCustomFonts(su2cTheme.typography.customFonts)}\n${buildCustomFonts(bowelbabeTheme.typography.customFonts)}\n`;\n\nexport default Fontface;\n"],"names":["buildCustomFonts","customFonts","map","font","concat","family","urlWoff2","urlWoff","undefined","fontWeight","join","Fontface","crukTheme","typography","rflTheme","su2cTheme","bowelbabeTheme"],"mappings":"gMAOO,IAAMA,EAAmB,SAACC,GAC/B,OAAAA,EACGC,KACC,SAACC,GAAS,MAAA,kDAAAC,OAESD,EAAKE,OAElB,sBAAAD,QAAAD,eAAAA,EAAMG,UAAW,QAAAF,OAAQD,EAAKG,gCAA+B,IAAEF,OAC5DD,EAAKI,UAAaJ,aAAAK,EAAAL,EAAMG,UAAW,KAAO,2BAC7CH,aAAIK,EAAJL,EAAMI,SAAU,QAAQH,OAAAD,EAAKI,QAAO,sBAAsB,GAC7C,8BAAAH,OAAAD,EAAKM,YAAc,SAIrC,yFAAA,IAEFC,KAAK,GAfR,EAiBWC,EAAW,KACtBP,OAAAJ,EAAiBY,EAAUC,WAAWZ,aAAY,MAAAG,OAClDJ,EAAiBc,EAASD,WAAWZ,0BACrCD,EAAiBe,EAAUF,WAAWZ,0BACtCD,EAAiBgB,EAAeH,WAAWZ"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t,ThemeProvider as n}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{Text as r}from"../Text/index.js";import{StyledFooter as o,FooterContentWrapper as a,FooterSectionLogo as m,StyledRegulatorLogo as c,FooterSectionLinks as i,StyledNav as s,StyledUL as E,StyledLI as f,FooterSection as u,FooterSectionAddress as p,StyledAddress as d}from"./styles.js";function g({children:g,middleSection:x}){const h=e.Children.toArray(g),S=t(),y={...l,...S};return e.createElement(n,{theme:y},e.createElement(o,null,e.createElement(a,null,e.createElement(m,null,e.createElement(c,{width:130,height:40,alt:y.siteConfig.footerLogoAlt||"",src:y.siteConfig.footerLogoSrc||""})),e.createElement(i,null,e.createElement(s,{"aria-label":"footer links"},e.createElement(E,null,h.length?h.map(((t,n)=>{const l=`footerLink${n}`;return e.createElement(f,{key:l},t)})):null))),e.createElement(u,null,x?"string"==typeof x?e.createElement(r,{textSize:"s"},x):e.createElement(e.Fragment,null,x):e.createElement(r,{textSize:"s"},y.siteConfig.footerCopyText)),e.createElement(p,null,e.createElement(d,null,e.createElement(r,{as:"span",textSize:"s"},"2 Redman Place"),e.createElement(r,{as:"span",textSize:"s"},"London"),e.createElement(r,{as:"span",textSize:"s"},"E20 1JQ"))))))}export{g as Footer,g as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as l}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as i,StyledRegulatorLogo as s,FooterSectionLinks as c,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as g}from"./styles.js";function x(x){var h=x.children,S=x.middleSection,y=t.Children.toArray(h),z=n(),C=e(e({},r),z);return t.createElement(l,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(i,null,t.createElement(s,{width:130,height:40,alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(c,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,y.length?y.map((function(e,n){var l="footerLink".concat(n);return t.createElement(u,{key:l},e)})):null))),t.createElement(p,null,S?"string"==typeof S?t.createElement(o,{textSize:"s"},S):t.createElement(t.Fragment,null,S):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(g,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))}export{x as Footer,x as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Text } from \"../Text\";\n\nimport {\n  StyledFooter,\n  FooterContentWrapper,\n  FooterSectionLogo,\n  FooterSection,\n  FooterSectionAddress,\n  StyledAddress,\n  StyledRegulatorLogo,\n  FooterSectionLinks,\n  StyledNav,\n  StyledUL,\n  StyledLI,\n} from \"./styles\";\n\nexport type FooterProps = HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({ children, middleSection }: FooterProps) {\n  const childArray = React.Children.toArray(children);\n\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFooter>\n        <FooterContentWrapper>\n          <FooterSectionLogo>\n            <StyledRegulatorLogo\n              width={130}\n              height={40}\n              alt={theme.siteConfig.footerLogoAlt || \"\"}\n              src={theme.siteConfig.footerLogoSrc || \"\"}\n            />\n          </FooterSectionLogo>\n          <FooterSectionLinks>\n            <StyledNav aria-label=\"footer links\">\n              <StyledUL>\n                {childArray.length\n                  ? childArray.map((child, index) => {\n                      const footerLinkKey = `footerLink${index}`;\n                      return <StyledLI key={footerLinkKey}>{child}</StyledLI>;\n                    })\n                  : null}\n              </StyledUL>\n            </StyledNav>\n          </FooterSectionLinks>\n\n          <FooterSection>\n            {middleSection ? (\n              typeof middleSection === \"string\" ? (\n                <Text textSize=\"s\">{middleSection}</Text>\n              ) : (\n                <>{middleSection}</>\n              )\n            ) : (\n              <Text textSize=\"s\">{theme.siteConfig.footerCopyText}</Text>\n            )}\n          </FooterSection>\n\n          <FooterSectionAddress>\n            <StyledAddress>\n              <Text as=\"span\" textSize=\"s\">\n                2 Redman Place\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                London\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                E20 1JQ\n              </Text>\n            </StyledAddress>\n          </FooterSectionAddress>\n        </FooterContentWrapper>\n      </StyledFooter>\n    </ThemeProvider>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","children","middleSection","childArray","React","Children","toArray","foundTheme","useTheme","theme","defaultTheme","createElement","ThemeProvider","StyledFooter","FooterContentWrapper","FooterSectionLogo","StyledRegulatorLogo","width","height","alt","siteConfig","footerLogoAlt","src","footerLogoSrc","FooterSectionLinks","StyledNav","StyledUL","length","map","child","index","footerLinkKey","StyledLI","key","FooterSection","Text","textSize","Fragment","footerCopyText","FooterSectionAddress","StyledAddress","as"],"mappings":"+aA6BgBA,GAAOC,SAAEA,EAAQC,cAAEA,IACjC,MAAMC,EAAaC,EAAMC,SAASC,QAAQL,GAEpCM,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEH,EAACO,cAAAC,EAAc,CAAAH,MAAOA,GACpBL,EAAAO,cAACE,EAAY,KACXT,EAAAO,cAACG,EAAoB,KACnBV,EAAAO,cAACI,EAAiB,KAChBX,EAAAO,cAACK,EAAmB,CAClBC,MAAO,IACPC,OAAQ,GACRC,IAAKV,EAAMW,WAAWC,eAAiB,GACvCC,IAAKb,EAAMW,WAAWG,eAAiB,MAG3CnB,EAAAO,cAACa,EAAkB,KACjBpB,EAACO,cAAAc,gBAAqB,gBACpBrB,EAAAO,cAACe,EAAQ,KACNvB,EAAWwB,OACRxB,EAAWyB,KAAI,CAACC,EAAOC,KACrB,MAAMC,EAAgB,aAAaD,IACnC,OAAO1B,EAAAO,cAACqB,EAAS,CAAAC,IAAKF,GAAgBF,EAAiB,IAEzD,QAKVzB,EAACO,cAAAuB,EACE,KAAAhC,EAC0B,iBAAlBA,EACLE,EAACO,cAAAwB,EAAK,CAAAC,SAAS,KAAKlC,GAEpBE,EAAGO,cAAAP,EAAAiC,SAAA,KAAAnC,GAGLE,EAACO,cAAAwB,GAAKC,SAAS,KAAK3B,EAAMW,WAAWkB,iBAIzClC,EAAAO,cAAC4B,EAAoB,KACnBnC,EAAAO,cAAC6B,EAAa,KACZpC,EAACO,cAAAwB,GAAKM,GAAG,OAAOL,SAAS,KAElB,kBACPhC,EAACO,cAAAwB,GAAKM,GAAG,OAAOL,SAAS,KAElB,UACPhC,EAAAO,cAACwB,EAAK,CAAAM,GAAG,OAAOL,SAAS,KAAG,eAS1C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Text } from \"../Text\";\n\nimport {\n  StyledFooter,\n  FooterContentWrapper,\n  FooterSectionLogo,\n  FooterSection,\n  FooterSectionAddress,\n  StyledAddress,\n  StyledRegulatorLogo,\n  FooterSectionLinks,\n  StyledNav,\n  StyledUL,\n  StyledLI,\n} from \"./styles\";\n\nexport type FooterProps = HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({ children, middleSection }: FooterProps) {\n  const childArray = React.Children.toArray(children);\n\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFooter>\n        <FooterContentWrapper>\n          <FooterSectionLogo>\n            <StyledRegulatorLogo\n              width={130}\n              height={40}\n              alt={theme.siteConfig.footerLogoAlt || \"\"}\n              src={theme.siteConfig.footerLogoSrc || \"\"}\n            />\n          </FooterSectionLogo>\n          <FooterSectionLinks>\n            <StyledNav aria-label=\"footer links\">\n              <StyledUL>\n                {childArray.length\n                  ? childArray.map((child, index) => {\n                      const footerLinkKey = `footerLink${index}`;\n                      return <StyledLI key={footerLinkKey}>{child}</StyledLI>;\n                    })\n                  : null}\n              </StyledUL>\n            </StyledNav>\n          </FooterSectionLinks>\n\n          <FooterSection>\n            {middleSection ? (\n              typeof middleSection === \"string\" ? (\n                <Text textSize=\"s\">{middleSection}</Text>\n              ) : (\n                <>{middleSection}</>\n              )\n            ) : (\n              <Text textSize=\"s\">{theme.siteConfig.footerCopyText}</Text>\n            )}\n          </FooterSection>\n\n          <FooterSectionAddress>\n            <StyledAddress>\n              <Text as=\"span\" textSize=\"s\">\n                2 Redman Place\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                London\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                E20 1JQ\n              </Text>\n            </StyledAddress>\n          </FooterSectionAddress>\n        </FooterContentWrapper>\n      </StyledFooter>\n    </ThemeProvider>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","_a","children","middleSection","childArray","React","Children","toArray","foundTheme","useTheme","theme","__assign","defaultTheme","createElement","ThemeProvider","StyledFooter","FooterContentWrapper","FooterSectionLogo","StyledRegulatorLogo","width","height","alt","siteConfig","footerLogoAlt","src","footerLogoSrc","FooterSectionLinks","StyledNav","StyledUL","length","map","child","index","footerLinkKey","concat","StyledLI","key","FooterSection","Text","textSize","Fragment","footerCopyText","FooterSectionAddress","StyledAddress","as"],"mappings":"0eA6BM,SAAUA,EAAOC,OAAEC,EAAQD,EAAAC,SAAEC,EAAaF,EAAAE,cACxCC,EAAaC,EAAMC,SAASC,QAAQL,GAEpCM,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEH,EAACQ,cAAAC,EAAc,CAAAJ,MAAOA,GACpBL,EAAAQ,cAACE,EAAY,KACXV,EAAAQ,cAACG,EAAoB,KACnBX,EAAAQ,cAACI,EAAiB,KAChBZ,EAAAQ,cAACK,EAAmB,CAClBC,MAAO,IACPC,OAAQ,GACRC,IAAKX,EAAMY,WAAWC,eAAiB,GACvCC,IAAKd,EAAMY,WAAWG,eAAiB,MAG3CpB,EAAAQ,cAACa,EAAkB,KACjBrB,EAACQ,cAAAc,gBAAqB,gBACpBtB,EAAAQ,cAACe,EAAQ,KACNxB,EAAWyB,OACRzB,EAAW0B,KAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAaC,OAAAF,GACnC,OAAO3B,EAAAQ,cAACsB,EAAS,CAAAC,IAAKH,GAAgBF,EACvC,IACD,QAKV1B,EAACQ,cAAAwB,EACE,KAAAlC,EAC0B,iBAAlBA,EACLE,EAACQ,cAAAyB,EAAK,CAAAC,SAAS,KAAKpC,GAEpBE,EAAGQ,cAAAR,EAAAmC,SAAA,KAAArC,GAGLE,EAACQ,cAAAyB,GAAKC,SAAS,KAAK7B,EAAMY,WAAWmB,iBAIzCpC,EAAAQ,cAAC6B,EAAoB,KACnBrC,EAAAQ,cAAC8B,EAAa,KACZtC,EAACQ,cAAAyB,GAAKM,GAAG,OAAOL,SAAS,KAElB,kBACPlC,EAACQ,cAAAyB,GAAKM,GAAG,OAAOL,SAAS,KAElB,UACPlC,EAAAQ,cAACyB,EAAK,CAAAM,GAAG,OAAOL,SAAS,KAAG,eAS1C"}

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

@@ -1,70 +1,2 @@
-import e from"styled-components";const i=e.footer`
-  ${({theme:e})=>e.colors.inputBorder};
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  width: 100%;
-  background-color: ${({theme:e})=>e.colors.footerBackground};
-`,t=e.div`
-  max-width: ${({theme:e})=>e.utilities.contentMaxWidth};
-  display: block;
-  margin: 0 auto;
-
-  @media (min-width: ${({theme:e})=>e.breakpoint.desktop}) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-`,o=e.div`
-  box-sizing: border-box;
-  display: inline-block;
-  padding: ${({theme:e})=>e.spacing.xs};
-  position: relative;
-  width: 100%;
-  flex: 0 1 auto;
-`,d=e(o)`
-  width: 50%;
-  display: block;
-  float: left;
-
-  @media (min-width: ${({theme:e})=>e.breakpoint.desktop}) {
-    flex: 0 0 140px;
-    width: auto;
-  }
-`,n=e(o)`
-  width: 50%;
-  display: block;
-  float: left;
-
-  @media (min-width: ${({theme:e})=>e.breakpoint.desktop}) {
-    flex: 0 0 170px;
-    width: auto;
-  }
-`,l=e.nav`
-  display: flex;
-  flex-direction: column;
-  a {
-    font-size: ${({theme:e})=>e.fontSizes.s};
-    font-weight: ${({theme:{typography:{fontWeightLinks:e}}})=>e};
-  }
-`,a=e.ul`
-  padding: 0;
-  margin: 0;
-`,s=e.li`
-  list-style-type: none;
-  display: block;
-  padding: 0;
-  margin: 0;
-  line-height: 1;
-  padding-bottom: ${({theme:{spacing:{xxs:e}}})=>e};
-`,p=e(o)`
-  flex: 0 0 150px;
-`,r=e.img`
-  height: 40px;
-  width: auto;
-`,h=e.address`
-  display: flex;
-  flex-direction: column;
-  font-style: normal;
-`;export{t as FooterContentWrapper,o as FooterSection,p as FooterSectionAddress,n as FooterSectionLinks,d as FooterSectionLogo,h as StyledAddress,i as StyledFooter,s as StyledLI,l as StyledNav,r as StyledRegulatorLogo,a as StyledUL};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var t,e,o,l,d,a,r,s,p,f,c,h=i.footer(t||(t=n(["\n  ",";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n"],["\n  ",";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n"])),(function(n){return n.theme.colors.inputBorder}),(function(n){return n.theme.colors.footerBackground})),m=i.div(e||(e=n(["\n  max-width: ",";\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ",") {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"],["\n  max-width: ",";\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ",") {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])),(function(n){return n.theme.utilities.contentMaxWidth}),(function(n){return n.theme.breakpoint.desktop})),u=i.div(o||(o=n(["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ",";\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ",";\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"])),(function(n){return n.theme.spacing.xs})),x=i(u)(l||(l=n(["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 140px;\n    width: auto;\n  }\n"],["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 140px;\n    width: auto;\n  }\n"])),(function(n){return n.theme.breakpoint.desktop})),b=i(u)(d||(d=n(["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 170px;\n    width: auto;\n  }\n"],["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 170px;\n    width: auto;\n  }\n"])),(function(n){return n.theme.breakpoint.desktop})),g=i.nav(a||(a=n(["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ",";\n    font-weight: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ",";\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.fontSizes.s}),(function(n){return n.theme.typography.fontWeightLinks})),y=i.ul(r||(r=n(["\n  padding: 0;\n  margin: 0;\n"],["\n  padding: 0;\n  margin: 0;\n"]))),w=i.li(s||(s=n(["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ",";\n"],["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ",";\n"])),(function(n){return n.theme.spacing.xxs})),k=i(u)(p||(p=n(["\n  flex: 0 0 150px;\n"],["\n  flex: 0 0 150px;\n"]))),v=i.img(f||(f=n(["\n  height: 40px;\n  width: auto;\n"],["\n  height: 40px;\n  width: auto;\n"]))),z=i.address(c||(c=n(["\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n"],["\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n"])));export{m as FooterContentWrapper,u as FooterSection,k as FooterSectionAddress,b as FooterSectionLinks,x as FooterSectionLogo,z as StyledAddress,h as StyledFooter,w as StyledLI,g as StyledNav,v as StyledRegulatorLogo,y as StyledUL};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Footer/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledFooter = styled.footer<ThemeProps>`\n  ${({ theme }) => theme.colors.inputBorder};\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.footerBackground};\n`;\n\nexport const FooterContentWrapper = styled.div<ThemeProps>`\n  max-width: ${({ theme }) => theme.utilities.contentMaxWidth};\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n`;\n\nexport const FooterSection = styled.div<ThemeProps>`\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ${({ theme }) => theme.spacing.xs};\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n`;\n\nexport const FooterSectionLogo = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 140px;\n    width: auto;\n  }\n`;\n\n// TODO: I'm assuming here that the links have fixed width here with a flex basis\n// and the company info expands to fill the gap but it could be the other way round\nexport const FooterSectionLinks = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 170px;\n    width: auto;\n  }\n`;\n\nexport const StyledNav = styled.nav<ThemeProps>`\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ${({ theme }) => theme.fontSizes.s};\n    font-weight: ${({\n      theme: {\n        typography: { fontWeightLinks },\n      },\n    }: ThemeProps) => fontWeightLinks};\n  }\n`;\n\nexport const StyledUL = styled.ul`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledLI = styled.li<ThemeProps>`\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n`;\n\nexport const FooterSectionAddress = styled(FooterSection)`\n  flex: 0 0 150px;\n`;\n\nexport const StyledRegulatorLogo = styled.img`\n  height: 40px;\n  width: auto;\n`;\n\nexport const StyledAddress = styled.address`\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n`;\n"],"names":["StyledFooter","styled","footer","theme","colors","inputBorder","footerBackground","FooterContentWrapper","div","utilities","contentMaxWidth","breakpoint","desktop","FooterSection","spacing","xs","FooterSectionLogo","FooterSectionLinks","StyledNav","nav","fontSizes","s","typography","fontWeightLinks","StyledUL","ul","StyledLI","li","xxs","FooterSectionAddress","StyledRegulatorLogo","img","StyledAddress","address"],"mappings":"iCAMa,MAAAA,EAAeC,EAAOC,MAAkB;IACjD,EAAGC,WAAYA,EAAMC,OAAOC;;;;;sBAKV,EAAGF,WAAYA,EAAMC,OAAOE;EAGrCC,EAAuBN,EAAOO,GAAe;eAC3C,EAAGL,WAAYA,EAAMM,UAAUC;;;;uBAIvB,EAAGP,WAAYA,EAAMQ,WAAWC;;;;;EAO1CC,EAAgBZ,EAAOO,GAAe;;;aAGtC,EAAGL,WAAYA,EAAMW,QAAQC;;;;EAM7BC,EAAoBf,EAAOY,EAAc;;;;;uBAK/B,EAAGV,WAAYA,EAAMQ,WAAWC;;;;EAQ1CK,EAAqBhB,EAAOY,EAAc;;;;;uBAKhC,EAAGV,WAAYA,EAAMQ,WAAWC;;;;EAM1CM,EAAYjB,EAAOkB,GAAe;;;;iBAI9B,EAAGhB,WAAYA,EAAMiB,UAAUC;mBAC7B,EACblB,OACEmB,YAAcC,uBAEAA;;EAITC,EAAWvB,EAAOwB,EAAE;;;EAKpBC,EAAWzB,EAAO0B,EAAc;;;;;;oBAMzB,EAChBxB,OACEW,SAAWc,WAETA;EAGKC,EAAuB5B,EAAOY,EAAc;;EAI5CiB,EAAsB7B,EAAO8B,GAAG;;;EAKhCC,EAAgB/B,EAAOgC,OAAO;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Footer/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledFooter = styled.footer<ThemeProps>`\n  ${({ theme }) => theme.colors.inputBorder};\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.footerBackground};\n`;\n\nexport const FooterContentWrapper = styled.div<ThemeProps>`\n  max-width: ${({ theme }) => theme.utilities.contentMaxWidth};\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n`;\n\nexport const FooterSection = styled.div<ThemeProps>`\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ${({ theme }) => theme.spacing.xs};\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n`;\n\nexport const FooterSectionLogo = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 140px;\n    width: auto;\n  }\n`;\n\n// TODO: I'm assuming here that the links have fixed width here with a flex basis\n// and the company info expands to fill the gap but it could be the other way round\nexport const FooterSectionLinks = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 170px;\n    width: auto;\n  }\n`;\n\nexport const StyledNav = styled.nav<ThemeProps>`\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ${({ theme }) => theme.fontSizes.s};\n    font-weight: ${({\n      theme: {\n        typography: { fontWeightLinks },\n      },\n    }: ThemeProps) => fontWeightLinks};\n  }\n`;\n\nexport const StyledUL = styled.ul`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledLI = styled.li<ThemeProps>`\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n`;\n\nexport const FooterSectionAddress = styled(FooterSection)`\n  flex: 0 0 150px;\n`;\n\nexport const StyledRegulatorLogo = styled.img`\n  height: 40px;\n  width: auto;\n`;\n\nexport const StyledAddress = styled.address`\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n`;\n"],"names":["StyledFooter","styled","footer","templateObject_1","__makeTemplateObject","_a","theme","colors","inputBorder","footerBackground","FooterContentWrapper","div","templateObject_2","utilities","contentMaxWidth","breakpoint","desktop","FooterSection","templateObject_3","spacing","xs","FooterSectionLogo","templateObject_4","FooterSectionLinks","templateObject_5","StyledNav","nav","templateObject_6","fontSizes","s","typography","fontWeightLinks","StyledUL","ul","templateObject_7","StyledLI","li","templateObject_8","xxs","FooterSectionAddress","templateObject_9","StyledRegulatorLogo","img","templateObject_10","StyledAddress","address","templateObject_11"],"mappings":"iHAMO,0BAAMA,EAAeC,EAAOC,OAAkBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,+GAAA,OAAA,CAAA,OACV,+GAKuB,UAL9D,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,WAAb,IAKG,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IAGxBC,EAAuBT,EAAOU,IAAeC,IAAAA,EAAAR,EAAA,CAAA,kBAAA,mEAAA,iGAAA,CAAA,kBACG,mEAIC,oGAJ/C,SAACC,GAAc,OAAPA,EAAAC,MAAaO,UAAUC,eAAhB,IAIP,SAACT,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAOzBC,EAAgBhB,EAAOU,IAAGO,IAAAA,EAAAd,EAAA,CAAA,qEAAA,iEAAA,CAAY,qEAGP,oEAA/B,SAACC,GAAc,OAAPA,EAAAC,MAAaa,QAAQC,EAAd,IAMfC,EAAoBpB,EAAOgB,EAAPhB,CAAqBqB,IAAAA,EAAAlB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKQ,yDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAQzBO,EAAqBtB,EAAOgB,EAAPhB,CAAqBuB,IAAAA,EAAApB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKO,yDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAMzBS,EAAYxB,EAAOyB,IAAeC,IAAAA,EAAAvB,EAAA,CAAA,wEAAA,uBAAA,YAAA,CAAA,wEAIE,uBAKZ,eALpB,SAACC,GAAc,OAAPA,EAAAC,MAAasB,UAAUC,CAAhB,IACb,SAACxB,GAIE,OAFeA,EAAAC,MAAAwB,WAAAC,eAEf,IAITC,EAAW/B,EAAOgC,GAAEC,IAAAA,EAAA9B,EAAA,CAAA,mCAAA,CAAA,sCAKpB+B,EAAWlC,EAAOmC,GAAEC,IAAAA,EAAAjC,EAAA,CAAA,oHAAA,OAAA,CAAY,oHAUlC,UAJS,SAACC,GAIb,OAFYA,EAAAC,MAAAa,QAAAmB,GAEZ,IAGKC,EAAuBtC,EAAOgB,EAAPhB,CAAqBuC,IAAAA,EAAApC,EAAA,CAAA,0BAAA,CAAA,6BAI5CqC,EAAsBxC,EAAOyC,IAAGC,IAAAA,EAAAvC,EAAA,CAAA,uCAAA,CAAA,0CAKhCwC,EAAgB3C,EAAO4C,QAAOC,IAAAA,EAAA1C,EAAA,CAAA,0EAAA,CAAA"}