@cruk/cruk-react-components 5.0.8 → 6.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledIcon = styled.svg<{\n  theme: ThemeType;\n  $color?: string;\n  $size: string;\n}>`\n  display: inline-block;\n  height: ${({ $size }) => $size};\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ${({ $size }) => $size};\n  path {\n    fill: ${({ $color }) => $color};\n  }\n`;\n\nexport default StyledIcon;\n"],"names":["StyledIcon","styled","svg","$size","$color"],"mappings":"iCAGa,MAAAA,EAAaC,EAAOC,GAI/B;;YAEU,EAAGC,WAAYA;;;WAGhB,EAAGA,WAAYA;;YAEd,EAAGC,YAAaA;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledIcon = styled.svg<{\n  theme: ThemeType;\n  $color?: string;\n  $size: string;\n}>`\n  display: inline-block;\n  height: ${({ $size }) => $size};\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ${({ $size }) => $size};\n  path {\n    fill: ${({ $color }) => $color};\n  }\n`;\n\nexport default StyledIcon;\n"],"names":["StyledIcon","styled","svg","templateObject_1","__makeTemplateObject","_a","$size","$color"],"mappings":"iHAGa,MAAAA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,iEAAA,0BAAA,YAAA,CAIlC,yCAE8B,iEAGD,0BAEG,eALtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,IAGhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,IAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as o}from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{Box as n}from"../Box/index.js";import{Text as m}from"../Text/index.js";import{Heading as i}from"../Heading/index.js";import{StyledInfoBox as l}from"./styles.js";const a=o((({children:o,titleText:a,titleTextColor:s,descriptionText:c,descriptionTextColor:x,icon:d,...p},g)=>{const f=t(),C={...r,...f},k=p.backgroundColor||C.tokenColors.grey_200;return e.createElement(l,{theme:C,...p,backgroundColor:k,margin:p.margin||"none",ref:g},d&&e.createElement(n,{marginRight:"s"},d),e.createElement("div",null,a&&e.createElement(i,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:s||C.colors.textDark},a),c&&e.createElement(m,{textColor:x||C.colors.textDark,marginBottom:"none"},c),o))}));a.displayName="InfoBox";export{a as InfoBox,a as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as r}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{Box as n}from"../Box/index.js";import{Text as m}from"../Text/index.js";import{Heading as l}from"../Heading/index.js";import{StyledInfoBox as s}from"./styles.js";var a=function(a){var c=a.children,x=a.titleText,d=a.titleTextColor,p=a.descriptionText,f=a.descriptionTextColor,g=a.icon,C=a.ref,T=e(a,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref"]),u=r(),h=t(t({},i),u),j=T.backgroundColor||h.tokenColors.grey_200;return o.createElement(s,t({theme:h},T,{backgroundColor:j,margin:T.margin||"none",ref:C}),g&&o.createElement(n,{marginRight:"s"},g),o.createElement("div",null,x&&o.createElement(l,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:d||h.colors.textDark},x),p&&o.createElement(m,{textColor:f||h.colors.textDark,marginBottom:"none"},p),c))};export{a as InfoBox,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = forwardRef(\n  (\n    {\n      children,\n      titleText,\n      titleTextColor,\n      descriptionText,\n      descriptionTextColor,\n      icon,\n      ...spacingAndHTMLElementProps\n    }: InfoBoxProps,\n    ref?: Ref<HTMLElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const backgroundColorOrDefault =\n      spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n    return (\n      <StyledInfoBox\n        theme={theme}\n        {...spacingAndHTMLElementProps}\n        backgroundColor={backgroundColorOrDefault}\n        margin={spacingAndHTMLElementProps.margin || \"none\"}\n        ref={ref}\n      >\n        {icon && <Box marginRight=\"s\">{icon}</Box>}\n        <div>\n          {titleText && (\n            <Heading\n              as=\"p\"\n              margin=\"none\"\n              h4\n              marginBottom=\"xxs\"\n              textColor={titleTextColor || theme.colors.textDark}\n            >\n              {titleText}\n            </Heading>\n          )}\n          {descriptionText && (\n            <Text\n              textColor={descriptionTextColor || theme.colors.textDark}\n              marginBottom=\"none\"\n            >\n              {descriptionText}\n            </Text>\n          )}\n          {children}\n        </div>\n      </StyledInfoBox>\n    );\n  },\n);\n\nInfoBox.displayName = \"InfoBox\";\n\nexport default InfoBox;\n"],"names":["InfoBox","forwardRef","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","spacingAndHTMLElementProps","ref","foundTheme","useTheme","theme","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text","displayName"],"mappings":"4SA2Ca,MAAAA,EAAUC,GACrB,EAEIC,WACAC,YACAC,iBACAC,kBACAC,uBACAC,UACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJN,EAA2BO,iBAAmBH,EAAMI,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACC,CAAAR,MAAOA,KACHJ,EACJO,gBAAiBD,EACjBO,OAAQb,EAA2Ba,QAAU,OAC7CZ,IAAKA,GAEJF,GAAQW,gBAACI,EAAG,CAACC,YAAY,KAAKhB,GAC/BW,EAAAC,cAAA,MAAA,KACGhB,GACCe,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAWxB,GAAkBQ,EAAMiB,OAAOC,UAEzC3B,GAGJE,GACCa,EAACC,cAAAY,GACCH,UAAWtB,GAAwBM,EAAMiB,OAAOC,SAChDH,aAAa,QAEZtB,GAGJH,GAEW,IAKtBF,EAAQgC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const backgroundColorOrDefault =\n    spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n  return (\n    <StyledInfoBox\n      theme={theme}\n      {...spacingAndHTMLElementProps}\n      backgroundColor={backgroundColorOrDefault}\n      margin={spacingAndHTMLElementProps.margin || \"none\"}\n      ref={ref}\n    >\n      {icon && <Box marginRight=\"s\">{icon}</Box>}\n      <div>\n        {titleText && (\n          <Heading\n            as=\"p\"\n            margin=\"none\"\n            h4\n            marginBottom=\"xxs\"\n            textColor={titleTextColor || theme.colors.textDark}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text\n            textColor={descriptionTextColor || theme.colors.textDark}\n            marginBottom=\"none\"\n          >\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </StyledInfoBox>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","_a","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref","spacingAndHTMLElementProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text"],"mappings":"2WA0CO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,QACGC,EARmBC,EAAAT,EAAA,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,QAUhBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJP,EAA2BQ,iBAAmBJ,EAAMK,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACCR,EAAA,CAAAD,MAAOA,GACHJ,EAA0B,CAC9BQ,gBAAiBD,EACjBO,OAAQd,EAA2Bc,QAAU,OAC7Cf,IAAKA,IAEJD,GAAQa,gBAACI,EAAG,CAACC,YAAY,KAAKlB,GAC/Ba,EAAAC,cAAA,MAAA,KACGlB,GACCiB,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAW1B,GAAkBS,EAAMkB,OAAOC,UAEzC7B,GAGJE,GACCe,EAACC,cAAAY,GACCH,UAAWxB,GAAwBO,EAAMkB,OAAOC,SAChDH,aAAa,QAEZxB,GAGJH,GAIT"}

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

