@cruk/cruk-react-components 7.0.0 → 7.1.0

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

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from "react";
-import { type SpaceType } from "../../types";
+import { type ColourVariableType } from "../../types";
 /**
  * Displays a numeric or icon indicator. You can use the icon prop to
 indicate the importance of the badge to the user.
@@ -13,18 +13,15 @@ at the end of a sentence, link, or button. Unless the context is clear,
 consider including additional context with a visually hidden piece of
 additional text.
  */
-export declare function Badge({ children, size, backgroundColor, borderColor, textColor, isSquare, }: {
-    /** background colour of badge */
-    backgroundColor?: string;
-    /** border colour of badge */
-    borderColor?: string;
-    /** text colour of badge */
-    textColor?: string;
-    /** size of badge */
-    size?: SpaceType;
+export declare function Badge({ children, size, isSquare, backgroundColor, textColor, borderColor, }: {
+    size?: "xs" | "s" | "m" | "l" | "xl";
     /** contents of badge */
     children?: ReactNode;
     /** forces shape to have equal width and height set by size attribute */
     isSquare?: boolean;
+    textColor?: ColourVariableType | string;
+    backgroundColor?: ColourVariableType | string;
+    borderColor?: ColourVariableType | string;
+    style?: React.CSSProperties;
 }): React.JSX.Element;
 export default Badge;

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

@@ -1,2 +1,2 @@
-import r from"react";import{StyledBadge as o}from"./styles.js";import{themeColorOrString as t}from"../../utils/themeUtils.js";function e(e){var i=e.children,l=e.size,s=void 0===l?"xs":l,a=e.backgroundColor,n=void 0===a?"primary":a,d=e.borderColor,m=void 0===d?"transparent":d,u=e.textColor,p=void 0===u?"text-on-primary":u,c=e.isSquare,f=null!=c?c:!("string"==typeof i);return r.createElement(o,{$isSquare:f,$size:s,$backgroundColor:t(n),$borderColor:t(m),$textColor:t(p)},i)}export{e as Badge,e as default};
+import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{themeColorOrString as e}from"../../utils/themeUtils.js";function t(t){var s=t.children,i=t.size,l=t.isSquare,a=t.backgroundColor,d=t.textColor,n=t.borderColor,m=null!=l?l:!("string"==typeof s),u=d?e(d):void 0,c=a?e(a):void 0,b=n?e(n):void 0,p={"data-size":i,"data-is-square":m};return r.createElement("span",o({className:["component-badge"].join(" ")},p,{style:{color:u,backgroundColor:c,borderColor:b}}),s)}export{t as Badge,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { type SpaceType } from \"../../types\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size = \"xs\",\n  backgroundColor = \"primary\",\n  borderColor = \"transparent\",\n  textColor = \"text-on-primary\",\n  isSquare,\n}: {\n  /** background colour of badge */\n  backgroundColor?: string;\n  /** border colour of badge */\n  borderColor?: string;\n  /** text colour of badge */\n  textColor?: string;\n  /** size of badge */\n  size?: SpaceType;\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n}) {\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n\n  return (\n    <StyledBadge\n      $isSquare={isSquareCalculated}\n      $size={size}\n      $backgroundColor={themeColorOrString(backgroundColor)}\n      $borderColor={themeColorOrString(borderColor)}\n      $textColor={themeColorOrString(textColor)}\n    >\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","isSquare","isSquareCalculated","React","createElement","StyledBadge","$isSquare","$size","$backgroundColor","themeColorOrString","$borderColor","$textColor"],"mappings":"8HAmBM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,aAAkB,UAASD,EAC3BE,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,gBACdE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,kBAAiBA,EAC7BE,EAAQV,EAAAU,SAeFC,EAAqBD,QAAAA,IAAkC,iBAAbT,GAEhD,OACEW,EAAAC,cAACC,EAAW,CAAAC,UACCJ,EAAkBK,MACtBb,EAAIc,iBACOC,EAAmBb,GAAgBc,aACvCD,EAAmBX,GAAYa,WACjCF,EAAmBT,IAE9BR,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { type ColourVariableType } from \"../../types\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size,\n  isSquare,\n  backgroundColor,\n  textColor,\n  borderColor,\n}: {\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n  textColor?: ColourVariableType | string;\n  backgroundColor?: ColourVariableType | string;\n  borderColor?: ColourVariableType | string;\n  style?: React.CSSProperties;\n}) {\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n  const textColourThemeOrString = textColor\n    ? themeColorOrString(textColor)\n    : undefined;\n  const backgroundColourThemeOrString = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : undefined;\n  const borderColourThemeOrString = borderColor\n    ? themeColorOrString(borderColor)\n    : undefined;\n\n  const convertedProps = {\n    \"data-size\": size,\n    \"data-is-square\": isSquareCalculated,\n  };\n\n  return (\n    <span\n      className={[\"component-badge\"].join(\" \")}\n      {...convertedProps}\n      style={{\n        color: textColourThemeOrString,\n        backgroundColor: backgroundColourThemeOrString,\n        borderColor: borderColourThemeOrString,\n      }}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","size","isSquare","backgroundColor","textColor","borderColor","isSquareCalculated","textColourThemeOrString","themeColorOrString","undefined","backgroundColourThemeOrString","borderColourThemeOrString","convertedProps","React","createElement","__assign","className","join","style","color"],"mappings":"wJAiBM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAIF,EAAAE,KACJC,EAAQH,EAAAG,SACRC,oBACAC,EAASL,EAAAK,UACTC,EAAWN,EAAAM,YAYLC,EAAqBJ,QAAAA,IAAkC,iBAAbF,GAC1CO,EAA0BH,EAC5BI,EAAmBJ,QACnBK,EACEC,EAAgCP,EAClCK,EAAmBL,QACnBM,EACEE,EAA4BN,EAC9BG,EAAmBH,QACnBI,EAEEG,EAAiB,CACrB,YAAaX,EACb,iBAAkBK,GAGpB,OACEO,EAAAC,cAAA,OAAAC,EAAA,CACEC,UAAW,CAAC,mBAAmBC,KAAK,MAChCL,EAAc,CAClBM,MAAO,CACLC,MAAOZ,EACPJ,gBAAiBO,EACjBL,YAAaM,KAGdX,EAGP"}

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

