@cruk/cruk-react-components 5.0.6 → 5.0.8

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

package/lib/{components → src/components}/Loader/Loader.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Loader from ".";
 declare const _default: {
     title: string;

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

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

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

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

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

package/lib/{components → src/components}/Modal/Modal.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Modal from ".";
 declare const _default: {
     title: string;

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 r from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{Wrapper as c,Content as s,CloseButton as g,Background as p}from"./styles.js";function u(u){var f=u.modalName,h=u.closeFunction,v=u.showCloseButton,w=u.maxWidth,y=void 0===w?"500px":w,E=u.top,b=void 0===E?"1rem":E,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,B=void 0===j?"90%":j,C=u.margin,$=u.marginHorizontal,z=u.marginVertical,F=u.marginTop,H=u.marginRight,R=u.marginBottom,T=void 0===R?"xxl":R,V=u.marginLeft,A=u.padding,_=void 0===A?"xs":A,I=u.paddingHorizontal,W=u.paddingVertical,N=u.paddingTop,q=u.paddingRight,D=u.paddingBottom,G=u.paddingLeft,J=u.isAnimated,K=void 0===J||J,M=i(),O=e(e({},l),M),P=function(e){"Escape"===e.key&&h&&h()};return t((function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",P),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",P))}}),[]),o.createElement(o.Fragment,null,"undefined"!=typeof window?n(o.createElement("section",null,o.createElement(r,{returnFocus:!0},o.createElement(d,{theme:O},o.createElement(c,{role:"dialog","aria-modal":"true","aria-label":f},o.createElement(s,{backgroundColor:x,$maxWidth:y,$width:B,$top:b,margin:C,marginHorizontal:$,marginVertical:z,marginTop:F,marginRight:H,marginBottom:T,marginLeft:V,padding:_,paddingHorizontal:I,paddingVertical:W,paddingTop:N,paddingRight:q,paddingBottom:D,paddingLeft:G,$isAnimated:K},v&&h?o.createElement(g,{"aria-label":"close",appearance:"tertiary",onClick:function(){h()}},o.createElement(m,{faIcon:a})):null,L),o.createElement(p,{$isAnimated:K}))))),document.body):null)}export{u as Modal,u as default};
+import e,{useEffect as t}from"react";import{createPortal as o}from"react-dom";import{useTheme as n,ThemeProvider as i}from"styled-components";import a from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as d}from"../IconFa/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Wrapper as l,Content as c,CloseButton as g,Background as s}from"./styles.js";function p({modalName:p,closeFunction:u,showCloseButton:f,maxWidth:h="500px",top:w="1rem",backgroundColor:y="backgroundLight",children:E,width:b="90%",margin:k,marginHorizontal:x,marginVertical:L,marginTop:v,marginRight:C,marginBottom:j="xxl",marginLeft:B,padding:$="xs",paddingHorizontal:z,paddingVertical:F,paddingTop:H,paddingRight:R,paddingBottom:T,paddingLeft:V,isAnimated:A=!0}){const I=n(),W={...m,...I},_=e.useCallback((e=>{"Escape"===e.key&&u&&u()}),[u]);return t((()=>{if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",_),()=>{"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",_))}}),[_]),e.createElement(e.Fragment,null,"undefined"!=typeof window?o(e.createElement("section",null,e.createElement(a,{returnFocus:!0},e.createElement(i,{theme:W},e.createElement(l,{role:"dialog","aria-modal":"true","aria-label":p},e.createElement(c,{backgroundColor:y,$maxWidth:h,$width:b,$top:w,margin:k,marginHorizontal:x,marginVertical:L,marginTop:v,marginRight:C,marginBottom:j,marginLeft:B,padding:$,paddingHorizontal:z,paddingVertical:F,paddingTop:H,paddingRight:R,paddingBottom:T,paddingLeft:V,$isAnimated:A},f&&u?e.createElement(g,{"aria-label":"close",appearance:"tertiary",onClick:()=>{u()}},e.createElement(d,{faIcon:r})):null,E),e.createElement(s,{$isAnimated:A}))))),document.body):null)}export{p as Modal,p as default};
 //# 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 = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\" && !!closeFunction) {\n      closeFunction();\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, []);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                      $isAnimated={isAnimated}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background $isAnimated={isAnimated} />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_h","isAnimated","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","React","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"+iBA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAAkBJ,EAAAK,SAAlBA,OAAW,IAAAD,EAAA,UACXE,EAAAN,EAAAO,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAaX,EAAAY,MAAbA,OAAQ,IAAAD,EAAA,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAoBlB,EAAAmB,aAApBA,OAAe,IAAAD,EAAA,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAa,IAAAD,GAAIA,EAEXE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAa,SAACC,GACA,WAAdA,EAAMC,KAAsBpC,GAC9BA,GAEH,EAkBD,OAhBAqC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWT,GAE9B,WACiB,oBAAXI,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWV,GACzC,CACF,GAAE,IAGDW,EAAAC,cAAAD,EAAAE,SAAA,KACqB,oBAAXT,OACJU,EACEH,EAAAC,cAAA,UAAA,KACED,EAACC,cAAAG,GAAUC,aAAW,GACpBL,EAAAC,cAACK,EAAa,CAACpB,MAAOA,GACpBc,EAACC,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCtD,GAEZ8C,EAAAC,cAACQ,EAAO,CACN/C,gBAAiBA,EACNgD,UAAApD,EACHqD,OAAA9C,EACF+C,KAAApD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClB6C,EAACC,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP5D,MAGF6C,EAACC,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHvD,GAEHqC,EAAAC,cAACkB,EAAU,CAAAC,YAAcrC,QAKjCW,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  isAnimated = true,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                      $isAnimated={isAnimated}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background $isAnimated={isAnimated} />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","modalName","closeFunction","showCloseButton","maxWidth","top","backgroundColor","children","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","isAnimated","foundTheme","useTheme","theme","defaultTheme","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"2eA4CgB,SAAAA,GAAMC,UACpBA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,SACfA,EAAW,QAAOC,IAClBA,EAAM,OAAMC,gBACZA,EAAkB,kBAAiBC,SACnCA,EAAQC,MACRA,EAAQ,MAAKC,OACbA,EAAMC,iBACNA,EAAgBC,eAChBA,EAAcC,UACdA,EAASC,YACTA,EAAWC,aACXA,EAAe,MAAKC,WACpBA,EAAUC,QACVA,EAAU,KAAIC,kBACdA,EAAiBC,gBACjBA,EAAeC,WACfA,EAAUC,aACVA,EAAYC,cACZA,EAAaC,YACbA,EAAWC,WACXA,GAAa,IAEb,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAaC,EAAMC,aACtBC,IACmB,WAAdA,EAAMC,KAAsB9B,GAC9BA,MAGJ,CAACA,IAmBH,OAhBA+B,GAAU,KACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,KACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAAW,CACpD,GACA,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAACY,cAAAG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACpB,MAAOA,GACpBG,EAACY,cAAAM,GACCC,KAAK,SACM,aAAA,oBACC/C,GAEZ4B,EAAAY,cAACQ,EAAO,CACN3C,gBAAiBA,EACN4C,UAAA9C,EACH+C,OAAA3C,EACF4C,KAAA/C,EACNI,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbC,aAAcA,EACdC,WAAYA,EACZC,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAC,GAEZpB,GAAmBD,EAClB2B,gBAACwB,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,KACPrD,GAAe,GAGjB2B,EAACY,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHnD,GAEHsB,EAAAY,cAACkB,EAAU,CAAAC,YAAcrC,QAKjCY,SAASC,MAEX,KAGV"}

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