@@ -1,13 +1,2 @@
-import s,{css as o}from"styled-components";import{Box as t}from"../Box/index.js";const e=s(t)`
-  display: flex;
-  flex-shrink: 0;
-
-  svg {
-    margin-top: 0;
-  }
-
-  ${s=>s.css&&o`
-      ${s.css}
-    `}
-`;export{e as StyledInfoBox,e as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import s,{css as o}from"styled-components";import{Box as r}from"../Box/index.js";var e,i,t=s(r)(i||(i=n(["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"],["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"])),(function(s){return s.css&&o(e||(e=n(["\n      ","\n    "],["\n      ","\n    "])),s.css)}));export{t as StyledInfoBox,t as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/InfoBox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\nimport Box, { type BoxProps } from \"../Box\";\n\ntype InfoBoxProps = BoxProps & {\n  css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledInfoBox = styled(Box)<InfoBoxProps>`\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ${(props) =>\n    props.css &&\n    css`\n      ${props.css}\n    `}\n`;\n\nexport default StyledInfoBox;\n"],"names":["StyledInfoBox","styled","Box","props","css"],"mappings":"uFAUaA,EAAgBC,EAAOC,EAAkB;;;;;;;;IAQjDC,GACDA,EAAMC,KACNA,CAAG;QACCD,EAAMC;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/InfoBox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\nimport Box, { type BoxProps } from \"../Box\";\n\ntype InfoBoxProps = BoxProps & {\n  css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledInfoBox = styled(Box)<InfoBoxProps>`\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ${(props) =>\n    props.css &&\n    css`\n      ${props.css}\n    `}\n`;\n\nexport default StyledInfoBox;\n"],"names":["StyledInfoBox","styled","Box","templateObject_2","__makeTemplateObject","props","css","templateObject_1"],"mappings":"iKAUO,QAAMA,EAAgBC,EAAOC,EAAPD,CAAWE,IAAAA,EAAAC,EAAA,CAAA,kFAAA,MAAA,CAAc,kFAYjD,SAJD,SAACC,GACD,OAAAA,EAAMC,KACNA,EAAGC,IAAAA,EAAAH,EAAA,CAAA,WAAA,UAAA,CAAA,WACU,YAATC,EAAMC,IAFV"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t,ThemeProvider as r}from"styled-components";import{Text as n}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as l,LabelText as o,RequiredText as i}from"./styles.js";function a({label:a,hintText:c,required:s=!1,hideRequiredInLabel:u=!1,children:f,...p}){const d=t(),h={...m,...d},E=c&&("string"==typeof c&&c.length||"number"==typeof c)?e.createElement(n,null,c):c;return e.createElement(r,{theme:h},a?e.createElement(l,{...p},e.createElement(o,{$hasHintText:!!c},a,s&&!u&&e.createElement(i,null," (required)")),E,f):e.createElement(e.Fragment,null,f))}export{a as LabelWrapper,a as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as l,ThemeProvider as n}from"styled-components";import{Text as i}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as o,LabelText as a,RequiredText as d}from"./styles.js";function s(s){var u=s.label,c=s.hintText,f=s.required,h=void 0!==f&&f,p=s.hideRequiredInLabel,b=void 0!==p&&p,x=s.children,E=e(s,["label","hintText","required","hideRequiredInLabel","children"]),q=l(),j=t(t({},m),q),y=c&&("string"==typeof c&&c.length||"number"==typeof c)?r.createElement(i,null,c):c;return r.createElement(n,{theme:j},u?r.createElement(o,t({},E),r.createElement(a,{$hasHintText:!!c},u,h&&!b&&r.createElement(d,null," (required)")),y,x):r.createElement(r.Fragment,null,x))}export{s as LabelWrapper,s as default};
 //# sourceMappingURL=index.js.map

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","label","hintText","required","hideRequiredInLabel","children","otherHTMLLabelProps","foundTheme","useTheme","theme","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mPAoBM,SAAUA,GAAaC,MAC3BA,EAAKC,SACLA,EAAQC,SACRA,GAAW,EAAKC,oBAChBA,GAAsB,EAAKC,SAC3BA,KACGC,IAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACFT,IACoB,iBAAbA,GAAyBA,EAASU,QACrB,iBAAbV,GACPW,EAACC,cAAAC,OAAMb,GAAgB,EAK3B,OACEW,EAACC,cAAAE,EAAc,CAAAP,MAAOA,GACnBR,EACCY,EAACC,cAAAG,MAAUX,GACTO,EAAAC,cAACI,EAAS,CAAAC,eAAiBjB,GACxBD,EACAE,IAAaC,GACZS,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAN,GAGHQ,EAAGC,cAAAD,EAAAQ,SAAA,KAAAhB,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","undefined","_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,OAAWC,IAAAF,GAAKA,EAChBG,wBAAAC,OAAsBF,IAAAC,GAAKA,EAC3BE,EAAQR,EAAAQ,SACLC,EANwBC,EAAAV,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBW,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFd,IACoB,iBAAbA,GAAyBA,EAASe,QACrB,iBAAbf,GACPgB,EAACC,cAAAC,OAAMlB,GAAgB,EAK3B,OACEgB,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBZ,EACCiB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBtB,GACxBD,EACAG,IAAaG,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}

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

