@cruk/cruk-react-components 7.0.0 → 7.1.1

package/lib/src/components/Link/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{StyledLink as t}from"./styles.js";import{themeColorOrString as a}from"../../utils/themeUtils.js";var l=function(l){var s=l.rel?l.rel:"_blank"===l.target?"noopener noreferrer":"",i=l.as&&"a"!==l.as?void 0:"a",n=l.textHoverColor,p=l.appearance,m=l.ref,f=l.children,d=e(l,["textHoverColor","appearance","ref","children"]),c=n?a(n):void 0;return o.createElement(t,r({},d,{$textHoverColor:c,$appearance:p,rel:s,forwardedAs:i,ref:m}),f)};l.displayName="Link";export{l as Link,l as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";var n=function(n){var e=n.appearance,i=n.ref,o=n.children,d=n.as,p=n.textColor,g=n.backgroundColor,l=n.textSize,m=n.textAlign,c=n.textWeight,s=n.textFontFamily,f=n.wordBreak,x=n.overflowWrap,h=n.margin,b=n.marginTop,k=n.marginRight,u=n.marginBottom,z=n.marginLeft,w=n.marginVertical,v=n.marginHorizontal,B=n.padding,F=n.paddingTop,L=n.paddingRight,y=n.paddingBottom,C=n.paddingLeft,H=n.paddingVertical,R=n.paddingHorizontal,T=a(n,["appearance","ref","children","as","textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal"]),V=T.rel?T.rel:"_blank"===T.target?"noopener noreferrer":"",W={"data-appearance":e,"data-color":p,"data-bg-color":g,"data-text-size":l,"data-text-align":m,"data-text-weight":c,"data-text-font-family":s,"data-word-break":f,"data-overflow-wrap":x,"data-margin":h,"data-margin-top":b,"data-margin-right":k,"data-margin-bottom":u,"data-margin-left":z,"data-margin-vertical":w,"data-margin-horizontal":v,"data-padding":B,"data-padding-top":F,"data-padding-right":L,"data-padding-bottom":y,"data-padding-left":C,"data-padding-vertical":H,"data-padding-horizontal":R};return r.createElement(r.Fragment,null,d&&"a"!==d?null:r.createElement("a",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},W,T,{rel:V,"data-appearance":e}),o),"span"===d?r.createElement("span",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},T,W,{"data-appearance":e}),o):null)};n.displayName="Link";export{n as Link,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = (props: LinkProps) => {\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ref, children, ...rest } = props;\n\n  const textHoverColorFinal = textHoverColor\n    ? themeColorOrString(textHoverColor)\n    : undefined;\n\n  return (\n    <StyledLink\n      {...rest}\n      $textHoverColor={textHoverColorFinal}\n      $appearance={appearance}\n      rel={rel}\n      forwardedAs={forwardAs}\n      ref={ref}\n    >\n      {children}\n    </StyledLink>\n  );\n};\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","props","rel","target","forwardAs","as","undefined","textHoverColor","appearance","ref","children","rest","__rest","textHoverColorFinal","themeColorOrString","React","createElement","StyledLink","__assign","$appearance","forwardedAs","displayName"],"mappings":"6MAmCO,IAAMA,EAAO,SAACC,GAEnB,IAAMC,EAAMD,EAAMC,IACdD,EAAMC,IACW,WAAjBD,EAAME,OACJ,sBACA,GAGAC,EAAYH,EAAMI,IAAmB,MAAbJ,EAAMI,QAAaC,EAAY,IAErDC,EAAuDN,EAAKM,eAA5CC,EAAuCP,EAAKO,WAAhCC,EAA2BR,MAAtBS,EAAsBT,EAAKS,SAAdC,EAAIC,EAAKX,EAAzD,CAAA,iBAAA,aAAA,MAAA,aAEAY,EAAsBN,EACxBO,EAAmBP,QACnBD,EAEJ,OACES,EAAAC,cAACC,EAAUC,EAAA,CAAA,EACLP,mBACaE,EAAmBM,YACvBX,EACbN,IAAKA,EACLkB,YAAahB,EACbK,IAAKA,IAEJC,EAGP,EAEAV,EAAKqB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\n\nimport { type ColourProps, type SpacingProps, type TextProps } from \"src/types\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  SpacingProps &\n  ColourProps &\n  TextProps & {\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n    as?: \"a\" | \"span\";\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = ({\n  appearance,\n  ref,\n  children,\n  as,\n  textColor,\n  backgroundColor,\n  textSize,\n  textAlign,\n  textWeight,\n  textFontFamily,\n  wordBreak,\n  overflowWrap,\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  ...htmlAnchorProps\n}: LinkProps) => {\n  // security by default\n  const rel = htmlAnchorProps.rel\n    ? htmlAnchorProps.rel\n    : htmlAnchorProps.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  const convertedProps = {\n    \"data-appearance\": appearance,\n    \"data-color\": textColor,\n    \"data-bg-color\": backgroundColor,\n    \"data-text-size\": textSize,\n    \"data-text-align\": textAlign,\n    \"data-text-weight\": textWeight,\n    \"data-text-font-family\": textFontFamily,\n    \"data-word-break\": wordBreak,\n    \"data-overflow-wrap\": overflowWrap,\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  // only forward As anchor if we are not casting as something that is not an anchor\n  return (\n    <>\n      {!as || as === \"a\" ? (\n        <a\n          className={[\n            \"component-link\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...convertedProps}\n          {...htmlAnchorProps}\n          rel={rel}\n          data-appearance={appearance}\n        >\n          {children}\n        </a>\n      ) : null}\n\n      {as === \"span\" ? (\n        <span\n          className={[\n            \"component-link\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLAnchorElement>}\n          // rel={rel}\n          {...htmlAnchorProps}\n          {...convertedProps}\n          data-appearance={appearance}\n        >\n          {children}\n        </span>\n      ) : null}\n    </>\n  );\n};\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","_a","appearance","ref","children","as","textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","htmlAnchorProps","__rest","rel","target","convertedProps","React","createElement","Fragment","__assign","className","join","displayName"],"mappings":"qGA8BO,IAAMA,EAAO,SAACC,GACnB,IAAAC,EAAUD,EAAAC,WACVC,EAAGF,EAAAE,IACHC,EAAQH,EAAAG,SACRC,OACAC,cACAC,oBACAC,EAAQP,EAAAO,SACRC,EAASR,EAAAQ,UACTC,EAAUT,EAAAS,WACVC,EAAcV,EAAAU,eACdC,cACAC,iBACAC,WACAC,EAASd,EAAAc,UACTC,EAAWf,EAAAe,YACXC,EAAYhB,EAAAgB,aACZC,EAAUjB,EAAAiB,WACVC,mBACAC,qBACAC,YACAC,EAAUrB,EAAAqB,WACVC,EAAYtB,EAAAsB,aACZC,EAAavB,EAAAuB,cACbC,EAAWxB,EAAAwB,YACXC,EAAezB,EAAAyB,gBACfC,EAAiB1B,EAAA0B,kBACdC,EAAeC,EAAA5B,EA3BC,iWA8Bb6B,EAAMF,EAAgBE,IACxBF,EAAgBE,IACW,WAA3BF,EAAgBG,OACd,sBACA,GAEAC,EAAiB,CACrB,kBAAmB9B,EACnB,aAAcI,EACd,gBAAiBC,EACjB,iBAAkBC,EAClB,kBAAmBC,EACnB,mBAAoBC,EACpB,wBAAyBC,EACzB,kBAAmBC,EACnB,qBAAsBC,EACtB,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,KACI9B,GAAa,MAAPA,EAgBJ,KAfF4B,EAAAC,cAAA,IAAAE,EAAA,CACEC,UAAW,CACT,iBACA,cACA,gBACA,cACAC,KAAK,KACPnC,IAAKA,GACD6B,EACAJ,GACJE,IAAKA,EAAG,kBACS5B,IAEhBE,GAIG,SAAPC,EACC4B,EAAAC,cAAA,OAAAE,EAAA,CACEC,UAAW,CACT,iBACA,cACA,gBACA,cACAC,KAAK,KACPnC,IAAKA,GAEDyB,EACAI,qBACa9B,IAEhBE,GAED,KAGV,EAEAJ,EAAKuC,YAAc"}

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