@@ -1,13 +1,12 @@
-import React, { type HTMLAttributes, type Ref, type ReactNode, type ElementType } from "react";
-import { type SpacingProps } from "../Spacing";
-import { type ColourVariableType } from "../../types";
-export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+import React, { type Ref, type HTMLAttributes, type ReactNode } from "react";
+import { type ColourVariableType, type SpacingProps, type ColourProps } from "../../types";
+export type BoxProps = SpacingProps & ColourProps & HTMLAttributes<HTMLElement> & {
     /** background color of box, this will add default padding */
     backgroundColor?: string | ColourVariableType;
-    ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
-    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a "span" for example */
-    as?: ElementType;
+    ref?: Ref<HTMLDivElement | HTMLSpanElement>;
+    as?: "span" | "div";
+    style?: React.CSSProperties;
 };
 /**
  * Box is used to wrap other components to add margin and padding.

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";import{spacingPropsToSpacingPropsInternal as t}from"../Spacing/index.js";import{StyledBox as i}from"./styles.js";import{themeColorOrString as l}from"../../utils/themeUtils.js";var m=function(m){var s=r(m,[]),n=s.children,a=s.backgroundColor,d=s.ref,f=r(s,["children","backgroundColor","ref"]),c=t(f),u=a?l(a):void 0;return e.createElement(i,o({$backgroundColor:u},c,{ref:d}),n)};export{m as Box,m as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";var n=function(n){var r=a(n,[]),o=r.textColor,d=r.backgroundColor,g=r.margin,e=r.marginTop,p=r.marginRight,m=r.marginBottom,l=r.marginLeft,c=r.marginVertical,s=r.marginHorizontal,f=r.padding,h=r.paddingTop,b=r.paddingRight,u=r.paddingBottom,v=r.paddingLeft,z=r.paddingVertical,x=r.paddingHorizontal,B=r.as,C=r.children,H=r.ref,L=a(r,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","children","ref"]),R={"data-color":o,"data-bg-color":d,"data-margin":g,"data-margin-top":e,"data-margin-right":p,"data-margin-bottom":m,"data-margin-left":l,"data-margin-vertical":c,"data-margin-horizontal":s,"data-padding":f,"data-padding-top":h,"data-padding-right":b,"data-padding-bottom":u,"data-padding-left":v,"data-padding-vertical":z,"data-padding-horizontal":x};return i.createElement(i.Fragment,null,B&&"div"!==B?null:i.createElement("div",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C),"span"===B?i.createElement("span",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C):null)};export{n as Box,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nimport { type ColourVariableType } from \"../../types\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string | ColourVariableType;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\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.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * 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 Box = ({ ...props }: BoxProps) => {\n  const { children, backgroundColor, ref, ...rest } = props;\n  const restWithInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n  const backgroundColorValue = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : undefined;\n\n  return (\n    <StyledBox\n      $backgroundColor={backgroundColorValue}\n      {...restWithInternalSpacingProps}\n      ref={ref}\n    >\n      {children}\n    </StyledBox>\n  );\n};\n\nexport default Box;\n"],"names":["Box","_a","props","__rest","children","backgroundColor","ref","rest","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","backgroundColorValue","themeColorOrString","undefined","React","createElement","StyledBox","__assign","$backgroundColor"],"mappings":"qRAgCO,IAAMA,EAAM,SAACC,OAAKC,EAAKC,EAAAF,EAAV,IACVG,EAA4CF,EAAKE,SAAvCC,EAAkCH,EAAKG,gBAAtBC,EAAiBJ,MAATK,IAASL,EAA9C,CAAA,WAAA,kBAAA,QACAM,EAA+BC,EAAmCF,GAClEG,EAAuBL,EACzBM,EAAmBN,QACnBO,EAEJ,OACEC,EAAAC,cAACC,EAASC,EAAA,CAAAC,iBACUP,GACdF,EAA4B,CAChCF,IAAKA,IAEJF,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, { type Ref, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport {\n  type ColourVariableType,\n  type SpacingProps,\n  type ColourProps,\n} from \"../../types\";\n\nexport type BoxProps = SpacingProps &\n  ColourProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string | ColourVariableType;\n    children?: ReactNode;\n    ref?: Ref<HTMLDivElement | HTMLSpanElement>;\n    as?: \"span\" | \"div\";\n    style?: React.CSSProperties;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * 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 Box = ({ ...props }: BoxProps) => {\n  const {\n    textColor,\n    backgroundColor,\n    margin,\n    marginTop,\n    marginRight,\n    marginBottom,\n    marginLeft,\n    marginVertical,\n    marginHorizontal,\n    padding,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    paddingVertical,\n    paddingHorizontal,\n    as,\n    children,\n    ref,\n    ...htmlAttributes\n  } = props;\n\n  const convertedProps = {\n    \"data-color\": textColor,\n    \"data-bg-color\": backgroundColor,\n    \"data-margin\": margin,\n    \"data-margin-top\": marginTop,\n    \"data-margin-right\": marginRight,\n    \"data-margin-bottom\": marginBottom,\n    \"data-margin-left\": marginLeft,\n    \"data-margin-vertical\": marginVertical,\n    \"data-margin-horizontal\": marginHorizontal,\n    \"data-padding\": padding,\n    \"data-padding-top\": paddingTop,\n    \"data-padding-right\": paddingRight,\n    \"data-padding-bottom\": paddingBottom,\n    \"data-padding-left\": paddingLeft,\n    \"data-padding-vertical\": paddingVertical,\n    \"data-padding-horizontal\": paddingHorizontal,\n  };\n\n  return (\n    <>\n      {!as || as === \"div\" ? (\n        <div\n          ref={ref as Ref<HTMLDivElement>}\n          className={[\"component-box\", \"color-props\", \"spacing-props\"].join(\n            \" \",\n          )}\n          {...htmlAttributes}\n          {...convertedProps}\n        >\n          {children}\n        </div>\n      ) : null}\n      {as === \"span\" ? (\n        <span\n          ref={ref as Ref<HTMLSpanElement>}\n          className={[\"component-box\", \"color-props\", \"spacing-props\"].join(\n            \" \",\n          )}\n          {...htmlAttributes}\n          {...convertedProps}\n        >\n          {children}\n        </span>\n      ) : null}\n    </>\n  );\n};\n\nexport default Box;\n"],"names":["Box","_a","props","__rest","textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","children","ref","htmlAttributes","convertedProps","React","createElement","Fragment","__assign","className","join"],"mappings":"qGAyBO,IAAMA,EAAM,SAACC,OAAKC,EAAKC,EAAAF,EAAV,IAEhBG,EAoBEF,EAAKE,UAnBPC,EAmBEH,EAAKG,gBAlBPC,EAkBEJ,EAAKI,OAjBPC,EAiBEL,EAAKK,UAhBPC,EAgBEN,EAAKM,YAfPC,EAeEP,EAAKO,aAdPC,EAcER,EAAKQ,WAbPC,EAaET,EAAKS,eAZPC,EAYEV,mBAXFW,EAWEX,EAAKW,QAVPC,EAUEZ,aATFa,EASEb,EAAKa,aARPC,EAQEd,gBAPFe,EAOEf,EAAKe,YANPC,EAMEhB,EAAKgB,gBALPC,EAKEjB,EAAKiB,kBAJPC,EAIElB,EAAKkB,GAHPC,EAGEnB,EAAKmB,SAFPC,EAEEpB,EAAKoB,IADJC,IACDrB,EArBE,CAAA,YAAA,kBAAA,SAAA,YAAA,cAAA,eAAA,aAAA,iBAAA,mBAAA,UAAA,aAAA,eAAA,gBAAA,cAAA,kBAAA,oBAAA,KAAA,WAAA,QAuBAsB,EAAiB,CACrB,aAAcpB,EACd,gBAAiBC,EACjB,cAAeC,EACf,kBAAmBC,EACnB,oBAAqBC,EACrB,qBAAsBC,EACtB,mBAAoBC,EACpB,uBAAwBC,EACxB,yBAA0BC,EAC1B,eAAgBC,EAChB,mBAAoBC,EACpB,qBAAsBC,EACtB,sBAAuBC,EACvB,oBAAqBC,EACrB,wBAAyBC,EACzB,0BAA2BC,GAG7B,OACEM,EAAAC,cAAAD,EAAAE,SAAA,KACIP,GAAa,QAAPA,EAWJ,KAVFK,EAAAC,cAAA,MAAAE,EAAA,CACEN,IAAKA,EACLO,UAAW,CAAC,gBAAiB,cAAe,iBAAiBC,KAC3D,MAEEP,EACAC,GAEHH,GAGG,SAAPD,EACCK,EAAAC,cAAA,OAAAE,EAAA,CACEN,IAAKA,EACLO,UAAW,CAAC,gBAAiB,cAAe,iBAAiBC,KAC3D,MAEEP,EACAC,GAEHH,GAED,KAGV"}

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

@@ -1,28 +1,19 @@
-import React, { type ReactNode, type ButtonHTMLAttributes, type Ref, type ElementType } from "react";
+import React, { type ReactNode, type ButtonHTMLAttributes, type Ref } from "react";
+import "./styles.css";
 import { type ButtonAppearanceType } from "../../types";
-export type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {
+export declare const Button: ({ appearance, full, isIconButton, href, children, as, ref, ...buttonHtmlAttributes }: ButtonHTMLAttributes<HTMLElement> & {
     /** the look and feel of the button */
     appearance?: ButtonAppearanceType;
     /** flag to stretch but to 100% width */
     full?: boolean;
     /** this is a url which will convert the button to an anchor tag */
     href?: string;
-    /** the height of the button, this will add padding not increase text size */
-    size?: "m" | "l";
-    css?: unknown;
-    /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */
-    as?: ElementType;
+    as?: "button" | "a" | "div" | "span";
     /** flag to force button into an icon button shape which is square or round */
     isIconButton?: boolean;
-    /** Element reference */
-    ref?: Ref<HTMLElement>;
     /** Component reference */
     children?: ReactNode;