@@ -1,16 +1,2 @@
-import t from"styled-components";const e=t.label`
-  position: relative;
-  display: block;
-  width: 100%;
-  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
-  font-weight: ${({theme:t})=>t.typography.fontWeightLabels};
-`,o=t.span`
-  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
-  font-weight: ${({theme:t})=>t.typography.fontWeightBase};
-`,a=t.span`
-  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
-  font-weight: ${({theme:t})=>t.typography.fontWeightLabels};
-  display: block;
-  margin-bottom: ${({$hasHintText:t,theme:e})=>t?e.spacing.xxs:e.spacing.xs};
-`;export{e as Label,a as LabelText,o as RequiredText};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var o,e,i,a=t.label(o||(o=n(["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"],["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){return n.theme.typography.fontWeightLabels})),f=t.span(e||(e=n(["\n  font-family: ",";\n  font-weight: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){return n.theme.typography.fontWeightBase})),r=t.span(i||(i=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){return n.theme.typography.fontWeightLabels}),(function(n){var t=n.$hasHintText,o=n.theme;return t?o.spacing.xxs:o.spacing.xs}));export{a as Label,r as LabelText,f as RequiredText};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype LabelTextProp = {\n  $hasHintText: boolean;\n  theme: ThemeType;\n};\n\nexport const Label = styled.label<{ theme: ThemeType }>`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n`;\n\nexport const RequiredText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n`;\n\nexport const LabelText = styled.span<LabelTextProp>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  display: block;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","fontWeightBase","LabelText","$hasHintText","spacing","xxs","xs"],"mappings":"iCAQa,MAAAA,EAAQC,EAAOC,KAA2B;;;;iBAItC,EAAGC,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWE;EAGpCC,EAAeN,EAAOO,IAA0B;iBAC5C,EAAGL,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWK;EAGpCC,EAAYT,EAAOO,IAAmB;iBAClC,EAAGL,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWE;;mBAE9B,EAAGK,eAAcR,WAChCQ,EAAeR,EAAMS,QAAQC,IAAMV,EAAMS,QAAQE;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype LabelTextProp = {\n  $hasHintText: boolean;\n  theme: ThemeType;\n};\n\nexport const Label = styled.label<{ theme: ThemeType }>`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n`;\n\nexport const RequiredText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n`;\n\nexport const LabelText = styled.span<LabelTextProp>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  display: block;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","templateObject_2","fontWeightBase","LabelText","templateObject_3","$hasHintText","spacing","xxs","xs"],"mappings":"iHAQO,UAAMA,EAAQC,EAAOC,MAA2BC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,OAAA,CAAA,8EAIS,qBACC,UADhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAGnBC,EAAeT,EAAOU,KAA0BC,IAAAA,EAAAR,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAA,oBACG,qBACD,UAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWM,cAAjB,IAGnBC,EAAYb,EAAOU,KAAII,IAAAA,EAAAX,EAAA,CAAA,oBAAA,qBAAA,0CAAA,OAAA,CAAe,oBACa,qBACC,0CAGV,UAJtC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAEb,SAACJ,OAAEW,EAAYX,EAAAW,aAAEV,EAAKD,EAAAC,MACrC,OAAAU,EAAeV,EAAMW,QAAQC,IAAMZ,EAAMW,QAAQE,EAAjD"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as r,ThemeProvider as t}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{ErrorText as m}from"../ErrorText/index.js";import{Text as o}from"../Text/index.js";import{StyledFieldset as s,LegendSpan as a}from"./styles.js";function i({children:i,legendText:l,required:c,errorMessage:p,hasError:x,hintText:f,...E}){const d=r(),h={...n,...d},u=!f||"string"!=typeof f&&"number"!=typeof f?f:e.createElement(o,{as:"span"},f);return e.createElement(t,{theme:h},e.createElement(s,{$hasError:x||!!p||!1,$hasHintText:!!f},l&&e.createElement("legend",{...E},e.createElement(a,{$hasHintText:!!f},l," ",c&&e.createElement("span",null,"(required)")),u),i,!!p&&e.createElement(m,{marginTop:"xxs"},p)))}export{i as LegendWrapper,i as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as o}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as m}from"../ErrorText/index.js";import{Text as i}from"../Text/index.js";import{StyledFieldset as a,LegendSpan as l}from"./styles.js";function d(d){var p=d.children,c=d.legendText,x=d.required,f=d.errorMessage,h=d.hasError,E=d.hintText,u=e(d,["children","legendText","required","errorMessage","hasError","hintText"]),T=n(),g=r(r({},s),T),j=!E||"string"!=typeof E&&"number"!=typeof E?E:t.createElement(i,{as:"span"},E);return t.createElement(o,{theme:g},t.createElement(a,{$hasError:h||!!f||!1,$hasHintText:!!E},c&&t.createElement("legend",r({},u),t.createElement(l,{$hasHintText:!!E},c," ",x&&t.createElement("span",null,"(required)")),j),p,!!f&&t.createElement(m,{marginTop:"xxs"},f)))}export{d as LegendWrapper,d as default};
 //# sourceMappingURL=index.js.map

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","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","foundTheme","useTheme","theme","defaultTheme","hintTextElement","React","createElement","Text","as","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"sSA4BgBA,GAAcC,SAC5BA,EAAQC,WACRA,EAAUC,SACVA,EAAQC,aACRA,EAAYC,SACZA,EAAQC,SACRA,KACGC,IAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,GACFN,GACmB,iBAAbA,GAA6C,iBAAbA,EAGtC,EAFAO,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQV,GAIrB,OACEO,EAACC,cAAAG,EAAc,CAAAP,MAAOA,GACpBG,EAAAC,cAACI,EAAc,CAAAC,UACFd,KAAcD,IAAgB,EAAKgB,eAC9Bd,GAEfJ,GACCW,EAAAC,cAAA,SAAA,IAAYP,GACVM,EAAAC,cAACO,EAAU,CAAAD,eAAiBd,GACzBJ,MAAaC,GAAYU,2CAE3BD,GAGJX,IACEG,GACDS,EAAAC,cAACQ,EAAU,CAAAC,UAAU,OAAOnB,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/LegendWrapper/styles.js