@@ -1,2 +1,60 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as a}from"../Button/index.js";var r,e,m,d,s,c,f=o.div(r||(r=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),u=i(e||(e=n(["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"],["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"]))),p=i(m||(m=n(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"],["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"]))),l=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"])),(function(n){var o=n.theme.colors,i=n.backgroundColor;return void 0!==i&&void 0!==typeof i?void 0!==o[i]?o[i]:i:o.backgroundLight}),(function(n){var o=n.$top;return"".concat(o," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth}),(function(n){return n.$isAnimated?u:"none"})),g=o(a)(s||(s=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs})),h=o.div(c||(c=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"])),(function(n){return n.theme.colors.modalBackdrop}),(function(n){return n.$isAnimated?p:"none"}));export{h as Background,g as CloseButton,l as Content,f as Wrapper};
+import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as n}from"../Button/index.js";const a=o.div`
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+`,e=i`
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`,m=i`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+`,r=o(t)`
+  background-color: ${({theme:{colors:o},backgroundColor:i})=>void 0!==i?void 0!==o[i]?o[i]:i:o.backgroundLight};
+  position: relative;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  margin: ${({$top:o})=>`${o} auto auto auto`};
+  width: ${({$width:o})=>o};
+  min-height: 10rem;
+  max-width: ${({$maxWidth:o})=>o};
+  z-index: 9999;
+  animation-direction: normal;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.2s;
+  animation-name: ${({$isAnimated:o})=>o?e:"none"};
+`,d=o(n)`
+  float: right;
+  margin-left: ${({theme:{spacing:{xs:o}}})=>o};
+  font-size: 1.2rem;
+  padding: 0;
+`,s=o.div`
+  background: ${({theme:o})=>o.colors.modalBackdrop};
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition:
+    opacity 0.3s,
+    bottom 0s 0.3s;
+  z-index: 100;
+  animation-direction: normal;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.3s;
+  animation-name: ${({$isAnimated:o})=>o?m:"none"};
+`;export{s as Background,d as CloseButton,r as Content,a as Wrapper};
 //# 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 && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","templateObject_1","__makeTemplateObject","grow","keyframes","templateObject_2","fade","templateObject_3","Content","Box","templateObject_4","_a","colors","theme","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","spacing","xs","Background","templateObject_6","modalBackdrop"],"mappings":"mNAKa,gBAAAA,EAAUC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oIAAA,CAAA,uIAU3BC,EAAOC,EAASC,IAAAA,EAAAH,EAAA,CAAA,wHAAA,CAAA,2HAWhBI,EAAOF,EAASG,IAAAA,EAAAL,EAAA,CAAA,sEAAA,CAAA,yEASTM,EAAUT,EAAOU,EAAPV,CAAWW,IAAAA,EAAAR,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,kJAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,kJAK2B,UAhBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,IAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,IAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,IAKd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,IAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,IAKKC,EAAa5B,EAAOC,IAG/B4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAAA,mBACuD,+RAca,UAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,IAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","grow","keyframes","fade","Content","Box","theme","colors","backgroundColor","undefined","backgroundLight","$top","$width","$maxWidth","$isAnimated","CloseButton","Button","spacing","xs","Background","modalBackdrop"],"mappings":"mIAKa,MAAAA,EAAUC,EAAOC,GAAG;;;;;;;;EAU3BC,EAAOC,CAAS;;;;;;;;;EAWhBC,EAAOD,CAAS;;;;;;;EASTE,EAAUL,EAAOM,EAO5B;sBACoB,EAAGC,OAASC,UAAUC,0BACpBC,IAApBD,OACgDC,IAA5CF,EAAOC,GACLD,EAAOC,GACPA,EACFD,EAAOG;;;YAGH,EAAGC,UAAW,GAAGA;WAClB,EAAGC,YAAaA;;eAEZ,EAAGC,eAAgBA;;;;;oBAKd,EAAGC,iBAAmBA,EAAcb,EAAO;EAGlDc,EAAchB,EAAOiB,EAEhC;;iBAEe,EACbV,OACEW,SAAWC,UAETA;;;EAKKC,EAAapB,EAAOC,GAG/B;gBACc,EAAGM,WAAYA,EAAMC,OAAOa;;;;;;;;;;;;;;oBAcxB,EAAGN,iBAAmBA,EAAcX,EAAO;"}

