@cruk/cruk-react-components 5.0.8 → 6.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = forwardRef(\n  (\n    {\n      children,\n      titleText,\n      titleTextColor,\n      descriptionText,\n      descriptionTextColor,\n      icon,\n      ...spacingAndHTMLElementProps\n    }: InfoBoxProps,\n    ref?: Ref<HTMLElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const backgroundColorOrDefault =\n      spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n    return (\n      <StyledInfoBox\n        theme={theme}\n        {...spacingAndHTMLElementProps}\n        backgroundColor={backgroundColorOrDefault}\n        margin={spacingAndHTMLElementProps.margin || \"none\"}\n        ref={ref}\n      >\n        {icon && <Box marginRight=\"s\">{icon}</Box>}\n        <div>\n          {titleText && (\n            <Heading\n              as=\"p\"\n              margin=\"none\"\n              h4\n              marginBottom=\"xxs\"\n              textColor={titleTextColor || theme.colors.textDark}\n            >\n              {titleText}\n            </Heading>\n          )}\n          {descriptionText && (\n            <Text\n              textColor={descriptionTextColor || theme.colors.textDark}\n              marginBottom=\"none\"\n            >\n              {descriptionText}\n            </Text>\n          )}\n          {children}\n        </div>\n      </StyledInfoBox>\n    );\n  },\n);\n\nInfoBox.displayName = \"InfoBox\";\n\nexport default InfoBox;\n"],"names":["InfoBox","forwardRef","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","spacingAndHTMLElementProps","ref","foundTheme","useTheme","theme","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text","displayName"],"mappings":"4SA2Ca,MAAAA,EAAUC,GACrB,EAEIC,WACAC,YACAC,iBACAC,kBACAC,uBACAC,UACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJN,EAA2BO,iBAAmBH,EAAMI,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACC,CAAAR,MAAOA,KACHJ,EACJO,gBAAiBD,EACjBO,OAAQb,EAA2Ba,QAAU,OAC7CZ,IAAKA,GAEJF,GAAQW,gBAACI,EAAG,CAACC,YAAY,KAAKhB,GAC/BW,EAAAC,cAAA,MAAA,KACGhB,GACCe,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAWxB,GAAkBQ,EAAMiB,OAAOC,UAEzC3B,GAGJE,GACCa,EAACC,cAAAY,GACCH,UAAWtB,GAAwBM,EAAMiB,OAAOC,SAChDH,aAAa,QAEZtB,GAGJH,GAEW,IAKtBF,EAAQgC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const backgroundColorOrDefault =\n    spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n  return (\n    <StyledInfoBox\n      theme={theme}\n      {...spacingAndHTMLElementProps}\n      backgroundColor={backgroundColorOrDefault}\n      margin={spacingAndHTMLElementProps.margin || \"none\"}\n      ref={ref}\n    >\n      {icon && <Box marginRight=\"s\">{icon}</Box>}\n      <div>\n        {titleText && (\n          <Heading\n            as=\"p\"\n            margin=\"none\"\n            h4\n            marginBottom=\"xxs\"\n            textColor={titleTextColor || theme.colors.textDark}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text\n            textColor={descriptionTextColor || theme.colors.textDark}\n            marginBottom=\"none\"\n          >\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </StyledInfoBox>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref","spacingAndHTMLElementProps","foundTheme","useTheme","theme","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text"],"mappings":"2RA0Ca,MAAAA,EAAU,EACrBC,WACAC,YACAC,iBACAC,kBACAC,uBACAC,OACAC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJL,EAA2BM,iBAAmBH,EAAMI,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACC,CAAAR,MAAOA,KACHH,EACJM,gBAAiBD,EACjBO,OAAQZ,EAA2BY,QAAU,OAC7Cb,IAAKA,GAEJD,GAAQW,gBAACI,EAAG,CAACC,YAAY,KAAKhB,GAC/BW,EAAAC,cAAA,MAAA,KACGhB,GACCe,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAWxB,GAAkBQ,EAAMiB,OAAOC,UAEzC3B,GAGJE,GACCa,EAACC,cAAAY,GACCH,UAAWtB,GAAwBM,EAAMiB,OAAOC,SAChDH,aAAa,QAEZtB,GAGJH,GAEW"}

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

@@ -4,7 +4,10 @@ type InfoBoxProps = BoxProps & {
     css?: string;
     theme: ThemeType;
 };
-export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, InfoBoxProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    backgroundColor?: string;
+    ref?: import("react").Ref<HTMLDivElement>;
+    children?: import("react").ReactNode;
+    as?: import("react").ElementType;
+}, InfoBoxProps>> & string & Omit<({ ...props }: BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default StyledInfoBox;

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

@@ -3,7 +3,10 @@ import { type StoryObj } from "@storybook/react";
 import Link from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: {
+        (props: import(".").LinkProps): React.JSX.Element;
+        displayName: string;
+    };
     args: {
         appearance: undefined;
         href: string;

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

@@ -22,5 +22,8 @@ export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<
  * 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'
  *
  * 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. */
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Link: {
+    (props: LinkProps): React.JSX.Element;
+    displayName: string;
+};
 export default Link;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = forwardRef((props: LinkProps, ref?: Ref<HTMLElement>) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...rest}\n        $textHoverColor={textHoverColor}\n        $appearance={appearance}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {props.children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n});\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","children","displayName"],"mappings":"gMAsCa,MAAAA,EAAOC,GAAW,CAACC,EAAkBC,KAChD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAMN,EAAMM,IACdN,EAAMM,IACW,WAAjBN,EAAMO,OACJ,sBACA,GAGAC,EAAYR,EAAMS,IAAmB,MAAbT,EAAMS,QAAaC,EAAY,KAEvDC,eAAEA,EAAcC,WAAEA,KAAeC,GAASb,EAEhD,OACEc,EAACC,cAAAC,EAAc,CAAAZ,MAAOA,GACpBU,EAAAC,cAACE,EAAU,IACLJ,EAAIK,gBACSP,EAAcQ,YAClBP,EACbR,MAAOA,EACPE,IAAKA,EACLc,YAAaZ,EACbP,IAAKA,GAEJD,EAAMqB,UAEK,IAIpBvB,EAAKwB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = (props: LinkProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ref, children, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...rest}\n        $textHoverColor={textHoverColor}\n        $appearance={appearance}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n};\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","props","foundTheme","useTheme","theme","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","ref","children","rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","displayName"],"mappings":"+KAqCa,MAAAA,EAAQC,IACnB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAML,EAAMK,IACdL,EAAMK,IACW,WAAjBL,EAAMM,OACJ,sBACA,GAGAC,EAAYP,EAAMQ,IAAmB,MAAbR,EAAMQ,QAAaC,EAAY,KAEvDC,eAAEA,EAAcC,WAAEA,EAAUC,IAAEA,EAAGC,SAAEA,KAAaC,GAASd,EAE/D,OACEe,EAACC,cAAAC,EAAc,CAAAd,MAAOA,GACpBY,EAAAC,cAACE,EAAU,IACLJ,EAAIK,gBACST,EAAcU,YAClBT,EACbR,MAAOA,EACPE,IAAKA,EACLgB,YAAad,EACbK,IAAKA,GAEJC,GAEW,EAIpBd,EAAKuB,YAAc"}

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