@@ -1,35 +1,2 @@
-import e from"styled-components";const o=e.span`
-  display: block;
-  color: ${({theme:e})=>e.colors.textDark};
-  font-size: ${({theme:e})=>e.fontSizes.m};
-  line-height: ${({theme:e})=>e.typography.lineHeight};
-  font-weight: ${({theme:e})=>e.typography.fontWeightLabels};
-  font-family: ${({theme:e})=>e.typography.fontFamilyLabel};
-  min-width: 3em;
-  margin-bottom: ${({$hasHintText:e,theme:o})=>e?o.spacing.xxs:0};
-
-  & > * {
-    font-weight: ${({theme:e})=>e.typography.fontWeightBase};
-  }
-`,t=e.fieldset`
-  *,
-  *:after,
-  *:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  border: none;
-  padding: 0;
-  legend {
-    margin-bottom: ${({theme:e})=>e.spacing.xs};
-  }
-  label {
-    border-color: ${({$hasError:e,theme:o})=>e&&o.colors.textError};
-    margin-bottom: ${({theme:e})=>e.spacing.none};
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-`;export{o as LegendSpan,t as StyledFieldset};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var t,e,r=o.span(t||(t=n(["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"],["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontWeightLabels}),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){var o=n.$hasHintText,t=n.theme;return o?t.spacing.xxs:0}),(function(n){return n.theme.typography.fontWeightBase})),i=o.fieldset(e||(e=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  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\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  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"])),(function(n){return n.theme.spacing.xs}),(function(n){var o=n.$hasError,t=n.theme;return o&&t.colors.textError}),(function(n){return n.theme.spacing.none}));export{r as LegendSpan,i as StyledFieldset};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/LegendWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\ntype StyledFieldsetProps = {\n  $hasError?: boolean;\n  $hasHintText?: boolean;\n  theme: ThemeType;\n};\n\nexport const LegendSpan = styled.span<{\n  $hasHintText: boolean;\n  theme: ThemeType;\n}>`\n  display: block;\n  color: ${({ theme }) => theme.colors.textDark};\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  min-width: 3em;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : 0};\n\n  & > * {\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const StyledFieldset = styled.fieldset<StyledFieldsetProps>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ${({ theme }) => theme.spacing.xs};\n  }\n  label {\n    border-color: ${({ $hasError, theme }) =>\n      $hasError && theme.colors.textError};\n    margin-bottom: ${({ theme }) => theme.spacing.none};\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n`;\n"],"names":["LegendSpan","styled","span","theme","colors","textDark","fontSizes","m","typography","lineHeight","fontWeightLabels","fontFamilyLabel","$hasHintText","spacing","xxs","fontWeightBase","StyledFieldset","fieldset","xs","$hasError","textError","none"],"mappings":"iCAUa,MAAAA,EAAaC,EAAOC,IAG/B;;WAES,EAAGC,WAAYA,EAAMC,OAAOC;eACxB,EAAGF,WAAYA,EAAMG,UAAUC;iBAC7B,EAAGJ,WAAYA,EAAMK,WAAWC;iBAChC,EAAGN,WAAYA,EAAMK,WAAWE;iBAChC,EAAGP,WAAYA,EAAMK,WAAWG;;mBAE9B,EAAGC,eAAcT,WAChCS,EAAeT,EAAMU,QAAQC,IAAM;;;mBAGpB,EAAGX,WAAYA,EAAMK,WAAWO;;EAItCC,EAAiBf,EAAOgB,QAA6B;;;;;;;;;;;qBAW7C,EAAGd,WAAYA,EAAMU,QAAQK;;;oBAG9B,EAAGC,YAAWhB,WAC5BgB,GAAahB,EAAMC,OAAOgB;qBACX,EAAGjB,WAAYA,EAAMU,QAAQQ;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LegendWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\ntype StyledFieldsetProps = {\n  $hasError?: boolean;\n  $hasHintText?: boolean;\n  theme: ThemeType;\n};\n\nexport const LegendSpan = styled.span<{\n  $hasHintText: boolean;\n  theme: ThemeType;\n}>`\n  display: block;\n  color: ${({ theme }) => theme.colors.textDark};\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  min-width: 3em;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : 0};\n\n  & > * {\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const StyledFieldset = styled.fieldset<StyledFieldsetProps>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ${({ theme }) => theme.spacing.xs};\n  }\n  label {\n    border-color: ${({ $hasError, theme }) =>\n      $hasError && theme.colors.textError};\n    margin-bottom: ${({ theme }) => theme.spacing.none};\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n`;\n"],"names":["LegendSpan","styled","span","templateObject_1","__makeTemplateObject","_a","theme","colors","textDark","fontSizes","m","typography","lineHeight","fontWeightLabels","fontFamilyLabel","$hasHintText","spacing","xxs","fontWeightBase","StyledFieldset","fieldset","templateObject_2","xs","$hasError","textError","none"],"mappings":"iHAUa,QAAAA,EAAaC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iCAAA,mBAAA,qBAAA,qBAAA,qBAAA,0CAAA,oCAAA,YAAA,CAGnC,iCAE6C,mBACA,qBACY,qBACM,qBACD,0CAGxB,oCAGyB,eAVtD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,QAAb,IACX,SAACH,GAAc,OAAPA,EAAAC,MAAaG,UAAUC,CAAhB,IACb,SAACL,GAAc,OAAPA,EAAAC,MAAaK,WAAWC,UAAjB,IACf,SAACP,GAAc,OAAPA,EAAAC,MAAaK,WAAWE,gBAAjB,IACf,SAACR,GAAc,OAAPA,EAAAC,MAAaK,WAAWG,eAAjB,IAEb,SAACT,OAAEU,EAAYV,EAAAU,aAAET,EAAKD,EAAAC,MACrC,OAAAS,EAAeT,EAAMU,QAAQC,IAAM,CAAnC,IAGe,SAACZ,GAAc,OAAPA,EAAAC,MAAaK,WAAWO,cAAjB,IAIrBC,EAAiBlB,EAAOmB,SAAQC,IAAAA,EAAAjB,EAAA,CAAA,6MAAA,wCAAA,yBAAA,kEAAA,CAAqB,6MAWd,wCAIX,yBACa,qEALjC,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQM,EAAd,IAGhB,SAACjB,OAAEkB,EAASlB,EAAAkB,UAAEjB,EAAKD,EAAAC,MACjC,OAAAiB,GAAajB,EAAMC,OAAOiB,SAA1B,IACe,SAACnB,GAAc,OAAPA,EAAAC,MAAaU,QAAQS,IAAd"}

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as t,ThemeProvider as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{StyledLink as m}from"./styles.js";const n=r(((r,n)=>{const s=t(),l={...a,...s},p=r.rel?r.rel:"_blank"===r.target?"noopener noreferrer":"",c=r.as&&"a"!==r.as?void 0:"a",{textHoverColor:f,appearance:i,...d}=r;return e.createElement(o,{theme:l},e.createElement(m,{...d,$textHoverColor:f,$appearance:i,theme:l,rel:p,forwardedAs:c,ref:n},r.children))}));n.displayName="Link";export{n as Link,n as default};
+import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t,ThemeProvider as a}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{StyledLink as m}from"./styles.js";var n=function(n){var s=t(),p=e(e({},l),s),i=n.rel?n.rel:"_blank"===n.target?"noopener noreferrer":"",f=n.as&&"a"!==n.as?void 0:"a",c=n.textHoverColor,d=n.appearance,v=n.ref,h=n.children,u=r(n,["textHoverColor","appearance","ref","children"]);return o.createElement(a,{theme:p},o.createElement(m,e({},u,{$textHoverColor:c,$appearance:d,theme:p,rel:i,forwardedAs:f,ref:v}),h))};n.displayName="Link";export{n as Link,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = forwardRef((props: LinkProps, ref?: Ref<HTMLElement>) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...rest}\n        $textHoverColor={textHoverColor}\n        $appearance={appearance}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {props.children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n});\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","children","displayName"],"mappings":"gMAsCa,MAAAA,EAAOC,GAAW,CAACC,EAAkBC,KAChD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAMN,EAAMM,IACdN,EAAMM,IACW,WAAjBN,EAAMO,OACJ,sBACA,GAGAC,EAAYR,EAAMS,IAAmB,MAAbT,EAAMS,QAAaC,EAAY,KAEvDC,eAAEA,EAAcC,WAAEA,KAAeC,GAASb,EAEhD,OACEc,EAACC,cAAAC,EAAc,CAAAZ,MAAOA,GACpBU,EAAAC,cAACE,EAAU,IACLJ,EAAIK,gBACSP,EAAcQ,YAClBP,EACbR,MAAOA,EACPE,IAAKA,EACLc,YAAaZ,EACbP,IAAKA,GAEJD,EAAMqB,UAEK,IAIpBvB,EAAKwB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = (props: LinkProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ref, children, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...rest}\n        $textHoverColor={textHoverColor}\n        $appearance={appearance}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n};\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","props","foundTheme","useTheme","theme","__assign","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","ref","children","rest","__rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","displayName"],"mappings":"+PAqCO,IAAMA,EAAO,SAACC,GACnB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAMN,EAAMM,IACdN,EAAMM,IACW,WAAjBN,EAAMO,OACJ,sBACA,GAGAC,EAAYR,EAAMS,IAAmB,MAAbT,EAAMS,QAAaC,EAAY,IAErDC,EAAuDX,EAAzCW,eAAEC,EAAuCZ,EAAKY,WAAhCC,EAA2Bb,MAAtBc,EAAsBd,EAAdc,SAAKC,EAAIC,EAAKhB,EAAzD,CAAsD,iBAAA,aAAA,MAAA,aAE5D,OACEiB,EAACC,cAAAC,EAAc,CAAAhB,MAAOA,GACpBc,EAAAC,cAACE,EAAUhB,EAAA,CAAA,EACLW,EAAI,CAAAM,gBACSV,EAAcW,YAClBV,EACbT,MAAOA,EACPG,IAAKA,EACLiB,YAAaf,EACbK,IAAKA,IAEJC,GAIT,EAEAf,EAAKyB,YAAc"}

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