-};
-/**
- * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2
- *
- * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2
- */
-export declare const Button: (props: ButtonProps) => React.JSX.Element;
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | HTMLSpanElement>;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;
 export default Button;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{IconFa as n}from"../IconFa/index.js";import{StyledButton as o,Spacer as i}from"./styles.js";var l=function(l){var a=l.appearance,s=void 0===a?"primary":a,c=l.isIconButton,f=void 0!==c&&c,u=l.full,d=void 0!==u&&u,p=l.size,m=void 0===p?"m":p,h=l.children,v=l.ref,y=e(l,["appearance","isIconButton","full","size","children","ref"]),b=t.Children.toArray(h),I="string"==typeof b[0],$=b[0],g=!(!f&&(1===b.length&&!I&&(null==$?void 0:$.type))!==n);return t.createElement(o,r({as:l.href?"a":"button"},l.href?{role:"button"}:{},{$full:!!d,$size:m,$appearance:s,$isIconButton:g},y,{ref:v}),l.children&&b.length?t.Children.map(l.children,function(e,r){return t.createElement(i,{key:r},e)}):null)};export{l as Button,l as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n from"react";import{IconFa as a}from"../IconFa/index.js";var r=function(r){var l=r.appearance,o=void 0===l?"primary":l,c=r.full,s=void 0!==c&&c,m=r.isIconButton,u=void 0!==m&&m,i=r.href,p=r.children,f=r.as,d=r.ref,b=e(r,["appearance","full","isIconButton","href","children","as","ref"]),h=n.Children.toArray(p),v="string"==typeof h[0],y=h[0],E={"data-appearance":o||"primary","data-is-icon-button":!(!u&&(1===h.length&&!v&&(null==y?void 0:y.type))!==a),"data-full":s},N=p&&h.length?n.Children.map(p,function(e,t){return n.createElement("span",{className:"spacer",key:t},e)}):null;return n.createElement(n.Fragment,null,f&&"button"!==f||i?null:n.createElement("button",t({className:"component-button",ref:d},E,b,i?{role:"button"}:{}),N),"a"===f||i?n.createElement("a",t({className:"component-button",href:i,ref:d},E,b),N):null,"div"===f?n.createElement("div",t({className:"component-button",ref:d},E,b),N):null,"span"===f?n.createElement("span",t({ref:d,className:"component-button"},E,b),N):null)};export{r as Button,r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = (props: ButtonProps) => {\n  const {\n    appearance = \"primary\",\n    isIconButton = false,\n    full = false,\n    size = \"m\",\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const childArray = React.Children.toArray(children);\n  const isChildString = typeof childArray[0] === \"string\";\n  const firstElement = childArray[0] as ReactElement<HTMLElement>;\n\n  // button has a fixed width if there is a single icon\n  const setIconButton = !!(\n    isIconButton ||\n    (childArray.length === 1 && !isChildString && firstElement?.type) === IconFa\n  );\n\n  return (\n    <StyledButton\n      as={props.href ? \"a\" : \"button\"}\n      {...(props.href ? { role: \"button\" } : {})}\n      $full={!!full}\n      $size={size}\n      $appearance={appearance}\n      $isIconButton={setIconButton}\n      {...rest}\n      ref={ref}\n    >\n      {props.children && childArray.length\n        ? React.Children.map(\n            props.children,\n            (child: ReactNode, index: number) => (\n              <Spacer key={index}>{child}</Spacer>\n            ),\n          )\n        : null}\n    </StyledButton>\n  );\n};\n\nexport default Button;\n"],"names":["Button","props","_a","appearance","_b","isIconButton","_c","full","_d","size","children","ref","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","__assign","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key"],"mappings":"wMAsCO,IAAMA,EAAS,SAACC,GAEnB,IAAAC,EAOED,EAAKE,WAPPA,aAAa,UAASD,EACtBE,EAMEH,EAAKI,aANPA,OAAY,IAAAD,GAAQA,EACpBE,EAKEL,EAAKM,KALPA,OAAI,IAAAD,GAAQA,EACZE,EAIEP,EAAKQ,KAJPA,OAAI,IAAAD,EAAG,IAAGA,EACVE,EAGET,EAAKS,SAFPC,EAEEV,EAAKU,IADJC,IACDX,EARE,CAAA,aAAA,eAAA,OAAA,OAAA,WAAA,QAUAY,EAAaC,EAAMC,SAASC,QAAQN,GACpCO,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJd,IACuB,IAAtBQ,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAAUC,GAGxE,OACER,EAAAS,cAACC,EAAYC,EAAA,CACXC,GAAIzB,EAAM0B,KAAO,IAAM,UAClB1B,EAAM0B,KAAO,CAAEC,KAAM,UAAa,CAAA,EAAG,CAAAC,QACjCtB,EAAIuB,MACNrB,EAAIsB,YACE5B,EAAU6B,cACRb,GACXP,EAAI,CACRD,IAAKA,IAEJV,EAAMS,UAAYG,EAAWO,OAC1BN,EAAMC,SAASkB,IACbhC,EAAMS,SACN,SAACwB,EAAkBC,GAAkB,OACnCrB,EAAAS,cAACa,EAAM,CAACC,IAAKF,GAAQD,EADc,GAIvC,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { IconFa } from \"../IconFa\";\nimport \"./styles.css\";\n\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport const Button = ({\n  appearance = \"primary\",\n  full = false,\n  isIconButton = false,\n  href,\n  children,\n  as,\n  ref,\n  ...buttonHtmlAttributes\n}: ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  as?: \"button\" | \"a\" | \"div\" | \"span\";\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Component reference */\n  children?: ReactNode;\n  ref?: Ref<\n    HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | HTMLSpanElement\n  >;\n  style?: React.CSSProperties;\n}) => {\n  const childArray = React.Children.toArray(children);\n  const isChildString = typeof childArray[0] === \"string\";\n  const firstElement = childArray[0] as ReactElement<HTMLElement>;\n\n  // button has a fixed width if there is a single icon\n  const setIconButton = !!(\n    isIconButton ||\n    (childArray.length === 1 && !isChildString && firstElement?.type) === IconFa\n  );\n\n  const convertedProps = {\n    \"data-appearance\": appearance || \"primary\",\n    \"data-is-icon-button\": setIconButton,\n    \"data-full\": full,\n  };\n\n  const renderedChildren =\n    children && childArray.length\n      ? React.Children.map(children, (child: ReactNode, index: number) => (\n          <span className=\"spacer\" key={index}>\n            {child}\n          </span>\n        ))\n      : null;\n\n  return (\n    <>\n      {(!as || as === \"button\") && !href ? (\n        <button\n          className=\"component-button\"\n          ref={ref as Ref<HTMLButtonElement>}\n          {...convertedProps}\n          {...buttonHtmlAttributes}\n          {...(href ? { role: \"button\" } : {})}\n        >\n          {renderedChildren}\n        </button>\n      ) : null}\n      {as === \"a\" || href ? (\n        <a\n          className=\"component-button\"\n          href={href}\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...convertedProps}\n          {...buttonHtmlAttributes}\n        >\n          {renderedChildren}\n        </a>\n      ) : null}\n      {as === \"div\" ? (\n        <div\n          className=\"component-button\"\n          ref={ref as Ref<HTMLDivElement>}\n          {...convertedProps}\n          {...buttonHtmlAttributes}\n        >\n          {renderedChildren}\n        </div>\n      ) : null}\n      {as === \"span\" ? (\n        <span\n          ref={ref as Ref<HTMLSpanElement>}\n          className=\"component-button\"\n          {...convertedProps}\n          {...buttonHtmlAttributes}\n        >\n          {renderedChildren}\n        </span>\n      ) : null}\n    </>\n  );\n};\n\nexport default Button;\n"],"names":["Button","_a","_b","appearance","_c","full","_d","isIconButton","href","children","as","ref","buttonHtmlAttributes","__rest","childArray","React","Children","toArray","isChildString","firstElement","convertedProps","length","type","IconFa","renderedChildren","map","child","index","createElement","className","key","Fragment","role","__assign"],"mappings":"iJAYO,IAAMA,EAAS,SAACC,GACrB,IAAAC,eAAAC,OAAU,IAAAD,EAAG,YACbE,EAAAH,EAAAI,KAAAA,cAAYD,EACZE,EAAAL,EAAAM,aAAAA,OAAY,IAAAD,GAAQA,EACpBE,EAAIP,EAAAO,KACJC,aACAC,EAAET,EAAAS,GACFC,EAAGV,EAAAU,IACAC,EAAoBC,EAAAZ,EARF,mEA0Bfa,EAAaC,EAAMC,SAASC,QAAQR,GACpCS,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAQ1BM,EAAiB,CACrB,kBAAmBjB,GAAc,UACjC,yBANAI,IACuB,IAAtBO,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAAUC,GAMtE,YAAalB,GAGTmB,EACJf,GAAYK,EAAWO,OACnBN,EAAMC,SAASS,IAAIhB,EAAU,SAACiB,EAAkBC,GAAkB,OAChEZ,EAAAa,cAAA,OAAA,CAAMC,UAAU,SAASC,IAAKH,GAC3BD,EAF6D,GAKlE,KAEN,OACEX,EAAAa,cAAAb,EAAAgB,SAAA,KACKrB,GAAa,WAAPA,GAAqBF,EAU1B,KATFO,4BACEc,UAAU,mBACVlB,IAAKA,GACDS,EACAR,EACCJ,EAAO,CAAEwB,KAAM,UAAa,CAAA,GAEhCR,GAGG,MAAPd,GAAcF,EACbO,EAAAa,cAAA,IAAAK,EAAA,CACEJ,UAAU,mBACVrB,KAAMA,EACNG,IAAKA,GACDS,EACAR,GAEHY,GAED,KACI,QAAPd,EACCK,EAAAa,cAAA,MAAAK,EAAA,CACEJ,UAAU,mBACVlB,IAAKA,GACDS,EACAR,GAEHY,GAED,KACI,SAAPd,EACCK,EAAAa,cAAA,OAAAK,EAAA,CACEtB,IAAKA,EACLkB,UAAU,oBACNT,EACAR,GAEHY,GAED,KAGV"}

package/lib/src/components/Carousel/Dots.js

@@ -1,2 +1,2 @@
-import e from"react";import{faCaretLeft as n,faCaretRight as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as r}from"../IconFa/index.js";import{ButtonWrapper as o,CarouselButton as l,VerticalAlign as c,ScreenReaderOnly as a,DotContainer as i,Dot as s}from"./styles.js";var u=function(u){var m=u.count,d=u.currentPosition,f=void 0===d?0:d,E=u.scrollToPosition,p=u.next,v=u.previous,x=f!==m-1,k=0!==f,b=Array.from({length:m},function(e,n){return"arrayIndex".concat(n)});return e.createElement(o,null,e.createElement(l,{disabled:!k,"aria-label":"previous",onClick:function(){v()}},e.createElement(c,null,e.createElement(r,{faIcon:n,size:"1.25em"}),e.createElement(a,null,"Scroll carousel to previous index"))),e.createElement(i,{$count:m},b.map(function(n,t){var r=t===f;return e.createElement(s,{key:n,role:"switch","aria-checked":r,onClick:function(){E(t)},$selected:r},e.createElement(a,null,"Scroll carousel to index ".concat(t)))})),e.createElement(l,{disabled:!x,"aria-label":"next",onClick:function(){p()}},e.createElement(c,null,e.createElement(r,{faIcon:t,size:"1.25em"}),e.createElement(a,null,"Scroll carousel to previous index"))))};export{u as Dots,u as default};
+import e from"react";import{faCaretLeft as a,faCaretRight as n}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as t}from"../IconFa/index.js";var r=function(r){var o=r.count,c=r.currentPosition,l=void 0===c?0:c,s=r.scrollToPosition,i=r.next,m=r.previous,u=l!==o-1,d=0!==l,f=Array.from({length:o},function(e,a){return"arrayIndex".concat(a)});return e.createElement("div",{className:"button-wrapper"},e.createElement("button",{className:"carousel-button",disabled:!d,"aria-label":"previous",onClick:function(){m()}},e.createElement("span",{className:"vertical-align"},e.createElement(t,{faIcon:a,size:"1.25em"}),e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to previous index"))),e.createElement("div",{className:"dot-container","data-count":o},f.map(function(a,n){var t=n===l;return e.createElement("button",{className:"dot",key:a,role:"switch","aria-checked":t,onClick:function(){s(n)}},e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to index ".concat(n)))})),e.createElement("button",{className:"carousel-button",disabled:!u,"aria-label":"next",onClick:function(){i()}},e.createElement("span",{className:"vertical-align"},e.createElement(t,{faIcon:n,size:"1.25em"}),e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to next index"))))};export{r as Dots,r as default};
 //# sourceMappingURL=Dots.js.map

package/lib/src/components/Carousel/Dots.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  DotContainer,\n  Dot,\n  CarouselButton,\n  ButtonWrapper,\n  VerticalAlign,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nexport const Dots = ({\n  count,\n  currentPosition = 0,\n  scrollToPosition,\n  next,\n  previous,\n}: {\n  count: number;\n  currentPosition: number;\n  scrollToPosition: (to: number) => void;\n  next: () => void;\n  previous: () => void;\n}) => {\n  const moreOnRight = currentPosition !== count - 1;\n  const moreOnLeft = currentPosition !== 0;\n  const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n  return (\n    <ButtonWrapper>\n      <CarouselButton\n        disabled={!moreOnLeft}\n        aria-label=\"previous\"\n        onClick={() => {\n          previous();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n\n      <DotContainer $count={count}>\n        {countArray.map((item, index) => {\n          const isSelected = index === currentPosition;\n          const scrollTo = () => {\n            scrollToPosition(index);\n          };\n          return (\n            <Dot\n              key={item}\n              role=\"switch\"\n              aria-checked={isSelected}\n              onClick={scrollTo}\n              $selected={isSelected}\n            >\n              <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n            </Dot>\n          );\n        })}\n      </DotContainer>\n\n      <CarouselButton\n        disabled={!moreOnRight}\n        aria-label=\"next\"\n        onClick={() => {\n          next();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n    </ButtonWrapper>\n  );\n};\n\nexport default Dots;\n"],"names":["Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","React","ButtonWrapper","createElement","CarouselButton","disabled","onClick","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","DotContainer","$count","map","item","index","isSelected","Dot","key","role","faCaretRight"],"mappings":"sTAcO,IAAMA,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAQFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,GAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAb,GAE3D,OACEE,gBAACC,EAAa,KACZD,EAAAE,cAACC,EAAc,CACbC,UAAWZ,EAAU,aACV,WACXa,QAAS,WACPf,GACF,GAEAU,EAAAE,cAACI,EAAa,KACZN,EAAAE,cAACK,GAAOC,OAAQC,EAAaC,KAAK,WAClCV,EAAAE,cAACS,EAAgB,KAAA,uCAIrBX,EAAAE,cAACU,EAAY,CAAAC,OAAS5B,GACnBQ,EAAWqB,IAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAU7B,EAI7B,OACEa,EAAAE,cAACgB,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdZ,QARa,WACfjB,EAAiB4B,EACnB,YAOeC,GAEXjB,EAAAE,cAACS,OAAkB,4BAAAZ,OAA4BiB,IAGrD,IAGFhB,EAAAE,cAACC,EAAc,CACbC,UAAWb,EAAW,aACX,OACXc,QAAS,WACPhB,GACF,GAEAW,EAAAE,cAACI,EAAa,KACZN,EAAAE,cAACK,GAAOC,OAAQa,EAAcX,KAAK,WACnCV,EAAAE,cAACS,EAAgB,KAAA,uCAK3B"}
+{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nexport const Dots = ({\n  count,\n  currentPosition = 0,\n  scrollToPosition,\n  next,\n  previous,\n}: {\n  count: number;\n  currentPosition: number;\n  scrollToPosition: (to: number) => void;\n  next: () => void;\n  previous: () => void;\n}) => {\n  const moreOnRight = currentPosition !== count - 1;\n  const moreOnLeft = currentPosition !== 0;\n  const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n  return (\n    <div className=\"button-wrapper\">\n      <button\n        className=\"carousel-button\"\n        disabled={!moreOnLeft}\n        aria-label=\"previous\"\n        onClick={() => {\n          previous();\n        }}\n      >\n        <span className=\"vertical-align\">\n          <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n          <span className=\"screen-reader-only\">\n            Scroll carousel to previous index\n          </span>\n        </span>\n      </button>\n\n      <div className=\"dot-container\" data-count={count}>\n        {countArray.map((item, index) => {\n          const isChecked = index === currentPosition;\n          const scrollTo = () => {\n            scrollToPosition(index);\n          };\n          return (\n            <button\n              className=\"dot\"\n              key={item}\n              role=\"switch\"\n              aria-checked={isChecked}\n              onClick={scrollTo}\n            >\n              <span className=\"screen-reader-only\">{`Scroll carousel to index ${index}`}</span>\n            </button>\n          );\n        })}\n      </div>\n\n      <button\n        className=\"carousel-button\"\n        disabled={!moreOnRight}\n        aria-label=\"next\"\n        onClick={() => {\n          next();\n        }}\n      >\n        <span className=\"vertical-align\">\n          <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n          <span className=\"screen-reader-only\">\n            Scroll carousel to next index\n          </span>\n        </span>\n      </button>\n    </div>\n  );\n};\n\nexport default Dots;\n"],"names":["Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","React","createElement","className","disabled","onClick","IconFa","faIcon","faCaretLeft","size","map","item","index","isChecked","key","role","faCaretRight"],"mappings":"kLAKO,IAAMA,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAQFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,GAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAb,GAE3D,OACEE,EAAAC,cAAA,MAAA,CAAKC,UAAU,kBACbF,EAAAC,cAAA,SAAA,CACEC,UAAU,kBACVC,UAAWX,EAAU,aACV,WACXY,QAAS,WACPd,GACF,GAEAU,EAAAC,cAAA,OAAA,CAAMC,UAAU,kBACdF,EAAAC,cAACI,GAAOC,OAAQC,EAAaC,KAAK,WAClCR,EAAAC,cAAA,OAAA,CAAMC,UAAU,sBAAoB,uCAMxCF,EAAAC,cAAA,MAAA,CAAKC,UAAU,gBAAe,aAAajB,GACxCQ,EAAWgB,IAAI,SAACC,EAAMC,GACrB,IAAMC,EAAYD,IAAUxB,EAI5B,OACEa,EAAAC,cAAA,SAAA,CACEC,UAAU,MACVW,IAAKH,EACLI,KAAK,SAAQ,eACCF,EACdR,QATa,WACfhB,EAAiBuB,EACnB,GASIX,EAAAC,cAAA,OAAA,CAAMC,UAAU,sBAAsB,4BAAAH,OAA4BY,IAGxE,IAGFX,EAAAC,cAAA,SAAA,CACEC,UAAU,kBACVC,UAAWZ,EAAW,aACX,OACXa,QAAS,WACPf,GACF,GAEAW,EAAAC,cAAA,OAAA,CAAMC,UAAU,kBACdF,EAAAC,cAACI,GAAOC,OAAQS,EAAcP,KAAK,WACnCR,EAAAC,cAAA,OAAA,CAAMC,UAAU,sBAAoB,mCAO9C"}

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

@@ -1,5 +1,14 @@
 import React, { type ReactNode } from "react";
-export type CarouselProps = {
+/**
+ *
+ * Lightweight carousel component that works with mouse and touch events,
+ * Accepts react node array as children so will work with any html element as a child.
+ *
+ * Also works with external state that holds carousel postion,
+ * by accepting a starting position as a prop, whilst also accepting a handler
+ * with current position as a prop triggered when carousel component is interacted with.
+ */
+export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: {
     /** Index in which the carousel is scrolled to on mount */
     startPosition?: number;
     /** call back for on position changed first prop is the possition */
@@ -10,16 +19,17 @@ export type CarouselProps = {
     children?: ReactNode;
     /** set carousel image to full width of parent */
     fullWidthChild?: boolean;
-};
-/**
- *
- * Lightweight carousel component that works with mouse and touch events,
- * Accepts react node array as children so will work with any html element as a child.
- *
- * Also works with external state that holds carousel postion,
- * by accepting a starting position as a prop, whilst also accepting a handler
- * with current position as a prop triggered when carousel component is interacted with.
- */
-export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;
+}) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: {
+    /** Index in which the carousel is scrolled to on mount */
+    startPosition?: number;
+    /** call back for on position changed first prop is the possition */
+    onPositionChanged?: (position: number) => void;
+    /** show item left and right of current smaller than current item */
+    shrinkUnselectedPages?: boolean;
+    /** childrent item of the carousel */
+    children?: ReactNode;
+    /** set carousel image to full width of parent */
+    fullWidthChild?: boolean;
+}) => React.JSX.Element>;
 export default _default;

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

@@ -1,2 +1,2 @@
-import e,{memo as t,useState as n,useRef as r,useEffect as l}from"react";import{InView as o}from"../../../node_modules/react-intersection-observer/dist/index.js";import{Box as i}from"../Box/index.js";import{Dots as c}from"./Dots.js";import{CarouselWrapper as u,CarouselScrollArea as s,CarouselCard as a,CarouselCardInner as d}from"./styles.js";var f=function(t){var f=t.startPosition,m=t.children,h=t.onPositionChanged,v=t.shrinkUnselectedPages,g=void 0!==v&&v,E=t.fullWidthChild,p=void 0!==E&&E,C=e.useRef(void 0),$=void 0!==f,x=n(f||0),P=x[0],T=x[1],y=n(!$),j=y[0],W=y[1],k=r(null),b=e.Children.toArray(m).filter(Boolean),B=function(e){if(null==k?void 0:k.current){var t=k.current.scrollWidth,n=0===e,r=e===k.current.children.length-1,l=k.current.children[e];if(!l)return;var o=l.offsetLeft;n?k.current.scrollTo(0,0):r?k.current.scrollTo(t,0):k.current.scrollTo(o,0),j||W(!0)}};l(function(){$&&W(!1)},[f]),l(function(){j||B(f||0)},[j]);var S=1===b.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(u,null,e.createElement(s,{ref:k,"aria-live":"assertive",$smoothScrolling:j,tabIndex:0},b.map(function(t,n){var r=n===P,l="card-".concat(n);return e.createElement(a,{key:l,$onlyChild:S,$fullWidthChild:p},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&P!==(t=n)&&(T(t),C&&clearTimeout(null==C?void 0:C.current),C.current=setTimeout(function(){h&&j&&h(t)},500))}},e.createElement(d,{$onlyChild:S,$isSelected:r,$shrinkUnselectedPages:g,$fullWidthChild:p},t)))})))),b.length>1?e.createElement(i,null,e.createElement(c,{count:b.length,currentPosition:P,scrollToPosition:B,next:function(){B(P+1)},previous:function(){B(P-1)}})):null)};t(f);export{f as Carousel};
+import e,{memo as t,useState as r,useRef as n,useEffect as l}from"react";import{InView as o}from"../../../node_modules/react-intersection-observer/dist/index.js";import{Box as i}from"../Box/index.js";import{Dots as a}from"./Dots.js";var c=function(t){var c=t.startPosition,s=t.children,d=t.onPositionChanged,u=t.shrinkUnselectedPages,h=void 0!==u&&u,m=t.fullWidthChild,f=void 0!==m&&m,v=e.useRef(void 0),g=void 0!==c,p=r(c||0),E=p[0],x=p[1],T=r(!g),y=T[0],P=T[1],C=n(null),j=e.Children.toArray(s).filter(Boolean),k=function(e){if(null==C?void 0:C.current){var t=C.current.scrollWidth,r=0===e,n=e===C.current.children.length-1,l=C.current.children[e];if(!l)return;var o=l.offsetLeft;r?C.current.scrollTo(0,0):n?C.current.scrollTo(t,0):C.current.scrollTo(o,0),y||P(!0)}};l(function(){g&&P(!1)},[c]),l(function(){y||k(c||0)},[y]);var N=1===j.length;return e.createElement("div",{className:"component-carousel","data-only-child":N},e.createElement(i,null,e.createElement("ul",{className:"carousel-scroll-area",ref:C,"aria-live":"assertive","data-smooth-scrolling":y,tabIndex:0},j.map(function(t,r){var n=r===E,l="card-".concat(r);return e.createElement("li",{key:l,"data-only-child":N,"data-full-width-child":f},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&E!==(t=r)&&(x(t),v&&clearTimeout(null==v?void 0:v.current),v.current=setTimeout(function(){d&&y&&d(t)},500))}},e.createElement("div",{className:"carousel-card-inner","data-only-child":N,"data-selected":n,"data-shrink-unselected-pages":h,"data-full-width-child":f},t)))}))),j.length>1?e.createElement(i,null,e.createElement(a,{count:j.length,currentPosition:E,scrollToPosition:k,next:function(){k(E+1)},previous:function(){k(E-1)}})):null)};t(c);export{c as Carousel};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\nimport {\n  CarouselWrapper,\n  CarouselCardInner,\n  CarouselCard,\n  CarouselScrollArea,\n} from \"./styles\";\n\nexport type CarouselProps = {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n};\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: CarouselProps) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>(\n    undefined,\n  );\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <>\n      <Box>\n        <CarouselWrapper>\n          <CarouselScrollArea\n            ref={scrollRef}\n            aria-live=\"assertive\"\n            $smoothScrolling={smoothScrolling}\n            tabIndex={0}\n          >\n            {childArray.map((child, index) => {\n              const isSelected = index === currentPosition;\n              const keyString = `card-${index}`;\n              return (\n                <CarouselCard\n                  key={keyString}\n                  $onlyChild={onlyChild}\n                  $fullWidthChild={fullWidthChild}\n                >\n                  <InView\n                    threshold={0.5}\n                    as=\"div\"\n                    onChange={(inView) => {\n                      if (inView) {\n                        setPosition(index);\n                      }\n                    }}\n                  >\n                    <CarouselCardInner\n                      $onlyChild={onlyChild}\n                      $isSelected={isSelected}\n                      $shrinkUnselectedPages={shrinkUnselectedPages}\n                      $fullWidthChild={fullWidthChild}\n                    >\n                      {child}\n                    </CarouselCardInner>\n                  </InView>\n                </CarouselCard>\n              );\n            })}\n          </CarouselScrollArea>\n        </CarouselWrapper>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_c","fullWidthChild","timer","React","useRef","undefined","isStartPositionSet","_d","useState","currentPosition","setCurrentPosition","_e","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","Fragment","Box","CarouselWrapper","CarouselScrollArea","ref","tabIndex","map","child","index","isSelected","keyString","concat","CarouselCard","key","$onlyChild","$fullWidthChild","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","$isSelected","$shrinkUnselectedPages","Dots","count","next","previous","memo"],"mappings":"wVAyCO,IAAMA,EAAW,SAACC,OACvBC,EAAaD,EAAAC,cACbC,EAAQF,EAAAE,SACRC,EAAiBH,EAAAG,kBACjBC,EAAAJ,EAAAK,sBAAAA,OAAqB,IAAAD,KACrBE,EAAAN,EAAAO,eAAAA,OAAc,IAAAD,GAAQA,EAEhBE,EAAQC,EAAMC,YAClBC,GAEIC,OAA8C,IAAlBX,EAC5BY,EAAwCC,EAASb,GAAiB,GAAjEc,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYV,EAAyB,MAGrCW,EAAaZ,EAAMa,SAASC,QAAQrB,GAAUsB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAAS,EAATA,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQ1B,SAAS+B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQ1B,SAASyB,GACxC,IAAKO,EAAM,OACX,IAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,EAEvB,CACF,EAGAmB,EAAU,WACJ1B,GACFO,GAAmB,EAEvB,EAAG,CAAClB,IAEJqC,EAAU,WACHpB,GACHQ,EAAiBzB,GAAiB,EAEtC,EAAG,CAACiB,IAEJ,IAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACExB,EAAA+B,cAAA/B,EAAAgC,SAAA,KACEhC,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAACG,EAAe,KACdlC,EAAA+B,cAACI,GACCC,IAAKzB,EAAS,YACJ,6BACQF,EAClB4B,SAAU,GAETzB,EAAW0B,IAAI,SAACC,EAAOC,GACtB,IAAMC,EAAaD,IAAUlC,EACvBoC,EAAY,QAAAC,OAAQH,GAC1B,OACExC,EAAA+B,cAACa,EAAY,CACXC,IAAKH,EAASI,WACFhB,EAASiB,gBACJjD,GAEjBE,EAAA+B,cAACiB,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAU,SAACC,GA1FT,IAAClC,EA2FGkC,GA1FlB9C,KADeY,EA4FasB,KA1FhCjC,EAAmBW,GAEfnB,GACFsD,aAAatD,eAAAA,EAAOoB,SAEtBpB,EAAMoB,QAAUmC,WAAW,WACrB5D,GAAqBe,GAMvBf,EAAkBwB,EAEtB,EAAG,KA8Ea,GAEAlB,EAAA+B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRf,EAAUgB,uBACC7D,EAAqBmD,gBAC5BjD,GAEhByC,IAKX,MAIL3B,EAAWY,OAAS,EACnBxB,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAAC2B,EAAI,CACHC,MAAO/C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClB2C,KAlGG,WACX3C,EAAiBX,EAAkB,EACrC,EAiGUuD,SA/FO,WACf5C,EAAiBX,EAAkB,EACrC,KAgGQ,KAGV,EAEewD,EAAKxE"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n}) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>(\n    undefined,\n  );\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <div className=\"component-carousel\" data-only-child={onlyChild}>\n      <Box>\n        <ul\n          className=\"carousel-scroll-area\"\n          ref={scrollRef}\n          aria-live=\"assertive\"\n          data-smooth-scrolling={smoothScrolling}\n          tabIndex={0}\n        >\n          {childArray.map((child, index) => {\n            const isSelected = index === currentPosition;\n            const keyString = `card-${index}`;\n            return (\n              <li\n                key={keyString}\n                data-only-child={onlyChild}\n                data-full-width-child={fullWidthChild}\n              >\n                <InView\n                  threshold={0.5}\n                  as=\"div\"\n                  onChange={(inView) => {\n                    if (inView) {\n                      setPosition(index);\n                    }\n                  }}\n                >\n                  <div\n                    className=\"carousel-card-inner\"\n                    data-only-child={onlyChild}\n                    data-selected={isSelected}\n                    data-shrink-unselected-pages={shrinkUnselectedPages}\n                    data-full-width-child={fullWidthChild}\n                  >\n                    {child}\n                  </div>\n                </InView>\n              </li>\n            );\n          })}\n        </ul>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </div>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_c","fullWidthChild","timer","React","useRef","undefined","isStartPositionSet","_d","useState","currentPosition","setCurrentPosition","_e","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","className","Box","ref","tabIndex","map","child","index","isSelected","keyString","concat","key","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","Dots","count","next","previous","memo"],"mappings":"yOAqBO,IAAMA,EAAW,SAACC,OACvBC,EAAaD,EAAAC,cACbC,EAAQF,EAAAE,SACRC,EAAiBH,EAAAG,kBACjBC,EAAAJ,EAAAK,sBAAAA,OAAqB,IAAAD,KACrBE,EAAAN,EAAAO,eAAAA,OAAc,IAAAD,GAAQA,EAahBE,EAAQC,EAAMC,YAClBC,GAEIC,OAA8C,IAAlBX,EAC5BY,EAAwCC,EAASb,GAAiB,GAAjEc,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYV,EAAyB,MAGrCW,EAAaZ,EAAMa,SAASC,QAAQrB,GAAUsB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAAS,EAATA,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQ1B,SAAS+B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQ1B,SAASyB,GACxC,IAAKO,EAAM,OACX,IAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,EAEvB,CACF,EAGAmB,EAAU,WACJ1B,GACFO,GAAmB,EAEvB,EAAG,CAAClB,IAEJqC,EAAU,WACHpB,GACHQ,EAAiBzB,GAAiB,EAEtC,EAAG,CAACiB,IAEJ,IAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACExB,EAAA+B,cAAA,MAAA,CAAKC,UAAU,uCAAsCF,GACnD9B,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAAA,KAAA,CACEC,UAAU,uBACVE,IAAKvB,EAAS,YACJ,YAAW,wBACEF,EACvB0B,SAAU,GAETvB,EAAWwB,IAAI,SAACC,EAAOC,GACtB,IAAMC,EAAaD,IAAUhC,EACvBkC,EAAY,QAAAC,OAAQH,GAC1B,OACEtC,sBACE0C,IAAKF,EAAS,kBACGV,0BACMhC,GAEvBE,EAAA+B,cAACY,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAU,SAACC,GA1FP,IAAC7B,EA2FC6B,GA1FhBzC,KADeY,EA4FWoB,KA1F9B/B,EAAmBW,GAEfnB,GACFiD,aAAajD,eAAAA,EAAOoB,SAEtBpB,EAAMoB,QAAU8B,WAAW,WACrBvD,GAAqBe,GAMvBf,EAAkBwB,EAEtB,EAAG,KA8EW,GAEAlB,EAAA+B,cAAA,MAAA,CACEC,UAAU,sBAAqB,kBACdF,kBACFS,EAAU,+BACK3C,EAAqB,wBAC5BE,GAEtBuC,IAKX,KAGHzB,EAAWY,OAAS,EACnBxB,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAACmB,EAAI,CACHC,MAAOvC,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClBmC,KAlGG,WACXnC,EAAiBX,EAAkB,EACrC,EAiGU+C,SA/FO,WACfpC,EAAiBX,EAAkB,EACrC,KAgGQ,KAGV,EAEegD,EAAKhE"}

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