@@ -1,2 +1,2 @@
-import e from"react";import n from"./styles.module.css.js";function r(){return e.createElement(e.Fragment,null,e.createElement("p",{className:n["screen-reader-only"],role:"alert"},"Loading"),e.createElement("div",{className:n.spinner,"aria-hidden":"true"},e.createElement("span",null),e.createElement("span",null),e.createElement("span",null)))}export{r as Loader,r as default};
+import e from"react";function a(){return e.createElement("span",{className:"component-loader"},e.createElement("p",{className:"screen-reader-only",role:"alert"},"Loading"),e.createElement("div",{className:"spinner","aria-hidden":"true"},e.createElement("span",null),e.createElement("span",null),e.createElement("span",null)))}export{a as Loader,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./styles.module.css\";\n\n/**\n *\n * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.\n */\nexport function Loader() {\n  return (\n    <>\n      <p className={styles[\"screen-reader-only\"]} role=\"alert\">\n        Loading\n      </p>\n      <div className={styles[\"spinner\"]} aria-hidden=\"true\">\n        <span />\n        <span />\n        <span />\n      </div>\n    </>\n  );\n}\n\nexport default Loader;\n"],"names":["Loader","React","createElement","Fragment","className","styles","role"],"mappings":"oEAOgBA,IACd,OACEC,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAAA,IAAA,CAAGE,UAAWC,EAAO,sBAAuBC,KAAK,SAAO,WAGxDL,EAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAgB,sBAAe,QAC7CJ,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,OAIR"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n *\n * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.\n */\nexport function Loader() {\n  return (\n    <span className=\"component-loader\">\n      <p className=\"screen-reader-only\" role=\"alert\">\n        Loading\n      </p>\n      <div className=\"spinner\" aria-hidden=\"true\">\n        <span />\n        <span />\n        <span />\n      </div>\n    </span>\n  );\n}\n\nexport default Loader;\n"],"names":["Loader","React","createElement","className","role"],"mappings":"8BAMgBA,IACd,OACEC,EAAAC,cAAA,OAAA,CAAMC,UAAU,oBACdF,EAAAC,cAAA,IAAA,CAAGC,UAAU,qBAAqBC,KAAK,SAAO,WAG9CH,EAAAC,cAAA,MAAA,CAAKC,UAAU,UAAS,cAAa,QACnCF,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,MACAD,EAAAC,cAAA,OAAA,OAIR"}

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