@@ -6,7 +6,15 @@ type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
     $appearance?: "primary" | "secondary";
     $textHoverColor?: string;
 };
-export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}, StyledLinkProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
+}, StyledLinkProps>> & string & Omit<(props: TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default StyledLink;

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

@@ -1,7 +1,10 @@
 import { type ThemeType } from "../../types";
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    backgroundColor?: string;
+    ref?: import("react").Ref<HTMLDivElement>;
+    children?: import("react").ReactNode;
+    as?: import("react").ElementType;
 }, {
     $backgroundColor?: string;
     $top: string;
@@ -9,12 +12,20 @@ export declare const Content: import("styled-components/dist/types").IStyledComp
     $maxWidth: string;
     $isAnimated?: boolean;
     theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}>> & string & Omit<({ ...props }: import("../Box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType;
+    full?: boolean;
+    href?: string;
+    size?: "m" | "l";
+    css?: unknown;
+    as?: import("react").ElementType;
+    isIconButton?: boolean;
+    ref?: import("react").Ref<HTMLElement>;
+    children?: import("react").ReactNode;
 }, {
     theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const Background: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: ThemeType;
     $isAnimated?: boolean;

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 ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(\n          children as ReactElement,\n          (child: React.ReactElement) =>\n            React.cloneElement(child, {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            }),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","full","popRef","useRef","showPopOver","setShowPopOver","useState","foundTheme","useTheme","theme","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"iWAuCM,SAAUA,GAAQC,sBACtBA,EAAqBC,SACrBA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,IACZA,EAAGC,KACHA,GAAO,IAEP,MAAMC,EAASC,EAAuB,OAC/BC,EAAaC,GAAkBC,GAAS,GACzCC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAS,IAAMN,GAAgBD,GAC/BQ,EAAe,IAAMP,GAAe,GAGpCQ,EAAuBC,IACrBZ,EAAOa,UAAYb,EAAOa,QAAQC,SAASF,EAAEG,SACjDL,KA2BJ,OAvBAM,GACE,KACEN,GAAc,GAEhB,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,KACJ3B,GACFA,EAAsBW,KAEvB,CAACA,EAAaX,IAEjB4B,GAAiB,KACfC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,KACLS,SAASE,oBAAoB,QAASX,GAAqB,EAAK,IAEjE,IAGDY,EAACC,cAAAC,EAAc,CAAAlB,MAAOA,GACpBgB,EAACC,cAAAE,SAAsB3B,EAAI4B,KAAQ7B,EAAK8B,IAAK5B,GAC1CuB,EAAMM,SAASC,IACdtC,GACCuC,GACCR,EAAMS,aAAaD,EAAO,CACxBE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,aAGtBA,EACCqB,EAACC,cAAAU,aACYxC,GAAY,OAAMyC,UAClB1C,GAAY,iBACZE,GAAY,MACvBY,MAAOA,EACP6B,KAAK,SACO,aAAAxC,eACAM,GAEXL,GAED,MAIZ"}
+{"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","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","full","popRef","useRef","showPopOver","setShowPopOver","useState","foundTheme","useTheme","theme","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"iWAuCM,SAAUA,GAAQC,sBACtBA,EAAqBC,SACrBA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,IACZA,EAAGC,KACHA,GAAO,IAEP,MAAMC,EAASC,EAAuB,OAC/BC,EAAaC,GAAkBC,GAAS,GACzCC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAS,IAAMN,GAAgBD,GAC/BQ,EAAe,IAAMP,GAAe,GAGpCQ,EAAuBC,IACrBZ,EAAOa,UAAYb,EAAOa,QAAQC,SAASF,EAAEG,SACjDL,KA2BJ,OAvBAM,GACE,KACEN,GAAc,GAEhB,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,KACJ3B,GACFA,EAAsBW,KAEvB,CAACA,EAAaX,IAEjB4B,GAAiB,KACfC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,KACLS,SAASE,oBAAoB,QAASX,GAAqB,EAAK,IAEjE,IAGDY,EAACC,cAAAC,EAAc,CAAAlB,MAAOA,GACpBgB,EAACC,cAAAE,SAAsB3B,EAAI4B,KAAQ7B,EAAK8B,IAAK5B,GAC1CuB,EAAMM,SAASC,IAAItC,GAAWuC,GAC7BR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,aAItBA,EACCqB,EAACC,cAAAU,aACYxC,GAAY,OAAMyC,UAClB1C,GAAY,iBACZE,GAAY,MACvBY,MAAOA,EACP6B,KAAK,SACO,aAAAxC,eACAM,GAEXL,GAED,MAIZ"}

package/lib/src/components/Radio/Radio.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Radio, { type RadioProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: (props: RadioProps) => React.JSX.Element;
     args: {
         id: string;
         value: string;

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

@@ -1,6 +1,6 @@
-import React, { type InputHTMLAttributes, type Ref, type ReactNode, type LegacyRef } from "react";
+import React, { type InputHTMLAttributes, type Ref, type ReactNode } from "react";
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
@@ -12,5 +12,5 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
  *
  * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component
  */
-export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: (props: RadioProps) => React.JSX.Element;
 export default Radio;

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as s,ThemeProvider as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{StyledLabel as o,StyledInput as i,SelectedBorder as d,CheckWrapper as m,Check as n,VerticalAlign as c}from"./styles.js";const u=r(((r,u)=>{const E=s(),p={...a,...E},{children:h,hasError:f,errorMessage:b,...g}=r;return e.createElement(t,{theme:p},e.createElement(o,{$hasError:r.hasError||!!r.errorMessage||!1,className:r.className,$checked:r.checked||!1,$disabled:r.disabled||!1},e.createElement(i,{...g,disabled:r.disabled||!1,type:"radio",ref:u,"aria-describedby":r.id&&r.errorMessage?`${r.id}-error`:void 0}),e.createElement(d,null),p.utilities.useDefaultFromControls?null:e.createElement(m,null,e.createElement(n,null)),e.createElement(c,null,r.children||r.value)),!!r.errorMessage&&e.createElement(l,{marginTop:"xxs",id:r.id?`${r.id}-error`:void 0},r.errorMessage))}));u.displayName="Radio";export{u as Radio,u as default};
+import e from"react";import{useTheme as r,ThemeProvider as t}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{StyledLabel as l,StyledInput as o,SelectedBorder as i,CheckWrapper as d,Check as m,VerticalAlign as n}from"./styles.js";const c=c=>{const u=r(),E={...s,...u},{children:f,hasError:h,errorMessage:p,ref:b,...g}=c;return e.createElement(t,{theme:E},e.createElement(l,{$hasError:c.hasError||!!c.errorMessage||!1,className:c.className,$checked:c.checked||!1,$disabled:c.disabled||!1},e.createElement(o,{...g,disabled:c.disabled||!1,type:"radio",ref:b,"aria-describedby":c.id&&c.errorMessage?`${c.id}-error`:void 0}),e.createElement(i,null),E.utilities.useDefaultFromControls?null:e.createElement(d,null,e.createElement(m,null)),e.createElement(n,null,c.children||c.value)),!!c.errorMessage&&e.createElement(a,{marginTop:"xxs",id:c.id?`${c.id}-error`:void 0},c.errorMessage))};export{c as Radio,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = forwardRef(\n  (props: RadioProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, hasError, errorMessage, ...rest } = props;\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={props.hasError || !!props.errorMessage || false}\n          className={props.className}\n          $checked={props.checked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"radio\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!props.errorMessage\n                ? `${props.id}-error`\n                : undefined\n            }\n          />\n          <SelectedBorder />\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check />\n            </CheckWrapper>\n          )}\n          <VerticalAlign>{props.children || props.value}</VerticalAlign>\n        </StyledLabel>\n        {!!props.errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {props.errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","className","$checked","checked","$disabled","disabled","StyledInput","type","id","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop","displayName"],"mappings":"wUAmCa,MAAAA,EAAQC,GACnB,CAACC,EAAmBC,KAClB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EACtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMO,YAAcP,EAAMQ,eAAgB,EACrDO,UAAWf,EAAMe,UACPC,SAAAhB,EAAMiB,UAAW,EAChBC,UAAAlB,EAAMmB,WAAY,GAE7BT,EAAAC,cAACS,EAAW,IACNX,EACJU,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,QACLpB,IAAKA,EAEH,mBAAED,EAAMsB,IAAQtB,EAAMQ,aAClB,GAAGR,EAAMsB,gBACTC,IAGRb,EAAAC,cAACa,EAAiB,MACjBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAACC,cAAAiB,EAAQ,OAGblB,EAACC,cAAAkB,EAAe,KAAA7B,EAAMM,UAAYN,EAAM8B,UAEvC9B,EAAMQ,cACPE,EAACC,cAAAoB,EACC,CAAAC,UAAU,MACVV,GAAItB,EAAMsB,GAAK,GAAGtB,EAAMsB,gBAAaC,GAEpCvB,EAAMQ,cAGG,IAKtBV,EAAMmC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = (props: RadioProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLabel\n        $hasError={props.hasError || !!props.errorMessage || false}\n        className={props.className}\n        $checked={props.checked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"radio\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!props.errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        {theme.utilities.useDefaultFromControls ? null : (\n          <CheckWrapper>\n            <Check />\n          </CheckWrapper>\n        )}\n        <VerticalAlign>{props.children || props.value}</VerticalAlign>\n      </StyledLabel>\n      {!!props.errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {props.errorMessage}\n        </ErrorText>\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Radio;\n"],"names":["Radio","props","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","ref","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","className","$checked","checked","$disabled","disabled","StyledInput","type","id","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"uTAiCa,MAAAA,EAASC,IACpB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,EAAYC,IAAEA,KAAQC,GAAST,EAC3D,OACEU,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMM,YAAcN,EAAMO,eAAgB,EACrDQ,UAAWf,EAAMe,UACPC,SAAAhB,EAAMiB,UAAW,EAChBC,UAAAlB,EAAMmB,WAAY,GAE7BT,EAAAC,cAACS,EACK,IAAAX,EACJU,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,QACLb,IAAKA,EAEH,mBAAER,EAAMsB,IAAQtB,EAAMO,aAAe,GAAGP,EAAMsB,gBAAaC,IAG/Db,EAAAC,cAACa,EAAiB,MACjBrB,EAAMsB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAACC,cAAAiB,EAAQ,OAGblB,EAACC,cAAAkB,EAAe,KAAA7B,EAAMK,UAAYL,EAAM8B,UAEvC9B,EAAMO,cACPG,EAACC,cAAAoB,EACC,CAAAC,UAAU,MACVV,GAAItB,EAAMsB,GAAK,GAAGtB,EAAMsB,gBAAaC,GAEpCvB,EAAMO,cAGG"}

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

@@ -3,9 +3,12 @@ type StyleRadioWidthProp = {
     $numberOfAttributes: number;
     theme: ThemeType;
 };
-export declare const StyledRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Radio").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, StyleRadioWidthProp>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Radio").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+    hasError?: boolean;
+    errorMessage?: string;
+    children?: import("react").ReactNode;
+}, StyleRadioWidthProp>> & string & Omit<(props: import("../Radio").RadioProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {
     theme: ThemeType;
 }>> & string;

package/lib/src/components/Select/Selelct.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Select, { type SelectProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+    component: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
     args: {
         disabled: boolean;
         required: boolean;

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

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type SelectHTMLAttributes, type Ref, type LegacyRef } from "react";
+import React, { type ReactNode, type SelectHTMLAttributes, type Ref } from "react";
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** error message text */
     errorMessage?: string;
@@ -11,11 +11,11 @@ export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
     hideRequiredInLabel?: boolean;
     /** react DOM reference of object used scrolling to it with errors etc */
-    ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;
+    ref?: Ref<HTMLSelectElement>;
 };
 /**
  * Select components are used for collecting user provided information from a list of options.
  *
  */
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
 export default Select;

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as i}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import{ErrorText as a}from"../ErrorText/index.js";import d from"./styles.js";const m=r((({errorMessage:r,hasError:m,required:s,label:l,hintText:n,hideRequiredInLabel:p,...c},f)=>{const x=i(),h={...t,...x};return e.createElement(o,{label:l,hintText:n,required:!p&&s||!1},e.createElement(d,{...c,ref:f,theme:h,required:s,"aria-invalid":m||!!r||!1,"aria-describedby":c.id&&r?`${c.id}-error`:void 0,$hasError:m||!!r||!1}),!!r&&e.createElement(a,{marginTop:"xxs",id:c.id?`${c.id}-error`:void 0},r))}));m.displayName="Select";export{m as Select,m as default};
+import r from"react";import{useTheme as e}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{LabelWrapper as t}from"../LabelWrapper/index.js";import{ErrorText as o}from"../ErrorText/index.js";import a from"./styles.js";const d=({errorMessage:d,hasError:m,required:s,label:n,hintText:l,hideRequiredInLabel:p,ref:c,...f})=>{const x=e(),h={...i,...x};return r.createElement(t,{label:n,hintText:l,required:!p&&s||!1},r.createElement(a,{...f,ref:c,theme:h,required:s,"aria-invalid":m||!!d||!1,"aria-describedby":f.id&&d?`${f.id}-error`:void 0,$hasError:m||!!d||!1}),!!d&&r.createElement(o,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},d))};export{d as Select,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = forwardRef(\n  (\n    {\n      errorMessage,\n      hasError,\n      required,\n      label,\n      hintText,\n      hideRequiredInLabel,\n      ...props\n    }: SelectProps,\n    ref?: Ref<HTMLSelectElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    return (\n      <LabelWrapper\n        label={label}\n        hintText={hintText}\n        required={(!hideRequiredInLabel && required) || false}\n      >\n        <StyledSelect\n          {...props}\n          ref={ref}\n          theme={theme}\n          required={required}\n          aria-invalid={hasError || !!errorMessage || false}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          $hasError={hasError || !!errorMessage || false}\n        />\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </LabelWrapper>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"],"names":["Select","forwardRef","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","props","ref","foundTheme","useTheme","theme","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","undefined","$hasError","ErrorText","marginTop","displayName"],"mappings":"yQAkCa,MAAAA,EAASC,GACpB,EAEIC,eACAC,WACAC,WACAC,QACAC,WACAC,yBACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,gBAACC,EAAY,CACXV,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDU,EAACE,cAAAC,EACK,IAAAT,EACJC,IAAKA,EACLG,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CM,EAAMU,IAAQhB,EAAe,GAAGM,EAAMU,gBAAaC,EAE5CC,UAAAjB,KAAcD,IAAgB,MAExCA,GACDY,gBAACO,EAAS,CACRC,UAAU,MACVJ,GAAIV,EAAMU,GAAK,GAAGV,EAAMU,gBAAaC,GAEpCjB,GAGQ,IAKrBF,EAAOuB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        theme={theme}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","ref","props","foundTheme","useTheme","theme","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","undefined","$hasError","ErrorText","marginTop"],"mappings":"wPAgCa,MAAAA,EAAS,EACpBC,eACAC,WACAC,WACAC,QACAC,WACAC,sBACAC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,gBAACC,EAAY,CACXV,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDU,EAACE,cAAAC,EACK,IAAAR,EACJD,IAAKA,EACLI,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMS,IAAQhB,EAAe,GAAGO,EAAMS,gBAAaC,EAE5CC,UAAAjB,KAAcD,IAAgB,MAExCA,GACDY,gBAACO,EAAS,CACRC,UAAU,MACVJ,GAAIT,EAAMS,GAAK,GAAGT,EAAMS,gBAAaC,GAEpCjB,GAGQ"}

package/lib/src/components/Text/Text.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Text from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: (props: import(".").TextProps) => React.JSX.Element;
     args: {
         children: string;
         textColor: string;

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

@@ -24,5 +24,5 @@ export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** react reference to the DOM element sometime used to scroll to or set focus after an error */
     ref?: Ref<HTMLElement>;
 };
-export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Text: (props: TextProps) => React.JSX.Element;
 export default Text;

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

@@ -1,2 +1,2 @@
-import t,{forwardRef as e}from"react";import{useTheme as o}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as i}from"./styles.js";const a=e(((e,a)=>{const l=o(),x={...r,...l},{textColor:n,textAlign:s,textSize:p,textWeight:f,textFontFamily:c,wordBreak:$,overflowWrap:d,...g}=e,y=m(g);return t.createElement(i,{$textColor:n,$textAlign:s,$textSize:p,$textWeight:f,$textFontFamily:c,$wordBreak:$,$overflowWrap:d,...y,theme:x,ref:a})}));a.displayName="Text";export{a as Text,a as default};
+import t from"react";import{useTheme as e}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as o}from"../Spacing/index.js";import{TextStyled as m}from"./styles.js";const i=i=>{const l=e(),n={...r,...l},{textColor:x,textAlign:a,textSize:s,textWeight:f,textFontFamily:p,wordBreak:c,overflowWrap:$,ref:d,...g}=i,h=o(g);return t.createElement(m,{$textColor:x,$textAlign:a,$textSize:s,$textWeight:f,$textFontFamily:p,$wordBreak:c,$overflowWrap:$,...h,theme:n,ref:d})};export{i as Text,i as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ElementType,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** text colour  */\n    textColor?: string;\n    /** text horizontal alignment  */\n    textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n    textWeight?: number | string;\n    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n    textFontFamily?: string;\n    /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n    as?: ElementType;\n    /** word-break behaviour */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behaviour */\n    overflowWrap?: OverflowWrapType;\n    /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n    ref?: Ref<HTMLElement>;\n  };\n\nexport const Text = forwardRef((props: TextProps, ref?: Ref<HTMLElement>) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <TextStyled\n      $textColor={textColor}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      theme={theme}\n      ref={ref as LegacyRef<HTMLParagraphElement>}\n    />\n  );\n});\n\nText.displayName = \"Text\";\n\nexport default Text;\n"],"names":["Text","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap","displayName"],"mappings":"sPAkDa,MAAAA,EAAOC,GAAW,CAACC,EAAkBC,KAChD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,UACJA,EAASC,UACTA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,UACdA,EAASC,aACTA,KACGC,GACDb,EAEEc,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAU,CAAAC,WACGb,EAASc,WACTb,EAASc,UACVb,EAAQc,YACNb,EAAUc,gBACNb,EAAcc,WACnBb,EAASc,cACNb,KACXE,EACJV,MAAOA,EACPH,IAAKA,GACL,IAINH,EAAK4B,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** text colour  */\n    textColor?: string;\n    /** text horizontal alignment  */\n    textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n    textWeight?: number | string;\n    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n    textFontFamily?: string;\n    /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n    as?: ElementType;\n    /** word-break behaviour */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behaviour */\n    overflowWrap?: OverflowWrapType;\n    /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n    ref?: Ref<HTMLElement>;\n  };\n\nexport const Text = (props: TextProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ref,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <TextStyled\n      $textColor={textColor}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      theme={theme}\n      ref={ref as Ref<HTMLParagraphElement>}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","props","foundTheme","useTheme","theme","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qOA4Ca,MAAAA,EAAQC,IACnB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,UACJA,EAASC,UACTA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,UACdA,EAASC,aACTA,EAAYC,IACZA,KACGC,GACDb,EAEEc,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAU,CAAAC,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,KACXG,EACJX,MAAOA,EACPS,IAAKA,GACL"}

package/lib/src/components/TextAreaField/TextAreaField.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import TextAreaField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+    component: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: import(".").TextAreaFieldProps) => React.JSX.Element;
     args: {
         defaultValue: string;
         disabled: boolean;

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

@@ -18,5 +18,5 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 /**
  * TextAreaField lets users enter and edit multiline text.
  */
-export declare const TextAreaField: React.ForwardRefExoticComponent<Omit<TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaField: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: TextAreaFieldProps) => React.JSX.Element;
 export default TextAreaField;

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as t}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{ErrorText as o}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import s from"./styles.js";const m=r((({errorMessage:r,hasError:m,hintText:d,label:n,resize:l="vertical",lineCount:p=3,...c},x)=>{const f=t(),u={...i,...f};return e.createElement(a,{label:n,hintText:d,required:c.required||!1},e.createElement(s,{...c,"aria-invalid":m||!!r||!1,"aria-describedby":c.id&&r?`${c.id}-error`:void 0,$hasError:m||!!r||!1,$resize:l,$lineCount:p,theme:u,ref:x,"data-hj-suppress":!0}),!!r&&e.createElement(o,{marginTop:"xxs",id:c.id?`${c.id}-error`:void 0},r))}));m.displayName="TextAreaField";export{m as TextAreaField,m as default};
+import r from"react";import{useTheme as e}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import s from"./styles.js";const a=({errorMessage:a,hasError:m,hintText:n,label:d,resize:l="vertical",lineCount:p=3,ref:c,...f})=>{const u=e(),x={...t,...u};return r.createElement(o,{label:d,hintText:n,required:f.required||!1},r.createElement(s,{...f,"aria-invalid":m||!!a||!1,"aria-describedby":f.id&&a?`${f.id}-error`:void 0,$hasError:m||!!a||!1,$resize:l,$lineCount:p,theme:x,ref:c,"data-hj-suppress":!0}),!!a&&r.createElement(i,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},a))};export{a as TextAreaField,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = forwardRef(\n  (\n    {\n      errorMessage,\n      hasError,\n      hintText,\n      label,\n      resize = \"vertical\",\n      lineCount = 3,\n      ...props\n    }: TextAreaFieldProps,\n    ref?: Ref<HTMLTextAreaElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    return (\n      <LabelWrapper\n        label={label}\n        hintText={hintText}\n        required={props.required || false}\n      >\n        <StyledTextArea\n          {...props}\n          aria-invalid={hasError || !!errorMessage || false}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          $hasError={hasError || !!errorMessage || false}\n          $resize={resize}\n          $lineCount={lineCount}\n          theme={theme}\n          ref={ref}\n          data-hj-suppress\n        />\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </LabelWrapper>\n    );\n  },\n);\n\nTextAreaField.displayName = \"TextAreaField\";\n\nexport default TextAreaField;\n"],"names":["TextAreaField","forwardRef","errorMessage","hasError","hintText","label","resize","lineCount","props","ref","foundTheme","useTheme","theme","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$resize","$lineCount","ErrorText","marginTop","displayName"],"mappings":"yQAkCO,MAAMA,EAAgBC,GAC3B,EAEIC,eACAC,WACAC,WACAC,QACAC,SAAS,WACTC,YAAY,KACTC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,EAACC,cAAAC,GACCX,MAAOA,EACPD,SAAUA,EACVa,SAAUT,EAAMS,WAAY,GAE5BH,EAACC,cAAAG,EACK,IAAAV,EACU,eAAAL,KAAcD,IAAgB,EAAK,mBAE7CM,EAAMW,IAAQjB,EAAe,GAAGM,EAAMW,gBAAaC,YAE5CjB,KAAcD,IAAgB,EAChCmB,QAAAf,EACGgB,WAAAf,EACZK,MAAOA,EACPH,IAAKA,EAEL,oBAAA,MACCP,GACDY,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAGX,EAAMW,gBAAaC,GAEpClB,GAGQ,IAKrBF,EAAcyB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n  errorMessage,\n  hasError,\n  hintText,\n  label,\n  resize = \"vertical\",\n  lineCount = 3,\n  ref,\n  ...props\n}: TextAreaFieldProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n    >\n      <StyledTextArea\n        {...props}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n        $resize={resize}\n        $lineCount={lineCount}\n        theme={theme}\n        ref={ref}\n        data-hj-suppress\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","errorMessage","hasError","hintText","label","resize","lineCount","ref","props","foundTheme","useTheme","theme","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wPAiCO,MAAMA,EAAgB,EAC3BC,eACAC,WACAC,WACAC,QACAC,SAAS,WACTC,YAAY,EACZC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,EAACC,cAAAC,GACCX,MAAOA,EACPD,SAAUA,EACVa,SAAUR,EAAMQ,WAAY,GAE5BH,EAACC,cAAAG,EACK,IAAAT,EACU,eAAAN,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMU,IAAQjB,EAAe,GAAGO,EAAMU,gBAAaC,YAE5CjB,KAAcD,IAAgB,EAChCmB,QAAAf,EACGgB,WAAAf,EACZK,MAAOA,EACPJ,IAAKA,EAEL,oBAAA,MACCN,GACDY,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIV,EAAMU,GAAK,GAAGV,EAAMU,gBAAaC,GAEpClB,GAGQ"}

package/lib/src/components/TextField/TextField.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import TextField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredInLabel, ref, ...props }: import(".").TextFieldProps) => React.JSX.Element;
     args: {
         value: undefined;
         disabled: boolean;

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

@@ -30,5 +30,5 @@ export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 /**
  * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.
  * */
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredInLabel, ref, ...props }: TextFieldProps) => React.JSX.Element;
 export default TextField;

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as i}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as l}from"../LabelWrapper/index.js";import{ExtraLeft as s,StyledInputWrapper as d,StyledInput as m,ExtraRight as o,Extra as n,ExtraWrapper as c}from"./styles.js";const h=r((({errorMessage:r,extraBottom:h,extraLeft:p,extraRight:E,extraTop:b,hasError:x,hintText:V,isValid:u,isValidVisible:$,isInvalidVisible:f,label:v,hideRequiredInLabel:T,...j},I)=>{const g=i(),q={...t,...g},y=e.createElement(e.Fragment,null,!!p&&e.createElement(s,{theme:q},p),e.createElement(d,{$hasError:x||!!r||!1,$isValid:void 0!==u?u:!x&&!r,"aria-invalid":x||!!r||!1,$isValidVisible:$||!1,$isInvalidVisible:f||!1,theme:q},e.createElement(m,{$hasError:x||!!r||!1,$isValid:void 0!==u?u:!x&&!r,"aria-invalid":x||!!r||!1,"aria-describedby":j.id&&r?`${j.id}-error`:void 0,$isValidVisible:$||!1,$isInvalidVisible:f||!1,...j,theme:q,"data-hj-suppress":!0,ref:I})),!!E&&e.createElement(o,{theme:q},E));return e.createElement(l,{label:v,hintText:V,required:j.required||!1,hideRequiredInLabel:T},!!b&&e.createElement(n,{theme:q},b),E||p?e.createElement(c,null,y):y,!!h&&e.createElement(n,{theme:q},h),!!r&&e.createElement(a,{marginTop:"xxs",id:j.id?`${j.id}-error`:void 0},r))}));h.displayName="TextField";export{h as TextField,h as default};
+import e from"react";import{useTheme as r}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{ErrorText as t}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ExtraLeft as l,StyledInputWrapper as s,StyledInput as d,ExtraRight as m,Extra as o,ExtraWrapper as n}from"./styles.js";const c=({errorMessage:c,extraBottom:h,extraLeft:p,extraRight:E,extraTop:b,hasError:x,hintText:V,isValid:f,isValidVisible:u,isInvalidVisible:$,label:v,hideRequiredInLabel:j,ref:I,...T})=>{const g=r(),q={...i,...g},L=e.createElement(e.Fragment,null,!!p&&e.createElement(l,{theme:q},p),e.createElement(s,{$hasError:x||!!c||!1,$isValid:void 0!==f?f:!x&&!c,"aria-invalid":x||!!c||!1,$isValidVisible:u||!1,$isInvalidVisible:$||!1,theme:q},e.createElement(d,{$hasError:x||!!c||!1,$isValid:void 0!==f?f:!x&&!c,"aria-invalid":x||!!c||!1,"aria-describedby":T.id&&c?`${T.id}-error`:void 0,$isValidVisible:u||!1,$isInvalidVisible:$||!1,...T,theme:q,"data-hj-suppress":!0,ref:I})),!!E&&e.createElement(m,{theme:q},E));return e.createElement(a,{label:v,hintText:V,required:T.required||!1,hideRequiredInLabel:j},!!b&&e.createElement(o,{theme:q},b),E||p?e.createElement(n,null,L):L,!!h&&e.createElement(o,{theme:q},h),!!c&&e.createElement(t,{marginTop:"xxs",id:T.id?`${T.id}-error`:void 0},c))};export{c as TextField,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n  ExtraLeft,\n  ExtraRight,\n  Extra,\n  ExtraWrapper,\n  StyledInput,\n  StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** error message text  */\n  errorMessage?: string;\n  /** custom component/text that appears underneath the input field */\n  extraBottom?: ReactNode;\n  /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n  extraLeft?: ReactNode;\n  /** custom component/text that appears to the right of the input field for example a search button */\n  extraRight?: ReactNode;\n  /** custom component/text that appears above the input field for example a url domain */\n  extraTop?: ReactNode;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = forwardRef(\n  (\n    {\n      errorMessage,\n      extraBottom,\n      extraLeft,\n      extraRight,\n      extraTop,\n      hasError,\n      hintText,\n      isValid,\n      isValidVisible,\n      isInvalidVisible,\n      label,\n      hideRequiredInLabel,\n      ...props\n    }: TextFieldProps,\n    ref?: Ref<HTMLInputElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const renderContent = (\n      <>\n        {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n        <StyledInputWrapper\n          $hasError={hasError || !!errorMessage || false}\n          $isValid={\n            typeof isValid !== \"undefined\"\n              ? isValid\n              : !hasError && !errorMessage\n          }\n          aria-invalid={hasError || !!errorMessage || false}\n          $isValidVisible={isValidVisible || false}\n          $isInvalidVisible={isInvalidVisible || false}\n          theme={theme}\n        >\n          <StyledInput\n            $hasError={hasError || !!errorMessage || false}\n            $isValid={\n              typeof isValid !== \"undefined\"\n                ? isValid\n                : !hasError && !errorMessage\n            }\n            aria-invalid={hasError || !!errorMessage || false}\n            aria-describedby={\n              !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n            }\n            $isValidVisible={isValidVisible || false}\n            $isInvalidVisible={isInvalidVisible || false}\n            {...props}\n            theme={theme}\n            data-hj-suppress\n            ref={ref}\n          />\n        </StyledInputWrapper>\n        {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n      </>\n    );\n\n    return (\n      <LabelWrapper\n        label={label}\n        hintText={hintText}\n        required={props.required || false}\n        hideRequiredInLabel={hideRequiredInLabel}\n      >\n        {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n        {!!extraRight || !!extraLeft ? (\n          <ExtraWrapper>{renderContent}</ExtraWrapper>\n        ) : (\n          renderContent\n        )}\n        {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </LabelWrapper>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n\nexport default TextField;\n"],"names":["TextField","forwardRef","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","props","ref","foundTheme","useTheme","theme","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$hasError","$isValid","$isValidVisible","$isInvalidVisible","StyledInput","id","undefined","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","displayName"],"mappings":"4WAqDa,MAAAA,EAAYC,GACvB,EAEIC,eACAC,cACAC,YACAC,aACAC,WACAC,WACAC,WACAC,UACAC,iBACAC,mBACAC,QACAC,yBACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKnB,GAAaiB,EAACC,cAAAE,EAAU,CAAAN,MAAOA,GAAQd,GAC1CiB,EAAAC,cAACG,EAAkB,CAAAC,UACNnB,KAAcL,IAAgB,EAAKyB,cAEzB,IAAZlB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK0B,gBAChClB,IAAkB,EAAKmB,kBACrBlB,IAAoB,EACvCO,MAAOA,GAEPG,EAAAC,cAACQ,EAAW,CAAAJ,UACCnB,KAAcL,IAAgB,EAAKyB,cAEzB,IAAZlB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7CY,EAAMiB,IAAQ7B,EAAe,GAAGY,EAAMiB,gBAAaC,EAEtCJ,gBAAAlB,IAAkB,EAChBmB,kBAAAlB,IAAoB,KACnCG,EACJI,MAAOA,EAAK,oBAAA,EAEZH,IAAKA,OAGNV,GAAcgB,EAAAC,cAACW,EAAW,CAAAf,MAAOA,GAAQb,IAIhD,OACEgB,gBAACa,EAAY,CACXtB,MAAOA,EACPJ,SAAUA,EACV2B,SAAUrB,EAAMqB,WAAY,EAC5BtB,oBAAqBA,KAElBP,GAAYe,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQZ,GAClCD,GAAgBD,EACjBiB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CjB,GAAekB,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQf,KACrCD,GACDmB,gBAACiB,EAAS,CACRC,UAAU,MACVR,GAAIjB,EAAMiB,GAAK,GAAGjB,EAAMiB,gBAAaC,GAEpC9B,GAGQ,IAKrBF,EAAUwC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n  ExtraLeft,\n  ExtraRight,\n  Extra,\n  ExtraWrapper,\n  StyledInput,\n  StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** error message text  */\n  errorMessage?: string;\n  /** custom component/text that appears underneath the input field */\n  extraBottom?: ReactNode;\n  /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n  extraLeft?: ReactNode;\n  /** custom component/text that appears to the right of the input field for example a search button */\n  extraRight?: ReactNode;\n  /** custom component/text that appears above the input field for example a url domain */\n  extraTop?: ReactNode;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = ({\n  errorMessage,\n  extraBottom,\n  extraLeft,\n  extraRight,\n  extraTop,\n  hasError,\n  hintText,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hideRequiredInLabel,\n  ref,\n  ...props\n}: TextFieldProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const renderContent = (\n    <>\n      {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n      <StyledInputWrapper\n        $hasError={hasError || !!errorMessage || false}\n        $isValid={\n          typeof isValid !== \"undefined\" ? isValid : !hasError && !errorMessage\n        }\n        aria-invalid={hasError || !!errorMessage || false}\n        $isValidVisible={isValidVisible || false}\n        $isInvalidVisible={isInvalidVisible || false}\n        theme={theme}\n      >\n        <StyledInput\n          $hasError={hasError || !!errorMessage || false}\n          $isValid={\n            typeof isValid !== \"undefined\"\n              ? isValid\n              : !hasError && !errorMessage\n          }\n          aria-invalid={hasError || !!errorMessage || false}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          $isValidVisible={isValidVisible || false}\n          $isInvalidVisible={isInvalidVisible || false}\n          {...props}\n          theme={theme}\n          data-hj-suppress\n          ref={ref}\n        />\n      </StyledInputWrapper>\n      {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n    </>\n  );\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n      hideRequiredInLabel={hideRequiredInLabel}\n    >\n      {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n      {!!extraRight || !!extraLeft ? (\n        <ExtraWrapper>{renderContent}</ExtraWrapper>\n      ) : (\n        renderContent\n      )}\n      {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextField;\n"],"names":["TextField","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref","props","foundTheme","useTheme","theme","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$isValid","$isInvalidVisible","StyledInput","$hasError","id","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop"],"mappings":"2VAoDa,MAAAA,EAAY,EACvBC,eACAC,cACAC,YACAC,aACAC,WACAC,WACAC,WACAC,UACAC,iBACAC,mBACAC,QACAC,sBACAC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKnB,GAAaiB,EAACC,cAAAE,EAAU,CAAAN,MAAOA,GAAQd,GAC1CiB,EAACC,cAAAG,aACYlB,KAAcL,IAAgB,EAAKwB,cAEzB,IAAZjB,EAA0BA,GAAWF,IAAaL,EAE7C,eAAAK,KAAcL,IAAgB,kBAC3BQ,IAAkB,EAChBiB,kBAAAhB,IAAoB,EACvCO,MAAOA,GAEPG,EAAAC,cAACM,EAAW,CAAAC,UACCtB,KAAcL,IAAgB,EAAKwB,cAEzB,IAAZjB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7Ca,EAAMe,IAAQ5B,EAAe,GAAGa,EAAMe,gBAAaC,EAEtCC,gBAAAtB,IAAkB,EAChBiB,kBAAAhB,IAAoB,KACnCI,EACJG,MAAOA,EAAK,oBAAA,EAEZJ,IAAKA,OAGNT,GAAcgB,EAAAC,cAACW,EAAW,CAAAf,MAAOA,GAAQb,IAIhD,OACEgB,gBAACa,EAAY,CACXtB,MAAOA,EACPJ,SAAUA,EACV2B,SAAUpB,EAAMoB,WAAY,EAC5BtB,oBAAqBA,KAElBP,GAAYe,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQZ,GAClCD,GAAgBD,EACjBiB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CjB,GAAekB,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQf,KACrCD,GACDmB,gBAACiB,EAAS,CACRC,UAAU,MACVT,GAAIf,EAAMe,GAAK,GAAGf,EAAMe,gBAAaC,GAEpC7B,GAGQ"}

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

@@ -10,12 +10,8 @@ type StyledInputProps = {
     $isInvalidVisible?: boolean;
 };
 export declare const Extra: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ExtraProps>> & string;
-export declare const ExtraLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, never>> & string;
-export declare const ExtraRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, ExtraProps>> & string;
+export declare const ExtraLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, never>> & string;
+export declare const ExtraRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, ExtraProps>> & string;
 export declare const ExtraWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledInputProps>> & string;
 export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;

package/lib/src/components/ThemeCheatSheet.d.ts

@@ -3,5 +3,5 @@ import { type ThemeType } from "../types";
 export declare function ThemeCheatSheet({ theme }: {
     theme?: ThemeType;
 }): React.JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<import("styled-components").ExecutionProps & React.RefAttributes<typeof ThemeCheatSheet>> & {};
+declare const _default: React.ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & React.RefAttributes<typeof ThemeCheatSheet>> & {};
 export default _default;

package/lib/src/hooks/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import { type DependencyList, type RefObject, type MutableRefObject } from "react";
+import { type DependencyList, type RefObject } from "react";
 declare const useScrollPosition: (effect: ({ currPos, }: {
     prevPos: {
         x: number;
@@ -8,6 +8,6 @@ declare const useScrollPosition: (effect: ({ currPos, }: {
         x: number;
         y: number;
     };
-}) => void, deps: DependencyList, element: RefObject<HTMLElement> | MutableRefObject<undefined> | null, useWindow: boolean, wait: number) => void;
+}) => void, deps: DependencyList, element: RefObject<HTMLElement | null> | null, useWindow: boolean, wait: number) => void;
 export default useScrollPosition;
 export { useScrollPosition };