@cruk/cruk-react-components 6.2.2 → 7.0.0

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var o,e,r,i=t.span(o||(o=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  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\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  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\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 t=n.$hasHintText,o=n.theme;return t?o.spacing.xxs:0},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml},function(n){return n.theme.typography.fontWeightBase}),m=t.span(e||(e=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  color: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  color: ",";\n"])),function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.typography.fontWeightBase},function(n){return n.theme.colors.textMid}),a=t.fieldset(r||(r=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 t=n.$hasError,o=n.theme;return t&&o.colors.textError},function(n){return n.theme.spacing.none});export{m as HintText,i as LegendSpan,a as StyledFieldset};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var t,e,r,i=o.span(t||(t=n(['\n  display: block;\n  color: var(--clr-text-dark, #000);\n  font-size: var(--font-size-m, 1rem);\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: var(--typ-font-weight-labels, 500);\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  min-width: 3em;\n  margin-bottom: ',";\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n  & > * {\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"],['\n  display: block;\n  color: var(--clr-text-dark, #000);\n  font-size: var(--font-size-m, 1rem);\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: var(--typ-font-weight-labels, 500);\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  min-width: 3em;\n  margin-bottom: ',";\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n  & > * {\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"])),function(n){return n.$hasHintText?"var(--spacing-xxs, 0.5rem)":0}),a=o.span(e||(e=n(['\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\n'],['\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\n']))),s=o.fieldset(r||(r=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: var(--spacing-xs, 1rem);\n  }\n  label {\n    border-color: ",";\n    margin-bottom: var(--spacing-none, 0);\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: var(--spacing-xs, 1rem);\n  }\n  label {\n    border-color: ",";\n    margin-bottom: var(--spacing-none, 0);\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"])),function(n){return n.$hasError&&"var(--clr-text-error, #f00)"});export{a as HintText,i as LegendSpan,s 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  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n  & > * {\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const HintText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  display: block;\n  color: ${({ theme }) => theme.colors.textMid};\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","breakpoint","desktopLarge","ml","fontWeightBase","HintText","templateObject_2","fontFamilyBase","textMid","StyledFieldset","fieldset","templateObject_3","xs","$hasError","textError","none"],"mappings":"iHAUO,UAAMA,EAAaC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iCAAA,mBAAA,qBAAA,qBAAA,qBAAA,0CAAA,kEAAA,uBAAA,uCAAA,YAAA,CAGnC,iCAE6C,mBACA,qBACY,qBACM,qBACD,0CAGxB,kEAG2B,uBACjB,uCAGe,cAdtD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,QAAb,EACX,SAACH,GAAc,OAAPA,EAAAC,MAAaG,UAAUC,CAAhB,EACb,SAACL,GAAc,OAAPA,EAAAC,MAAaK,WAAWC,UAAjB,EACf,SAACP,GAAc,OAAPA,EAAAC,MAAaK,WAAWE,gBAAjB,EACf,SAACR,GAAc,OAAPA,EAAAC,MAAaK,WAAWG,eAAjB,EAEb,SAACT,OAAEU,EAAYV,EAAAU,aAAET,EAAKD,EAAAC,MACrC,OAAAS,EAAeT,EAAMU,QAAQC,IAAM,CAAnC,EAGmB,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,WAAWC,YAAjB,EACrB,SAACd,GAAc,OAAPA,EAAAC,MAAaG,UAAUW,EAAhB,EAGb,SAACf,GAAc,OAAPA,EAAAC,MAAaK,WAAWU,cAAjB,GAIrBC,EAAWrB,EAAOC,KAAIqB,IAAAA,EAAAnB,EAAA,CAAA,oBAAA,qBAAA,kCAAA,OAAA,CAAsB,oBACM,qBACA,kCAEjB,SAH7B,SAACC,GAAc,OAAPA,EAAAC,MAAaK,WAAWa,cAAjB,EACf,SAACnB,GAAc,OAAPA,EAAAC,MAAaK,WAAWU,cAAjB,EAErB,SAAChB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,OAAb,GAGbC,EAAiBzB,EAAO0B,SAAQC,IAAAA,EAAAxB,EAAA,CAAA,6MAAA,wCAAA,yBAAA,kEAAA,CAAqB,6MAWd,wCAIX,yBACa,oEALjC,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQa,EAAd,EAGhB,SAACxB,OAAEyB,EAASzB,EAAAyB,UAAExB,EAAKD,EAAAC,MACjC,OAAAwB,GAAaxB,EAAMC,OAAOwB,SAA1B,EACe,SAAC1B,GAAc,OAAPA,EAAAC,MAAaU,QAAQgB,IAAd"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LegendWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\ntype StyledFieldsetProps = {\n  $hasError?: boolean;\n  $hasHintText?: boolean;\n};\n\nexport const LegendSpan = styled.span<{\n  $hasHintText: boolean;\n}>`\n  display: block;\n  color: var(--clr-text-dark, #000);\n  font-size: var(--font-size-m, 1rem);\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: var(--typ-font-weight-labels, 500);\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  min-width: 3em;\n  margin-bottom: ${({ $hasHintText }) =>\n    $hasHintText ? \"var(--spacing-xxs, 0.5rem)\" : 0};\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n  & > * {\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n`;\n\nexport const HintText = styled.span`\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\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: var(--spacing-xs, 1rem);\n  }\n  label {\n    border-color: ${({ $hasError }) =>\n      $hasError && \"var(--clr-text-error, #f00)\"};\n    margin-bottom: var(--spacing-none, 0);\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n`;\n"],"names":["LegendSpan","styled","span","templateObject_1","__makeTemplateObject","_a","$hasHintText","HintText","templateObject_2","StyledFieldset","fieldset","templateObject_3","$hasError"],"mappings":"iHAOO,UAAMA,EAAaC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,yTAAA,sMAAA,CAEnC,yTASiD,wMADhC,SAACC,GAChB,OAD8BA,EAAAC,aACf,6BAA+B,CAA9C,GAWSC,EAAWN,EAAOC,KAAIM,IAAAA,EAAAJ,EAAA,CAAA,2LAAA,CAAA,8LAOtBK,EAAiBR,EAAOS,SAAQC,IAAAA,EAAAP,EAAA,CAAA,yQAAA,8GAAA,CAAqB,yQAelB,gHAD5B,SAACC,GACf,OAD0BA,EAAAO,WACb,6BAAb"}

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