@@ -1,16 +1,15 @@
 import React, { type InputHTMLAttributes, type Ref, type ReactNode } from "react";
-export type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
+/**
+ * Checkboxes allow the user to select one or more items.
+ *
+ * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
+ */
+export declare const Checkbox: (props: InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
     errorMessage?: string;
     children?: ReactNode;
-};
-/**
- * Checkboxes allow the user to select one or more items.
- *
- * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
- */
-export declare const Checkbox: (props: CheckBoxProps) => React.JSX.Element;
+}) => React.JSX.Element;
 export default Checkbox;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{faCheck as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{ErrorText as a}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as l,StyledInput as i,SelectedBorder as s,CheckWrapper as c,Check as n}from"./styles.js";var m=function(m){var f=m.children,E=m.hasError,u=m.errorMessage,h=m.ref,b=e(m,["children","hasError","errorMessage","ref"]);return o.createElement(o.Fragment,null,o.createElement(l,{$hasError:E||!!u||!1,$checked:m.checked||m.defaultChecked||!1,$disabled:m.disabled||!1},o.createElement(i,r({},b,{disabled:m.disabled||!1,type:"checkbox",ref:h,"aria-describedby":m.id&&u?"".concat(m.id,"-error"):void 0})),o.createElement(s,null),f||m.value,o.createElement(c,null,o.createElement(n,null,o.createElement(d,{faIcon:t,color:"check",size:"1.25em"})))),!!u&&o.createElement(a,{marginTop:"xxs",id:m.id?"".concat(m.id,"-error"):void 0},u))};export{m as Checkbox,m as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{faCheck as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{ErrorText as t}from"../ErrorText/index.js";import{IconFa as i}from"../IconFa/index.js";var c=function(c){var s=c.children,l=c.hasError,n=c.errorMessage,d=c.ref,m=e(c,["children","hasError","errorMessage","ref"]);return o.createElement(o.Fragment,null,o.createElement("label",{className:"component-checkbox"},o.createElement("input",r({},m,{type:"checkbox",disabled:c.disabled||!1,"aria-invalid":l||!!n||!1,ref:d,"aria-describedby":c.id&&n?"".concat(c.id,"-error"):void 0})),s||c.value,o.createElement("div",{className:"check-wrapper"},o.createElement("div",{className:"check"},o.createElement(i,{faIcon:a,color:"text-light",size:"full"})))),!!n&&o.createElement(t,{marginTop:"xxs",id:c.id?"".concat(c.id,"-error"):void 0},n))};export{c as Checkbox,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = 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 * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = (props: CheckBoxProps) => {\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  return (\n    <>\n      <StyledLabel\n        $hasError={hasError || !!errorMessage || false}\n        $checked={props.checked || props.defaultChecked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"checkbox\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        {children || props.value}\n        <CheckWrapper>\n          <Check>\n            <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n          </Check>\n        </CheckWrapper>\n      </StyledLabel>\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","props","children","hasError","errorMessage","ref","rest","__rest","React","createElement","Fragment","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","__assign","type","id","concat","undefined","SelectedBorder","value","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"0YAgCO,IAAMA,EAAW,SAACC,GACf,IAAAC,EAAmDD,EAAKC,SAA9CC,EAAyCF,EAAKE,SAApCC,EAA+BH,eAAjBI,EAAiBJ,EAAKI,IAAdC,EAAIC,EAAKN,EAArD,CAAA,WAAA,WAAA,eAAA,QAEN,OACEO,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAW,CAAAC,UACCT,KAAcC,IAAgB,EAAKS,SACpCZ,EAAMa,SAAWb,EAAMc,iBAAkB,YACxCd,EAAMe,WAAY,GAE7BR,EAAAC,cAACQ,EAAWC,EAAA,CAAA,EACNZ,GACJU,SAAUf,EAAMe,WAAY,EAC5BG,KAAK,WACLd,IAAKA,EAAG,mBAEJJ,EAAMmB,IAAQhB,EAAe,GAAAiB,OAAGpB,EAAMmB,GAAE,eAAWE,KAGzDd,EAAAC,cAACc,EAAc,MACdrB,GAAYD,EAAMuB,MACnBhB,EAAAC,cAACgB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAM,CAACC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAI/C3B,GACDI,gBAACwB,EAAS,CACRC,UAAU,MACVb,GAAInB,EAAMmB,GAAK,GAAAC,OAAGpB,EAAMmB,kBAAaE,GAEpClB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = (\n  props: 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  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  return (\n    <>\n      <label className=\"component-checkbox\">\n        <input\n          {...rest}\n          type=\"checkbox\"\n          disabled={props.disabled || false}\n          aria-invalid={hasError || !!errorMessage || false}\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        {children || props.value}\n        <div className=\"check-wrapper\">\n          <div className=\"check\">\n            <IconFa faIcon={faCheck} color=\"text-light\" size=\"full\" />\n          </div>\n        </div>\n      </label>\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","props","children","hasError","errorMessage","ref","rest","__rest","React","createElement","Fragment","className","__assign","type","disabled","id","concat","undefined","value","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"8RAeO,IAAMA,EAAW,SACtBC,GASQ,IAAAC,EAAmDD,EAAKC,SAA9CC,EAAyCF,EAAKE,SAApCC,EAA+BH,eAAjBI,EAAiBJ,EAAKI,IAAdC,EAAIC,EAAKN,EAArD,CAAA,WAAA,WAAA,eAAA,QAEN,OACEO,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAAA,QAAA,CAAOE,UAAU,sBACfH,EAAAC,cAAA,QAAAG,EAAA,CAAA,EACMN,GACJO,KAAK,WACLC,SAAUb,EAAMa,WAAY,iBACdX,KAAcC,IAAgB,EAC5CC,IAAKA,EAAG,mBAEJJ,EAAMc,IAAQX,EAAe,GAAAY,OAAGf,EAAMc,kBAAaE,KAGxDf,GAAYD,EAAMiB,MACnBV,EAAAC,cAAA,MAAA,CAAKE,UAAU,iBACbH,EAAAC,cAAA,MAAA,CAAKE,UAAU,SACbH,EAAAC,cAACU,EAAM,CAACC,OAAQC,EAASC,MAAM,aAAaC,KAAK,cAIpDnB,GACDI,gBAACgB,EAAS,CACRC,UAAU,MACVV,GAAId,EAAMc,GAAK,GAAAC,OAAGf,EAAMc,kBAAaE,GAEpCb,GAKX"}

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

@@ -1,12 +1,12 @@
 import React, { type ReactNode, type HTMLAttributes } from "react";
-import { type FontSizeType } from "../../types";
+import { type ColourVariableType, type FontSizeType } from "../../types";
 export type CollapseProps = HTMLAttributes<HTMLElement> & {
     /** id is required for a11y reasons as we use aria attributes which depends on an id  */
     id: string;
     /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */
     headerTitleText: string;
     /** collapse header text colour */
-    headerTitleTextColor?: string;
+    headerTitleTextColor?: ColourVariableType;
     /** collapse header text size */
     headerTitleTextSize?: FontSizeType;
     /** collapse header font family */

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

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as n,useEffect as r}from"react";import{faChevronDown as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{themeColorOrString as o,themeFontSizeOrString as i}from"../../utils/themeUtils.js";import{IconFa as l}from"../IconFa/index.js";import{CustomHeader as c,DefaultHeader as d,FlippingIcon as u,CollapseContent as m,transitionDurationSeconds as s}from"./styles.js";function p(p){var f=p.id,h=p.headerTitleText,x=p.headerTitleTextColor,T=p.headerTitleTextSize,v=p.headerTitleTextFontFamily,y=p.headerComponent,b=p.startOpen,E=p.onOpenChange,C=p.children,$=t(b||!1),g=$[0],k=$[1],F=t(b?"initial":"0"),j=F[0],S=F[1],I=n(null),w=n(null),z=x?o(x):"var(--clr-collapse-header, #00007e)",D=function(){var e=I.current;(null==w?void 0:w.current)&&clearTimeout(null==w?void 0:w.current);var t=!g;k(t),null!==e&&S("".concat(e.scrollHeight,"px")),!1===t?setTimeout(function(){return S("0")},10):w.current=setTimeout(function(){return S("initial")},1e3*s),void 0!==E&&E(t)};return r(function(){k(b||!1),S(b?"initial":"0")},[b]),e.createElement("div",{id:f},y?e.createElement(c,{"aria-controls":"".concat(f,"-header"),"aria-expanded":g,id:"".concat(f,"-header"),onClick:D,"aria-disabled":!1,"aria-label":h,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),D())},role:"button",tabIndex:0},y):e.createElement(d,{"aria-controls":"".concat(f,"-header"),"aria-expanded":g,id:"".concat(f,"-header"),onClick:D,type:"button",appearance:"tertiary",$textColor:z,$textSize:i(T||"m"),$textFontFamily:v},h,e.createElement(u,{$open:g},e.createElement(l,{faIcon:a}))),e.createElement(m,{id:"".concat(f,"-content"),ref:I,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(f,"-header"),$contentHeight:j,$openStatus:g},C))}export{p as Collapse,p as default};
+import e,{useState as a,useRef as t,useEffect as n}from"react";import{faChevronDown as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as r}from"../IconFa/index.js";function c(c){var i=c.id,l=c.headerTitleText,d=c.headerTitleTextColor,s=c.headerTitleTextSize,m=c.headerTitleTextFontFamily,p=c.headerComponent,u=c.startOpen,f=c.onOpenChange,h=c.children,x=a(u||!1),v=x[0],b=x[1],E=a(!!u),T=E[0],y=E[1],N=t(null),k=t(null),C=function(){var e=!v;b(e),!1===e?k.current=setTimeout(function(){return y(!1)},500):setTimeout(function(){return y(!0)},0),void 0!==f&&f(e)};return n(function(){b(u||!1),y(!!u)},[u]),e.createElement("div",{id:i,className:"component-collapse"},p?e.createElement("div",{className:"custom-header","aria-controls":"".concat(i,"-header"),"aria-expanded":v,id:"".concat(i,"-header"),onClick:C,"aria-disabled":!1,"aria-label":l,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),C())},role:"button",tabIndex:0},p):e.createElement("button",{className:["default-header","color-props","text-props"].join(" "),id:"".concat(i,"-header"),type:"button",onClick:C,"aria-controls":"".concat(i,"-header"),"aria-expanded":v,"data-color":d,"data-text-size":s||"m","data-text-font-family":m},e.createElement("span",{className:"spacer"},l),e.createElement("span",{className:"spacer"},e.createElement("span",{className:"flipping-icon"},e.createElement(r,{faIcon:o})))),e.createElement("div",{className:"collapse-content",id:"".concat(i,"-content"),ref:N,role:"region","aria-hidden":!v,"data-is-visible":T,"aria-labelledby":"".concat(i,"-header")},e.createElement("div",{style:{overflow:"hidden"}},h)))}export{c as Collapse,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport {\n  themeColorOrString,\n  themeFontSizeOrString,\n} from \"../../utils/themeUtils\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const textColour = headerTitleTextColor\n    ? themeColorOrString(headerTitleTextColor)\n    : \"var(--clr-collapse-header, #00007e)\";\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={textColour}\n          $textSize={themeFontSizeOrString(headerTitleTextSize || \"m\")}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","textColour","themeColorOrString","toggleCollapse","current","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","themeFontSizeOrString","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"0aAoDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAE/DE,EAAajB,EACfkB,EAAmBlB,GACnB,sCAEEmB,EAAiB,WACb,IAAAC,EAAYN,EAAOM,SACvBJ,aAAe,EAAfA,EAAiBI,UAASC,aAAaL,eAAAA,EAAiBI,SAC5D,IAAME,GAAgBb,EACtBC,EAAcY,GAEE,OAAZF,GACFP,EAAiB,GAAAU,OAAGH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,WAAW,WAAM,OAAAZ,EAAiB,IAAjB,EAAuB,IAExCG,EAAgBI,QAAUK,WACxB,WAAM,OAAAZ,EAAiB,UAAjB,EACsB,IAA5Ba,QAGiBC,IAAjBtB,GACFA,EAAaiB,EAEjB,EAuBA,OAVAM,EAAU,WACRlB,EAAcN,IAAa,GAGzBS,EADET,EACe,UAEA,IAErB,EAAG,CAACA,IAGFyB,EAAAC,cAAA,MAAA,CAAKhC,GAAIA,GACNK,EACC0B,EAAAC,cAACC,EAAY,CAAA,gBACI,GAAAR,OAAGzB,EAAE,2BACLW,EACfX,GAAI,GAAAyB,OAAGzB,EAAE,WACTkC,QAASb,EAAc,iBACR,eACHpB,EACZkC,UA/Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEJ,EAuBQkB,KAAK,SACLC,SAAU,GAETnC,GAGH0B,EAAAC,cAACS,mBACgB,GAAAhB,OAAGzB,EAAE,WAAS,gBACdW,EACfX,GAAI,GAAAyB,OAAGzB,aACPkC,QAASb,EACTqB,KAAK,SACLC,WAAW,WAAUC,WACTzB,EAAU0B,UACXC,EAAsB3C,GAAuB,qBACvCC,GAEhBH,EACD8B,EAAAC,cAACe,SAAoBpC,GACnBoB,EAAAC,cAACgB,GAAOC,OAAQC,MAItBnB,EAAAC,cAACmB,EAAe,CACdnD,GAAI,GAAAyB,OAAGzB,EAAE,YACToD,IAAKpC,EACLuB,KAAK,SAAQ,eACC5B,EAAU,kBACP,GAAAc,OAAGzB,aAAWqD,eACfvC,EAAawC,YAChB3C,GAEZH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { type ColourVariableType, type FontSizeType } from \"../../types\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: ColourVariableType;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [isVisible, setIsVisible] = useState(startOpen ? true : false);\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const toggleCollapse = () => {\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      transitionTimer.current = setTimeout(\n        () => setIsVisible(false),\n        0.5 * 1000,\n      );\n    } else {\n      setTimeout(() => setIsVisible(true), 0);\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id} className=\"component-collapse\">\n      {headerComponent ? (\n        <div\n          className=\"custom-header\"\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </div>\n      ) : (\n        <button\n          className={[\"default-header\", \"color-props\", \"text-props\"].join(\" \")}\n          id={`${id}-header`}\n          type=\"button\"\n          onClick={toggleCollapse}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          data-color={headerTitleTextColor}\n          data-text-size={headerTitleTextSize || \"m\"}\n          data-text-font-family={headerTitleTextFontFamily}\n        >\n          <span className=\"spacer\">{headerTitleText}</span>\n          <span className=\"spacer\">\n            <span className=\"flipping-icon\">\n              <IconFa faIcon={faChevronDown} />\n            </span>\n          </span>\n        </button>\n      )}\n      <div\n        className=\"collapse-content\"\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        data-is-visible={isVisible}\n        aria-labelledby={`${id}-header`}\n      >\n        <div style={{ overflow: \"hidden\" }}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","isVisible","setIsVisible","content","useRef","transitionTimer","toggleCollapse","newOpenState","current","setTimeout","undefined","useEffect","React","className","createElement","concat","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","join","type","IconFa","faIcon","faChevronDown","ref","style","overflow"],"mappings":"4MAwCM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAA4BH,IAASJ,GAApCQ,OAAWC,OACZC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAE/DE,EAAiB,WACrB,IAAMC,GAAgBT,EACtBC,EAAcQ,IAEO,IAAjBA,EAEFF,EAAgBG,QAAUC,WACxB,WAAM,OAAAP,GAAa,EAAb,EACN,KAGFO,WAAW,WAAM,OAAAP,GAAa,EAAb,EAAoB,QAElBQ,IAAjBhB,GACFA,EAAaa,EAEjB,EAuBA,OAVAI,EAAU,WACRZ,EAAcN,IAAa,GAGzBS,IADET,EAKN,EAAG,CAACA,IAGFmB,uBAAKzB,GAAIA,EAAI0B,UAAU,sBACpBrB,EACCoB,EAAAE,cAAA,MAAA,CACED,UAAU,gBAAe,gBACV,UAAG1B,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACT6B,QAASV,mBACM,EAAK,aACRlB,EACZ6B,UAhCc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNd,IAEJ,EAwBQe,KAAK,SACLC,SAAU,GAET9B,GAGHoB,EAAAE,cAAA,SAAA,CACED,UAAW,CAAC,iBAAkB,cAAe,cAAcU,KAAK,KAChEpC,GAAI,GAAA4B,OAAG5B,aACPqC,KAAK,SACLR,QAASV,kBACM,GAAAS,OAAG5B,aAAW,gBACdW,eACHT,EAAoB,iBAChBC,GAAuB,4BAChBC,GAEvBqB,EAAAE,cAAA,OAAA,CAAMD,UAAU,UAAUzB,GAC1BwB,EAAAE,cAAA,OAAA,CAAMD,UAAU,UACdD,EAAAE,cAAA,OAAA,CAAMD,UAAU,iBACdD,EAAAE,cAACW,GAAOC,OAAQC,OAKxBf,EAAAE,cAAA,MAAA,CACED,UAAU,mBACV1B,GAAI,GAAA4B,OAAG5B,EAAE,YACTyC,IAAKzB,EACLkB,KAAK,SAAQ,eACCvB,EAAU,kBACPG,EAAS,kBACT,GAAAc,OAAG5B,EAAE,YAEtByB,EAAAE,cAAA,MAAA,CAAKe,MAAO,CAAEC,SAAU,WAAanC,IAI7C"}

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

@@ -1,5 +1,8 @@
 import React, { type InputHTMLAttributes } from "react";
-export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+/**
+ * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker
+ * */
+export declare function DateField({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: InputHTMLAttributes<HTMLInputElement> & {
     /** label text */
     label: string;
     /** hind text */
@@ -24,9 +27,5 @@ export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     yearHasError?: boolean;
     /** error message text */
     errorMessage?: string;
-};
-/**
- * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker
- * */
-export declare function DateField({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps): React.JSX.Element;
+}): React.JSX.Element;
 export default DateField;

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

@@ -1,2 +1,2 @@
-import e from"react";import{ErrorText as t}from"../ErrorText/index.js";import{Text as n}from"../Text/index.js";import{TextField as r}from"../TextField/index.js";import{Fieldset as a,LegendText as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as i,ErrorTextWrapper as d}from"./styles.js";function m(m){var u=m.label,c=m.hintText,s=m.day,h=m.month,p=m.year,y=m.dayName,E=void 0===y?"day":y,x=m.monthName,b=void 0===x?"month":x,f=m.yearName,g=void 0===f?"year":f,v=m.dayHasError,C=m.monthHasError,q=m.yearHasError,I=m.errorMessage,L=m.onChange,F=void 0===L?function(){}:L,M=m.onBlur,T=void 0===M?function(){}:M,j=m.onFocus,B=void 0===j?function(){}:j,H=m.disabled,N=m.required;return e.createElement(a,null,e.createElement(o,null,u,!N&&e.createElement("span",{style:{fontWeight:"var(--typ-font-weight-base, 300)"}}," (optional)")),c&&e.createElement(n,{textColor:"text-mid"},c),e.createElement(l,null,e.createElement(r,{label:"Day",type:"text",name:E,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:s,onChange:F,onBlur:T,onFocus:B,hasError:v,disabled:H})),e.createElement(l,null,e.createElement(r,{label:"Month",type:"text",name:b,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:h,onChange:F,onBlur:T,onFocus:B,hasError:C,disabled:H})),e.createElement(i,null,e.createElement(r,{label:"Year",type:"text",name:g,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:F,onBlur:T,onFocus:B,hasError:q,disabled:H})),I&&e.createElement(d,null,e.createElement(t,{marginTop:"xxs"},I)))}export{m as DateField,m as default};
+import e from"react";import{ErrorText as t}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as r}from"../TextField/index.js";function n(n){var o=n.label,i=n.hintText,d=n.day,l=n.month,m=n.year,s=n.dayName,u=void 0===s?"day":s,c=n.monthName,p=void 0===c?"month":c,h=n.yearName,x=void 0===h?"year":h,y=n.dayHasError,E=n.monthHasError,f=n.yearHasError,b=n.errorMessage,v=n.onChange,g=void 0===v?function(){}:v,C=n.onBlur,N=void 0===C?function(){}:C,q=n.onFocus,I=void 0===q?function(){}:q,L=n.disabled,w=n.required;return e.createElement("fieldset",{className:"component-date-field"},e.createElement("legend",null,o,!w&&e.createElement("span",{style:{fontWeight:"var(--typ-font-weight-base, 300)"}}," (optional)")),i&&e.createElement(a,{textColor:"text-mid"},i),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Day",type:"text",name:u,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:d,onChange:g,onBlur:N,onFocus:I,hasError:y,disabled:L})),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Month",type:"text",name:p,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:l,onChange:g,onBlur:N,onFocus:I,hasError:E,disabled:L})),e.createElement("div",{className:"large-date-text-field-wrapper"},e.createElement(r,{label:"Year",type:"text",name:x,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:m,onChange:g,onBlur:N,onFocus:I,hasError:f,disabled:L})),b&&e.createElement("div",{className:"error-text-wrapper"},e.createElement(t,{marginTop:"xxs"},b)))}export{n as DateField,n as default};
 //# sourceMappingURL=index.js.map