@@ -1,30 +1,2 @@
-import e from"styled-components";import{Text as o}from"../Text/index.js";const r=e(o)`
-  transition:
-    color 0.2s ease,
-    background-size 0.3s ease;
-  overflow-wrap: break-word;
-  background-color: rgba(255, 255, 255, 0);
-  border: none;
-  padding: 0;
-  color: ${({theme:{colors:e,utilities:{useBackgroundStyleLinks:o}},textColor:r,$appearance:a})=>r&&void 0!==e[r]?e[r]:r||(!a&&o?"currentColor":a&&"primary"===a?e.linkColorSecondary:e.linkColor)};
-  text-decoration: ${({$appearance:e,theme:{typography:{linkTextDecoration:o,LinkPrimaryTextDecoration:r}}})=>"primary"===e?r:"secondary"===e?"none":o};
-  font-family: ${({$appearance:e,theme:{typography:{fontFamilyBase:o,fontFamilyLinks:r}}})=>"primary"===e||"secondary"===e?r:o};
-  letter-spacing: ${({$appearance:e,theme:{typography:{LinkLetterSpacing:o}}})=>"primary"===e||"secondary"===e?o:"0px"};
-
-  background: ${({$appearance:e,theme:o,theme:{utilities:{useBackgroundStyleLinks:r}}})=>r&&!e?`linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${o.colors.primary} -4px);`:void 0};
-  background-repeat: no-repeat;
-  background-position-y: calc(100%);
-  background-size: 100% 2px;
-  font-weight: ${({theme:e})=>e.typography.fontWeightLinks};
-
-  &:focus-visible {
-    outline: auto;
-  }
-
-  &:hover {
-    cursor: pointer;
-    background-size: 100% 100%;
-    color: ${({theme:{colors:e,utilities:{useBackgroundStyleLinks:o}},$textHoverColor:r,$appearance:a})=>!r&&o?e.textDark:r&&void 0!==e[r]?e[r]:r?a&&"primary"===a?e.linkColorHover:e.linkColorSecondaryHover:e.linkColorHover};
-  }
-`;export{r as StyledLink,r as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";import{Text as o}from"../Text/index.js";var e,a=r(o)(e||(e=n(["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"],["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"])),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.textColor,t=n.$appearance;return a&&void 0!==o[a]?o[a]:a||(!t&&e?"currentColor":t&&"primary"===t?o.linkColorSecondary:o.linkColor)}),(function(n){var r=n.$appearance,o=n.theme.typography,e=o.linkTextDecoration,a=o.LinkPrimaryTextDecoration;return"primary"===r?a:"secondary"===r?"none":e}),(function(n){var r=n.$appearance,o=n.theme.typography,e=o.fontFamilyBase,a=o.fontFamilyLinks;return"primary"===r||"secondary"===r?a:e}),(function(n){var r=n.$appearance,o=n.theme.typography.LinkLetterSpacing;return"primary"===r||"secondary"===r?o:"0px"}),(function(n){var r=n.$appearance,o=n.theme;return n.theme.utilities.useBackgroundStyleLinks&&!r?"linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ".concat(o.colors.primary," -4px);"):void 0}),(function(n){return n.theme.typography.fontWeightLinks}),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.$textHoverColor,t=n.$appearance;return!a&&e?o.textDark:a&&void 0!==o[a]?o[a]:a?t&&"primary"===t?o.linkColorHover:o.linkColorSecondaryHover:o.linkColorHover}));export{a as StyledLink,a as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Link/styles.ts"],"sourcesContent":["import { type AnchorHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { type TextProps } from \"../Text\";\n\nimport { type ThemeType, type ColorKeyType } from \"../../types\";\n\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\n    theme: ThemeType;\n    $appearance?: \"primary\" | \"secondary\";\n    $textHoverColor?: string;\n  };\n\nexport const StyledLink = styled(Text)<StyledLinkProps>`\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ${({\n    theme: {\n      colors,\n      utilities: { useBackgroundStyleLinks },\n    },\n    textColor,\n    $appearance,\n  }) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor ||\n        (!$appearance && useBackgroundStyleLinks\n          ? \"currentColor\"\n          : $appearance && $appearance === \"primary\"\n            ? colors.linkColorSecondary\n            : colors.linkColor)};\n  text-decoration: ${({\n    $appearance,\n    theme: {\n      typography: { linkTextDecoration, LinkPrimaryTextDecoration },\n    },\n  }) =>\n    $appearance === \"primary\"\n      ? LinkPrimaryTextDecoration\n      : $appearance === \"secondary\"\n        ? \"none\"\n        : linkTextDecoration};\n  font-family: ${({\n    $appearance,\n    theme: {\n      typography: { fontFamilyBase, fontFamilyLinks },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? fontFamilyLinks\n      : fontFamilyBase};\n  letter-spacing: ${({\n    $appearance,\n    theme: {\n      typography: { LinkLetterSpacing },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? LinkLetterSpacing\n      : \"0px\"};\n\n  background: ${({\n    $appearance,\n    theme,\n    theme: {\n      utilities: { useBackgroundStyleLinks },\n    },\n  }) =>\n    useBackgroundStyleLinks && !$appearance\n      ? `linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${theme.colors.primary} -4px);`\n      : undefined};\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ${({ theme }) => theme.typography.fontWeightLinks};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({\n      theme: {\n        colors,\n        utilities: { useBackgroundStyleLinks },\n      },\n      $textHoverColor,\n      $appearance,\n    }) =>\n      !$textHoverColor && useBackgroundStyleLinks\n        ? colors.textDark\n        : $textHoverColor &&\n            typeof colors[$textHoverColor as ColorKeyType] !== \"undefined\"\n          ? colors[$textHoverColor as ColorKeyType]\n          : $textHoverColor\n            ? $appearance && $appearance === \"primary\"\n              ? colors.linkColorHover\n              : colors.linkColorSecondaryHover\n            : colors.linkColorHover};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","theme","colors","utilities","useBackgroundStyleLinks","textColor","$appearance","linkColorSecondary","linkColor","typography","linkTextDecoration","LinkPrimaryTextDecoration","fontFamilyBase","fontFamilyLinks","LinkLetterSpacing","primary","undefined","fontWeightLinks","$textHoverColor","textDark","linkColorHover","linkColorSecondaryHover"],"mappings":"+EAcaA,EAAaC,EAAOC,EAAsB;;;;;;;;WAQ5C,EACPC,OACEC,SACAC,WAAaC,4BAEfC,YACAC,iBAEAD,QAA0D,IAAtCH,EAAOG,GACvBH,EAAOG,GACPA,KACEC,GAAeF,EACb,eACAE,GAA+B,YAAhBA,EACbJ,EAAOK,mBACPL,EAAOM;qBACA,EACjBF,cACAL,OACEQ,YAAcC,qBAAoBC,iCAGpB,YAAhBL,EACIK,EACgB,cAAhBL,EACE,OACAI;iBACO,EACbJ,cACAL,OACEQ,YAAcG,iBAAgBC,uBAGhB,YAAhBP,GAA6C,cAAhBA,EACzBO,EACAD;oBACY,EAChBN,cACAL,OACEQ,YAAcK,yBAGA,YAAhBR,GAA6C,cAAhBA,EACzBQ,EACA;;gBAEQ,EACZR,cACAL,QACAA,OACEE,WAAaC,+BAGfA,IAA4BE,EACxB,uDAAuDL,EAAMC,OAAOa,sBACpEC;;;;iBAIS,EAAGf,WAAYA,EAAMQ,WAAWQ;;;;;;;;;aASpC,EACPhB,OACEC,SACAC,WAAaC,4BAEfc,kBACAZ,kBAECY,GAAmBd,EAChBF,EAAOiB,SACPD,QACqD,IAA5ChB,EAAOgB,GACdhB,EAAOgB,GACPA,EACEZ,GAA+B,YAAhBA,EACbJ,EAAOkB,eACPlB,EAAOmB,wBACTnB,EAAOkB;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Link/styles.ts"],"sourcesContent":["import { type AnchorHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { type TextProps } from \"../Text\";\n\nimport { type ThemeType, type ColorKeyType } from \"../../types\";\n\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\n    theme: ThemeType;\n    $appearance?: \"primary\" | \"secondary\";\n    $textHoverColor?: string;\n  };\n\nexport const StyledLink = styled(Text)<StyledLinkProps>`\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ${({\n    theme: {\n      colors,\n      utilities: { useBackgroundStyleLinks },\n    },\n    textColor,\n    $appearance,\n  }) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor ||\n        (!$appearance && useBackgroundStyleLinks\n          ? \"currentColor\"\n          : $appearance && $appearance === \"primary\"\n            ? colors.linkColorSecondary\n            : colors.linkColor)};\n  text-decoration: ${({\n    $appearance,\n    theme: {\n      typography: { linkTextDecoration, LinkPrimaryTextDecoration },\n    },\n  }) =>\n    $appearance === \"primary\"\n      ? LinkPrimaryTextDecoration\n      : $appearance === \"secondary\"\n        ? \"none\"\n        : linkTextDecoration};\n  font-family: ${({\n    $appearance,\n    theme: {\n      typography: { fontFamilyBase, fontFamilyLinks },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? fontFamilyLinks\n      : fontFamilyBase};\n  letter-spacing: ${({\n    $appearance,\n    theme: {\n      typography: { LinkLetterSpacing },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? LinkLetterSpacing\n      : \"0px\"};\n\n  background: ${({\n    $appearance,\n    theme,\n    theme: {\n      utilities: { useBackgroundStyleLinks },\n    },\n  }) =>\n    useBackgroundStyleLinks && !$appearance\n      ? `linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${theme.colors.primary} -4px);`\n      : undefined};\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ${({ theme }) => theme.typography.fontWeightLinks};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({\n      theme: {\n        colors,\n        utilities: { useBackgroundStyleLinks },\n      },\n      $textHoverColor,\n      $appearance,\n    }) =>\n      !$textHoverColor && useBackgroundStyleLinks\n        ? colors.textDark\n        : $textHoverColor &&\n            typeof colors[$textHoverColor as ColorKeyType] !== \"undefined\"\n          ? colors[$textHoverColor as ColorKeyType]\n          : $textHoverColor\n            ? $appearance && $appearance === \"primary\"\n              ? colors.linkColorHover\n              : colors.linkColorSecondaryHover\n            : colors.linkColorHover};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","templateObject_1","__makeTemplateObject","_a","_b","theme","colors","useBackgroundStyleLinks","utilities","textColor","$appearance","linkColorSecondary","linkColor","typography","linkTextDecoration","LinkPrimaryTextDecoration","fontFamilyBase","fontFamilyLinks","LinkLetterSpacing","concat","primary","undefined","fontWeightLinks","$textHoverColor","textDark","linkColorHover","linkColorSecondaryHover"],"mappings":"yJAca,MAAAA,EAAaC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,8LAAA,yBAAA,qBAAA,wBAAA,sBAAA,0HAAA,uIAAA,YAAA,CAAiB,8LAuBxB,yBAWH,qBASN,wBAST,sBAWI,0HAI+C,uIA0B7B,eArFxB,SAACC,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCE,EAASN,EAAAM,UACTC,EAAWP,EAAAO,YAEX,OAAAD,QAA0D,IAAtCH,EAAOG,GACvBH,EAAOG,GACPA,KACEC,GAAeH,EACb,eACAG,GAA+B,YAAhBA,EACbJ,EAAOK,mBACPL,EAAOM,UAPjB,IAQiB,SAACT,OAClBO,EAAWP,EAAAO,YAETN,EAA6DD,EAAAE,MAAAQ,WAA/CC,EAAkBV,EAAAU,mBAAEC,EAAyBX,EAAAW,0BAG7D,MAAgB,YAAhBL,EACIK,EACgB,cAAhBL,EACE,OACAI,CAJN,IAKa,SAACX,OACdO,EAAWP,EAAAO,YAETN,EAA+CD,EAAAE,MAAAQ,WAAjCG,EAAcZ,EAAAY,eAAEC,EAAeb,EAAAa,gBAG/C,MAAgB,YAAhBP,GAA6C,cAAhBA,EACzBO,EACAD,CAFJ,IAGgB,SAACb,OACjBO,EAAWP,EAAAO,YAEKQ,EAAiBf,EAAAE,MAAAQ,WAAAK,kBAGjC,MAAgB,YAAhBR,GAA6C,cAAhBA,EACzBQ,EACA,KAFJ,IAIY,SAACf,GACb,IAAAO,gBACAL,EAAKF,EAAAE,MAKL,OAHsCF,EAAAE,MAAAG,UAAAD,0BAGVG,EACxB,uDAAuDS,OAAAd,EAAMC,OAAOc,QAAgB,gBACpFC,CAFJ,IAMa,SAAClB,GAAc,OAAPA,EAAAE,MAAaQ,WAAWS,eAAjB,IASnB,SAACnB,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCgB,EAAepB,EAAAoB,gBACfb,EAAWP,EAAAO,YAEX,OAACa,GAAmBhB,EAChBD,EAAOkB,SACPD,QACqD,IAA5CjB,EAAOiB,GACdjB,EAAOiB,GACPA,EACEb,GAA+B,YAAhBA,EACbJ,EAAOmB,eACPnB,EAAOoB,wBACTpB,EAAOmB,cATf"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t,ThemeProvider as n}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{ScreenReaderOnly as l,Spinner as m}from"./styles.js";function a(){const a=t(),o={...r,...a};return e.createElement(n,{theme:o},e.createElement(e.Fragment,null,e.createElement(l,{role:"alert"},"Loading"),e.createElement(m,null,e.createElement("span",null),e.createElement("span",null),e.createElement("span",null))))}export{a as Loader,a as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as l}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{ScreenReaderOnly as m,Spinner as o}from"./styles.js";function a(){var a=r(),s=e(e({},n),a);return t.createElement(l,{theme:s},t.createElement(t.Fragment,null,t.createElement(m,{role:"alert"},"Loading"),t.createElement(o,null,t.createElement("span",null),t.createElement("span",null),t.createElement("span",null))))}export{a as Loader,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { ScreenReaderOnly, Spinner } from \"./styles\";\n\n/**\n *\n * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.\n */\nexport function Loader() {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <>\n        <ScreenReaderOnly role=\"alert\">Loading</ScreenReaderOnly>\n        <Spinner>\n          <span />\n          <span />\n          <span />\n        </Spinner>\n      </>\n    </ThemeProvider>\n  );\n}\n\nexport default Loader;\n"],"names":["Loader","foundTheme","useTheme","theme","defaultTheme","React","createElement","ThemeProvider","Fragment","ScreenReaderOnly","role","Spinner"],"mappings":"2MAWgBA,IACd,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,EAACC,cAAAC,EAAc,CAAAJ,MAAOA,GACpBE,EAAAC,cAAAD,EAAAG,SAAA,KACEH,EAAAC,cAACG,EAAgB,CAACC,KAAK,SAAkC,WACzDL,EAAAC,cAACK,EAAO,KACNN,EAAQC,cAAA,OAAA,MACRD,EAAQC,cAAA,OAAA,MACRD,EAAAC,cAAA,OAAA,QAKV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { ScreenReaderOnly, Spinner } from \"./styles\";\n\n/**\n *\n * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.\n */\nexport function Loader() {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <>\n        <ScreenReaderOnly role=\"alert\">Loading</ScreenReaderOnly>\n        <Spinner>\n          <span />\n          <span />\n          <span />\n        </Spinner>\n      </>\n    </ThemeProvider>\n  );\n}\n\nexport default Loader;\n"],"names":["Loader","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","ThemeProvider","Fragment","ScreenReaderOnly","role","Spinner"],"mappings":"+QAWgBA,IACd,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,EAAc,CAAAL,MAAOA,GACpBG,EAAAC,cAAAD,EAAAG,SAAA,KACEH,EAAAC,cAACG,EAAgB,CAACC,KAAK,SAAkC,WACzDL,EAAAC,cAACK,EAAO,KACNN,EAAQC,cAAA,OAAA,MACRD,EAAQC,cAAA,OAAA,MACRD,EAAAC,cAAA,OAAA,QAKV"}

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