@@ -1,6 +1,16 @@
-import React, { type ReactNode } from "react";
-import { type SpacingProps } from "../Spacing";
-export type ModalProps = SpacingProps & {
+import React, { type HTMLAttributes, type ReactNode } from "react";
+/**
+ *
+ * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.
+ * ## How modals work
+ * - Modals are positioned over everything else in the document and remove scroll from the "body" tag so that modal content scrolls instead.
+ * - Modals are unmounted when closed.
+ * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
+ * ## Accessibility
+ * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
+ */
+export declare function Modal({ modalName, closeFunction, showCloseButton, themeName, children, isAnimated, top, maxWidth, width, ...htmlAttributes }: HTMLAttributes<HTMLDivElement> & {
+    themeName: string;
     /** modal name used for aria-label */
     modalName: string;
     /** callback function called on modal close */
@@ -9,27 +19,13 @@ export type ModalProps = SpacingProps & {
     showCloseButton?: boolean;
     /** set max width of modal */
     maxWidth?: string;
-    themeName: string;
     /** set space from top of view port that modal appears */
     top?: string;
-    /** background color of dialogue */
-    backgroundColor?: string;
     /** children components  */
     children?: ReactNode;
     /** width of modal */
     width?: string;
     /** turn on animate in modal */
     isAnimated?: boolean;
-};
-/**
- *
- * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.
- * ## How modals work
- * - Modals are positioned over everything else in the document and remove scroll from the "body" tag so that modal content scrolls instead.
- * - Modals are unmounted when closed.
- * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
- * ## Accessibility
- * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
- */
-export declare function Modal({ modalName, closeFunction, showCloseButton, themeName, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, isAnimated, }: ModalProps): React.JSX.Element;
+}): React.JSX.Element;
 export default Modal;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  themeName: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  themeName,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor,\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  isAnimated = true,\n}: ModalProps) {\n  const backgroundColourValue = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : \"var(--background-light, #ffffff)\";\n\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section data-theme={themeName}>\n              <FocusLock returnFocus>\n                <Wrapper role=\"dialog\" aria-modal=\"true\" aria-label={modalName}>\n                  <Content\n                    backgroundColor={backgroundColourValue}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $top={top}\n                    margin={margin}\n                    marginHorizontal={marginHorizontal}\n                    marginVertical={marginVertical}\n                    marginTop={marginTop}\n                    marginRight={marginRight}\n                    marginBottom={marginBottom}\n                    marginLeft={marginLeft}\n                    padding={padding}\n                    paddingHorizontal={paddingHorizontal}\n                    paddingVertical={paddingVertical}\n                    paddingTop={paddingTop}\n                    paddingRight={paddingRight}\n                    paddingBottom={paddingBottom}\n                    paddingLeft={paddingLeft}\n                    $isAnimated={isAnimated}\n                  >\n                    {showCloseButton && closeFunction ? (\n                      <CloseButton\n                        aria-label=\"close\"\n                        appearance=\"tertiary\"\n                        onClick={() => {\n                          closeFunction();\n                        }}\n                      >\n                        <IconFa faIcon={faClose} />\n                      </CloseButton>\n                    ) : null}\n                    {children}\n                  </Content>\n                  <Background $isAnimated={isAnimated} />\n                </Wrapper>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","themeName","_b","maxWidth","_c","top","backgroundColor","children","_d","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_e","marginBottom","marginLeft","_f","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","_g","isAnimated","backgroundColourValue","themeColorOrString","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","FocusLock","returnFocus","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background","$isAnimated"],"mappings":"ybA4CM,SAAUA,EAAMC,OACpBC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,EAAeH,EAAAG,gBACfC,EAASJ,EAAAI,UACTC,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,UACXE,EAAAP,EAAAQ,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,EAAeT,EAAAS,gBACfC,EAAQV,EAAAU,SACRC,UAAAC,aAAQ,MAAKD,EACbE,EAAMb,EAAAa,OACNC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,EAAAlB,EAAAmB,aAAAA,OAAY,IAAAD,EAAG,QACfE,eACAC,EAAArB,EAAAsB,QAAAA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YACXC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAwBtB,EAC1BuB,EAAmBvB,GACnB,mCAEEwB,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBnC,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAoC,EAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,CAAA,aAAqB1C,GACnB8B,EAAAY,cAACG,GAAUC,aAAW,GACpBhB,EAAAY,cAACK,GAAQC,KAAK,SAAQ,aAAY,oBAAmBnD,GACnDiC,EAAAY,cAACO,EAAO,CACN5C,gBAAiBsB,EAAqBuB,UAC3BhD,EAAQiD,OACX3C,EAAK4C,KACPhD,EACNK,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,cACAE,GAEZ3B,GAAmBD,EAClBgC,EAAAY,cAACW,EAAW,CAAA,aACC,QACXC,WAAW,WACXC,QAAS,WACPzD,GACF,GAEAgC,EAAAY,cAACc,EAAM,CAACC,OAAQC,KAEhB,KACHpD,GAEHwB,EAAAY,cAACiB,EAAU,CAAAC,YAAclC,OAI/BU,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport Button from \"../Button\";\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  themeName,\n  children,\n  isAnimated = true,\n  top,\n  maxWidth,\n  width,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement> & {\n  themeName: string;\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n}) {\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section className=\"component-modal\" data-theme={themeName}>\n              <FocusLock returnFocus>\n                <div\n                  className=\"wrapper\"\n                  role=\"dialog\"\n                  aria-modal=\"true\"\n                  aria-label={modalName}\n                >\n                  <div\n                    className={[\n                      \"content\",\n                      \"spacing-props\",\n                      \"colour-props\",\n                    ].join(\" \")}\n                    style={{\n                      maxWidth,\n                      top,\n                      width,\n                    }}\n                    data-is-animated={isAnimated}\n                    {...htmlAttributes}\n                  >\n                    {showCloseButton && closeFunction ? (\n                      <Button\n                        className=\"component-button close-button\"\n                        aria-label=\"close\"\n                        appearance=\"tertiary\"\n                        onClick={() => {\n                          closeFunction();\n                        }}\n                      >\n                        <IconFa faIcon={faClose} />\n                      </Button>\n                    ) : null}\n                    {children}\n                  </div>\n                  <div className=\"background\" data-is-animated={isAnimated} />\n                </div>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","themeName","children","_b","isAnimated","top","maxWidth","width","htmlAttributes","__rest","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","className","FocusLock","returnFocus","role","__assign","join","Button","appearance","onClick","IconFa","faIcon","faClose"],"mappings":"kaAmBM,SAAUA,EAAMC,GACpB,IAAAC,EAASD,EAAAC,UACTC,kBACAC,EAAeH,EAAAG,gBACfC,EAASJ,EAAAI,UACTC,EAAQL,EAAAK,SACRC,EAAAN,EAAAO,WAAAA,OAAU,IAAAD,GAAOA,EACjBE,QACAC,EAAQT,EAAAS,SACRC,EAAKV,EAAAU,MACFC,EAAcC,EAAAZ,EAVG,8GA8Bda,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBf,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAgB,EAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,CAASG,UAAU,+BAA8BzB,GAC/CU,EAAAY,cAACI,GAAUC,aAAW,GACpBjB,EAAAY,cAAA,MAAA,CACEG,UAAU,UACVG,KAAK,SAAQ,aACF,OAAM,aACL/B,GAEZa,EAAAY,cAAA,MAAAO,EAAA,CACEJ,UAAW,CACT,UACA,gBACA,gBACAK,KAAK,KACPZ,MAAO,CACLb,SAAQA,EACRD,IAAGA,EACHE,MAAKA,GACN,mBACiBH,GACdI,GAEHR,GAAmBD,EAClBY,EAAAY,cAACS,EAAM,CACLN,UAAU,gCAA+B,aAC9B,QACXO,WAAW,WACXC,QAAS,WACPnC,GACF,GAEAY,EAAAY,cAACY,EAAM,CAACC,OAAQC,KAEhB,KACHnC,GAEHS,EAAAY,cAAA,MAAA,CAAKG,UAAU,aAAY,mBAAmBtB,OAIpDa,SAASC,MAEX,KAGV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","PagerWrapper","createElement","PagerList","PagerItem","key","PagerLink","__assign","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"iLA+BM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAeL,EAAU,EAAIA,EAAU,EACvCM,EAAaC,KAAKC,KAAKX,EAAQQ,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAA,CACpCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAAE,KAAAH,OACpEV,EAAc,GAAAU,OAAGV,EAAW,KAAAU,OAAIF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFnB,EAAcW,EAChB,EAPoC,EAyDtC,OACES,gCACGtB,EAAQG,GACPmB,gBAACC,EAAY,KACXD,EAAAE,cAACC,EAAS,KACRH,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAC9BuB,KAAK,OAAM,gBACgB,IAAZ/B,GACE,IAAZA,GAAiB,CAAEgC,UAAU,GACjB,IAAZhC,GAAiBa,EAAUb,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACiC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAE,cAACE,EAAS,CAACC,IAAKd,GACdS,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,KAAAQ,OAAIF,GAAW,KAAIwB,QAC9BxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAAE,OAAQF,EAAM,QAAAE,OAAOkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAE,cAACE,EAAS,CAACC,IAAI,SACbL,EAAAE,cAAA,OAAA,KAAA,SAGEgB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAAA,OAAA,KAAA,SAGHkB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJ/B,EAAWiC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAM,IACxBtC,EACEqC,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACT,CAmBWQ,CAAY5C,EAASU,GACtBa,EAAAE,cAACE,EAAS,CAACC,IAAI,QACbL,EAAAE,cAACI,EAASC,EAAA,CAAA,WACEtB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAC9BuB,KAAK,OAAM,gBACI/B,IAAYU,GACtBV,IAAYU,GAAc,CAAEsB,UAAU,GACtChC,IAAYU,GAAcG,EAAUb,EAAU,GAAG,CAAA6C,UAC3C7C,IAAYU,IAAU,UAMtCH,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <li className=\"pager-item\" key={number}>\n          <a\n            className=\"pager-link\"\n            data-cta={id ? `${id}-${number}` : null}\n            data-is-active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </a>\n        </li>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <li className=\"pager-item\" key=\"first\">\n        <span>...</span>\n      </li>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <li className=\"pager-item\" key=\"last\">\n          <span>...</span>\n        </li>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <>\n      {items > perPage && (\n        <div className=\"component-pagination\" id={id}>\n          <ul className=\"pager-list\">\n            <li className=\"pager-item\" key=\"Prev\">\n              <a\n                className=\"pager-link\"\n                data-cta={id ? `${id}-prev` : null}\n                data-name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                data-is-disabled={current === 1}\n              >\n                Prev\n              </a>\n            </li>\n            {renderPager(current, totalPages)}\n            <li className=\"pager-item\" key=\"Next\">\n              <a\n                className=\"pager-link\"\n                data-cta={id ? `${id}-next` : null}\n                data-name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                data-is-disabled={current === totalPages}\n              >\n                Next\n              </a>\n            </li>\n          </ul>\n          {children}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","createElement","Fragment","className","key","__assign","tabIndex","active","total","list","pager","push","first","slice","last","length","reverse","renderPager"],"mappings":"yFA6BM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAeL,EAAU,EAAIA,EAAU,EACvCM,EAAaC,KAAKC,KAAKX,EAAQQ,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAA,CACpCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAAE,KAAAH,OACpEV,EAAc,GAAAU,OAAGV,EAAW,KAAAU,OAAIF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFnB,EAAcW,EAChB,EAPoC,EA0DtC,OACES,EAAAC,cAAAD,EAAAE,SAAA,KACGxB,EAAQG,GACPmB,EAAAC,cAAA,MAAA,CAAKE,UAAU,uBAAuBlB,GAAIA,GACxCe,EAAAC,cAAA,KAAA,CAAIE,UAAU,cACZH,EAAAC,cAAA,KAAA,CAAIE,UAAU,aAAaC,IAAI,QAC7BJ,EAAAC,cAAA,IAAAI,EAAA,CACEF,UAAU,aAAY,WACZlB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAAI,YACxB,OAAM,gBACW,IAAZR,GACE,IAAZA,GAAiB,CAAE6B,aACP,IAAZ7B,GAAiBa,EAAUb,EAAU,uBACZ,IAAZA,IAAa,SA7DzB,SAAC8B,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHnB,EAAS,EAAGA,GAAUiB,EAAOjB,GAAU,EAC9CkB,EAAKE,KACHX,EAAAC,cAAA,KAAA,CAAIE,UAAU,aAAaC,IAAKb,GAC9BS,EAAAC,cAAA,IAAAI,EAAA,CACEF,UAAU,aAAY,WACZlB,EAAK,GAAAQ,OAAGR,cAAMM,GAAW,KAAI,iBACvBA,IAAWgB,GACvBjB,EAAUC,GAAO,CAAA,aACT,QAAAE,OAAQF,EAAM,QAAAE,OAAOe,KAEhCjB,KAKT,IAAMqB,EAAQH,EAAKI,MAAM,EAAG,GAAGpB,OAC7BO,sBAAIG,UAAU,aAAaC,IAAI,SAC7BJ,EAAAC,cAAA,OAAA,KAAA,SAGEa,EAAOL,EACVI,MAAMJ,EAAKM,OAAS,GACpBtB,OACCO,sBAAIG,UAAU,aAAaC,IAAI,QAC7BJ,EAAAC,cAAA,OAAA,KAAA,SAGHe,UAcH,OAbAN,EAAQD,EAAKI,MAAM,EAAGL,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJ5B,EAAW8B,EAAKI,MAAM,EAAG,GAAKJ,EAAKI,MAAM,EAAG,GAAGpB,OAAOqB,GAG5DP,EAASC,EAAQ,EACbI,EAAMnB,OAAOgB,EAAKI,OAAM,IACxBlC,EACEiC,EAAMnB,OAAOgB,EAAKI,MAAMN,EAAS,EAAGA,EAAS,IAC7CK,EAAMnB,OAAOgB,EAAKI,MAAMN,EAAS,EAAGA,EAAS,IAAId,OAAOqB,IAG7DJ,CACT,CAoBWO,CAAYxC,EAASU,GACtBa,EAAAC,cAAA,KAAA,CAAIE,UAAU,aAAaC,IAAI,QAC7BJ,EAAAC,cAAA,IAAAI,EAAA,CACEF,UAAU,aAAY,WACZlB,EAAK,GAAAQ,OAAGR,EAAE,SAAU,KAAI,YACxB,OAAM,gBACDR,IAAYU,GACtBV,IAAYU,GAAc,CAAEmB,UAAU,GACtC7B,IAAYU,GAAcG,EAAUb,EAAU,GAAG,CAAA,mBACpCA,IAAYU,IAAU,UAM7CH,GAKX"}

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