package/lib/{components → src/components}/Pagination/Pagination.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Pagination from ".";
 declare const _default: {
     title: string;

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 e from"react";import{useTheme as t,ThemeProvider as a}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{PagerWrapper as n,PagerList as c,PagerItem as r,PagerLink as i}from"./styles.js";function s({current:s,items:o,hideLast:m,pagerCallback:d,perPage:p,searchParam:u="page",children:f,id:E}){const $=t(),h={...l,...$},b=p>0?p:1,k=Math.ceil(o/b)||1,y=e=>({href:`${"undefined"!=typeof window?window.location.pathname:""}?${u?`${u}=${e}`:""}`,onClick:t=>{t.preventDefault(),d(e)}});return e.createElement(a,{theme:h},o>p&&e.createElement(n,null,e.createElement(c,null,e.createElement(r,{key:"Prev"},e.createElement(i,{"data-cta":E?`${E}-prev`:null,name:"Prev","aria-disabled":1===s,...1===s&&{tabIndex:-1},...1!==s&&y(s-1),$disabled:1===s},"Prev")),((t,a)=>{const l=[];let n=[];for(let n=1;n<=a;n+=1)l.push(e.createElement(r,{key:n},e.createElement(i,{"data-cta":E?`${E}-${n}`:null,$active:n===t,...y(n),"aria-label":`page ${n} of ${a}`},n)));const c=l.slice(0,1).concat(e.createElement(r,{key:"first"},e.createElement("span",null,"..."))),s=l.slice(l.length-1).concat(e.createElement(r,{key:"last"},e.createElement("span",null,"..."))).reverse();return n=l.slice(0,a),a>7&&(n=t<=4?m?l.slice(0,7):l.slice(0,5).concat(s):t>a-4?c.concat(l.slice(-5)):m?c.concat(l.slice(t-3,t+2)):c.concat(l.slice(t-2,t+1)).concat(s)),n})(s,k),e.createElement(r,{key:"Next"},e.createElement(i,{"data-cta":E?`${E}-next`:null,name:"Next","aria-disabled":s===k,...s===k&&{tabIndex:-1},...s!==k&&y(s+1),$disabled:s===k},"Next"))),f))}export{s as Pagination,s 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,OAAc,IAAAD,EAAA,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAeV,EAAU,EAAIA,EAAU,EACvCW,EAAaC,KAAKC,KAAKhB,EAAQa,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAC,CACrCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAClE,KAAAH,OAAAf,EAAc,GAAGe,OAAAf,EAAe,KAAAe,OAAAF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFxB,EAAcgB,EACf,EACD,EAiDF,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBV,EAAQG,GACPwB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAY,IAAZpC,GACE,IAAZA,GAAiB,CAAEqC,UAAW,GAClB,IAAZrC,GAAiBkB,EAAUlB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACsC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKf,GACdS,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,KAAAa,OAAIF,GAAW,KAC1BwB,QAAAxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAQE,OAAAF,EAAa,QAAAE,OAAAkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdiB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHmB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJpC,EAAWsC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAO,IACzB3C,EACE0C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACR,CAmBUQ,CAAYjD,EAASe,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAApC,IAAYe,GACtBf,IAAYe,GAAc,CAAEsB,UAAW,GACvCrC,IAAYe,GAAcG,EAAUlB,EAAU,GACxC,CAAAkD,UAAAlD,IAAYe,IAGb,UAGfR,GAKX"}
+{"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","current","items","hideLast","pagerCallback","perPage","searchParam","children","id","foundTheme","useTheme","theme","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","concat","last","length","reverse","renderPager","$disabled"],"mappings":"8NAkCM,SAAUA,GAAWC,QACzBA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,cACRA,EAAaC,QACbA,EAAOC,YACPA,EAAc,OAAMC,SACpBA,EAAQC,GACRA,IAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAeR,EAAU,EAAIA,EAAU,EACvCS,EAAaC,KAAKC,KAAKd,EAAQW,IAAiB,EAEhDI,EAAaC,IAAoB,CACrCC,KAAM,GAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,MAClEhB,EAAc,GAAGA,KAAeY,IAAW,KAE7CK,QAAUC,IACRA,EAAEC,iBACFrB,EAAcc,EAAO,IAmDzB,OACEQ,EAAAC,cAACC,EAAa,CAACjB,MAAOA,GACnBT,EAAQG,GACPqB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACW,CAAA,WAAAzB,EAAK,GAAGA,SAAY,KAC9B0B,KAAK,OACU,gBAAY,IAAZjC,KACE,IAAZA,GAAiB,CAAEkC,UAAY,MACnB,IAAZlC,GAAiBgB,EAAUhB,EAAU,aACnB,IAAZA,GAAa,SA3DlB,EAACmC,EAAgBC,KACnC,MAAMC,EAAO,GACb,IAAIC,EAAQ,GAEZ,IAAK,IAAIrB,EAAS,EAAGA,GAAUmB,EAAOnB,GAAU,EAC9CoB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKd,GACdQ,EAAAC,cAACM,EAAS,CAAA,WACEzB,EAAK,GAAGA,KAAMU,IAAW,KAC1BuB,QAAAvB,IAAWkB,KAChBnB,EAAUC,gBACF,QAAQA,QAAamB,KAEhCnB,KAKT,MAAMwB,EAAQJ,EAAKK,MAAM,EAAG,GAAGC,OAC7BlB,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdkB,EAAOP,EACVK,MAAML,EAAKQ,OAAS,GACpBF,OACClB,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHoB,UAcH,OAbAR,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJjC,EAAWmC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGC,OAAOC,GAG5DT,EAASC,EAAQ,EACbK,EAAME,OAAON,EAAKK,OAAM,IACxBxC,EACEuC,EAAME,OAAON,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAME,OAAON,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIQ,OAAOC,IAG7DN,CAAK,EAoBHS,CAAY/C,EAASa,GACtBY,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACW,CAAA,WAAAzB,EAAK,GAAGA,SAAY,KAC9B0B,KAAK,OACU,gBAAAjC,IAAYa,KACtBb,IAAYa,GAAc,CAAEqB,UAAY,MACxClC,IAAYa,GAAcG,EAAUhB,EAAU,GACxCgD,UAAAhD,IAAYa,GAGb,UAGfP,GAKX"}

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

@@ -1,2 +1,93 @@
-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 o,{css as e}from"styled-components";const t=o.div`
+  display: table;
+  width: 100%;
+  clear: both;
+  text-align: center;
+`,n=o.ul`
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+`,i=o.a`
+  font-weight: normal;
+  font-family: ${({theme:{typography:{fontFamilyBase:o}}})=>o};
+  font-size: ${({theme:{fontSizes:{s:o}}})=>o};
+  color: ${({theme:o})=>o.colors.textLight};
+  background-color: ${({theme:o})=>o.colors.paginationBackground};
+  cursor: pointer;
+  border-radius: 0;
+  margin: ${({theme:o})=>o.spacing.xxs};
+  padding: 7px 11px;
+  text-decoration: none;
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: 0.88;
+    text-decoration: underline;
+  }
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: auto;
+  }
+
+  ${({$active:o,theme:t})=>o&&e`
+      color: ${t.colors.textDark};
+      background-color: ${t.colors.paginationActive};
+      cursor: default;
+      &:hover {
+        background-color: ${t.colors.paginationActive};
+        text-decoration: none;
+      }
+    `}
+
+  ${({name:o,theme:t,$disabled:n})=>("Prev"===o||"Next"===o)&&e`
+      color: ${n?t.colors.disabled:t.colors.paginationText};
+      background-color: transparent;
+      font-weight: bold;
+      padding: 8px 6px;
+      background-color: transparent;
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        text-decoration: underline;
+      }
+      &:active,
+      &:visited {
+        text-decoration: none;
+      }
+    `}
+
+  ${({theme:o,$disabled:t})=>t&&e`
+      color: $ ${o.colors.disabled};
+      cursor: not-allowed;
+      pointer-events:none
+      text-decoration: none;
+      &:hover,
+      &:focus,
+      &:active,
+      &:visited {
+        color: ${o.colors.disabled};
+        text-decoration: none;
+      }
+    `}
+`,r=o.li`
+  display: none;
+  &:first-child,
+  &:last-child {
+    display: inline;
+  }
+  @media (min-width: ${o=>o.theme.breakpoint.mobile}) {
+    display: inline;
+  }
+  span {
+    border: none;
+    min-width: 30px;
+    padding: 5px;
+    margin: 1px;
+    border-radius: 0;
+    border-width: ${o=>o.theme.breakpoint.mobile};
+  }
+`;export{r as PagerItem,i as PagerLink,n as PagerList,t 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":"2HAGa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAK9BC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,SA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,IACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,IACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,IACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,IAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,IAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,IAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,IAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,IAgBSG,EAAYhC,EAAOiC,GAAwBC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMO,oKASH,eATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM,IAS3C,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM"}
+{"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","PagerList","ul","PagerLink","a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","textDark","paginationActive","name","$disabled","disabled","paginationText","PagerItem","li","props","breakpoint","mobile"],"mappings":"2CAGa,MAAAA,EAAeC,EAAOC,GAAG;;;;;EAOzBC,EAAYF,EAAOG,EAAE;;;;EAMrBC,EAAYJ,EAAOK,CAK9B;;iBAEe,EACbC,OACEC,YAAcC,sBAEZA;eACO,EACXF,OACEG,WAAaC,SAEXA;WACG,EAAGJ,WAAYA,EAAMK,OAAOC;sBACjB,EAAGN,WAAYA,EAAMK,OAAOE;;;YAGtC,EAAGP,WAAYA,EAAMQ,QAAQC;;;;;;;;;;;;;;;;;IAiBrC,EAAGC,UAASV,WACZU,GACAC,CAAG;eACQX,EAAMK,OAAOO;0BACFZ,EAAMK,OAAOQ;;;4BAGXb,EAAMK,OAAOQ;;;;;IAKrC,EAAGC,OAAMd,QAAOe,gBACN,SAATD,GAA4B,SAATA,IACpBH,CAAG;eACQI,EAAYf,EAAMK,OAAOW,SAAWhB,EAAMK,OAAOY;;;;;;;;;;;;;;;;IAgB5D,EAAGjB,QAAOe,eACVA,GACAJ,CAAG;iBACUX,EAAMK,OAAOW;;;;;;;;iBAQbhB,EAAMK,OAAOW;;;;EAMjBE,EAAYxB,EAAOyB,EAAwB;;;;;;uBAMhCC,GAAUA,EAAMpB,MAAMqB,WAAWC;;;;;;;;;oBASpCF,GAAUA,EAAMpB,MAAMqB,WAAWC;;"}