@@ -1,2 +1,2 @@
-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};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{StyledLink as t}from"./styles.js";import{themeColorOrString as a}from"../../utils/themeUtils.js";var l=function(l){var s=l.rel?l.rel:"_blank"===l.target?"noopener noreferrer":"",i=l.as&&"a"!==l.as?void 0:"a",n=l.textHoverColor,p=l.appearance,m=l.ref,f=l.children,d=e(l,["textHoverColor","appearance","ref","children"]),c=n?a(n):void 0;return o.createElement(t,r({},d,{$textHoverColor:c,$appearance:p,rel:s,forwardedAs:i,ref:m}),f)};l.displayName="Link";export{l as Link,l 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  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,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAMN,EAAMM,IACdN,EAAMM,IACW,WAAjBN,EAAMO,OACJ,sBACA,GAGAC,EAAYR,EAAMS,IAAmB,MAAbT,EAAMS,QAAaC,EAAY,IAErDC,EAAuDX,EAAKW,eAA5CC,EAAuCZ,EAAKY,WAAhCC,EAA2Bb,MAAtBc,EAAsBd,EAAKc,SAAdC,EAAIC,EAAKhB,EAAzD,CAAA,iBAAA,aAAA,MAAA,aAEN,OACEiB,EAAAC,cAACC,EAAa,CAAChB,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"}
+{"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\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\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  // 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  const textHoverColorFinal = textHoverColor\n    ? themeColorOrString(textHoverColor)\n    : undefined;\n\n  return (\n    <StyledLink\n      {...rest}\n      $textHoverColor={textHoverColorFinal}\n      $appearance={appearance}\n      rel={rel}\n      forwardedAs={forwardAs}\n      ref={ref}\n    >\n      {children}\n    </StyledLink>\n  );\n};\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","props","rel","target","forwardAs","as","undefined","textHoverColor","appearance","ref","children","rest","__rest","textHoverColorFinal","themeColorOrString","React","createElement","StyledLink","__assign","$appearance","forwardedAs","displayName"],"mappings":"6MAmCO,IAAMA,EAAO,SAACC,GAEnB,IAAMC,EAAMD,EAAMC,IACdD,EAAMC,IACW,WAAjBD,EAAME,OACJ,sBACA,GAGAC,EAAYH,EAAMI,IAAmB,MAAbJ,EAAMI,QAAaC,EAAY,IAErDC,EAAuDN,EAAKM,eAA5CC,EAAuCP,EAAKO,WAAhCC,EAA2BR,MAAtBS,EAAsBT,EAAKS,SAAdC,EAAIC,EAAKX,EAAzD,CAAA,iBAAA,aAAA,MAAA,aAEAY,EAAsBN,EACxBO,EAAmBP,QACnBD,EAEJ,OACES,EAAAC,cAACC,EAAUC,EAAA,CAAA,EACLP,mBACaE,EAAmBM,YACvBX,EACbN,IAAKA,EACLkB,YAAahB,EACbK,IAAKA,IAEJC,EAGP,EAEAV,EAAKqB,YAAc"}

package/lib/src/components/Link/styles.d.ts

@@ -1,13 +1,11 @@
 import { type AnchorHTMLAttributes } from "react";
 import { type TextProps } from "../Text";
-import { type ThemeType } from "../../types";
 type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
-    theme: ThemeType;
     $appearance?: "primary" | "secondary";
     $textHoverColor?: string;
 };
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    textColor?: string;
+    textColor?: typeof import("..").colours[number] | string;
     textAlign?: "left" | "right" | "center" | "justify";
     textSize?: import("..").FontSizeType;
     textWeight?: number | string;

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

