@cruk/cruk-react-components 5.0.5 → 5.0.7

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    startOpen ? setContentHeight(\"initial\") : setContentHeight(\"0\");\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","clearTimeout","newOpenState","concat","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":"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,aAAA,EAAAA,EAAiBO,UAASC,aAAaR,eAAAA,EAAiBO,SAC5D,IAAME,GAAgBhB,EACtBC,EAAce,GAEE,OAAZF,GACFV,EAAiB,GAAGa,OAAAH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,YAAW,WAAM,OAAAf,EAAiB,IAAI,GAAE,IAExCG,EAAgBO,QAAUK,YACxB,WAAM,OAAAf,EAAiB,UAAU,GACL,IAA5BgB,QAGiBC,IAAjBzB,GACFA,EAAaoB,EAEjB,EAmBA,OANAM,GAAU,WACRrB,EAAcN,IAAa,GAEfS,EAAZT,EAA6B,UAA8B,IAC7D,GAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAACC,cAAAC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACTqC,QAASb,EACM,iBAAA,eACHvB,EACZqC,UA5Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEJ,EAoBQkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAGhB,OAAA5B,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,GAAA4B,OAAG5B,EAAY,YACnBsD,IAAKtC,EACL0B,KAAK,wBACS/B,EACG,kBAAA,GAAAiB,OAAG5B,EAAW,WAAAuD,eACfzC,EAAa0C,YAChB7C,GAEZH,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    startOpen ? setContentHeight(\"initial\") : setContentHeight(\"0\");\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","clearTimeout","newOpenState","concat","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":"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,aAAA,EAAAA,EAAiBO,UAASC,aAAaR,eAAAA,EAAiBO,SAC5D,IAAME,GAAgBhB,EACtBC,EAAce,GAEE,OAAZF,GACFV,EAAiB,GAAGa,OAAAH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,YAAW,WAAM,OAAAf,EAAiB,IAAI,GAAE,IAExCG,EAAgBO,QAAUK,YACxB,WAAM,OAAAf,EAAiB,aACK,IAA5BgB,QAGiBC,IAAjBzB,GACFA,EAAaoB,EAEhB,EAmBD,OANAM,GAAU,WACRrB,EAAcN,IAAa,GAEfS,EAAZT,EAA6B,UAA8B,IAC7D,GAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAACC,cAAAC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACTqC,QAASb,EACM,iBAAA,eACHvB,EACZqC,UA5Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEH,EAoBOkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAGhB,OAAA5B,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,GAAA4B,OAAG5B,EAAY,YACnBsD,IAAKtC,EACL0B,KAAK,wBACS/B,EACG,kBAAA,GAAAiB,OAAG5B,EAAW,WAAAuD,eACfzC,EAAa0C,YAChB7C,GAEZH,GAIT"}

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","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,MAArB,IAMT,SAAUK,EAAKF,GACnB,IAAMG,EAAeC,EAAmCJ,GAExD,OAAOK,EAAAC,cAACf,EAAUgB,EAAA,CAACV,MAAOG,EAAMH,OAAWM,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.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","concat","family","urlWoff2","urlWoff","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,aAAA,EAAAA,EAAMG,UAAW,KAAO,2BAC7CH,aAAI,EAAJA,EAAMI,SAAU,QAAQH,OAAAD,EAAKI,QAAO,sBAAsB,GAC7C,8BAAAH,OAAAD,EAAKK,YAAc,SAIrC,6FAEFC,KAAK,GAfR,EAiBWC,EAAW,KACtBN,OAAAJ,EAAiBW,EAAUC,WAAWX,aAAY,MAAAG,OAClDJ,EAAiBa,EAASD,WAAWX,0BACrCD,EAAiBc,EAAUF,WAAWX,0BACtCD,EAAiBe,EAAeH,WAAWX"}
+{"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","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,aAAA,EAAAA,EAAMG,UAAW,KAAO,2BAC7CH,aAAI,EAAJA,EAAMI,SAAU,QAAQH,OAAAD,EAAKI,QAAO,sBAAsB,GAC7C,8BAAAH,OAAAD,EAAKK,YAAc,SAIrC,yFAAA,IAEFC,KAAK,GAfR,EAiBWC,EAAW,KACtBN,OAAAJ,EAAiBW,EAAUC,WAAWX,aAAY,MAAAG,OAClDJ,EAAiBa,EAASD,WAAWX,0BACrCD,EAAiBc,EAAUF,WAAWX,0BACtCD,EAAiBe,EAAeH,WAAWX"}

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","_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,EACxC,IACA,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"}
+{"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/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","sources":["../../../src/components/GlobalStyle.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { type CustomFontType } from \"../types\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nconst 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};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const GlobalStyle = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      ${buildCustomFonts(theme.typography.customFonts)}\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nGlobalStyle.defaultProps = {\n  theme: defaultTheme,\n};\n\nexport default GlobalStyle;\n"],"names":["GlobalStyle","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","customFonts","theme","defaultTheme","typography","map","font","concat","family","urlWoff2","urlWoff","fontWeight","join","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark","defaultProps"],"mappings":"8MAKA,MAkBaA,EAAcC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAwBnD,+sBAvBC,SAACC,GACD,IApBsBC,EAoBhBC,SACDC,GACAH,EAAME,OAEX,MAAO,mBAxBeD,EAyBDC,EAAME,WAAWH,YAxBxCA,EACGI,KACC,SAACC,GAAS,MAAA,kDAAAC,OAESD,EAAKE,qCAElBF,aAAI,EAAJA,EAAMG,UAAW,QAAQF,OAAAD,EAAKG,SAAQ,uBAAuB,IAC5DF,OAAED,EAAKI,UAAaJ,aAAI,EAAJA,EAAMG,UAAW,KAAO,GAC7C,gBAAAF,QAAAD,eAAAA,EAAMI,SAAU,QAAAH,OAAQD,EAAKI,8BAA6B,GAAE,8BAAAH,OAC/CD,eAAAA,EAAMK,WAIxB,6FAEFC,KAAK,KAWW,uCAAAL,OAAAL,EAAME,WAAWS,aACf,4BAAAN,OAAAL,EAAME,WAAWU,eAAc,4BAAAP,OAC/BL,EAAME,WAAWW,WAAU,wDAAAR,OAGtBL,EAAMc,OAAOC,gDACxBf,EAAMc,OAAOE,sNAS5B,KAqCFvB,EAAYwB,aAAe,CACzBjB,MAAOC"}
+{"version":3,"file":"GlobalStyle.js","sources":["../../../src/components/GlobalStyle.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { type CustomFontType } from \"../types\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nconst 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};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const GlobalStyle = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      ${buildCustomFonts(theme.typography.customFonts)}\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nGlobalStyle.defaultProps = {\n  theme: defaultTheme,\n};\n\nexport default GlobalStyle;\n"],"names":["GlobalStyle","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","customFonts","theme","defaultTheme","typography","map","font","concat","family","urlWoff2","urlWoff","fontWeight","join","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark","defaultProps"],"mappings":"8MAKA,MAkBaA,EAAcC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAwBnD,+sBAvBC,SAACC,GACD,IApBsBC,EAoBhBC,SACDC,GACAH,EAAME,OAEX,MAAO,mBAxBeD,EAyBDC,EAAME,WAAWH,YAxBxCA,EACGI,KACC,SAACC,GAAS,MAAA,kDAAAC,OAESD,EAAKE,qCAElBF,aAAI,EAAJA,EAAMG,UAAW,QAAQF,OAAAD,EAAKG,SAAQ,uBAAuB,IAC5DF,OAAED,EAAKI,UAAaJ,aAAI,EAAJA,EAAMG,UAAW,KAAO,GAC7C,gBAAAF,QAAAD,eAAAA,EAAMI,SAAU,QAAAH,OAAQD,EAAKI,8BAA6B,GAAE,8BAAAH,OAC/CD,eAAAA,EAAMK,WAIxB,yFAAA,IAEFC,KAAK,KAWW,uCAAAL,OAAAL,EAAME,WAAWS,aACf,4BAAAN,OAAAL,EAAME,WAAWU,eAAc,4BAAAP,OAC/BL,EAAME,WAAWW,WAAU,wDAAAR,OAGtBL,EAAMc,OAAOC,gDACxBf,EAAMc,OAAOE,sNAS5B,KAqCFvB,EAAYwB,aAAe,CACzBjB,MAAOC"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Heading/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\n\nimport {\n  type ThemeType,\n  type FontSizeType,\n  type ColorKeyType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\n\ntype StyledHeadingProps = SpacingPropsInternal & {\n  theme: ThemeType;\n  $textSize?: FontSizeType;\n  $textAlign?: \"left\" | \"right\" | \"center\";\n  $textColor?: string;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n};\n\nconst StyledHeading = (props: StyledHeadingProps) => css`\n  font-family: ${props.theme.typography.fontFamilyHeadings};\n  font-weight: ${props.theme.typography.fontWeightHeadings};\n  word-break: ${props.$wordBreak || \"normal\"};\n  overflow-wrap: ${props.$overflowWrap || \"break-word\"};\n  color: ${props.$textColor &&\n  typeof props.theme.colors[props.$textColor as ColorKeyType] !== \"undefined\"\n    ? props.theme.colors[props.$textColor as ColorKeyType]\n    : props.$textColor || props.theme.colors.textHeaderDefault};\n  line-height: ${props.theme.typography.headerLineHeight};\n  text-transform: ${props.theme.typography.headerTextTransform};\n  margin-top: ${props.theme.spacing.m};\n  margin-bottom: ${props.theme.spacing.s};\n  max-width: 100%;\n  text-align: ${props.$textAlign || \"left\"};\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ${() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { theme, ...propsWithoutTheme } = props;\n\n    return spacing(propsWithoutTheme, props.theme);\n  }}\n`;\n\nconst desktopFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.xl;\n    case \"xxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxl\":\n      return theme.fontSizes.xxxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down a size on the typography scale\nconst tabletFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.xl;\n    case \"xxxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down two sizes on the typography scale\nconst mobileFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.l;\n    case \"xxxl\":\n      return theme.fontSizes.xl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\nexport const H1 = styled.h1<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxxl, theme)};\n  }\n`;\n\nexport const H2 = styled.h2<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n`;\n\nexport const H3 = styled.h3<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n`;\n\nexport const H4 = styled.h4<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n`;\n\nexport const H5 = styled.h5<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n`;\n\nexport const H6 = styled.h6<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.m, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n`;\n"],"names":["StyledHeading","props","css","templateObject_1","__makeTemplateObject","theme","typography","fontFamilyHeadings","fontWeightHeadings","$wordBreak","$overflowWrap","$textColor","colors","textHeaderDefault","headerLineHeight","headerTextTransform","spacing","m","s","$textAlign","propsWithoutTheme","__rest","desktopFontSize","$textSize","defaultFontSize","fontSizes","l","xl","xxl","xxxl","xxxxl","tabletFontSize","mobileFontSize","H1","styled","h1","templateObject_2","_a","breakpoint","tablet","desktop","H2","h2","templateObject_3","H3","h3","templateObject_4","H4","h4","templateObject_5","H5","h5","templateObject_6","H6","h6","templateObject_7"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Heading/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\n\nimport {\n  type ThemeType,\n  type FontSizeType,\n  type ColorKeyType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\n\ntype StyledHeadingProps = SpacingPropsInternal & {\n  theme: ThemeType;\n  $textSize?: FontSizeType;\n  $textAlign?: \"left\" | \"right\" | \"center\";\n  $textColor?: string;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n};\n\nconst StyledHeading = (props: StyledHeadingProps) => css`\n  font-family: ${props.theme.typography.fontFamilyHeadings};\n  font-weight: ${props.theme.typography.fontWeightHeadings};\n  word-break: ${props.$wordBreak || \"normal\"};\n  overflow-wrap: ${props.$overflowWrap || \"break-word\"};\n  color: ${props.$textColor &&\n  typeof props.theme.colors[props.$textColor as ColorKeyType] !== \"undefined\"\n    ? props.theme.colors[props.$textColor as ColorKeyType]\n    : props.$textColor || props.theme.colors.textHeaderDefault};\n  line-height: ${props.theme.typography.headerLineHeight};\n  text-transform: ${props.theme.typography.headerTextTransform};\n  margin-top: ${props.theme.spacing.m};\n  margin-bottom: ${props.theme.spacing.s};\n  max-width: 100%;\n  text-align: ${props.$textAlign || \"left\"};\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ${() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { theme, ...propsWithoutTheme } = props;\n\n    return spacing(propsWithoutTheme, props.theme);\n  }}\n`;\n\nconst desktopFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.xl;\n    case \"xxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxl\":\n      return theme.fontSizes.xxxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down a size on the typography scale\nconst tabletFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.xl;\n    case \"xxxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down two sizes on the typography scale\nconst mobileFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.l;\n    case \"xxxl\":\n      return theme.fontSizes.xl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\nexport const H1 = styled.h1<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxxl, theme)};\n  }\n`;\n\nexport const H2 = styled.h2<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n`;\n\nexport const H3 = styled.h3<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n`;\n\nexport const H4 = styled.h4<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n`;\n\nexport const H5 = styled.h5<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n`;\n\nexport const H6 = styled.h6<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.m, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n`;\n"],"names":["StyledHeading","props","css","templateObject_1","__makeTemplateObject","theme","typography","fontFamilyHeadings","fontWeightHeadings","$wordBreak","$overflowWrap","$textColor","colors","textHeaderDefault","headerLineHeight","headerTextTransform","spacing","m","s","$textAlign","propsWithoutTheme","__rest","desktopFontSize","$textSize","defaultFontSize","fontSizes","l","xl","xxl","xxxl","xxxxl","tabletFontSize","mobileFontSize","H1","styled","h1","templateObject_2","_a","breakpoint","tablet","desktop","H2","h2","templateObject_3","H3","h3","templateObject_4","H4","h4","templateObject_5","H5","h5","templateObject_6","H6","h6","templateObject_7"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** when required (required) appears in label */\n  required?: boolean;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {required && !hideRequiredInLabel && (\n              <RequiredText>{` (required)`}</RequiredText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mUAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAW,IAAAD,GAAKA,EAChBE,wBAAAC,OAAsB,IAAAD,GAAKA,EAC3BE,EAAQP,EAAAO,SACLC,EANwBC,EAAAT,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAACC,cAAAC,OAAMjB,GAEP,EAGJ,OACEe,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBX,EACCgB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBrB,GACxBD,EACAG,IAAaE,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** when required (required) appears in label */\n  required?: boolean;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {required && !hideRequiredInLabel && (\n              <RequiredText>{` (required)`}</RequiredText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mUAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAW,IAAAD,GAAKA,EAChBE,wBAAAC,OAAsB,IAAAD,GAAKA,EAC3BE,EAAQP,EAAAO,SACLC,EANwBC,EAAAT,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAACC,cAAAC,OAAMjB,GAAgB,EAK3B,OACEe,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBX,EACCgB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBrB,GACxBD,EACAG,IAAaE,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LegendWrapper/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\n\nimport { StyledFieldset, LegendSpan } from \"./styles\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** when required (required) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <Text as=\"span\">{hintText}</Text>\n    ) : (\n      hintText\n    );\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldset\n        $hasError={hasError || !!errorMessage || false}\n        $hasHintText={!!hintText}\n      >\n        {legendText && (\n          <legend {...restOfHTMLAttributes}>\n            <LegendSpan $hasHintText={!!hintText}>\n              {legendText} {required && <span>(required)</span>}\n            </LegendSpan>\n            {hintTextElement}\n          </legend>\n        )}\n        {children}\n        {!!errorMessage && (\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        )}\n      </StyledFieldset>\n    </ThemeProvider>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","React","createElement","Text","as","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"6WA4BM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAPyBC,EAAAR,EAAA,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,GACFR,GACmB,iBAAbA,GAA6C,iBAAbA,EACL,EAAjCS,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQZ,GAIrB,OACES,EAACC,cAAAG,EAAc,CAAAR,MAAOA,GACpBI,EAAAC,cAACI,EAAc,CAAAC,UACFhB,KAAcD,IAAgB,EAAKkB,eAC9BhB,GAEfJ,GACCa,EAAAC,cAAA,SAAAJ,EAAA,CAAA,EAAYL,GACVQ,EAAAC,cAACO,EAAU,CAAAD,eAAiBhB,GACzBJ,MAAaC,GAAYY,2CAE3BD,GAGJb,IACEG,GACDW,EAAAC,cAACQ,EAAU,CAAAC,UAAU,OAAOrB,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LegendWrapper/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\n\nimport { StyledFieldset, LegendSpan } from \"./styles\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** when required (required) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <Text as=\"span\">{hintText}</Text>\n    ) : (\n      hintText\n    );\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldset\n        $hasError={hasError || !!errorMessage || false}\n        $hasHintText={!!hintText}\n      >\n        {legendText && (\n          <legend {...restOfHTMLAttributes}>\n            <LegendSpan $hasHintText={!!hintText}>\n              {legendText} {required && <span>(required)</span>}\n            </LegendSpan>\n            {hintTextElement}\n          </legend>\n        )}\n        {children}\n        {!!errorMessage && (\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        )}\n      </StyledFieldset>\n    </ThemeProvider>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","React","createElement","Text","as","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"6WA4BM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAPyBC,EAAAR,EAAA,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,GACFR,GACmB,iBAAbA,GAA6C,iBAAbA,EAGtC,EAFAS,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQZ,GAIrB,OACES,EAACC,cAAAG,EAAc,CAAAR,MAAOA,GACpBI,EAAAC,cAACI,EAAc,CAAAC,UACFhB,KAAcD,IAAgB,EAAKkB,eAC9BhB,GAEfJ,GACCa,EAAAC,cAAA,SAAAJ,EAAA,CAAA,EAAYL,GACVQ,EAAAC,cAACO,EAAU,CAAAD,eAAiBhB,GACzBJ,MAAaC,GAAYY,2CAE3BD,GAGJb,IACEG,GACDW,EAAAC,cAACQ,EAAU,CAAAC,UAAU,OAAOrB,IAKtC"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useEffect as n}from"react";import{createPortal as t}from"react-dom";import{useTheme as i,ThemeProvider as r}from"styled-components";import d from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{Wrapper as c,Content as g,CloseButton as p,Background as s}from"./styles.js";function u(u){var f=u.modalName,h=u.closeFunction,w=u.showCloseButton,y=u.maxWidth,v=void 0===y?"500px":y,E=u.top,b=void 0===E?"1rem":E,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,B=void 0===j?"90%":j,C=u.margin,z=u.marginHorizontal,F=u.marginVertical,H=u.marginTop,R=u.marginRight,T=u.marginBottom,V=void 0===T?"xxl":T,$=u.marginLeft,_=u.padding,I=void 0===_?"xs":_,W=u.paddingHorizontal,N=u.paddingVertical,q=u.paddingTop,A=u.paddingRight,D=u.paddingBottom,G=u.paddingLeft,J=i(),K=e(e({},l),J),M=function(e){"Escape"===e.key&&h&&h()};return n((function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",M),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",M))}}),[]),o.createElement(o.Fragment,null,"undefined"!=typeof window?t(o.createElement("section",null,o.createElement(d,{returnFocus:!0},o.createElement(r,{theme:K},o.createElement(c,{role:"dialog","aria-modal":"true","aria-label":f},o.createElement(g,{backgroundColor:x,$maxWidth:v,$width:B,$top:b,margin:C,marginHorizontal:z,marginVertical:F,marginTop:H,marginRight:R,marginBottom:V,marginLeft:$,padding:I,paddingHorizontal:W,paddingVertical:N,paddingTop:q,paddingRight:A,paddingBottom:D,paddingLeft:G},w&&h?o.createElement(p,{"aria-label":"close",appearance:"tertiary",onClick:function(){h()}},o.createElement(m,{faIcon:a})):null,L),o.createElement(s,null))))),document.body):null)}export{u as Modal,u as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useEffect as t}from"react";import{createPortal as n}from"react-dom";import{useTheme as i,ThemeProvider as d}from"styled-components";import r from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{Wrapper as c,Content as s,CloseButton as g,Background as p}from"./styles.js";function u(u){var f=u.modalName,h=u.closeFunction,v=u.showCloseButton,w=u.maxWidth,y=void 0===w?"500px":w,E=u.top,b=void 0===E?"1rem":E,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,B=void 0===j?"90%":j,C=u.margin,$=u.marginHorizontal,z=u.marginVertical,F=u.marginTop,H=u.marginRight,R=u.marginBottom,T=void 0===R?"xxl":R,V=u.marginLeft,A=u.padding,_=void 0===A?"xs":A,I=u.paddingHorizontal,W=u.paddingVertical,N=u.paddingTop,q=u.paddingRight,D=u.paddingBottom,G=u.paddingLeft,J=u.isAnimated,K=void 0===J||J,M=i(),O=e(e({},l),M),P=function(e){"Escape"===e.key&&h&&h()};return t((function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",P),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",P))}}),[]),o.createElement(o.Fragment,null,"undefined"!=typeof window?n(o.createElement("section",null,o.createElement(r,{returnFocus:!0},o.createElement(d,{theme:O},o.createElement(c,{role:"dialog","aria-modal":"true","aria-label":f},o.createElement(s,{backgroundColor:x,$maxWidth:y,$width:B,$top:b,margin:C,marginHorizontal:$,marginVertical:z,marginTop:F,marginRight:H,marginBottom:T,marginLeft:V,padding:_,paddingHorizontal:I,paddingVertical:W,paddingTop:N,paddingRight:q,paddingBottom:D,paddingLeft:G,$isAnimated:K},v&&h?o.createElement(g,{"aria-label":"close",appearance:"tertiary",onClick:function(){h()}},o.createElement(m,{faIcon:a})):null,L),o.createElement(p,{$isAnimated:K}))))),document.body):null)}export{u as Modal,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\" && !!closeFunction) {\n      closeFunction();\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, []);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","React","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background"],"mappings":"+iBA0CM,SAAUA,EAAMC,GACpB,IAAAC,cACAC,kBACAC,oBACAC,EAAAJ,EAAAK,SAAAA,aAAW,QAAOD,EAClBE,EAAYN,EAAAO,IAAZA,OAAM,IAAAD,EAAA,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAaX,EAAAY,MAAbA,OAAQ,IAAAD,EAAA,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,iBAAAC,aAAe,MAAKD,EACpBE,EAAUpB,EAAAoB,WACVC,EAAcrB,EAAAsB,QAAdA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YAELC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAa,SAACC,GACA,WAAdA,EAAMC,KAAsBlC,GAC9BA,GAEJ,EAkBA,OAhBAmC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWT,GAE9B,WACiB,oBAAXI,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWV,GAC1C,CACD,GAAE,IAGDW,EAAAC,cAAAD,EAAAE,SAAA,KACqB,oBAAXT,OACJU,EACEH,EAAAC,cAAA,UAAA,KACED,EAACC,cAAAG,GAAUC,aAAW,GACpBL,EAAAC,cAACK,EAAa,CAACpB,MAAOA,GACpBc,EAACC,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCpD,GAEZ4C,EAAAC,cAACQ,EAAO,CACN7C,gBAAiBA,EAAe8C,UACrBlD,EAAQmD,OACX5C,EAAK6C,KACPlD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,GAEZzB,GAAmBD,EAClB2C,EAACC,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP1D,MAGF2C,EAACC,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHrD,GAEHmC,EAACC,cAAAkB,EAAa,UAKtBzB,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  isAnimated = true,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\" && !!closeFunction) {\n      closeFunction();\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, []);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                      $isAnimated={isAnimated}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background $isAnimated={isAnimated} />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_h","isAnimated","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","React","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"+iBA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAAkBJ,EAAAK,SAAlBA,OAAW,IAAAD,EAAA,UACXE,EAAAN,EAAAO,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAaX,EAAAY,MAAbA,OAAQ,IAAAD,EAAA,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAoBlB,EAAAmB,aAApBA,OAAe,IAAAD,EAAA,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAa,IAAAD,GAAIA,EAEXE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAa,SAACC,GACA,WAAdA,EAAMC,KAAsBpC,GAC9BA,GAEH,EAkBD,OAhBAqC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWT,GAE9B,WACiB,oBAAXI,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWV,GACzC,CACF,GAAE,IAGDW,EAAAC,cAAAD,EAAAE,SAAA,KACqB,oBAAXT,OACJU,EACEH,EAAAC,cAAA,UAAA,KACED,EAACC,cAAAG,GAAUC,aAAW,GACpBL,EAAAC,cAACK,EAAa,CAACpB,MAAOA,GACpBc,EAACC,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCtD,GAEZ8C,EAAAC,cAACQ,EAAO,CACN/C,gBAAiBA,EACNgD,UAAApD,EACHqD,OAAA9C,EACF+C,KAAApD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClB6C,EAACC,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP5D,MAGF6C,EAACC,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHvD,GAEHqC,EAAAC,cAACkB,EAAU,CAAAC,YAAcrC,QAKjCW,SAASC,MAEX,KAGV"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Box as t}from"../Box/index.js";import{Button as i}from"../Button/index.js";var r,e,d,a,m=o.div(r||(r=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"])),(function(n){return n.theme.colors.modalBackdrop})),s=o.div(e||(e=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),p=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"])),(function(n){var o=n.theme.colors,t=n.backgroundColor;return void 0!==t&&void 0!==typeof t?void 0!==o[t]?o[t]:t:o.backgroundLight}),(function(n){var o=n.$top;return"".concat(o," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth})),h=o(i)(a||(a=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs}));export{m as Background,h as CloseButton,p as Content,s as Wrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as a}from"../Button/index.js";var r,e,m,d,s,c,f=o.div(r||(r=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),u=i(e||(e=n(["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"],["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"]))),p=i(m||(m=n(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"],["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"]))),l=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"])),(function(n){var o=n.theme.colors,i=n.backgroundColor;return void 0!==i&&void 0!==typeof i?void 0!==o[i]?o[i]:i:o.backgroundLight}),(function(n){var o=n.$top;return"".concat(o," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth}),(function(n){return n.$isAnimated?u:"none"})),g=o(a)(s||(s=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs})),h=o.div(c||(c=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"])),(function(n){return n.theme.colors.modalBackdrop}),(function(n){return n.$isAnimated?p:"none"}));export{h as Background,g as CloseButton,l as Content,f as Wrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n`;\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n"],"names":["Background","styled","div","templateObject_1","__makeTemplateObject","_a","theme","colors","modalBackdrop","Wrapper","templateObject_2","Content","Box","templateObject_3","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","CloseButton","Button","templateObject_4","spacing","xs"],"mappings":"mMAKO,YAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,mBAAA,sKAAA,CAElC,mBACuD,yKAAzC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,aAAb,IAalBC,EAAUR,EAAOC,IAAGQ,IAAAA,EAAAN,EAAA,CAAA,oIAAA,CAAA,uIAUpBO,EAAUV,EAAOW,EAAPX,CAMrBY,IAAAA,EAAAT,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,yBAAA,CAAA,yBAM4B,qFAGoB,eACjB,yCAEU,4BAXrB,SAACC,OAAWE,EAAMF,EAAAC,MAAAC,OAAIO,EAAeT,EAAAS,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CR,EAAOO,GACLP,EAAOO,GACPA,EACFP,EAAOS,eAJX,IAOQ,SAACX,GAAE,IAAAY,EAAIZ,EAAAY,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACZ,GAAe,OAAPA,EAAAc,MAAO,IAEZ,SAACd,GAAkB,OAAPA,EAAAe,SAAO,IAIrBC,EAAcpB,EAAOqB,EAAPrB,CAAcsB,IAAAA,EAAAnB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACC,GAIV,OAFWA,EAAAC,MAAAkB,QAAAC,EAEX"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","templateObject_1","__makeTemplateObject","grow","keyframes","templateObject_2","fade","templateObject_3","Content","Box","templateObject_4","_a","colors","theme","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","spacing","xs","Background","templateObject_6","modalBackdrop"],"mappings":"mNAKa,gBAAAA,EAAUC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oIAAA,CAAA,uIAU3BC,EAAOC,EAASC,IAAAA,EAAAH,EAAA,CAAA,wHAAA,CAAA,2HAWhBI,EAAOF,EAASG,IAAAA,EAAAL,EAAA,CAAA,sEAAA,CAAA,yEASTM,EAAUT,EAAOU,EAAPV,CAAWW,IAAAA,EAAAR,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,kJAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,kJAK2B,UAhBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,IAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,IAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,IAKd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,IAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,IAKKC,EAAa5B,EAAOC,IAG/B4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAAA,mBACuD,+RAca,UAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,IAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","foundTheme","useTheme","theme","__assign","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"kSAkCM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAc,IAAAD,EAAA,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAeV,EAAU,EAAIA,EAAU,EACvCW,EAAaC,KAAKC,KAAKhB,EAAQa,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAC,CACrCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAClE,KAAAH,OAAAf,EAAc,GAAGe,OAAAf,EAAe,KAAAe,OAAAF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFxB,EAAcgB,EACf,IAkDH,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBV,EAAQG,GACPwB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAY,IAAZpC,GACE,IAAZA,GAAiB,CAAEqC,UAAW,GAClB,IAAZrC,GAAiBkB,EAAUlB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACsC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKf,GACdS,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,KAAAa,OAAIF,GAAW,KAC1BwB,QAAAxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAQE,OAAAF,EAAa,QAAAE,OAAAkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdiB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHmB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJpC,EAAWsC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAO,IACzB3C,EACE0C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACT,CAmBWQ,CAAYjD,EAASe,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAApC,IAAYe,GACtBf,IAAYe,GAAc,CAAEsB,UAAW,GACvCrC,IAAYe,GAAcG,EAAUlB,EAAU,GACxC,CAAAkD,UAAAlD,IAAYe,IAGb,UAGfR,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","foundTheme","useTheme","theme","__assign","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"kSAkCM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAc,IAAAD,EAAA,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAeV,EAAU,EAAIA,EAAU,EACvCW,EAAaC,KAAKC,KAAKhB,EAAQa,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAC,CACrCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAClE,KAAAH,OAAAf,EAAc,GAAGe,OAAAf,EAAe,KAAAe,OAAAF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFxB,EAAcgB,EACf,EACD,EAiDF,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBV,EAAQG,GACPwB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAY,IAAZpC,GACE,IAAZA,GAAiB,CAAEqC,UAAW,GAClB,IAAZrC,GAAiBkB,EAAUlB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACsC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKf,GACdS,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,KAAAa,OAAIF,GAAW,KAC1BwB,QAAAxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAQE,OAAAF,EAAa,QAAAE,OAAAkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdiB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHmB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJpC,EAAWsC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAO,IACzB3C,EACE0C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACR,CAmBUQ,CAAYjD,EAASe,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAApC,IAAYe,GACtBf,IAAYe,GAAc,CAAEsB,UAAW,GACvCrC,IAAYe,GAAcG,EAAUlB,EAAU,GACxC,CAAAkD,UAAAlD,IAAYe,IAGb,UAGfR,GAKX"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  theme: ThemeType;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => theme.spacing.xxs};\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active, theme }) =>\n    $active &&\n    css`\n      color: ${theme.colors.textDark};\n      background-color: ${theme.colors.paginationActive};\n      cursor: default;\n      &:hover {\n        background-color: ${theme.colors.paginationActive};\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, theme, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled ? theme.colors.disabled : theme.colors.paginationText};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ theme, $disabled }) =>\n    $disabled &&\n    css`\n      color: $ ${theme.colors.disabled};\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ${theme.colors.disabled};\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li<{ theme: ThemeType }>`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ${(props) => props.theme.breakpoint.mobile};\n  }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","templateObject_3","textDark","paginationActive","name","$disabled","templateObject_4","disabled","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAGa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAK9BC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,SA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,IACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,IACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,IACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,IAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,IAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,IAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,IAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,IAgBSG,EAAYhC,EAAOiC,GAAwBC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMO,oKASH,eATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM,IAS3C,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAvB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  theme: ThemeType;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => theme.spacing.xxs};\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active, theme }) =>\n    $active &&\n    css`\n      color: ${theme.colors.textDark};\n      background-color: ${theme.colors.paginationActive};\n      cursor: default;\n      &:hover {\n        background-color: ${theme.colors.paginationActive};\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, theme, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled ? theme.colors.disabled : theme.colors.paginationText};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ theme, $disabled }) =>\n    $disabled &&\n    css`\n      color: $ ${theme.colors.disabled};\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ${theme.colors.disabled};\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li<{ theme: ThemeType }>`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ${(props) => props.theme.breakpoint.mobile};\n  }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","templateObject_3","textDark","paginationActive","name","$disabled","templateObject_4","disabled","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAGa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAK9BC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,SA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,IACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,IACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,IACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,IAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,IAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,IAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,IAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,IAgBSG,EAAYhC,EAAOiC,GAAwBC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMO,oKASH,eATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM,IAS3C,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","$barColor","$isSecondary","progressBarSecondary","progressBar","_b","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","$circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","tokenColors","grey_200","FullCircle","templateObject_14","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15","fontSizes","l","textDark"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","$barColor","$isSecondary","progressBarSecondary","progressBar","_b","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","$circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","tokenColors","grey_200","FullCircle","templateObject_14","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15","fontSizes","l","textDark"],"mappings":"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"}

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

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

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

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