package/lib/{components → src/components}/PopOver/Popover.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import PopOver from ".";
 declare const _default: {
     title: string;

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,useCallback as r,useEffect as i}from"react";import{useTheme as m,ThemeProvider as a}from"styled-components";import{useKey as c}from"../../hooks/useKey.js";import{crukTheme as l}from"../../themes/cruk.js";import{useEffectBrowser as s}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as u,PopOverModal as d}from"./styles.js";function f(f){var p=f.onPopOverIsOpenChange,h=f.children,E=f.minWidth,k=f.maxWidth,v=f.position,j=f.modalLabel,$=f.modalContent,b=f.css,g=f.full,x=void 0!==g&&g,y=n(null),C=o(!1),W=C[0],L=C[1],K=m(),O=e(e({},l),K),w=function(){return L(!W)},B=function(){return L(!1)},I=r((function(e){y.current&&!y.current.contains(e.target)&&B()}),[y.current]);return c((function(){B()}),{detectKeys:["Escape"]},[]),i((function(){p&&p(W)}),[W]),s((function(){return document.addEventListener("click",I,!0),function(){document.removeEventListener("click",I,!0)}}),[]),t.createElement(a,{theme:O},t.createElement(u,{$full:x,$css:b,ref:y},t.Children.map(h,(function(e){return t.cloneElement(e,{onClick:w,"aria-expanded":W,"aria-haspopup":"dialog"})})),W?t.createElement(d,{$maxWidth:k||"none",$minWidth:E||"auto",$position:v||"top",theme:O,role:"dialog","aria-label":j,"aria-modal":W},$):null))}export{f as PopOver,f as default};
+import e,{useRef as t,useState as o,useEffect as r}from"react";import{useTheme as n,ThemeProvider as a}from"styled-components";import{useKey as i}from"../../hooks/useKey.js";import{crukTheme as m}from"../../themes/cruk.js";import{useEffectBrowser as l}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as s,PopOverModal as c}from"./styles.js";function d({onPopOverIsOpenChange:d,children:p,minWidth:u,maxWidth:f,position:h,modalLabel:E,modalContent:k,css:$,full:g=!1}){const j=t(null),[v,x]=o(!1),y=n(),C={...m,...y},W=()=>x(!v),L=()=>x(!1),b=e=>{j.current&&!j.current.contains(e.target)&&L()};return i((()=>{L()}),{detectKeys:["Escape"]},[]),r((()=>{d&&d(v)}),[v,d]),l((()=>(document.addEventListener("click",b,!0),()=>{document.removeEventListener("click",b,!0)})),[]),e.createElement(a,{theme:C},e.createElement(s,{$full:g,$css:$,ref:j},e.Children.map(p,(t=>e.cloneElement(t,{onClick:W,"aria-expanded":v,"aria-haspopup":"dialog"}))),v?e.createElement(c,{$maxWidth:f||"none",$minWidth:u||"auto",$position:h||"top",theme:C,role:"dialog","aria-label":E,"aria-modal":v},k):null))}export{d as PopOver,d 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  useCallback,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = useCallback(\n    (e: MouseEvent) => {\n      if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n        closePopOver();\n      }\n    },\n    [popRef.current],\n  );\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(\n          children as ReactElement,\n          (child: React.ReactElement) =>\n            React.cloneElement(child, {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            }),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","useCallback","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"sbAwCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAO,IAAAD,GAAKA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAC5BI,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAS,WAAM,OAAAN,GAAgBD,EAAY,EAC3CQ,EAAe,WAAM,OAAAP,GAAe,EAAM,EAG1CQ,EAAsBC,GAC1B,SAACC,GACOf,EAAOgB,UAAYhB,EAAOgB,QAAQC,SAASF,EAAEG,SACjDN,GAEJ,GACA,CAACZ,EAAOgB,UA0BV,OAvBAG,GACE,WACEP,GACF,GACA,CACEQ,WAAY,CAAC,WAEf,IAGFC,GAAU,WACJ/B,GACFA,EAAsBc,EAE1B,GAAG,CAACA,IAEJkB,GAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASX,GAAqB,GACjD,WACLU,SAASE,oBAAoB,QAASZ,GAAqB,EAC5D,CACF,GAAE,IAGDa,EAACC,cAAAC,EAAc,CAAApB,MAAOA,GACpBkB,EAACC,cAAAE,SAAsB9B,EAAI+B,KAAQjC,EAAKkC,IAAK/B,GAC1C0B,EAAMM,SAASC,IACd1C,GACA,SAAC2C,GACC,OAAAR,EAAMS,aAAaD,EAAO,CACxBE,QAASzB,EACT,gBAAiBP,EACjB,gBAAiB,UAHnB,IAMHA,EACCsB,EAACC,cAAAU,aACY5C,GAAY,OAAM6C,UAClB9C,GAAY,iBACZE,GAAY,MACvBc,MAAOA,EACP+B,KAAK,SACO,aAAA5C,eACAS,GAEXR,GAED,MAIZ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (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(\n          children as ReactElement,\n          (child: React.ReactElement) =>\n            React.cloneElement(child, {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            }),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","full","popRef","useRef","showPopOver","setShowPopOver","useState","foundTheme","useTheme","theme","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":"iWAuCM,SAAUA,GAAQC,sBACtBA,EAAqBC,SACrBA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,IACZA,EAAGC,KACHA,GAAO,IAEP,MAAMC,EAASC,EAAuB,OAC/BC,EAAaC,GAAkBC,GAAS,GACzCC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAS,IAAMN,GAAgBD,GAC/BQ,EAAe,IAAMP,GAAe,GAGpCQ,EAAuBC,IACrBZ,EAAOa,UAAYb,EAAOa,QAAQC,SAASF,EAAEG,SACjDL,KA2BJ,OAvBAM,GACE,KACEN,GAAc,GAEhB,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,KACJ3B,GACFA,EAAsBW,KAEvB,CAACA,EAAaX,IAEjB4B,GAAiB,KACfC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,KACLS,SAASE,oBAAoB,QAASX,GAAqB,EAAK,IAEjE,IAGDY,EAACC,cAAAC,EAAc,CAAAlB,MAAOA,GACpBgB,EAACC,cAAAE,SAAsB3B,EAAI4B,KAAQ7B,EAAK8B,IAAK5B,GAC1CuB,EAAMM,SAASC,IACdtC,GACCuC,GACCR,EAAMS,aAAaD,EAAO,CACxBE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,aAGtBA,EACCqB,EAACC,cAAAU,aACYxC,GAAY,OAAMyC,UAClB1C,GAAY,iBACZE,GAAY,MACvBY,MAAOA,EACP6B,KAAK,SACO,aAAAxC,eACAM,GAEXL,GAED,MAIZ"}