@@ -1,2 +1,2 @@
-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};
+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\n  text-decoration: ",";\n  font-family: ",";\n  font-weight: var(--typ-font-weight-links, 700);\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\n  text-decoration: ",";\n  font-family: ",";\n  font-weight: var(--typ-font-weight-links, 700);\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.$appearance;return r&&r&&"primary"===r?"var(--clr-link-secondary,  #e60079)":"var(--clr-link,  #e60079)"},function(n){return"secondary"===n.$appearance?"none":"underline"},function(n){var r=n.$appearance;return"primary"===r||"secondary"===r?"var(--typ-font-family-links, 'Poppins', Arial, sans-serif)":"var(--typ-font-family-base, 'Poppins', Arial, sans-serif)"},function(n){var r=n.$textHoverColor,o=n.$appearance;return r||(o?"var(--clr-link-secondary-hover, #a5005f)":"var(--clr-link-hover, #a5005f)")});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","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":"yJAcO,MAAMA,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,cArFxB,SAACC,OACRC,EAAAD,EAAAE,MACEC,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,EAQiB,SAACT,OAClBO,EAAWP,EAAAO,YAETN,EAAAD,EAAAE,MAAAQ,WAAcC,EAAkBV,EAAAU,mBAAEC,EAAyBX,EAAAW,0BAG7D,MAAgB,YAAhBL,EACIK,EACgB,cAAhBL,EACE,OACAI,CAJN,EAKa,SAACX,OACdO,EAAWP,EAAAO,YAETN,EAAAD,EAAAE,MAAAQ,WAAcG,EAAcZ,EAAAY,eAAEC,EAAeb,EAAAa,gBAG/C,MAAgB,YAAhBP,GAA6C,cAAhBA,EACzBO,EACAD,CAFJ,EAGgB,SAACb,OACjBO,EAAWP,EAAAO,YAEKQ,EAAiBf,EAAAE,MAAAQ,WAAAK,kBAGjC,MAAgB,YAAhBR,GAA6C,cAAhBA,EACzBQ,EACA,KAFJ,EAIY,SAACf,GACb,IAAAO,gBACAL,EAAKF,EAAAE,MAKL,OAHsCF,EAAAE,MAAAG,UAAAD,0BAGVG,EACxB,uDAAAS,OAAuDd,EAAMC,OAAOc,QAAO,gBAC3EC,CAFJ,EAMa,SAAClB,GAAc,OAAPA,EAAAE,MAAaQ,WAAWS,eAAjB,EASnB,SAACnB,OACRC,EAAAD,EAAAE,MACEC,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"}
+{"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\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\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: ${({ $appearance }) =>\n    !$appearance\n      ? \"var(--clr-link,  #e60079)\"\n      : $appearance && $appearance === \"primary\"\n        ? \"var(--clr-link-secondary,  #e60079)\"\n        : \"var(--clr-link,  #e60079)\"};\n\n  text-decoration: ${({ $appearance }) =>\n    $appearance === \"secondary\" ? \"none\" : \"underline\"};\n  font-family: ${({ $appearance }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? \"var(--typ-font-family-links, 'Poppins', Arial, sans-serif)\"\n      : \"var(--typ-font-family-base, 'Poppins', Arial, sans-serif)\"};\n  font-weight: var(--typ-font-weight-links, 700);\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({ $textHoverColor, $appearance }) =>\n      $textHoverColor\n        ? $textHoverColor\n        : !$appearance\n          ? \"var(--clr-link-hover, #a5005f)\"\n          : $appearance && $appearance === \"primary\"\n            ? \"var(--clr-link-secondary-hover, #a5005f)\"\n            : \"var(--clr-link-secondary-hover, #a5005f)\"};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","templateObject_1","__makeTemplateObject","_a","$appearance","$textHoverColor"],"mappings":"+JAWaA,EAAaC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,8LAAA,2BAAA,qBAAA,wLAAA,YAAA,CAAiB,8LAalB,2BAGiB,qBAIa,wLAgBX,cA5B7C,SAACC,GAAE,IAAAC,EAAWD,EAAAC,YACrB,OAACA,GAEGA,GAA+B,YAAhBA,EACb,sCAFF,2BADJ,EAMiB,SAACD,GAClB,MAAgB,cADeA,EAAAC,YACD,OAAS,WAAvC,EACa,SAACD,GAAE,IAAAC,EAAWD,EAAAC,YAC3B,MAAgB,YAAhBA,GAA6C,cAAhBA,EACzB,6DACA,2DAFJ,EAWS,SAACD,OAAEE,EAAeF,EAAAE,gBAAED,EAAWD,EAAAC,YACtC,OAAAC,IAEKD,EAGG,2CAFF,iCAHN"}

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

@@ -1,2 +1,2 @@
-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};
+import e from"react";import n from"./styles.module.css.js";function r(){return e.createElement(e.Fragment,null,e.createElement("p",{className:n["screen-reader-only"],role:"alert"},"Loading"),e.createElement("div",{className:n.spinner,"aria-hidden":"true"},e.createElement("span",null),e.createElement("span",null),e.createElement("span",null)))}export{r as Loader,r 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","__assign","defaultTheme","React","createElement","ThemeProvider","Fragment","ScreenReaderOnly","role","Spinner"],"mappings":"+QAWgBA,IACd,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,EAAAC,cAACC,EAAa,CAACL,MAAOA,GACpBG,EAAAC,cAAAD,EAAAG,SAAA,KACEH,EAAAC,cAACG,EAAgB,CAACC,KAAK,SAAO,WAC9BL,EAAAC,cAACK,EAAO,KACNN,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,QAKV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./styles.module.css\";\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  return (\n    <>\n      <p className={styles[\"screen-reader-only\"]} role=\"alert\">\n        Loading\n      </p>\n      <div className={styles[\"spinner\"]} aria-hidden=\"true\">\n        <span />\n        <span />\n        <span />\n      </div>\n    </>\n  );\n}\n\nexport default Loader;\n"],"names":["Loader","React","createElement","Fragment","className","styles","role"],"mappings":"oEAOgBA,IACd,OACEC,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAAA,IAAA,CAAGE,UAAWC,EAAO,sBAAuBC,KAAK,SAAO,WAGxDL,EAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAgB,sBAAe,QAC7CJ,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,OAIR"}

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

@@ -0,0 +1,2 @@
+var e={"screen-reader-only":"styles-module_screen-reader-only__rkMmb",spinner:"styles-module_spinner__FNAgO"};export{e as default};
+//# sourceMappingURL=styles.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/src/components/Modal/TestModalWithContent.d.ts

@@ -1,2 +1,4 @@
 import React from "react";
-export declare function TestModalWithContent(): React.JSX.Element;
+export declare function TestModalWithContent({ themeName }: {
+    themeName: string;
+}): React.JSX.Element;

package/lib/src/components/Modal/TestModalWithState.d.ts

@@ -1,2 +1,4 @@
 import React from "react";
-export declare function TestModalWithState(): React.JSX.Element;
+export declare function TestModalWithState({ themeName }: {
+    themeName: string;
+}): React.JSX.Element;