@@ -22,5 +22,5 @@ export type PopOverProps = {
  * Popover is a non-modal dialog that floats around its disclosure. It's
 commonly used for displaying additional rich content on top of something.
 */
-export declare function PopOver({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps): React.JSX.Element;
+export declare function PopOver({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, full, }: PopOverProps): React.JSX.Element;
 export default PopOver;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <PopOverWrapper $full={full} $css={css} ref={popRef}>\n      {React.Children.map(children, (child) =>\n        React.cloneElement(\n          child as DetailedReactHTMLElement<object, HTMLElement>,\n          {\n            onClick: toggle,\n            \"aria-expanded\": showPopOver,\n            \"aria-haspopup\": \"dialog\",\n          },\n        ),\n      )}\n      {showPopOver ? (\n        <PopOverModal\n          $maxWidth={maxWidth || \"none\"}\n          $minWidth={minWidth || \"auto\"}\n          $position={position || \"top\"}\n          role=\"dialog\"\n          aria-label={modalLabel}\n          aria-modal={showPopOver}\n        >\n          {modalContent}\n        </PopOverModal>\n      ) : null}\n    </PopOverWrapper>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","PopOverWrapper","$full","ref","Children","map","child","cloneElement","onClick","PopOverModal","$maxWidth","$position","role"],"mappings":"gPAqCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAI,IAAAD,GAAQA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,EAAS,WAAM,OAAAD,GAAgBD,EAAhB,EACfG,EAAe,WAAM,OAAAF,GAAe,EAAf,EAGrBG,EAAsB,SAACC,GACrBT,EAAOU,UAAYV,EAAOU,QAAQC,SAASF,EAAEG,SACjDL,GAEJ,EAyBA,OAvBAM,EACE,WACEN,GACF,EACA,CACEO,WAAY,CAAC,WAEf,IAGFC,EAAU,WACJzB,GACFA,EAAsBc,EAE1B,EAAG,CAACA,EAAad,IAEjB0B,EAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC7D,CACF,EAAG,IAGDY,EAAAC,cAACC,EAAc,CAAAC,MAAQxB,OAAYF,EAAK2B,IAAKxB,GAC1CoB,EAAMK,SAASC,IAAInC,EAAU,SAACoC,GAC7B,OAAAP,EAAMQ,aACJD,EACA,CACEE,QAASvB,EACT,gBAAiBF,EACjB,gBAAiB,UALrB,GASDA,EACCgB,EAAAC,cAACS,EAAY,CAAAC,UACAtC,GAAY,iBACZD,GAAY,OAAMwC,UAClBtC,GAAY,MACvBuC,KAAK,SAAQ,aACDtC,EAAU,aACVS,GAEXR,GAED,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <div\n      className=\"component-popover\"\n      ref={popRef}\n      data-full={full}\n      data-position={position || \"top\"}\n    >\n      {React.Children.map(children, (child) =>\n        React.cloneElement(\n          child as DetailedReactHTMLElement<object, HTMLElement>,\n          {\n            onClick: toggle,\n            \"aria-expanded\": showPopOver,\n            \"aria-haspopup\": \"dialog\",\n          },\n        ),\n      )}\n      {showPopOver ? (\n        <div\n          className=\"popover-modal\"\n          style={{\n            maxWidth: maxWidth || \"none\",\n            minWidth: minWidth || \"auto\",\n          }}\n          role=\"dialog\"\n          aria-label={modalLabel}\n          aria-modal={showPopOver}\n        >\n          {modalContent}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","className","ref","Children","map","child","cloneElement","onClick","style","role"],"mappings":"iLAoCM,SAAUA,EAAQC,OACtBC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,aACAC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAAR,EAAAS,KAAAA,OAAI,IAAAD,GAAQA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,EAAS,WAAM,OAAAD,GAAgBD,EAAhB,EACfG,EAAe,WAAM,OAAAF,GAAe,EAAf,EAGrBG,EAAsB,SAACC,GACrBT,EAAOU,UAAYV,EAAOU,QAAQC,SAASF,EAAEG,SACjDL,GAEJ,EAyBA,OAvBAM,EACE,WACEN,GACF,EACA,CACEO,WAAY,CAAC,WAEf,IAGFC,EAAU,WACJxB,GACFA,EAAsBa,EAE1B,EAAG,CAACA,EAAab,IAEjByB,EAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC7D,CACF,EAAG,IAGDY,EAAAC,cAAA,MAAA,CACEC,UAAU,oBACVC,IAAKvB,EAAM,YACAD,EAAI,gBACAJ,GAAY,OAE1ByB,EAAMI,SAASC,IAAIjC,EAAU,SAACkC,GAC7B,OAAAN,EAAMO,aACJD,EACA,CACEE,QAAStB,EACT,gBAAiBF,EACjB,gBAAiB,UALrB,GASDA,EACCgB,EAAAC,cAAA,MAAA,CACEC,UAAU,gBACVO,MAAO,CACLnC,SAAUA,GAAY,OACtBD,SAAUA,GAAY,QAExBqC,KAAK,SAAQ,aACDlC,eACAQ,GAEXP,GAED,KAGV"}

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

@@ -20,5 +20,5 @@ export type ProgressBarProps = {
  * Provide up-to-date feedback on the progress of a workflow or action with
 simple yet flexible progress bars.
 */
-export declare function ProgressBar({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps): React.JSX.Element;
+export declare function ProgressBar({ percentage, isCircular, circleContents, circleSize, secondaryPercentage, children, }: ProgressBarProps): React.JSX.Element;
 export default ProgressBar;

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

@@ -1,2 +1,2 @@
-import e from"react";import{ProgressBarWrapper as r,CircularWrapper as t,CircleSvg as a,EmptyCircle as c,FullCircle as o,CircularValue as n,LineProgressBarWrapper as s,LineProgressBar as l,ScreenReaderOnly as i}from"./styles.js";function m(m){var f=m.percentage,$=void 0===f?0:f,y=m.isCircular,d=m.circleContents,h=m.circleSize,E=m.barColor,p=m.secondaryBarColor,k=m.secondaryPercentage,u=m.children,C=Number.isNaN($)?0:$,b=C>100?100:C,g="".concat(C,"%"),x=k&&!Number.isNaN(k)?k:0,D=x>100?100:x,N="".concat("string"==typeof d?d:""," ").concat(g,"% Complete"),S=d||g,v=58,I=2*Math.PI*v;return e.createElement(r,null,y?e.createElement(t,{$circleSize:h||"90px"},e.createElement(a,{viewBox:"0 0 ".concat(128," ").concat(128)},e.createElement(c,{cx:64,cy:64,r:v,strokeWidth:6}),e.createElement(o,{$isSecondary:!0,$barColor:p,cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:I,strokeDashoffset:I*(1-D/100),$strokeDashoffsetInit:I}),e.createElement(o,{$barColor:E,cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:I,strokeDashoffset:I*(1-b/100),$strokeDashoffsetInit:I})),e.createElement(n,null,S)):e.createElement(s,{$percentage:b,$secondaryPercentage:D},e.createElement(l,{$isSecondary:!0,$percentage:D,$barColor:p}),e.createElement(l,{$percentage:b,$barColor:E}),e.createElement(i,null,N)),u)}export{m as ProgressBar,m as default};
+import e from"react";var a="90px";function t(t){var r=t.percentage,c=void 0===r?0:r,s=t.isCircular,l=t.circleContents,i=t.circleSize,o=t.secondaryPercentage,n=t.children,d=Number.isNaN(c)?0:c,m=d>100?100:d,f="".concat(d,"%"),h=o&&!Number.isNaN(o)?o:0,p=h>100?100:h,y="".concat("string"==typeof l?l:""," ").concat(f,"% Complete"),N=l||f,v=58,u=2*Math.PI*v,k=u*(1-m/100),E=u*(1-p/100);return e.createElement("div",{className:"component-progress-bar"},s?e.createElement("div",{className:"circular-wrapper",style:{width:i||a,height:i||a}},e.createElement("svg",{className:"circle-svg",viewBox:"0 0 ".concat(128," ").concat(128)},e.createElement("circle",{className:"empty-circle",cx:64,cy:64,r:v,strokeWidth:6}),e.createElement("circle",{className:"full-circle","data-is-secondary":"true",cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:u,strokeDashoffset:E,style:{"--_stroke-dashoffset-init":u,"--_stroke-dashoffset":E}}),e.createElement("circle",{className:"full-circle","data-is-secondary":"false",cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:u,strokeDashoffset:k,style:{"--_stroke-dashoffset-init":u,"--_stroke-dashoffset":k}})),e.createElement("div",{className:"circle-value"},N)):e.createElement("div",{className:"line-progress-bar-wrapper","data-is-complete":m>=100},e.createElement("div",{className:"line-progress-bar",style:{width:"".concat(p,"%"),"--_line-bar-width":"".concat(p,"%")},"data-is-secondary":"true","data-is-complete":p>=100}),e.createElement("div",{className:"line-progress-bar",style:{width:"".concat(m,"%"),"--_line-bar-width":"".concat(m,"%")},"data-is-secondary":"false","data-is-complete":m>=100}),e.createElement("div",{className:"screen-reader-only"},y)),n)}export{t as ProgressBar,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nimport {\n  ProgressBarWrapper,\n  CircularWrapper,\n  CircleSvg,\n  EmptyCircle,\n  FullCircle,\n  CircularValue,\n  LineProgressBarWrapper,\n  LineProgressBar,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n  /** percentage value of the progressbar */\n  percentage: number;\n  /** percentage value of a secondary (highter) amount of the progressbar */\n  secondaryPercentage?: number;\n  /** flag which converts line bar to donut chart */\n  isCircular?: boolean;\n  /** contents inside the donut chart */\n  circleContents?: ReactNode;\n  /** diameter of the donut chart */\n  circleSize?: string;\n  /** foreground colour of chart bar */\n  barColor?: string;\n  /** foreground colour of chart secondary bar */\n  secondaryBarColor?: string;\n  children?: ReactNode;\n};\n\n/**\n * Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n*/\nexport function ProgressBar({\n  percentage = 0,\n  isCircular,\n  circleContents,\n  circleSize,\n  barColor,\n  secondaryBarColor,\n  secondaryPercentage,\n  children,\n}: ProgressBarProps) {\n  const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n  const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n  const percentString = `${percentageNumber}%`;\n\n  const secondaryPercentageNumber =\n    secondaryPercentage && !Number.isNaN(secondaryPercentage)\n      ? secondaryPercentage\n      : 0;\n\n  const secondaryPercentageLimited =\n    secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n  const descriptivePercentageString = `${\n    typeof circleContents === \"string\" ? circleContents : \"\"\n  } ${percentString}% Complete`;\n  const textOrPercentString = circleContents || percentString;\n\n  const strokeWidth = 6;\n  const d = 128;\n  const r = d / 2 - strokeWidth;\n  const c = 2 * Math.PI * r;\n\n  return (\n    <ProgressBarWrapper>\n      {isCircular ? (\n        <CircularWrapper $circleSize={circleSize || DEFAULT_CIRCLE_SIZE}>\n          <CircleSvg viewBox={`0 0 ${d} ${d}`}>\n            <EmptyCircle\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n            />\n            <FullCircle\n              $isSecondary\n              $barColor={secondaryBarColor}\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n              strokeDasharray={c}\n              strokeDashoffset={c * (1 - secondaryPercentageLimited / 100)}\n              $strokeDashoffsetInit={c}\n            />\n\n            <FullCircle\n              $barColor={barColor}\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n              strokeDasharray={c}\n              strokeDashoffset={c * (1 - percentageLimited / 100)}\n              $strokeDashoffsetInit={c}\n            />\n          </CircleSvg>\n          <CircularValue>{textOrPercentString}</CircularValue>\n        </CircularWrapper>\n      ) : (\n        <LineProgressBarWrapper\n          $percentage={percentageLimited}\n          $secondaryPercentage={secondaryPercentageLimited}\n        >\n          <LineProgressBar\n            $isSecondary\n            $percentage={secondaryPercentageLimited}\n            $barColor={secondaryBarColor}\n          />\n\n          <LineProgressBar\n            $percentage={percentageLimited}\n            $barColor={barColor}\n          />\n          <ScreenReaderOnly>{descriptivePercentageString}</ScreenReaderOnly>\n        </LineProgressBarWrapper>\n      )}\n      {children}\n    </ProgressBarWrapper>\n  );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","_a","_b","percentage","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","ProgressBarWrapper","CircularWrapper","$circleSize","createElement","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","LineProgressBar","ScreenReaderOnly"],"mappings":"qOAsCM,SAAUA,EAAYC,OAC1BC,EAAAD,EAAAE,WAAAA,OAAU,IAAAD,EAAG,EAACA,EACdE,EAAUH,EAAAG,WACVC,EAAcJ,EAAAI,eACdC,EAAUL,EAAAK,WACVC,EAAQN,EAAAM,SACRC,EAAiBP,EAAAO,kBACjBC,EAAmBR,EAAAQ,oBACnBC,EAAQT,EAAAS,SAEFC,EAAoBC,OAAOC,MAAMV,GAA2B,EAAbA,EAC/CW,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAAC,OAAGL,OAEnBM,EACJR,IAAwBG,OAAOC,MAAMJ,GACjCA,EACA,EAEAS,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBX,EAA8BA,EAAiB,GAAE,KAAAW,OACtDD,gBACEK,EAAsBf,GAAkBU,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,gBAACC,EAAkB,KAChBvB,EACCsB,gBAACE,EAAe,CAAAC,YAAcvB,GA3DV,QA4DlBoB,EAAAI,cAACC,GAAUC,QAAS,cARlB,IAQ0B,KAAAhB,OAR1B,MASAU,EAAAI,cAACG,GACCC,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAdQ,IAgBVV,EAAAI,cAACO,EAAU,CAAAC,cAAA,EAAAC,UAEE/B,EACX0B,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAtBQ,EAuBRI,gBAAiBjB,EACjBkB,iBAAkBlB,GAAK,EAAIL,EAA6B,KAAIwB,sBACrCnB,IAGzBG,EAAAI,cAACO,EAAU,CAAAE,UACEhC,EACX2B,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAjCQ,EAkCRI,gBAAiBjB,EACjBkB,iBAAkBlB,GAAK,EAAIT,EAAoB,KAAI4B,sBAC5BnB,KAG3BG,EAAAI,cAACa,EAAa,KAAEvB,IAGlBM,EAAAI,cAACc,EAAsB,CAAAC,YACR/B,uBACSI,GAEtBQ,EAAAI,cAACgB,EAAe,CAAAR,cAAA,EAAAO,YAED3B,EAA0BqB,UAC5B/B,IAGbkB,EAAAI,cAACgB,EAAe,CAAAD,YACD/B,EAAiByB,UACnBhC,IAEbmB,EAAAI,cAACiB,EAAgB,KAAE5B,IAGtBT,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n  /** percentage value of the progressbar */\n  percentage: number;\n  /** percentage value of a secondary (highter) amount of the progressbar */\n  secondaryPercentage?: number;\n  /** flag which converts line bar to donut chart */\n  isCircular?: boolean;\n  /** contents inside the donut chart */\n  circleContents?: ReactNode;\n  /** diameter of the donut chart */\n  circleSize?: string;\n  /** foreground colour of chart bar */\n  barColor?: string;\n  /** foreground colour of chart secondary bar */\n  secondaryBarColor?: string;\n  children?: ReactNode;\n};\n\n/**\n * Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n*/\nexport function ProgressBar({\n  percentage = 0,\n  isCircular,\n  circleContents,\n  circleSize,\n  // barColor,\n  // secondaryBarColor,\n  secondaryPercentage,\n  children,\n}: ProgressBarProps) {\n  const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n  const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n  const percentString = `${percentageNumber}%`;\n\n  const secondaryPercentageNumber =\n    secondaryPercentage && !Number.isNaN(secondaryPercentage)\n      ? secondaryPercentage\n      : 0;\n\n  const secondaryPercentageLimited =\n    secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n  const descriptivePercentageString = `${\n    typeof circleContents === \"string\" ? circleContents : \"\"\n  } ${percentString}% Complete`;\n  const textOrPercentString = circleContents || percentString;\n\n  const strokeWidth = 6;\n  const d = 128;\n  const r = d / 2 - strokeWidth;\n  const c = 2 * Math.PI * r;\n\n  const strokeDashOffset = c * (1 - percentageLimited / 100);\n  const secondaryStrokeDashOffset = c * (1 - secondaryPercentageLimited / 100);\n  return (\n    <div className=\"component-progress-bar\">\n      {isCircular ? (\n        <div\n          className=\"circular-wrapper\"\n          style={{\n            width: circleSize || DEFAULT_CIRCLE_SIZE,\n            height: circleSize || DEFAULT_CIRCLE_SIZE,\n          }}\n        >\n          <svg className=\"circle-svg\" viewBox={`0 0 ${d} ${d}`}>\n            <circle\n              className=\"empty-circle\"\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n            />\n            <circle\n              className=\"full-circle\"\n              data-is-secondary=\"true\"\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n              strokeDasharray={c}\n              strokeDashoffset={secondaryStrokeDashOffset}\n              style={\n                {\n                  \"--_stroke-dashoffset-init\": c,\n                  \"--_stroke-dashoffset\": secondaryStrokeDashOffset,\n                } as React.CSSProperties\n              }\n            />\n\n            <circle\n              className=\"full-circle\"\n              data-is-secondary=\"false\"\n              cx={r + strokeWidth}\n              cy={r + strokeWidth}\n              r={r}\n              strokeWidth={strokeWidth}\n              strokeDasharray={c}\n              strokeDashoffset={strokeDashOffset}\n              style={\n                {\n                  \"--_stroke-dashoffset-init\": c,\n                  \"--_stroke-dashoffset\": strokeDashOffset,\n                } as React.CSSProperties\n              }\n            />\n          </svg>\n          <div className=\"circle-value\">{textOrPercentString}</div>\n        </div>\n      ) : (\n        <div\n          className=\"line-progress-bar-wrapper\"\n          data-is-complete={percentageLimited >= 100}\n        >\n          <div\n            className=\"line-progress-bar\"\n            style={\n              {\n                width: `${secondaryPercentageLimited}%`,\n                \"--_line-bar-width\": `${secondaryPercentageLimited}%`,\n              } as React.CSSProperties\n            }\n            data-is-secondary=\"true\"\n            data-is-complete={secondaryPercentageLimited >= 100}\n          />\n\n          <div\n            className=\"line-progress-bar\"\n            style={\n              {\n                width: `${percentageLimited}%`,\n                \"--_line-bar-width\": `${percentageLimited}%`,\n              } as React.CSSProperties\n            }\n            data-is-secondary=\"false\"\n            data-is-complete={percentageLimited >= 100}\n          />\n          <div className=\"screen-reader-only\">\n            {descriptivePercentageString}\n          </div>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"names":["DEFAULT_CIRCLE_SIZE","ProgressBar","_a","_b","percentage","isCircular","circleContents","circleSize","secondaryPercentage","children","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","strokeDashOffset","secondaryStrokeDashOffset","React","createElement","className","style","width","height","viewBox","cx","cy","strokeWidth","strokeDasharray","strokeDashoffset"],"mappings":"qBAEA,IAAMA,EAAsB,OAwBtB,SAAUC,EAAYC,GAC1B,IAAAC,EAAAD,EAAAE,WAAAA,OAAU,IAAAD,EAAG,EAACA,EACdE,EAAUH,EAAAG,WACVC,EAAcJ,EAAAI,eACdC,EAAUL,EAAAK,WAGVC,EAAmBN,EAAAM,oBACnBC,EAAQP,EAAAO,SAEFC,EAAoBC,OAAOC,MAAMR,GAA2B,EAAbA,EAC/CS,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAAC,OAAGL,OAEnBM,EACJR,IAAwBG,OAAOC,MAAMJ,GACjCA,EACA,EAEAS,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBT,EAA8BA,EAAiB,GAAE,KAAAS,OACtDD,gBACEK,EAAsBb,GAAkBQ,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAElBK,EAAmBH,GAAK,EAAIT,EAAoB,KAChDa,EAA4BJ,GAAK,EAAIL,EAA6B,KACxE,OACEU,EAAAC,cAAA,MAAA,CAAKC,UAAU,0BACZxB,EACCsB,EAAAC,cAAA,MAAA,CACEC,UAAU,mBACVC,MAAO,CACLC,MAAOxB,GAAcP,EACrBgC,OAAQzB,GAAcP,IAGxB2B,EAAAC,cAAA,MAAA,CAAKC,UAAU,aAAaI,QAAS,OAAAlB,OAhBnC,IAgB2C,KAAAA,OAhB3C,MAiBAY,EAAAC,cAAA,SAAA,CACEC,UAAU,eACVK,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBQ,IAyBVT,EAAAC,cAAA,SAAA,CACEC,UAAU,cAAa,oBACL,OAClBK,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YA/BQ,EAgCRC,gBAAiBf,EACjBgB,iBAAkBZ,EAClBI,MACE,CACE,4BAA6BR,EAC7B,uBAAwBI,KAK9BC,EAAAC,cAAA,SAAA,CACEC,UAAU,cAAa,oBACL,QAClBK,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAhDQ,EAiDRC,gBAAiBf,EACjBgB,iBAAkBb,EAClBK,MACE,CACE,4BAA6BR,EAC7B,uBAAwBG,MAKhCE,EAAAC,cAAA,MAAA,CAAKC,UAAU,gBAAgBV,IAGjCQ,uBACEE,UAAU,4BAA2B,mBACnBhB,GAAqB,KAEvCc,EAAAC,cAAA,MAAA,CACEC,UAAU,oBACVC,MACE,CACEC,MAAO,GAAAhB,OAAGE,EAA0B,KACpC,oBAAqB,GAAAF,OAAGE,EAA0B,MAC5B,oBAER,OAAM,mBACNA,GAA8B,MAGlDU,EAAAC,cAAA,MAAA,CACEC,UAAU,oBACVC,MACE,CACEC,MAAO,GAAAhB,OAAGF,EAAiB,KAC3B,oBAAqB,GAAAE,OAAGF,EAAiB,MACnB,oBAER,QAAO,mBACPA,GAAqB,MAEzCc,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBACZX,IAINT,EAGP"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";import{ErrorText as s}from"../ErrorText/index.js";import{StyledLabel as l,StyledInput as t,SelectedBorder as o,CheckWrapper as d,Check as i,VerticalAlign as n}from"./styles.js";var c=function(c){c.children,c.hasError,c.errorMessage;var m=c.ref,E=e(c,["children","hasError","errorMessage","ref"]);return a.createElement(a.Fragment,null,a.createElement(l,{$hasError:c.hasError||!!c.errorMessage||!1,className:c.className,$checked:c.checked||!1,$disabled:c.disabled||!1},a.createElement(t,r({},E,{disabled:c.disabled||!1,type:"radio",ref:m,"aria-describedby":c.id&&c.errorMessage?"".concat(c.id,"-error"):void 0})),a.createElement(o,null),a.createElement(d,null,a.createElement(i,null)),a.createElement(n,null,c.children||c.value)),!!c.errorMessage&&a.createElement(s,{marginTop:"xxs",id:c.id?"".concat(c.id,"-error"):void 0},c.errorMessage))};export{c as Radio,c as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";import{ErrorText as s}from"../ErrorText/index.js";var i=function(i){var t;i.children,i.hasError,i.errorMessage;var o=i.ref,l=e(i,["children","hasError","errorMessage","ref"]),n=i.hasError||!!(null===(t=i.errorMessage)||void 0===t?void 0:t.length);return a.createElement(a.Fragment,null,a.createElement("label",{className:"component-radio"},a.createElement("input",r({},l,{className:"input","aria-invalid":n||!1,disabled:i.disabled||!1,type:"radio",ref:o,"aria-describedby":i.id&&i.errorMessage?"".concat(i.id,"-error"):void 0})),a.createElement("div",{className:"check-wrapper"},a.createElement("span",{className:"check"})),a.createElement("span",{className:"vertical-align"},i.children||i.value)),!!i.errorMessage&&a.createElement(s,{marginTop:"xxs",id:i.id?"".concat(i.id,"-error"):void 0},i.errorMessage))};export{i as Radio,i as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = (props: RadioProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n  return (\n    <>\n      <StyledLabel\n        $hasError={props.hasError || !!props.errorMessage || false}\n        className={props.className}\n        $checked={props.checked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"radio\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!props.errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        <CheckWrapper>\n          <Check />\n        </CheckWrapper>\n\n        <VerticalAlign>{props.children || props.value}</VerticalAlign>\n      </StyledLabel>\n      {!!props.errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {props.errorMessage}\n        </ErrorText>\n      )}\n    </>\n  );\n};\n\nexport default Radio;\n"],"names":["Radio","props","children","hasError","ref","rest","__rest","React","createElement","Fragment","StyledLabel","$hasError","errorMessage","className","$checked","checked","$disabled","disabled","StyledInput","__assign","type","id","concat","undefined","SelectedBorder","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"sRA+BO,IAAMA,EAAQ,SAACC,GAEuCA,EAAKC,SAALD,EAAKE,SAALF,eAAnB,IAAEG,EAAiBH,EAAKG,IAAdC,EAAIC,EAAKL,EAArD,CAAA,WAAA,WAAA,eAAA,QACN,OACEM,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAW,CAAAC,UACCV,EAAME,YAAcF,EAAMW,eAAgB,EACrDC,UAAWZ,EAAMY,UAASC,SAChBb,EAAMc,UAAW,EAAKC,UACrBf,EAAMgB,WAAY,GAE7BV,EAAAC,cAACU,EAAWC,EAAA,CAAA,EACNd,GACJY,SAAUhB,EAAMgB,WAAY,EAC5BG,KAAK,QACLhB,IAAKA,EAAG,mBAEJH,EAAMoB,IAAQpB,EAAMW,aAAe,GAAAU,OAAGrB,EAAMoB,GAAE,eAAWE,KAG/DhB,EAAAC,cAACgB,EAAc,MACfjB,EAAAC,cAACiB,EAAY,KACXlB,EAAAC,cAACkB,SAGHnB,EAAAC,cAACmB,EAAa,KAAE1B,EAAMC,UAAYD,EAAM2B,UAEvC3B,EAAMW,cACPL,EAAAC,cAACqB,EAAS,CACRC,UAAU,MACVT,GAAIpB,EAAMoB,GAAK,UAAGpB,EAAMoB,GAAE,eAAWE,GAEpCtB,EAAMW,cAKjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = (props: RadioProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  const invalid = props.hasError || !!props.errorMessage?.length;\n\n  return (\n    <>\n      <label className=\"component-radio\">\n        <input\n          {...rest}\n          className=\"input\"\n          aria-invalid={invalid || false}\n          disabled={props.disabled || false}\n          type=\"radio\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!props.errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <div className=\"check-wrapper\">\n          <span className=\"check\" />\n        </div>\n\n        <span className=\"vertical-align\">{props.children || props.value}</span>\n      </label>\n      {!!props.errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {props.errorMessage}\n        </ErrorText>\n      )}\n    </>\n  );\n};\n\nexport default Radio;\n"],"names":["Radio","props","children","hasError","ref","rest","__rest","invalid","_a","errorMessage","length","React","createElement","Fragment","className","__assign","disabled","type","id","concat","undefined","value","ErrorText","marginTop"],"mappings":"uJAsBO,IAAMA,EAAQ,SAACC,SAEuCA,EAAKC,SAALD,EAAKE,SAALF,eAAnB,IAAEG,EAAiBH,EAAKG,IAAdC,EAAIC,EAAKL,EAArD,CAAA,WAAA,WAAA,eAAA,QAEAM,EAAUN,EAAME,aAAgC,QAAlBK,EAAAP,EAAMQ,oBAAY,IAAAD,OAAA,EAAAA,EAAEE,QAExD,OACEC,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAAA,QAAA,CAAOE,UAAU,mBACfH,EAAAC,cAAA,QAAAG,EAAA,CAAA,EACMV,GACJS,UAAU,QAAO,eACHP,IAAW,EACzBS,SAAUf,EAAMe,WAAY,EAC5BC,KAAK,QACLb,IAAKA,EAAG,mBAEJH,EAAMiB,IAAQjB,EAAMQ,aAAe,GAAAU,OAAGlB,EAAMiB,kBAAaE,KAG/DT,EAAAC,cAAA,MAAA,CAAKE,UAAU,iBACbH,EAAAC,cAAA,OAAA,CAAME,UAAU,WAGlBH,EAAAC,cAAA,OAAA,CAAME,UAAU,kBAAkBb,EAAMC,UAAYD,EAAMoB,UAEzDpB,EAAMQ,cACPE,EAAAC,cAACU,EAAS,CACRC,UAAU,MACVL,GAAIjB,EAAMiB,GAAK,UAAGjB,EAAMiB,GAAE,eAAWE,GAEpCnB,EAAMQ,cAKjB"}

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

@@ -3,7 +3,13 @@ type Attribute = {
     value: string;
     option: string;
 };
-export type RadioConsentProps = {
+/**
+ *
+ * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.
+ *
+ * This is always a controlled component that will only change state with the selectedValue prop
+ */
+export declare function RadioConsent(props: {
     /** because each radio has its own label this is the consent group label text */
     legend: string;
     /** array of option for radio constent group where option is the option name and value is the option value  */
@@ -14,12 +20,5 @@ export type RadioConsentProps = {
     selectedValue?: string;
     /** name of field this is what groups all the options together */
     name: string;
-};
-/**
- *
- * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.
- *
- * This is always a controlled component that will only change state with the selectedValue prop
- */
-export declare function RadioConsent(props: RadioConsentProps): React.JSX.Element;
+}): React.JSX.Element;
 export default RadioConsent;

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

@@ -1,2 +1,2 @@
-import e from"react";import{Radio as t}from"../Radio/index.js";import{StyledFieldSet as n,StyledLegend as a,OptionWrapper as l}from"./styles.js";function r(r){var o=r.legend,u=r.attributes,m=r.onChange,c=r.selectedValue,i=void 0===c?"":c,d=r.name;return e.createElement(n,null,e.createElement(a,null,o),e.createElement(l,null,u.map(function(n){return e.createElement(t,{key:n.value,checked:i===n.value,onChange:m,name:d,value:n.value},n.option)})))}export{r as RadioConsent,r as default};
+import e from"react";import{Radio as a}from"../Radio/index.js";function n(n){var t=n.legend,o=n.attributes,r=n.onChange,l=n.selectedValue,c=void 0===l?"":l,m=n.name;return e.createElement("fieldset",{className:"component-radio-consent"},e.createElement("legend",null,t),e.createElement("div",{className:"option-wrapper"},o.map(function(n){return e.createElement(a,{key:n.value,checked:c===n.value,onChange:r,name:m,value:n.value},n.option)})))}export{n as RadioConsent,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport StyledRadio from \"../Radio\";\nimport { StyledFieldSet, StyledLegend, OptionWrapper } from \"./styles\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\nexport type RadioConsentProps = {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <StyledFieldSet>\n      <StyledLegend>{legend}</StyledLegend>\n      <OptionWrapper>\n        {attributes.map((item: Attribute) => (\n          <StyledRadio\n            key={item.value}\n            checked={selectedValue === item.value}\n            onChange={onChange}\n            name={name}\n            value={item.value}\n          >\n            {item.option}\n          </StyledRadio>\n        ))}\n      </OptionWrapper>\n    </StyledFieldSet>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","legend","attributes","onChange","_a","selectedValue","name","React","StyledFieldSet","createElement","StyledLegend","OptionWrapper","map","item","StyledRadio","key","value","checked","option"],"mappings":"iJA6BM,SAAUA,EAAaC,GACnB,IAAAC,EAA2DD,EAAKC,OAAxDC,EAAmDF,EAAKE,WAA5CC,EAAuCH,EAAKG,SAAlCC,EAA6BJ,EAAKK,cAAlCA,OAAa,IAAAD,EAAG,GAAEA,EAAEE,EAASN,EAAKM,KAExE,OACEC,gBAACC,EAAc,KACbD,EAAAE,cAACC,EAAY,KAAET,GACfM,EAAAE,cAACE,EAAa,KACXT,EAAWU,IAAI,SAACC,GAAoB,OACnCN,EAAAE,cAACK,EAAW,CACVC,IAAKF,EAAKG,MACVC,QAASZ,IAAkBQ,EAAKG,MAChCb,SAAUA,EACVG,KAAMA,EACNU,MAAOH,EAAKG,OAEXH,EAAKK,OAR2B,IAc7C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport StyledRadio from \"../Radio\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n}) {\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <fieldset className=\"component-radio-consent\">\n      <legend>{legend}</legend>\n      <div className=\"option-wrapper\">\n        {attributes.map((item: Attribute) => (\n          <StyledRadio\n            key={item.value}\n            checked={selectedValue === item.value}\n            onChange={onChange}\n            name={name}\n            value={item.value}\n          >\n            {item.option}\n          </StyledRadio>\n        ))}\n      </div>\n    </fieldset>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","legend","attributes","onChange","_a","selectedValue","name","React","createElement","className","map","item","StyledRadio","key","value","checked","option"],"mappings":"+DAeM,SAAUA,EAAaC,GAYnB,IAAAC,EAA2DD,EAAKC,OAAxDC,EAAmDF,EAAKE,WAA5CC,EAAuCH,EAAKG,SAAlCC,EAA6BJ,EAAKK,cAAlCA,OAAa,IAAAD,EAAG,GAAEA,EAAEE,EAASN,EAAKM,KAExE,OACEC,EAAAC,cAAA,WAAA,CAAUC,UAAU,2BAClBF,EAAAC,cAAA,SAAA,KAASP,GACTM,EAAAC,cAAA,MAAA,CAAKC,UAAU,kBACZP,EAAWQ,IAAI,SAACC,GAAoB,OACnCJ,EAAAC,cAACI,EAAW,CACVC,IAAKF,EAAKG,MACVC,QAASV,IAAkBM,EAAKG,MAChCX,SAAUA,EACVG,KAAMA,EACNQ,MAAOH,EAAKG,OAEXH,EAAKK,OAR2B,IAc7C"}

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as t}from"../ErrorText/index.js";import{StyledSelect as o}from"./styles.js";var d=function(d){var n=d.errorMessage,s=d.hasError,l=d.required,m=d.label,c=d.hintText,b=d.hideRequiredIndicationInLabel,f=d.ref,u=r(d,["errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref"]);return i.createElement(a,{label:m,hintText:c,required:!b&&l||!1},i.createElement(o,e({},u,{ref:f,required:l,"aria-invalid":s||!!n||!1,"aria-describedby":u.id&&n?"".concat(u.id,"-error"):void 0,$hasError:s||!!n||!1})),!!n&&i.createElement(t,{marginTop:"xxs",id:u.id?"".concat(u.id,"-error"):void 0},n))};export{d as Select,d as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as t}from"../ErrorText/index.js";var o=function(o){var d=o.errorMessage,n=o.hasError,l=o.required,s=o.label,c=o.hintText,m=o.hideRequiredIndicationInLabel,b=o.ref,u=e(o,["errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref"]);return i.createElement(a,{label:s,hintText:c,required:!m&&l||!1},i.createElement("select",r({className:"component-select"},u,{ref:b,required:l,"aria-invalid":n||!!d||!1,"aria-describedby":u.id&&d?"".concat(u.id,"-error"):void 0})),!!d&&i.createElement(t,{marginTop:"xxs",id:u.id?"".concat(u.id,"-error"):void 0},d))};export{o as Select,o as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"0PA8BO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUrB,OACEU,gBAACC,EAAY,CACXP,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DO,EAAAE,cAACC,OACKL,EAAK,CACTD,IAAKA,EACLJ,SAAUA,iBACID,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMM,IAAQb,EAAe,GAAAc,OAAGP,EAAMM,GAAE,eAAWE,EAASC,UAErDf,KAAcD,IAAgB,OAExCA,GACDS,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIN,EAAMM,GAAK,GAAAC,OAAGP,EAAMM,kBAAaE,GAEpCf,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <select\n        className=\"component-select\"\n        {...props}\n        ref={ref}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","React","LabelWrapper","createElement","__assign","className","id","concat","undefined","ErrorText","marginTop"],"mappings":"+MA4BO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUrB,OACEU,gBAACC,EAAY,CACXP,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DO,EAAAE,cAAA,SAAAC,EAAA,CACEC,UAAU,oBACNN,EAAK,CACTD,IAAKA,EACLJ,SAAUA,EAAQ,eACJD,KAAcD,IAAgB,qBAExCO,EAAMO,IAAQd,EAAe,GAAAe,OAAGR,EAAMO,GAAE,eAAWE,OAGtDhB,GACDS,gBAACQ,EAAS,CACRC,UAAU,MACVJ,GAAIP,EAAMO,GAAK,GAAAC,OAAGR,EAAMO,kBAAaE,GAEpChB,GAKX"}

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

@@ -1,15 +1,14 @@
 import React, { type ReactNode } from "react";
-export type StepProps = {
-    /** current step number */
-    current: number;
-    /** list of step  */
-    steps: string[];
-    children?: ReactNode;
-};
 /**
  *
  * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.
  * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.
  */
-export declare function Step({ steps, current, children }: StepProps): React.JSX.Element;
+export declare function Step({ steps, current, children, }: {
+    /** current step number */
+    current: number;
+    /** list of step  */
+    steps: string[];
+    children?: ReactNode;
+}): React.JSX.Element;
 export default Step;

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

@@ -1,2 +1,2 @@
-import e from"react";import{StepWrapper as t,StepList as r,StepItem as n,StepBar as a,StepTick as l}from"./styles.js";function c(c){var o=c.steps,i=void 0===o?[]:o,m=c.current,s=void 0===m?1:m,u=c.children,y=Array.isArray(i)?Object.keys(i).length:0;return e.createElement(t,null,e.createElement(r,{$total:y},Array.isArray(i)&&i.map(function(t,r){var c="step".concat(r);return e.createElement(n,{key:c,$active:r+1===s,$done:r+1<s},e.createElement(a,null,r+1<s&&e.createElement(l,null)),t)})),u)}export{c as Step,c as default};
+import e from"react";function t(t){var a=t.steps,s=void 0===a?[]:a,r=t.current,c=void 0===r?1:r,n=t.children,i=Array.isArray(s)?Object.keys(s).length:0,l="".concat(i>0?100/i:100,"%");return e.createElement("div",{className:"component-step"},e.createElement("ul",{className:"step-list"},Array.isArray(s)&&s.map(function(t,a){return e.createElement("li",{className:"step-item",key:"step".concat(a),"data-is-active":a+1===c,"data-is-done":a+1<c,style:{"--_step-item-width":l}},e.createElement("span",{className:"step-bar"},a+1<c&&e.createElement("span",{className:"step-tick"})),t)})),n)}export{t as Step,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n\n  return (\n    <StepWrapper>\n      <StepList $total={totalSteps}>\n        {Array.isArray(steps) &&\n          steps.map((step, i) => {\n            const key = `step${i}`;\n            return (\n              <StepItem\n                key={key}\n                $active={i + 1 === current}\n                $done={i + 1 < current}\n              >\n                <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n                {step}\n              </StepItem>\n            );\n          })}\n      </StepList>\n      {children}\n    </StepWrapper>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","totalSteps","Array","isArray","Object","keys","length","React","StepWrapper","createElement","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"sHAmBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KAAIE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAqBC,MAAMC,QAAQN,GACrCO,OAAOC,KAAKR,GAAOS,OACnB,EAEJ,OACEC,gBAACC,EAAW,KACVD,EAAAE,cAACC,UAAiBT,GACfC,MAAMC,QAAQN,IACbA,EAAMc,IAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAAC,OAAOF,GACnB,OACEN,EAAAE,cAACO,GACCF,IAAKA,EAAGG,QACCJ,EAAI,IAAMd,EAAOmB,MACnBL,EAAI,EAAId,GAEfQ,EAAAE,cAACU,EAAO,KAAEN,EAAI,EAAId,GAAWQ,EAAAE,cAACW,EAAQ,OACrCR,EAGP,IAEHZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({\n  steps = [],\n  current = 1,\n  children,\n}: {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n}) {\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n  const itemWidth = `${totalSteps > 0 ? 100 / totalSteps : 100}%`;\n\n  return (\n    <div className=\"component-step\">\n      <ul className=\"step-list\">\n        {Array.isArray(steps) &&\n          steps.map((step, i) => (\n            <li\n              className=\"step-item\"\n              key={`step${i}`}\n              data-is-active={i + 1 === current}\n              data-is-done={i + 1 < current}\n              style={{ \"--_step-item-width\": itemWidth } as React.CSSProperties}\n            >\n              <span className=\"step-bar\">\n                {i + 1 < current && <span className=\"step-tick\" />}\n              </span>\n              {step}\n            </li>\n          ))}\n      </ul>\n      {children}\n    </div>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","totalSteps","Array","isArray","Object","keys","length","itemWidth","concat","React","createElement","className","map","step","i","key","style"],"mappings":"qBAOM,SAAUA,EAAKC,GACnB,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KACRE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EACXE,EAAQL,EAAAK,SAQFC,EAAqBC,MAAMC,QAAQN,GACrCO,OAAOC,KAAKR,GAAOS,OACnB,EACEC,EAAY,GAAAC,OAAGP,EAAa,EAAI,IAAMA,EAAa,SAEzD,OACEQ,EAAAC,cAAA,MAAA,CAAKC,UAAU,kBACbF,EAAAC,cAAA,KAAA,CAAIC,UAAU,aACXT,MAAMC,QAAQN,IACbA,EAAMe,IAAI,SAACC,EAAMC,GAAM,OACrBL,sBACEE,UAAU,YACVI,IAAK,OAAAP,OAAOM,GAAG,iBACCA,EAAI,IAAMf,EAAO,eACnBe,EAAI,EAAIf,EACtBiB,MAAO,CAAE,qBAAsBT,IAE/BE,EAAAC,cAAA,OAAA,CAAMC,UAAU,YACbG,EAAI,EAAIf,GAAWU,EAAAC,cAAA,OAAA,CAAMC,UAAU,eAErCE,EAXkB,IAe1Bb,EAGP"}