@cruk/cruk-react-components 6.0.2 → 6.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** when required (required) appears in label */\n  required?: boolean;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {required && !hideRequiredInLabel && (\n              <RequiredText>{` (required)`}</RequiredText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","undefined","_c","hideRequiredInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mUAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAWC,IAAAF,GAAKA,EAChBG,wBAAAC,OAAsBF,IAAAC,GAAKA,EAC3BE,EAAQR,EAAAQ,SACLC,EANwBC,EAAAV,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBW,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFd,IACoB,iBAAbA,GAAyBA,EAASe,QACrB,iBAAbf,GACPgB,EAACC,cAAAC,OAAMlB,GAAgB,EAK3B,OACEgB,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBZ,EACCiB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBtB,GACxBD,EACAG,IAAaG,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredIndicationText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** if field is required, when not required (optional) appears in label */\n  required?: boolean;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredIndicationInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {!required && !hideRequiredIndicationInLabel && (\n              <RequiredIndicationText>{` (optional)`}</RequiredIndicationText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredIndicationInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredIndicationText","Fragment"],"mappings":"6UAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,kCAAAC,OAA6B,IAAAD,GAAQA,EACrCE,EAAQP,EAAAO,SACLC,EAAmBC,EAAAT,EANK,CAAA,QAAA,WAAA,WAAA,gCAAA,aAQrBU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAAAC,cAACC,OAAMjB,GAAgB,EAK3B,OACEe,EAAAC,cAACE,EAAa,CAACR,MAAOA,GACnBX,EACCgB,EAAAC,cAACG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBrB,GACxBD,GACCG,IAAaE,GACbW,EAAAC,cAACM,EAAsB,KAAE,gBAG5BT,EACAR,GAGHU,EAAAC,cAAAD,EAAAQ,SAAA,KAAGlB,GAIX"}

package/lib/{components → src/components}/LabelWrapper/styles.d.ts

@@ -6,7 +6,7 @@ type LabelTextProp = {
 export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     theme: ThemeType;
 }>> & string;
-export declare const RequiredText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+export declare const RequiredIndicationText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     theme: ThemeType;
 }>> & string;
 export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelTextProp>> & string;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype LabelTextProp = {\n  $hasHintText: boolean;\n  theme: ThemeType;\n};\n\nexport const Label = styled.label<{ theme: ThemeType }>`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n`;\n\nexport const RequiredText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n`;\n\nexport const LabelText = styled.span<LabelTextProp>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  display: block;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","templateObject_2","fontWeightBase","LabelText","templateObject_3","$hasHintText","spacing","xxs","xs"],"mappings":"iHAQO,UAAMA,EAAQC,EAAOC,MAA2BC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,OAAA,CAAA,8EAIS,qBACC,UADhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAGnBC,EAAeT,EAAOU,KAA0BC,IAAAA,EAAAR,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAA,oBACG,qBACD,UAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWM,cAAjB,IAGnBC,EAAYb,EAAOU,KAAII,IAAAA,EAAAX,EAAA,CAAA,oBAAA,qBAAA,0CAAA,OAAA,CAAe,oBACa,qBACC,0CAGV,UAJtC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAEb,SAACJ,OAAEW,EAAYX,EAAAW,aAAEV,EAAKD,EAAAC,MACrC,OAAAU,EAAeV,EAAMW,QAAQC,IAAMZ,EAAMW,QAAQE,EAAjD"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype LabelTextProp = {\n  $hasHintText: boolean;\n  theme: ThemeType;\n};\n\nexport const Label = styled.label<{ theme: ThemeType }>`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n`;\n\nexport const RequiredIndicationText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n`;\n\nexport const LabelText = styled.span<LabelTextProp>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  display: block;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredIndicationText","span","templateObject_2","fontWeightBase","LabelText","templateObject_3","$hasHintText","spacing","xxs","xs"],"mappings":"iHAQO,UAAMA,EAAQC,EAAOC,MAAKC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,OAAA,CAAsB,8EAIS,qBACC,SADhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,GAGnBC,EAAyBT,EAAOU,KAAIC,IAAAA,EAAAR,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAsB,oBACP,qBACD,SAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWM,cAAjB,GAGnBC,EAAYb,EAAOU,KAAII,IAAAA,EAAAX,EAAA,CAAA,oBAAA,qBAAA,0CAAA,OAAA,CAAe,oBACa,qBACC,0CAGV,SAJtC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,EAEb,SAACJ,OAAEW,EAAYX,EAAAW,aAAEV,EAAKD,EAAAC,MACrC,OAAAU,EAAeV,EAAMW,QAAQC,IAAMZ,EAAMW,QAAQE,EAAjD"}

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

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

package/lib/{components → src/components}/LegendWrapper/index.d.ts

@@ -7,7 +7,7 @@ export type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {
     errorMessage?: string;
     /** flag for error styling */
     hasError?: boolean;
-    /** when required (required) appears in legend */
+    /** if field is required, when not required (optional) appears in legend */
     required?: boolean;
     /** hint text */
     hintText?: ReactNode;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Link/styles.ts"],"sourcesContent":["import { type AnchorHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { type TextProps } from \"../Text\";\n\nimport { type ThemeType, type ColorKeyType } from \"../../types\";\n\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\n    theme: ThemeType;\n    $appearance?: \"primary\" | \"secondary\";\n    $textHoverColor?: string;\n  };\n\nexport const StyledLink = styled(Text)<StyledLinkProps>`\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ${({\n    theme: {\n      colors,\n      utilities: { useBackgroundStyleLinks },\n    },\n    textColor,\n    $appearance,\n  }) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor ||\n        (!$appearance && useBackgroundStyleLinks\n          ? \"currentColor\"\n          : $appearance && $appearance === \"primary\"\n            ? colors.linkColorSecondary\n            : colors.linkColor)};\n  text-decoration: ${({\n    $appearance,\n    theme: {\n      typography: { linkTextDecoration, LinkPrimaryTextDecoration },\n    },\n  }) =>\n    $appearance === \"primary\"\n      ? LinkPrimaryTextDecoration\n      : $appearance === \"secondary\"\n        ? \"none\"\n        : linkTextDecoration};\n  font-family: ${({\n    $appearance,\n    theme: {\n      typography: { fontFamilyBase, fontFamilyLinks },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? fontFamilyLinks\n      : fontFamilyBase};\n  letter-spacing: ${({\n    $appearance,\n    theme: {\n      typography: { LinkLetterSpacing },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? LinkLetterSpacing\n      : \"0px\"};\n\n  background: ${({\n    $appearance,\n    theme,\n    theme: {\n      utilities: { useBackgroundStyleLinks },\n    },\n  }) =>\n    useBackgroundStyleLinks && !$appearance\n      ? `linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${theme.colors.primary} -4px);`\n      : undefined};\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ${({ theme }) => theme.typography.fontWeightLinks};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({\n      theme: {\n        colors,\n        utilities: { useBackgroundStyleLinks },\n      },\n      $textHoverColor,\n      $appearance,\n    }) =>\n      !$textHoverColor && useBackgroundStyleLinks\n        ? colors.textDark\n        : $textHoverColor &&\n            typeof colors[$textHoverColor as ColorKeyType] !== \"undefined\"\n          ? colors[$textHoverColor as ColorKeyType]\n          : $textHoverColor\n            ? $appearance && $appearance === \"primary\"\n              ? colors.linkColorHover\n              : colors.linkColorSecondaryHover\n            : colors.linkColorHover};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","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","templateObject_1","__makeTemplateObject","_a","_b","theme","colors","useBackgroundStyleLinks","utilities","textColor","$appearance","linkColorSecondary","linkColor","typography","linkTextDecoration","LinkPrimaryTextDecoration","fontFamilyBase","fontFamilyLinks","LinkLetterSpacing","concat","primary","undefined","fontWeightLinks","$textHoverColor","textDark","linkColorHover","linkColorSecondaryHover"],"mappings":"yJAcO,MAAMA,EAAaC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,8LAAA,yBAAA,qBAAA,wBAAA,sBAAA,0HAAA,uIAAA,YAAA,CAAiB,8LAuBxB,yBAWH,qBASN,wBAST,sBAWI,0HAI+C,uIA0B7B,cArFxB,SAACC,OACRC,EAAAD,EAAAE,MACEC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCE,EAASN,EAAAM,UACTC,EAAWP,EAAAO,YAEX,OAAAD,QAA0D,IAAtCH,EAAOG,GACvBH,EAAOG,GACPA,KACEC,GAAeH,EACb,eACAG,GAA+B,YAAhBA,EACbJ,EAAOK,mBACPL,EAAOM,UAPjB,EAQiB,SAACT,OAClBO,EAAWP,EAAAO,YAETN,EAAAD,EAAAE,MAAAQ,WAAcC,EAAkBV,EAAAU,mBAAEC,EAAyBX,EAAAW,0BAG7D,MAAgB,YAAhBL,EACIK,EACgB,cAAhBL,EACE,OACAI,CAJN,EAKa,SAACX,OACdO,EAAWP,EAAAO,YAETN,EAAAD,EAAAE,MAAAQ,WAAcG,EAAcZ,EAAAY,eAAEC,EAAeb,EAAAa,gBAG/C,MAAgB,YAAhBP,GAA6C,cAAhBA,EACzBO,EACAD,CAFJ,EAGgB,SAACb,OACjBO,EAAWP,EAAAO,YAEKQ,EAAiBf,EAAAE,MAAAQ,WAAAK,kBAGjC,MAAgB,YAAhBR,GAA6C,cAAhBA,EACzBQ,EACA,KAFJ,EAIY,SAACf,GACb,IAAAO,gBACAL,EAAKF,EAAAE,MAKL,OAHsCF,EAAAE,MAAAG,UAAAD,0BAGVG,EACxB,uDAAAS,OAAuDd,EAAMC,OAAOc,QAAO,gBAC3EC,CAFJ,EAMa,SAAClB,GAAc,OAAPA,EAAAE,MAAaQ,WAAWS,eAAjB,EASnB,SAACnB,OACRC,EAAAD,EAAAE,MACEC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCgB,EAAepB,EAAAoB,gBACfb,EAAWP,EAAAO,YAEX,OAACa,GAAmBhB,EAChBD,EAAOkB,SACPD,QACqD,IAA5CjB,EAAOiB,GACdjB,EAAOiB,GACPA,EACEb,GAA+B,YAAhBA,EACbJ,EAAOmB,eACPnB,EAAOoB,wBACTpB,EAAOmB,cATf"}

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

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

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","__assign","defaultTheme","React","createElement","ThemeProvider","Fragment","ScreenReaderOnly","role","Spinner"],"mappings":"+QAWgBA,IACd,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,EAAAC,cAACC,EAAa,CAACL,MAAOA,GACpBG,EAAAC,cAAAD,EAAAG,SAAA,KACEH,EAAAC,cAACG,EAAgB,CAACC,KAAK,SAAO,WAC9BL,EAAAC,cAACK,EAAO,KACNN,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,QAKV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Loader/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype SpinnerProps = {\n  theme: ThemeType;\n};\n\nconst BounceDelay = keyframes`\n  0%,\n  80%,\n  100% {\n      transform: scale(0)\n  }\n  40% {\n      transform: scale(1)\n  }\n`;\n\nexport const ScreenReaderOnly = styled.p`\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n`;\n\nexport const Spinner = styled.div<SpinnerProps>`\n  width: 100%;\n  text-align: center;\n  margin-top: ${({ theme }) => theme.spacing.s};\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: ${({ theme }) => theme.colors.loaderColor1};\n    border-radius: 100%;\n    animation: ${BounceDelay} 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: ${({ theme }) => theme.colors.loaderColor2};\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: ${({ theme }) => theme.colors.loaderColor3};\n  }\n`;\n"],"names":["BounceDelay","keyframes","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","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,cAvBhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,EAOP,SAACH,GAAc,OAAPA,EAAAC,MAAaG,OAAOC,YAAb,EAEtBf,EASO,SAACU,GAAc,OAAPA,EAAAC,MAAaG,OAAOE,YAAb,EAKf,SAACN,GAAc,OAAPA,EAAAC,MAAaG,OAAOG,YAAb"}

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

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

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function TestModalWithContent(): React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function TestModalWithState(): React.JSX.Element;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  isAnimated = true,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                      $isAnimated={isAnimated}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background $isAnimated={isAnimated} />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","undefined","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_h","isAnimated","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"+iBA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAAkBJ,EAAAK,SAAlBA,OAAWC,IAAAF,EAAA,UACXG,EAAAP,EAAAQ,IAAAA,OAAGF,IAAAC,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQX,EAAAW,SACRC,EAAaZ,EAAAa,MAAbA,OAAQP,IAAAM,EAAA,QACRE,WACAC,EAAgBf,EAAAe,iBAChBC,EAAchB,EAAAgB,eACdC,EAASjB,EAAAiB,UACTC,EAAWlB,EAAAkB,YACXC,EAAoBnB,EAAAoB,aAApBA,OAAed,IAAAa,EAAA,QACfE,eACAC,EAAAtB,EAAAuB,QAAAA,OAAOjB,IAAAgB,EAAG,KAAIA,EACdE,EAAiBxB,EAAAwB,kBACjBC,EAAezB,EAAAyB,gBACfC,EAAU1B,EAAA0B,WACVC,EAAY3B,EAAA2B,aACZC,EAAa5B,EAAA4B,cACbC,EAAW7B,EAAA6B,YACXC,eAAAC,OAAazB,IAAAwB,GAAIA,EAEXE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAaC,EAAMC,aACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBvC,GAC9BA,GAEJ,GACA,CAACA,IAmBH,OAhBAwC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GACzC,CACH,GAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAACY,cAAAG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACrB,MAAOA,GACpBI,EAACY,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCxD,GAEZqC,EAAAY,cAACQ,EAAO,CACNhD,gBAAiBA,EACNiD,UAAAtD,EACHuD,OAAA/C,EACFgD,KAAArD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ5B,GAAmBD,EAClBoC,EAACY,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP9D,MAGFoC,EAACY,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHxD,GAEH2B,EAAAY,cAACkB,EAAU,CAAAC,YAActC,QAKjCa,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  isAnimated = true,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                      $isAnimated={isAnimated}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background $isAnimated={isAnimated} />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_h","isAnimated","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"+iBA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAAAJ,EAAAK,SAAAA,OAAQ,IAAAD,EAAG,UACXE,EAAAN,EAAAO,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAAX,EAAAY,MAAAA,OAAK,IAAAD,EAAG,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAAlB,EAAAmB,aAAAA,OAAY,IAAAD,EAAG,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBtC,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAuC,EAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,KACEZ,EAAAY,cAACG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,EAAa,CAACrB,MAAOA,GACpBI,EAAAY,cAACM,GACCC,KAAK,SAAQ,aACF,oBACCvD,GAEZoC,EAAAY,cAACQ,EAAO,CACNhD,gBAAiBA,EAAeiD,UACrBrD,EAAQsD,OACX/C,EAAKgD,KACPrD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClBmC,EAAAY,cAACY,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,WACP7D,MAGFmC,EAAAY,cAACe,EAAM,CAACC,OAAQC,KAEhB,KACHxD,GAEH2B,EAAAY,cAACkB,EAAU,CAAAC,YAActC,QAKjCa,SAASC,MAEX,KAGV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","templateObject_1","__makeTemplateObject","grow","keyframes","templateObject_2","fade","templateObject_3","Content","Box","templateObject_4","_a","colors","theme","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","spacing","xs","Background","templateObject_6","modalBackdrop"],"mappings":"mNAKa,gBAAAA,EAAUC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oIAAA,CAAA,uIAU3BC,EAAOC,EAASC,IAAAA,EAAAH,EAAA,CAAA,wHAAA,CAAA,2HAWhBI,EAAOF,EAASG,IAAAA,EAAAL,EAAA,CAAA,sEAAA,CAAA,yEASTM,EAAUT,EAAOU,EAAPV,CAAWW,IAAAA,EAAAR,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,kJAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,kJAK2B,UAhBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,OACgDC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,IAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,IAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,IAKd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,IAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,IAKKC,EAAa5B,EAAOC,IAG/B4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAAA,mBACuD,+RAca,UAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,IAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  transform-origin: top center;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","templateObject_1","__makeTemplateObject","grow","keyframes","templateObject_2","fade","templateObject_3","Content","Box","templateObject_4","_a","colors","theme","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","spacing","xs","Background","templateObject_6","modalBackdrop"],"mappings":"mNAKO,gBAAMA,EAAUC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oIAAA,CAAA,uIAU3BC,EAAOC,EAASC,IAAAA,EAAAH,EAAA,CAAA,wHAAA,CAAA,2HAWhBI,EAAOF,EAASG,IAAAA,EAAAL,EAAA,CAAA,sEAAA,CAAA,yEASTM,EAAUT,EAAOU,EAAPV,CAAWW,IAAAA,EAAAR,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,mLAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,mLAM2B,SAjBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,OACgDC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,EAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAI,kBAAP,EACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,EAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,EAMd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,GAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,8CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,GAKKC,EAAa5B,EAAOC,IAAG4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAGlC,mBACuD,+RAca,SAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,EAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}

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

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

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

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var t,r,i,a,d,c,l,s=o.div(t||(t=n(["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"],["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"]))),u=o.ul(r||(r=n(["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"],["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"]))),p=o.a(c||(c=n(["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"],["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.s}),(function(n){return n.theme.colors.textLight}),(function(n){return n.theme.colors.paginationBackground}),(function(n){return n.theme.spacing.xxs}),(function(o){var t=o.$active,r=o.theme;return t&&e(i||(i=n(["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "])),r.colors.textDark,r.colors.paginationActive,r.colors.paginationActive)}),(function(o){var t=o.name,r=o.theme,i=o.$disabled;return("Prev"===t||"Next"===t)&&e(a||(a=n(["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "])),i?r.colors.disabled:r.colors.paginationText)}),(function(o){var t=o.theme;return o.$disabled&&e(d||(d=n(["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "])),t.colors.disabled,t.colors.disabled)})),b=o.li(l||(l=n(["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"],["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"])),(function(n){return n.theme.breakpoint.mobile}),(function(n){return n.theme.breakpoint.mobile}));export{b as PagerItem,p as PagerLink,u as PagerList,s as PagerWrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import 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};
 //# 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","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","templateObject_3","textDark","paginationActive","name","$disabled","templateObject_4","disabled","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAGO,kBAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAACC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAK/B,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,QA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,EACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,EACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,EACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,EAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,EAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,EAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,EAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,GAgBSG,EAAYhC,EAAOiC,GAAEC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAsB,2GAMO,oKASH,cATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM,EAS3C,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM"}

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

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

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function TestPopOverWithContent(): React.JSX.Element;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(children, (child) =>\n          React.cloneElement(\n            child as DetailedReactHTMLElement<object, HTMLElement>,\n            {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            },\n          ),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","undefined","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"qaAuCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAOC,IAAAF,GAAKA,EAENG,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,EAAsB,SAACC,GACrBd,EAAOe,UAAYf,EAAOe,QAAQC,SAASF,EAAEG,SACjDL,GAEH,EAyBD,OAvBAM,GACE,WACEN,GACF,GACA,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,WACJ/B,GACFA,EAAsBe,EAE1B,GAAG,CAACA,EAAaf,IAEjBgC,GAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC5D,CACF,GAAE,IAGDY,EAACC,cAAAC,EAAc,CAAAnB,MAAOA,GACpBiB,EAACC,cAAAE,SAAsB9B,EAAI+B,KAAQjC,EAAKkC,IAAK9B,GAC1CyB,EAAMM,SAASC,IAAI1C,GAAU,SAAC2C,GAC7B,OAAAR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,UALrB,IASDA,EACCqB,EAACC,cAAAU,aACY5C,GAAY,OAAM6C,UAClB9C,GAAY,iBACZE,GAAY,MACvBe,MAAOA,EACP8B,KAAK,SACO,aAAA5C,eACAU,GAEXT,GAED,MAIZ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(children, (child) =>\n          React.cloneElement(\n            child as DetailedReactHTMLElement<object, HTMLElement>,\n            {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            },\n          ),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"qaAuCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAI,IAAAD,GAAQA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAC5BI,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAS,WAAM,OAAAN,GAAgBD,EAAY,EAC3CQ,EAAe,WAAM,OAAAP,GAAe,EAAM,EAG1CQ,EAAsB,SAACC,GACrBd,EAAOe,UAAYf,EAAOe,QAAQC,SAASF,EAAEG,SACjDL,GAEJ,EAyBA,OAvBAM,EACE,WACEN,GACF,EACA,CACEO,WAAY,CAAC,WAEf,IAGFC,EAAU,WACJ9B,GACFA,EAAsBc,EAE1B,EAAG,CAACA,EAAad,IAEjB+B,EAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC7D,GACC,IAGDY,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACpBiB,EAAAC,cAACE,SAAsB7B,EAAI8B,KAAQhC,EAAKiC,IAAK9B,GAC1CyB,EAAMM,SAASC,IAAIzC,EAAU,SAAC0C,GAC7B,OAAAR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,UALrB,GASDA,EACCqB,EAAAC,cAACU,aACY3C,GAAY,OAAM4C,UAClB7C,GAAY,iBACZE,GAAY,MACvBc,MAAOA,EACP8B,KAAK,SAAQ,aACD3C,eACAS,GAEXR,GAED,MAIZ"}