package/lib/src/components/Modal/index.d.ts

@@ -9,6 +9,7 @@ export type ModalProps = SpacingProps & {
     showCloseButton?: boolean;
     /** set max width of modal */
     maxWidth?: string;
+    themeName: string;
     /** set space from top of view port that modal appears */
     top?: string;
     /** background color of dialogue */
@@ -30,5 +31,5 @@ export type ModalProps = SpacingProps & {
  * ## Accessibility
  * - 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.
  */
-export declare function Modal({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, isAnimated, }: ModalProps): React.JSX.Element;
+export declare function Modal({ modalName, closeFunction, showCloseButton, themeName, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, isAnimated, }: ModalProps): React.JSX.Element;
 export default Modal;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useEffect as 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};
+import e,{useEffect as o}from"react";import{createPortal as t}from"react-dom";import n from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as a}from"../IconFa/index.js";import{Wrapper as d,Content as r,CloseButton as m,Background as l}from"./styles.js";import{themeColorOrString as c}from"../../utils/themeUtils.js";function g(g){var f=g.modalName,s=g.closeFunction,p=g.showCloseButton,u=g.themeName,h=g.maxWidth,v=void 0===h?"500px":h,w=g.top,y=void 0===w?"1rem":w,E=g.backgroundColor,b=g.children,k=g.width,x=void 0===k?"90%":k,C=g.margin,L=g.marginHorizontal,j=g.marginVertical,B=g.marginTop,$=g.marginRight,z=g.marginBottom,F=void 0===z?"xxl":z,H=g.marginLeft,R=g.padding,T=void 0===R?"xs":R,V=g.paddingHorizontal,A=g.paddingVertical,I=g.paddingTop,N=g.paddingRight,W=g.paddingBottom,_=g.paddingLeft,U=g.isAnimated,q=void 0===U||U,D=E?c(E):"var(--background-light, #ffffff)",G=e.useCallback(function(e){"Escape"===e.key&&s&&s()},[s]);return o(function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",G),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",G))}},[G]),e.createElement(e.Fragment,null,"undefined"!=typeof window?t(e.createElement("section",{"data-theme":u},e.createElement(n,{returnFocus:!0},e.createElement(d,{role:"dialog","aria-modal":"true","aria-label":f},e.createElement(r,{backgroundColor:D,$maxWidth:v,$width:x,$top:y,margin:C,marginHorizontal:L,marginVertical:j,marginTop:B,marginRight:$,marginBottom:F,marginLeft:H,padding:T,paddingHorizontal:V,paddingVertical:A,paddingTop:I,paddingRight:N,paddingBottom:W,paddingLeft:_,$isAnimated:q},p&&s?e.createElement(m,{"aria-label":"close",appearance:"tertiary",onClick:function(){s()}},e.createElement(a,{faIcon:i})):null,b),e.createElement(l,{$isAnimated:q})))),document.body):null)}export{g as Modal,g 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","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_h","isAnimated","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","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,EAAAJ,EAAAK,SAAAA,OAAQ,IAAAD,EAAG,UACXE,EAAAN,EAAAO,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAAX,EAAAY,MAAAA,OAAK,IAAAD,EAAG,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAAlB,EAAAmB,aAAAA,OAAY,IAAAD,EAAG,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBtC,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAuC,EAAU,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,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAAAY,cAACG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACrB,MAAOA,GACpBI,EAAAY,cAACM,GACCC,KAAK,SAAQ,aACF,oBACCvD,GAEZoC,EAAAY,cAACQ,EAAO,CACNhD,gBAAiBA,EAAeiD,UACrBrD,EAAQsD,OACX/C,EAAKgD,KACPrD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClBmC,EAAAY,cAACY,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,WACP7D,GACF,GAEAmC,EAAAY,cAACe,EAAM,CAACC,OAAQC,KAEhB,KACHxD,GAEH2B,EAAAY,cAACkB,EAAU,CAAAC,YAActC,QAKjCa,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 FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\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  themeName: 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  themeName,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor,\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 backgroundColourValue = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : \"var(--background-light, #ffffff)\";\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 data-theme={themeName}>\n              <FocusLock returnFocus>\n                <Wrapper role=\"dialog\" aria-modal=\"true\" aria-label={modalName}>\n                  <Content\n                    backgroundColor={backgroundColourValue}\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              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","themeName","_b","maxWidth","_c","top","backgroundColor","children","_d","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_e","marginBottom","marginLeft","_f","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_g","isAnimated","backgroundColourValue","themeColorOrString","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"ybA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAASJ,EAAAI,UACTC,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,UACXE,EAAAP,EAAAQ,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,EAAeT,EAAAS,gBACfC,EAAQV,EAAAU,SACRC,UAAAC,aAAQ,MAAKD,EACbE,EAAMb,EAAAa,OACNC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAAlB,EAAAmB,aAAAA,OAAY,IAAAD,EAAG,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAwBtB,EAC1BuB,EAAmBvB,GACnB,mCAEEwB,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBnC,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAoC,EAAU,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,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,CAAA,aAAqB1C,GACnB8B,EAAAY,cAACG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,GAAQC,KAAK,SAAQ,aAAY,oBAAmBnD,GACnDiC,EAAAY,cAACO,EAAO,CACN5C,gBAAiBsB,EAAqBuB,UAC3BhD,EAAQiD,OACX3C,EAAK4C,KACPhD,EACNK,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClBgC,EAAAY,cAACW,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,WACPzD,GACF,GAEAgC,EAAAY,cAACc,EAAM,CAACC,OAAQC,KAEhB,KACHpD,GAEHwB,EAAAY,cAACiB,EAAU,CAAAC,YAAclC,OAI/BU,SAASC,MAEX,KAGV"}

package/lib/src/components/Modal/styles.d.ts

@@ -1,7 +1,6 @@
-import { type ThemeType } from "../../types";
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    backgroundColor?: string;
+    backgroundColor?: string | import("..").ColourVariableType;
     ref?: import("react").Ref<HTMLDivElement>;
     children?: import("react").ReactNode;
     as?: import("react").ElementType;
@@ -11,9 +10,8 @@ export declare const Content: import("styled-components/dist/types").IStyledComp
     $width: string;
     $maxWidth: string;
     $isAnimated?: boolean;
-    theme: ThemeType;
 }>> & string & Omit<({ ...props }: import("../Box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLElement> & {
     appearance?: import("..").ButtonAppearanceType;
     full?: boolean;
     href?: string;
@@ -23,10 +21,7 @@ export declare const CloseButton: import("styled-components/dist/types").IStyled
     isIconButton?: boolean;
     ref?: import("react").Ref<HTMLElement>;
     children?: import("react").ReactNode;
-}, {
-    theme: ThemeType;
-}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const Background: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
     $isAnimated?: boolean;
 }>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as a}from"../Button/index.js";var r,e,m,d,s,c,f=o.div(r||(r=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),u=i(e||(e=n(["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"],["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"]))),p=i(m||(m=n(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"],["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"]))),g=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  transform-origin: top center;\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  transform-origin: top center;\n  animation-name: ",";\n"])),function(n){var o=n.theme.colors,i=n.backgroundColor;return void 0!==i?void 0!==o[i]?o[i]:i:o.backgroundLight},function(n){var o=n.$top;return"".concat(o," auto auto auto")},function(n){return n.$width},function(n){return n.$maxWidth},function(n){return n.$isAnimated?u:"none"}),l=o(a)(s||(s=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),function(n){return n.theme.spacing.xs}),h=o.div(c||(c=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"])),function(n){return n.theme.colors.modalBackdrop},function(n){return n.$isAnimated?p:"none"});export{h as Background,l as CloseButton,g as Content,f 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,p=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"]))),u=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  transform-origin: top center;\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  transform-origin: top center;\n  animation-name: ",";\n"])),function(n){return n.$backgroundColor},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: var(--spacing-xs, 1rem);\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: var(--spacing-xs, 1rem);\n  font-size: 1.2rem;\n  padding: 0;\n"]))),x=i.div(c||(c=n(["\n  background: var(--clr-modal-backdrop, #000);\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: var(--clr-modal-backdrop, #000);\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.$isAnimated?u:"none"});export{x as Background,g as CloseButton,l as Content,p 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  transform-origin: top center;\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":"mNAKO,gBAAMA,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,mLAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,mLAM2B,SAjBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,OACgDC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,EAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAI,kBAAP,EACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,EAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,EAMd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,GAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,8CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,GAKKC,EAAa5B,EAAOC,IAAG4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAGlC,mBACuD,+RAca,SAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,EAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\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}>`\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\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  transform-origin: top center;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)`\n  float: right;\n  margin-left: var(--spacing-xs, 1rem);\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  $isAnimated?: boolean;\n}>`\n  background: var(--clr-modal-backdrop, #000);\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","$backgroundColor","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","Background","templateObject_6"],"mappings":"mNAIO,gBAAMA,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,mLAAA,OAAA,CAMhC,yBAC8D,qFAGd,eACjB,yCAEU,mLAM2B,SAZhD,SAACS,GAAyB,OAAPA,EAAAC,gBAAO,EAGpC,SAACD,GAAE,IAAAE,EAAIF,EAAAE,KAAO,MAAA,GAAAC,OAAGD,EAAI,kBAAP,EACf,SAACF,GAAe,OAAPA,EAAAI,MAAO,EAEZ,SAACJ,GAAkB,OAAPA,EAAAK,SAAO,EAMd,SAACL,GAAoB,OAAPA,EAAAM,YAAsBd,EAAO,MAAtB,GAG5Be,EAAcnB,EAAOoB,EAAPpB,CAAcqB,IAAAA,EAAAlB,EAAA,CAAA,qGAAA,CAAA,wGAO5BmB,EAAatB,EAAOC,IAAGsB,IAAAA,EAAApB,EAAA,CAAA,8UAAA,OAAA,CAElC,8UAeoE,SAAlD,SAACS,GAAoB,OAAPA,EAAAM,YAAsBX,EAAO,MAAtB"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{PagerWrapper as l,PagerList as r,PagerItem as o,PagerLink as i}from"./styles.js";function s(s){var m=s.current,d=s.items,u=s.hideLast,p=s.pagerCallback,f=s.perPage,E=s.searchParam,v=void 0===E?"page":E,b=s.children,h=s.id,k=a(),y=e(e({},n),k),x=f>0?f:1,g=Math.ceil(d/x)||1,P=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(v?"".concat(v,"=").concat(e):""),onClick:function(t){t.preventDefault(),p(e)}}};return t.createElement(c,{theme:y},d>f&&t.createElement(l,null,t.createElement(r,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({"data-cta":h?"".concat(h,"-prev"):null,name:"Prev","aria-disabled":1===m},1===m&&{tabIndex:-1},1!==m&&P(m-1),{$disabled:1===m}),"Prev")),function(a,c){for(var n=[],l=[],r=1;r<=c;r+=1)n.push(t.createElement(o,{key:r},t.createElement(i,e({"data-cta":h?"".concat(h,"-").concat(r):null,$active:r===a},P(r),{"aria-label":"page ".concat(r," of ").concat(c)}),r)));var s=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return l=n.slice(0,c),c>7&&(l=a<=4?u?n.slice(0,7):n.slice(0,5).concat(m):a>c-4?s.concat(n.slice(-5)):u?s.concat(n.slice(a-3,a+2)):s.concat(n.slice(a-2,a+1)).concat(m)),l}(m,g),t.createElement(o,{key:"Next"},t.createElement(i,e({"data-cta":h?"".concat(h,"-next"):null,name:"Next","aria-disabled":m===g},m===g&&{tabIndex:-1},m!==g&&P(m+1),{$disabled:m===g}),"Next"))),b))}export{s as Pagination,s as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{PagerWrapper as a,PagerList as c,PagerItem as n,PagerLink as l}from"./styles.js";function r(r){var o=r.current,i=r.items,s=r.hideLast,m=r.pagerCallback,d=r.perPage,u=r.searchParam,f=void 0===u?"page":u,p=r.children,E=r.id,v=d>0?d:1,b=Math.ceil(i/v)||1,h=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(f?"".concat(f,"=").concat(e):""),onClick:function(t){t.preventDefault(),m(e)}}};return t.createElement(t.Fragment,null,i>d&&t.createElement(a,null,t.createElement(c,null,t.createElement(n,{key:"Prev"},t.createElement(l,e({"data-cta":E?"".concat(E,"-prev"):null,name:"Prev","aria-disabled":1===o},1===o&&{tabIndex:-1},1!==o&&h(o-1),{$disabled:1===o}),"Prev")),function(a,c){for(var r=[],o=[],i=1;i<=c;i+=1)r.push(t.createElement(n,{key:i},t.createElement(l,e({"data-cta":E?"".concat(E,"-").concat(i):null,$active:i===a},h(i),{"aria-label":"page ".concat(i," of ").concat(c)}),i)));var m=r.slice(0,1).concat(t.createElement(n,{key:"first"},t.createElement("span",null,"..."))),d=r.slice(r.length-1).concat(t.createElement(n,{key:"last"},t.createElement("span",null,"..."))).reverse();return o=r.slice(0,c),c>7&&(o=a<=4?s?r.slice(0,7):r.slice(0,5).concat(d):a>c-4?m.concat(r.slice(-5)):s?m.concat(r.slice(a-3,a+2)):m.concat(r.slice(a-2,a+1)).concat(d)),o}(o,b),t.createElement(n,{key:"Next"},t.createElement(l,e({"data-cta":E?"".concat(E,"-next"):null,name:"Next","aria-disabled":o===b},o===b&&{tabIndex:-1},o!==b&&h(o+1),{$disabled:o===b}),"Next"))),p))}export{r as Pagination,r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","foundTheme","useTheme","theme","__assign","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"kSAkCM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAeV,EAAU,EAAIA,EAAU,EACvCW,EAAaC,KAAKC,KAAKhB,EAAQa,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAA,CACpCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAAE,KAAAH,OACpEf,EAAc,GAAAe,OAAGf,EAAW,KAAAe,OAAIF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFxB,EAAcgB,EAChB,EAPoC,EAyDtC,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBV,EAAQG,GACPwB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,SAAU,KAC9B4B,KAAK,OAAM,gBACgB,IAAZpC,GACE,IAAZA,GAAiB,CAAEqC,UAAU,GACjB,IAAZrC,GAAiBkB,EAAUlB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACsC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAC,cAACI,EAAS,CAACC,IAAKf,GACdS,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,KAAAa,OAAIF,GAAW,KAAIwB,QAC9BxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAAE,OAAQF,EAAM,QAAAE,OAAOkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAC,cAACI,EAAS,CAACC,IAAI,SACbN,EAAAC,cAAA,OAAA,KAAA,SAGEiB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHmB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJpC,EAAWsC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAM,IACxB3C,EACE0C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACT,CAmBWQ,CAAYjD,EAASe,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,SAAU,KAC9B4B,KAAK,OAAM,gBACIpC,IAAYe,GACtBf,IAAYe,GAAc,CAAEsB,UAAU,GACtCrC,IAAYe,GAAcG,EAAUlB,EAAU,GAAG,CAAAkD,UAC3ClD,IAAYe,IAAU,UAMtCR,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","PagerWrapper","createElement","PagerList","PagerItem","key","PagerLink","__assign","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"iLA+BM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAeL,EAAU,EAAIA,EAAU,EACvCM,EAAaC,KAAKC,KAAKX,EAAQQ,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAA,CACpCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAAE,KAAAH,OACpEV,EAAc,GAAAU,OAAGV,EAAW,KAAAU,OAAIF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFnB,EAAcW,EAChB,EAPoC,EAyDtC,OACES,gCACGtB,EAAQG,GACPmB,gBAACC,EAAY,KACXD,EAAAE,cAACC,EAAS,KACRH,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAC9BuB,KAAK,OAAM,gBACgB,IAAZ/B,GACE,IAAZA,GAAiB,CAAEgC,UAAU,GACjB,IAAZhC,GAAiBa,EAAUb,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACiC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAE,cAACE,EAAS,CAACC,IAAKd,GACdS,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,KAAAQ,OAAIF,GAAW,KAAIwB,QAC9BxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAAE,OAAQF,EAAM,QAAAE,OAAOkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAE,cAACE,EAAS,CAACC,IAAI,SACbL,EAAAE,cAAA,OAAA,KAAA,SAGEgB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAAA,OAAA,KAAA,SAGHkB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJ/B,EAAWiC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAM,IACxBtC,EACEqC,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACT,CAmBWQ,CAAY5C,EAASU,GACtBa,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAC9BuB,KAAK,OAAM,gBACI/B,IAAYU,GACtBV,IAAYU,GAAc,CAAEsB,UAAU,GACtChC,IAAYU,GAAcG,EAAUb,EAAU,GAAG,CAAA6C,UAC3C7C,IAAYU,IAAU,UAMtCH,GAKX"}

package/lib/src/components/Pagination/styles.d.ts

@@ -1,12 +1,8 @@
-import { type ThemeType } from "../../types";
 export declare const PagerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PagerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const PagerLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
     name?: string;
-    theme: ThemeType;
     $active?: boolean;
     $disabled?: boolean;
 }>> & string;