@@ -1,46 +1,2 @@
-import o,{keyframes as t}from"styled-components";const n=t`
-  0%,
-  80%,
-  100% {
-      transform: scale(0)
-  }
-  40% {
-      transform: scale(1)
-  }
-`,a=o.p`
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-`,e=o.div`
-  width: 100%;
-  text-align: center;
-  margin-top: ${({theme:o})=>o.spacing.s};
-
-  span {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin: 0 2px;
-    background-color: ${({theme:o})=>o.colors.loaderColor1};
-    border-radius: 100%;
-    animation: ${n} 1.2s infinite ease-in-out both;
-  }
-
-  span:nth-child(1) {
-    animation-delay: -0.32s;
-    -webkit-animation-delay: -0.32s;
-  }
-
-  span:nth-child(2) {
-    background-color: ${({theme:o})=>o.colors.loaderColor2};
-    animation-delay: -0.16s;
-  }
-
-  span:nth-child(3) {
-    background-color: ${({theme:o})=>o.colors.loaderColor3};
-  }
-`;export{a as ScreenReaderOnly,e as Spinner};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{keyframes as t}from"styled-components";var i,a,e,r=t(i||(i=n(["\n  0%,\n  80%,\n  100% {\n      transform: scale(0)\n  }\n  40% {\n      transform: scale(1)\n  }\n"],["\n  0%,\n  80%,\n  100% {\n      transform: scale(0)\n  }\n  40% {\n      transform: scale(1)\n  }\n"]))),l=o.p(a||(a=n(["\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"],["\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"]))),s=o.div(e||(e=n(["\n  width: 100%;\n  text-align: center;\n  margin-top: ",";\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: ",";\n    border-radius: 100%;\n    animation: "," 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: ",";\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: ",";\n  }\n"],["\n  width: 100%;\n  text-align: center;\n  margin-top: ",";\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: ",";\n    border-radius: 100%;\n    animation: "," 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: ",";\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: ",";\n  }\n"])),(function(n){return n.theme.spacing.s}),(function(n){return n.theme.colors.loaderColor1}),r,(function(n){return n.theme.colors.loaderColor2}),(function(n){return n.theme.colors.loaderColor3}));export{l as ScreenReaderOnly,s as Spinner};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Loader/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype SpinnerProps = {\n  theme: ThemeType;\n};\n\nconst BounceDelay = keyframes`\n  0%,\n  80%,\n  100% {\n      transform: scale(0)\n  }\n  40% {\n      transform: scale(1)\n  }\n`;\n\nexport const ScreenReaderOnly = styled.p`\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n`;\n\nexport const Spinner = styled.div<SpinnerProps>`\n  width: 100%;\n  text-align: center;\n  margin-top: ${({ theme }) => theme.spacing.s};\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: ${({ theme }) => theme.colors.loaderColor1};\n    border-radius: 100%;\n    animation: ${BounceDelay} 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: ${({ theme }) => theme.colors.loaderColor2};\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: ${({ theme }) => theme.colors.loaderColor3};\n  }\n`;\n"],"names":["BounceDelay","keyframes","ScreenReaderOnly","styled","p","Spinner","div","theme","spacing","s","colors","loaderColor1","loaderColor2","loaderColor3"],"mappings":"iDAOA,MAAMA,EAAcC,CAAS;;;;;;;;;EAWhBC,EAAmBC,EAAOC,CAAC;;;;;;;EAS3BC,EAAUF,EAAOG,GAAiB;;;gBAG/B,EAAGC,WAAYA,EAAMC,QAAQC;;;;;;;wBAOrB,EAAGF,WAAYA,EAAMG,OAAOC;;iBAEnCX;;;;;;;;;wBASO,EAAGO,WAAYA,EAAMG,OAAOE;;;;;wBAK5B,EAAGL,WAAYA,EAAMG,OAAOG;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Loader/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype SpinnerProps = {\n  theme: ThemeType;\n};\n\nconst BounceDelay = keyframes`\n  0%,\n  80%,\n  100% {\n      transform: scale(0)\n  }\n  40% {\n      transform: scale(1)\n  }\n`;\n\nexport const ScreenReaderOnly = styled.p`\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n`;\n\nexport const Spinner = styled.div<SpinnerProps>`\n  width: 100%;\n  text-align: center;\n  margin-top: ${({ theme }) => theme.spacing.s};\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: ${({ theme }) => theme.colors.loaderColor1};\n    border-radius: 100%;\n    animation: ${BounceDelay} 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: ${({ theme }) => theme.colors.loaderColor2};\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: ${({ theme }) => theme.colors.loaderColor3};\n  }\n`;\n"],"names":["BounceDelay","keyframes","templateObject_1","__makeTemplateObject","ScreenReaderOnly","styled","p","templateObject_2","Spinner","div","_a","theme","spacing","s","colors","loaderColor1","loaderColor2","loaderColor3"],"mappings":"iIAOA,UAAMA,EAAcC,EAASC,IAAAA,EAAAC,EAAA,CAAA,wGAAA,CAAA,2GAWhBC,EAAmBC,EAAOC,EAACC,IAAAA,EAAAJ,EAAA,CAAA,kHAAA,CAAA,qHAS3BK,EAAUH,EAAOI,mhBAAiB,0DAGD,6HAOkB,+CAEpC,2LASoC,wFAKA,eAvBhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,IAOP,SAACH,GAAc,OAAPA,EAAAC,MAAaG,OAAOC,YAAb,GAEtBf,GASO,SAACU,GAAc,OAAPA,EAAAC,MAAaG,OAAOE,YAAb,IAKf,SAACN,GAAc,OAAPA,EAAAC,MAAaG,OAAOG,YAAb"}

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