-export declare const PagerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const PagerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var t,r,i,a,d,c,l,s=o.div(t||(t=n(["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"],["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"]))),u=o.ul(r||(r=n(["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"],["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"]))),p=o.a(c||(c=n(["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"],["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"])),function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.fontSizes.s},function(n){return n.theme.colors.textLight},function(n){return n.theme.colors.paginationBackground},function(n){return n.theme.spacing.xxs},function(o){var t=o.$active,r=o.theme;return t&&e(i||(i=n(["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "])),r.colors.textDark,r.colors.paginationActive,r.colors.paginationActive)},function(o){var t=o.name,r=o.theme,i=o.$disabled;return("Prev"===t||"Next"===t)&&e(a||(a=n(["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "])),i?r.colors.disabled:r.colors.paginationText)},function(o){var t=o.theme;return o.$disabled&&e(d||(d=n(["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "])),t.colors.disabled,t.colors.disabled)}),b=o.li(l||(l=n(["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"],["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"])),function(n){return n.theme.breakpoint.mobile},function(n){return n.theme.breakpoint.mobile});export{b as PagerItem,p as PagerLink,u as PagerList,s as PagerWrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e,{css as o}from"styled-components";var r,i,t,a,d,c,l,s=e.div(r||(r=n(["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"],["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"]))),p=e.ul(i||(i=n(["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"],["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"]))),v=e.a(c||(c=n(['\n  font-weight: normal;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-size: var(--font-size-s, 0.875rem);\n  color: var(--clr-text-light, #fff);\n  background-color: var(--clr-pagination-background, #00007e);\n  cursor: pointer;\n  border-radius: 0;\n  margin: var(--spacing-xxs, 0.5rem);\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ',"\n\n  ","\n\n  ","\n"],['\n  font-weight: normal;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-size: var(--font-size-s, 0.875rem);\n  color: var(--clr-text-light, #fff);\n  background-color: var(--clr-pagination-background, #00007e);\n  cursor: pointer;\n  border-radius: 0;\n  margin: var(--spacing-xxs, 0.5rem);\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ',"\n\n  ","\n\n  ","\n"])),function(e){return e.$active&&o(t||(t=n(["\n      color: var(--clr-text-dark, #000);\n      background-color: var(--clr-pagination-active, #e6e6e6);\n      cursor: default;\n      &:hover {\n        background-color: var(--clr-pagination-active, #e6e6e6);\n        text-decoration: none;\n      }\n    "],["\n      color: var(--clr-text-dark, #000);\n      background-color: var(--clr-pagination-active, #e6e6e6);\n      cursor: default;\n      &:hover {\n        background-color: var(--clr-pagination-active, #e6e6e6);\n        text-decoration: none;\n      }\n    "])))},function(e){var r=e.name,i=e.$disabled;return("Prev"===r||"Next"===r)&&o(a||(a=n(["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "])),i?"var(--clr-disabled, #e6e6e6)":"var(--clr-pagination-text, #00007e)")},function(e){return e.$disabled&&o(d||(d=n(["\n      color: var(--clr-disabled, #e6e6e6);\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: var(--clr-disabled, #e6e6e6);\n        text-decoration: none;\n      }\n    "],["\n      color: var(--clr-disabled, #e6e6e6);\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: var(--clr-disabled, #e6e6e6);\n        text-decoration: none;\n      }\n    "])))}),u=e.li(l||(l=n(["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: 576px) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: var(--breakpoint-mobile, 576px);\n  }\n"],["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: 576px) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: var(--breakpoint-mobile, 576px);\n  }\n"])));export{u as PagerItem,v as PagerLink,p as PagerList,s as PagerWrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  theme: ThemeType;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => theme.spacing.xxs};\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active, theme }) =>\n    $active &&\n    css`\n      color: ${theme.colors.textDark};\n      background-color: ${theme.colors.paginationActive};\n      cursor: default;\n      &:hover {\n        background-color: ${theme.colors.paginationActive};\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, theme, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled ? theme.colors.disabled : theme.colors.paginationText};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ theme, $disabled }) =>\n    $disabled &&\n    css`\n      color: $ ${theme.colors.disabled};\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ${theme.colors.disabled};\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li<{ theme: ThemeType }>`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ${(props) => props.theme.breakpoint.mobile};\n  }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","templateObject_3","textDark","paginationActive","name","$disabled","templateObject_4","disabled","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAGO,kBAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAACC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAK/B,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,QA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,EACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,EACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,EACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,EAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,EAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,EAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,EAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,GAgBSG,EAAYhC,EAAOiC,GAAEC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAsB,2GAMO,oKASH,cATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAvB,EASd,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAvB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n  font-size: var(--font-size-s, 0.875rem);\n  color: var(--clr-text-light, #fff);\n  background-color: var(--clr-pagination-background, #00007e);\n  cursor: pointer;\n  border-radius: 0;\n  margin: var(--spacing-xxs, 0.5rem);\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active }) =>\n    $active &&\n    css`\n      color: var(--clr-text-dark, #000);\n      background-color: var(--clr-pagination-active, #e6e6e6);\n      cursor: default;\n      &:hover {\n        background-color: var(--clr-pagination-active, #e6e6e6);\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled\n        ? \"var(--clr-disabled, #e6e6e6)\"\n        : \"var(--clr-pagination-text, #00007e)\"};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      color: var(--clr-disabled, #e6e6e6);\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: var(--clr-disabled, #e6e6e6);\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: 576px) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: var(--breakpoint-mobile, 576px);\n  }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","$active","css","templateObject_3","name","$disabled","templateObject_4","templateObject_5","PagerItem","li","templateObject_7"],"mappings":"2HAEO,kBAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAACC,IAAAA,EAAAN,EAAA,CAAA,+jBAAA,SAAA,SAAA,MAAA,CAI/B,+jBAmCG,SAqBA,SAgBA,QA/CD,SAACO,GACD,OADUA,EAAAC,SAEVC,EAAGC,IAAAA,EAAAV,EAAA,CAAA,wQAAA,CAAA,0QADH,EAWA,SAACO,OAAEI,EAAIJ,EAAAI,KAAEC,EAASL,EAAAK,UAClB,OAAU,SAATD,GAA4B,SAATA,IACpBF,EAAGI,IAAAA,EAAAb,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBAGwC,gVAFhCY,EACL,+BACA,sCAJN,EAoBA,SAACL,GACD,OADYA,EAAAK,WAEZH,EAAGK,IAAAA,EAAAd,EAAA,CAAA,sSAAA,CAAA,wSADH,GAgBSe,EAAYlB,EAAOmB,GAAEC,IAAAA,EAAAjB,EAAA,CAAA,yTAAA,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(children, (child) =>\n          React.cloneElement(\n            child as DetailedReactHTMLElement<object, HTMLElement>,\n            {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            },\n          ),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"qaAuCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAI,IAAAD,GAAQA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAC5BI,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAS,WAAM,OAAAN,GAAgBD,EAAhB,EACfQ,EAAe,WAAM,OAAAP,GAAe,EAAf,EAGrBQ,EAAsB,SAACC,GACrBd,EAAOe,UAAYf,EAAOe,QAAQC,SAASF,EAAEG,SACjDL,GAEJ,EAyBA,OAvBAM,EACE,WACEN,GACF,EACA,CACEO,WAAY,CAAC,WAEf,IAGFC,EAAU,WACJ9B,GACFA,EAAsBc,EAE1B,EAAG,CAACA,EAAad,IAEjB+B,EAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC7D,CACF,EAAG,IAGDY,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACpBiB,EAAAC,cAACE,SAAsB7B,EAAI8B,KAAQhC,EAAKiC,IAAK9B,GAC1CyB,EAAMM,SAASC,IAAIzC,EAAU,SAAC0C,GAC7B,OAAAR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,UALrB,GASDA,EACCqB,EAAAC,cAACU,aACY3C,GAAY,OAAM4C,UAClB7C,GAAY,iBACZE,GAAY,MACvBc,MAAOA,EACP8B,KAAK,SAAQ,aACD3C,eACAS,GAEXR,GAED,MAIZ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <PopOverWrapper $full={full} $css={css} ref={popRef}>\n      {React.Children.map(children, (child) =>\n        React.cloneElement(\n          child as DetailedReactHTMLElement<object, HTMLElement>,\n          {\n            onClick: toggle,\n            \"aria-expanded\": showPopOver,\n            \"aria-haspopup\": \"dialog\",\n          },\n        ),\n      )}\n      {showPopOver ? (\n        <PopOverModal\n          $maxWidth={maxWidth || \"none\"}\n          $minWidth={minWidth || \"auto\"}\n          $position={position || \"top\"}\n          role=\"dialog\"\n          aria-label={modalLabel}\n          aria-modal={showPopOver}\n        >\n          {modalContent}\n        </PopOverModal>\n      ) : null}\n    </PopOverWrapper>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","PopOverWrapper","$full","ref","Children","map","child","cloneElement","onClick","PopOverModal","$maxWidth","$position","role"],"mappings":"gPAqCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAI,IAAAD,GAAQA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,EAAS,WAAM,OAAAD,GAAgBD,EAAhB,EACfG,EAAe,WAAM,OAAAF,GAAe,EAAf,EAGrBG,EAAsB,SAACC,GACrBT,EAAOU,UAAYV,EAAOU,QAAQC,SAASF,EAAEG,SACjDL,GAEJ,EAyBA,OAvBAM,EACE,WACEN,GACF,EACA,CACEO,WAAY,CAAC,WAEf,IAGFC,EAAU,WACJzB,GACFA,EAAsBc,EAE1B,EAAG,CAACA,EAAad,IAEjB0B,EAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC7D,CACF,EAAG,IAGDY,EAAAC,cAACC,EAAc,CAAAC,MAAQxB,OAAYF,EAAK2B,IAAKxB,GAC1CoB,EAAMK,SAASC,IAAInC,EAAU,SAACoC,GAC7B,OAAAP,EAAMQ,aACJD,EACA,CACEE,QAASvB,EACT,gBAAiBF,EACjB,gBAAiB,UALrB,GASDA,EACCgB,EAAAC,cAACS,EAAY,CAAAC,UACAtC,GAAY,iBACZD,GAAY,OAAMwC,UAClBtC,GAAY,MACvBuC,KAAK,SAAQ,aACDtC,EAAU,aACVS,GAEXR,GAED,KAGV"}

package/lib/src/components/PopOver/styles.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeType, type PopOverPositionType } from "../../types";
+import { type PopOverPositionType } from "../../types";
 export declare const PopOverWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $full: boolean;
     $css?: string;
@@ -7,5 +7,4 @@ export declare const PopOverModal: import("styled-components/dist/types").IStyle
     $position: PopOverPositionType;
     $maxWidth: string;
     $minWidth: string;
-    theme?: ThemeType;
 }>> & string;