@@ -1,2 +1,2 @@
-import e,{useEffect as t}from"react";import{createPortal as o}from"react-dom";import{useTheme as n,ThemeProvider as i}from"styled-components";import a from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as d}from"../IconFa/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Wrapper as l,Content as c,CloseButton as g,Background as s}from"./styles.js";function p({modalName:p,closeFunction:u,showCloseButton:f,maxWidth:h="500px",top:w="1rem",backgroundColor:y="backgroundLight",children:E,width:b="90%",margin:k,marginHorizontal:x,marginVertical:L,marginTop:v,marginRight:C,marginBottom:j="xxl",marginLeft:B,padding:$="xs",paddingHorizontal:z,paddingVertical:F,paddingTop:H,paddingRight:R,paddingBottom:T,paddingLeft:V,isAnimated:A=!0}){const I=n(),W={...m,...I},_=e.useCallback((e=>{"Escape"===e.key&&u&&u()}),[u]);return t((()=>{if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",_),()=>{"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",_))}}),[_]),e.createElement(e.Fragment,null,"undefined"!=typeof window?o(e.createElement("section",null,e.createElement(a,{returnFocus:!0},e.createElement(i,{theme:W},e.createElement(l,{role:"dialog","aria-modal":"true","aria-label":p},e.createElement(c,{backgroundColor:y,$maxWidth:h,$width:b,$top:w,margin:k,marginHorizontal:x,marginVertical:L,marginTop:v,marginRight:C,marginBottom:j,marginLeft:B,padding:$,paddingHorizontal:z,paddingVertical:F,paddingTop:H,paddingRight:R,paddingBottom:T,paddingLeft:V,$isAnimated:A},f&&u?e.createElement(g,{"aria-label":"close",appearance:"tertiary",onClick:()=>{u()}},e.createElement(d,{faIcon:r})):null,E),e.createElement(s,{$isAnimated:A}))))),document.body):null)}export{p as Modal,p 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 a from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as r}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,b=u.top,E=void 0===b?"1rem":b,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,C=void 0===j?"90%":j,B=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=o.useCallback((function(e){"Escape"===e.key&&h&&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))}}),[P]),o.createElement(o.Fragment,null,"undefined"!=typeof window?n(o.createElement("section",null,o.createElement(a,{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:C,$top:E,margin:B,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:r})):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  /** 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 = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\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  }, [closeByEsc]);\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","modalName","closeFunction","showCloseButton","maxWidth","top","backgroundColor","children","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","isAnimated","foundTheme","useTheme","theme","defaultTheme","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"2eA4CgB,SAAAA,GAAMC,UACpBA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,SACfA,EAAW,QAAOC,IAClBA,EAAM,OAAMC,gBACZA,EAAkB,kBAAiBC,SACnCA,EAAQC,MACRA,EAAQ,MAAKC,OACbA,EAAMC,iBACNA,EAAgBC,eAChBA,EAAcC,UACdA,EAASC,YACTA,EAAWC,aACXA,EAAe,MAAKC,WACpBA,EAAUC,QACVA,EAAU,KAAIC,kBACdA,EAAiBC,gBACjBA,EAAeC,WACfA,EAAUC,aACVA,EAAYC,cACZA,EAAaC,YACbA,EAAWC,WACXA,GAAa,IAEb,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAaC,EAAMC,aACtBC,IACmB,WAAdA,EAAMC,KAAsB9B,GAC9BA,MAGJ,CAACA,IAmBH,OAhBA+B,GAAU,KACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,KACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAAW,CACpD,GACA,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAACY,cAAAG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACpB,MAAOA,GACpBG,EAACY,cAAAM,GACCC,KAAK,SACM,aAAA,oBACC/C,GAEZ4B,EAAAY,cAACQ,EAAO,CACN3C,gBAAiBA,EACN4C,UAAA9C,EACH+C,OAAA3C,EACF4C,KAAA/C,EACNI,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbC,aAAcA,EACdC,WAAYA,EACZC,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAC,GAEZpB,GAAmBD,EAClB2B,gBAACwB,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,KACPrD,GAAe,GAGjB2B,EAACY,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHnD,GAEHsB,EAAAY,cAACkB,EAAU,CAAAC,YAAcrC,QAKjCY,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 = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\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  }, [closeByEsc]);\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","undefined","_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","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","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,OAAWC,IAAAF,EAAA,UACXG,EAAAP,EAAAQ,IAAAA,OAAGF,IAAAC,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQX,EAAAW,SACRC,EAAaZ,EAAAa,MAAbA,OAAQP,IAAAM,EAAA,QACRE,WACAC,EAAgBf,EAAAe,iBAChBC,EAAchB,EAAAgB,eACdC,EAASjB,EAAAiB,UACTC,EAAWlB,EAAAkB,YACXC,EAAoBnB,EAAAoB,aAApBA,OAAed,IAAAa,EAAA,QACfE,eACAC,EAAAtB,EAAAuB,QAAAA,OAAOjB,IAAAgB,EAAG,KAAIA,EACdE,EAAiBxB,EAAAwB,kBACjBC,EAAezB,EAAAyB,gBACfC,EAAU1B,EAAA0B,WACVC,EAAY3B,EAAA2B,aACZC,EAAa5B,EAAA4B,cACbC,EAAW7B,EAAA6B,YACXC,eAAAC,OAAazB,IAAAwB,GAAIA,EAEXE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAaC,EAAMC,aACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBvC,GAC9BA,GAEJ,GACA,CAACA,IAmBH,OAhBAwC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GACzC,CACH,GAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAACY,cAAAG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACrB,MAAOA,GACpBI,EAACY,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCxD,GAEZqC,EAAAY,cAACQ,EAAO,CACNhD,gBAAiBA,EACNiD,UAAAtD,EACHuD,OAAA/C,EACFgD,KAAArD,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,GAEZ5B,GAAmBD,EAClBoC,EAACY,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP9D,MAGFoC,EAACY,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHxD,GAEH2B,EAAAY,cAACkB,EAAU,CAAAC,YAActC,QAKjCa,SAASC,MAEX,KAGV"}

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

@@ -1,60 +1,2 @@
-import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as n}from"../Button/index.js";const a=o.div`
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9999;
-`,e=i`
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`,m=i`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.5;
-  }
-`,r=o(t)`
-  background-color: ${({theme:{colors:o},backgroundColor:i})=>void 0!==i?void 0!==o[i]?o[i]:i:o.backgroundLight};
-  position: relative;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
-  margin: ${({$top:o})=>`${o} auto auto auto`};
-  width: ${({$width:o})=>o};
-  min-height: 10rem;
-  max-width: ${({$maxWidth:o})=>o};
-  z-index: 9999;
-  animation-direction: normal;
-  animation-timing-function: ease-in-out;
-  animation-duration: 0.2s;
-  animation-name: ${({$isAnimated:o})=>o?e:"none"};
-`,d=o(n)`
-  float: right;
-  margin-left: ${({theme:{spacing:{xs:o}}})=>o};
-  font-size: 1.2rem;
-  padding: 0;
-`,s=o.div`
-  background: ${({theme:o})=>o.colors.modalBackdrop};
-  bottom: 0;
-  left: 0;
-  opacity: 0.5;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition:
-    opacity 0.3s,
-    bottom 0s 0.3s;
-  z-index: 100;
-  animation-direction: normal;
-  animation-timing-function: ease-in-out;
-  animation-duration: 0.3s;
-  animation-name: ${({$isAnimated:o})=>o?m:"none"};
-`;export{s as Background,d as CloseButton,r as Content,a as Wrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i,{keyframes as o}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,u=i.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"]))),f=o(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=o(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=i(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 i=n.theme.colors,o=n.backgroundColor;return void 0!==o?void 0!==i[o]?i[o]:o:i.backgroundLight}),(function(n){var i=n.$top;return"".concat(i," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth}),(function(n){return n.$isAnimated?f:"none"})),g=i(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=i.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,u 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, { 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\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","grow","keyframes","fade","Content","Box","theme","colors","backgroundColor","undefined","backgroundLight","$top","$width","$maxWidth","$isAnimated","CloseButton","Button","spacing","xs","Background","modalBackdrop"],"mappings":"mIAKa,MAAAA,EAAUC,EAAOC,GAAG;;;;;;;;EAU3BC,EAAOC,CAAS;;;;;;;;;EAWhBC,EAAOD,CAAS;;;;;;;EASTE,EAAUL,EAAOM,EAO5B;sBACoB,EAAGC,OAASC,UAAUC,0BACpBC,IAApBD,OACgDC,IAA5CF,EAAOC,GACLD,EAAOC,GACPA,EACFD,EAAOG;;;YAGH,EAAGC,UAAW,GAAGA;WAClB,EAAGC,YAAaA;;eAEZ,EAAGC,eAAgBA;;;;;oBAKd,EAAGC,iBAAmBA,EAAcb,EAAO;EAGlDc,EAAchB,EAAOiB,EAEhC;;iBAEe,EACbV,OACEW,SAAWC,UAETA;;;EAKKC,EAAapB,EAAOC,GAG/B;gBACc,EAAGM,WAAYA,EAAMC,OAAOa;;;;;;;;;;;;;;oBAcxB,EAAGN,iBAAmBA,EAAcX,EAAO;"}
+{"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\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,OACgDC,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"}