@cruk/cruk-react-components 5.0.6 → 5.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Carousel/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nexport const CarouselWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n`;\n\nexport const CarouselScrollArea = styled.ul<{\n  $smoothScrolling: boolean;\n}>`\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ${({ $smoothScrolling }) =>\n    $smoothScrolling ? \"smooth\" : \"auto\"};\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n`;\n\nexport const CarouselCard = styled.li<{\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ${({ $onlyChild, $fullWidthChild }) =>\n    $onlyChild || $fullWidthChild ? \"100%\" : \"80%\"};\n`;\n\nexport const CarouselCardInner = styled.div<{\n  $isSelected: boolean;\n  $shrinkUnselectedPages: boolean;\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  transition: transform 0.2s linear;\n  transform: ${({\n    $isSelected,\n    $shrinkUnselectedPages,\n    $onlyChild,\n    $fullWidthChild,\n  }) =>\n    $onlyChild || ($isSelected && $shrinkUnselectedPages) || $fullWidthChild\n      ? \"scale(1)\"\n      : \"scale(0.9)\"};\n`;\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nexport const VerticalAlign = styled.span`\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n`;\n\nexport const CarouselButton = styled.button<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ${({ disabled, theme }) =>\n    disabled\n      ? theme.colors.disabled\n      : theme.name === \"su2c\"\n        ? theme.colors.textDark\n        : theme.colors.primary};\n  font-size: ${({ theme }) => theme.fontSizes.xxxl};\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ${({ disabled }) => (disabled ? \"scale(0.8)\" : \"scale(1)\")};\n  }\n`;\n\nexport const DotContainer = styled.div<{ $count: number; theme: ThemeType }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ${({ $count }) => ($count > 6 ? \"none\" : \"flex\")};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: ${({ $count }) => ($count > 10 ? \"none\" : \"flex\")};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: ${({ $count }) => ($count > 20 ? \"none\" : \"flex\")};\n  }\n`;\n\nexport const Dot = styled.button<{ $selected: boolean; theme: ThemeType }>`\n  border: none;\n  outline-offset: ${({ theme }) => theme.spacing.xxs};\n  padding: 0;\n  margin: ${({ theme }) => `auto ${theme.spacing.xxs}`};\n  width: ${({ theme }) => theme.fontSizes.l};\n  height: ${({ theme }) => theme.fontSizes.l};\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ${({ theme }) =>\n    `solid 1px ${\n      theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n    }`};\n  background-color: ${({ theme, $selected }) =>\n    $selected\n      ? `${\n          theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n        }`\n      : theme.colors.backgroundLight};\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.span`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["CarouselWrapper","styled","div","templateObject_1","__makeTemplateObject","CarouselScrollArea","ul","templateObject_2","_a","$smoothScrolling","CarouselCard","li","templateObject_3","$onlyChild","$fullWidthChild","CarouselCardInner","templateObject_4","$isSelected","$shrinkUnselectedPages","ButtonWrapper","templateObject_5","VerticalAlign","span","templateObject_6","CarouselButton","button","templateObject_7","disabled","theme","colors","name","textDark","primary","fontSizes","xxxl","DotContainer","$count","breakpoint","tablet","desktop","Dot","templateObject_9","spacing","xxs","l","concat","$selected","backgroundLight","ScreenReaderOnly","templateObject_10"],"mappings":"iHAIa,wBAAAA,EAAkBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oEAAA,CAAA,uEAM5BC,EAAqBJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,wGAAA,iLAAA,CAEzC,wGAKsC,oLADnB,SAACI,GAClB,OADoCA,EAAAC,iBACjB,SAAW,MAA9B,IAUSC,EAAeT,EAAOU,GAAEC,IAAAA,EAAAR,EAAA,CAAA,sEAAA,OAAA,CAGnC,sEAIgD,UADvC,SAACI,OAAEK,EAAUL,EAAAK,WAAEC,EAAeN,EAAAM,gBACrC,OAAAD,GAAcC,EAAkB,OAAS,KAAzC,IAGSC,EAAoBd,EAAOC,IAAGc,IAAAA,EAAAZ,EAAA,CAAA,wDAAA,OAAA,CAKzC,wDAUkB,UARL,SAACI,OACZS,EAAWT,EAAAS,YACXC,EAAsBV,EAAAU,uBACtBL,EAAUL,EAAAK,WACVC,EAAeN,EAAAM,gBAEf,OAAAD,GAAeI,GAAeC,GAA2BJ,EACrD,WACA,YAFJ,IAKSK,EAAgBlB,EAAOC,IAAGkB,IAAAA,EAAAhB,EAAA,CAAA,oDAAA,CAAA,uDAK1BiB,EAAgBpB,EAAOqB,KAAIC,IAAAA,EAAAnB,EAAA,CAAA,oFAAA,CAAA,uFAO3BoB,EAAiBvB,EAAOwB,OAAMC,IAAAA,EAAAtB,EAAA,CAAA,sNAAA,mBAAA,sOAAA,YAAA,CAGzC,sNAW4B,mBACoB,sOAYuB,eAlB9D,SAACI,OAAEmB,EAAQnB,EAAAmB,SAAEC,EAAKpB,EAAAoB,MACzB,OAAAD,EACIC,EAAMC,OAAOF,SACE,SAAfC,EAAME,KACJF,EAAMC,OAAOE,SACbH,EAAMC,OAAOG,OAJnB,IAKW,SAACxB,GAAc,OAAPA,EAAAoB,MAAaK,UAAUC,IAAhB,IAYb,SAAC1B,GAAiB,OAAPA,EAAAmB,SAAmB,aAAe,UAA3B,IAItBQ,EAAelC,EAAOC,yNAAyC,sFAIjB,6BAEE,qBACC,kCAGA,qBACA,eAPjD,SAACM,GAAe,OAAPA,EAAA4B,OAAiB,EAAI,OAAS,MAAvB,IAEN,SAAC5B,GAAc,OAAPA,EAAAoB,MAAaS,WAAWC,MAAjB,IACvB,SAAC9B,GAAe,OAAPA,EAAA4B,OAAiB,GAAK,OAAS,MAAxB,IAGR,SAAC5B,GAAc,OAAPA,EAAAoB,MAAaS,WAAWE,OAAjB,IACvB,SAAC/B,GAAe,OAAPA,EAAA4B,OAAiB,GAAK,OAAS,MAAxB,IAIlBI,EAAMvC,EAAOwB,OAAgDgB,IAAAA,EAAArC,EAAA,CAAA,wCAAA,+BAAA,eAAA,gBAAA,4IAAA,0BAAA,6KAAA,CAAA,wCAEtB,+BAEE,eACX,gBACC,4IAMtC,0BAM8B,gLAhBhB,SAACI,GAAc,OAAPA,EAAAoB,MAAac,QAAQC,GAAd,IAEvB,SAACnC,GAAE,IAAAoB,EAAKpB,EAAAoB,MAAO,MAAA,eAAQA,EAAMc,QAAQC,IAAtB,IAChB,SAACnC,GAAc,OAAPA,EAAAoB,MAAaK,UAAUW,CAAhB,IACd,SAACpC,GAAc,OAAPA,EAAAoB,MAAaK,UAAUW,CAAhB,IAGf,SAACpC,GAAE,IAAAoB,EAAKpB,EAAAoB,MAChB,MAAA,aAAAiB,OACiB,SAAfjB,EAAME,KAAkBF,EAAMC,OAAOE,SAAWH,EAAMC,OAAOG,QAD/D,IAGkB,SAACxB,OAAEoB,EAAKpB,EAAAoB,MAC1B,OADqCpB,EAAAsC,UAEjC,UACiB,SAAflB,EAAME,KAAkBF,EAAMC,OAAOE,SAAWH,EAAMC,OAAOG,SAE/DJ,EAAMC,OAAOkB,eAJjB,IAgBSC,EAAmB/C,EAAOqB,KAAI2B,IAAAA,EAAA7C,EAAA,CAAA,4NAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Carousel/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nexport const CarouselWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n`;\n\nexport const CarouselScrollArea = styled.ul<{\n  $smoothScrolling: boolean;\n}>`\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ${({ $smoothScrolling }) =>\n    $smoothScrolling ? \"smooth\" : \"auto\"};\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n`;\n\nexport const CarouselCard = styled.li<{\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ${({ $onlyChild, $fullWidthChild }) =>\n    $onlyChild || $fullWidthChild ? \"100%\" : \"80%\"};\n`;\n\nexport const CarouselCardInner = styled.div<{\n  $isSelected: boolean;\n  $shrinkUnselectedPages: boolean;\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  transition: transform 0.2s linear;\n  transform: ${({\n    $isSelected,\n    $shrinkUnselectedPages,\n    $onlyChild,\n    $fullWidthChild,\n  }) =>\n    $onlyChild || ($isSelected && $shrinkUnselectedPages) || $fullWidthChild\n      ? \"scale(1)\"\n      : \"scale(0.9)\"};\n`;\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nexport const VerticalAlign = styled.span`\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n`;\n\nexport const CarouselButton = styled.button<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ${({ disabled, theme }) =>\n    disabled\n      ? theme.colors.disabled\n      : theme.name === \"su2c\"\n        ? theme.colors.textDark\n        : theme.colors.primary};\n  font-size: ${({ theme }) => theme.fontSizes.xxxl};\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ${({ disabled }) => (disabled ? \"scale(0.8)\" : \"scale(1)\")};\n  }\n`;\n\nexport const DotContainer = styled.div<{ $count: number; theme: ThemeType }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ${({ $count }) => ($count > 6 ? \"none\" : \"flex\")};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: ${({ $count }) => ($count > 10 ? \"none\" : \"flex\")};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: ${({ $count }) => ($count > 20 ? \"none\" : \"flex\")};\n  }\n`;\n\nexport const Dot = styled.button<{ $selected: boolean; theme: ThemeType }>`\n  border: none;\n  outline-offset: ${({ theme }) => theme.spacing.xxs};\n  padding: 0;\n  margin: ${({ theme }) => `auto ${theme.spacing.xxs}`};\n  width: ${({ theme }) => theme.fontSizes.l};\n  height: ${({ theme }) => theme.fontSizes.l};\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ${({ theme }) =>\n    `solid 1px ${\n      theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n    }`};\n  background-color: ${({ theme, $selected }) =>\n    $selected\n      ? `${\n          theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n        }`\n      : theme.colors.backgroundLight};\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.span`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["CarouselWrapper","styled","div","CarouselScrollArea","ul","$smoothScrolling","CarouselCard","li","$onlyChild","$fullWidthChild","CarouselCardInner","$isSelected","$shrinkUnselectedPages","ButtonWrapper","VerticalAlign","span","CarouselButton","button","disabled","theme","colors","name","textDark","primary","fontSizes","xxxl","DotContainer","$count","breakpoint","tablet","desktop","Dot","spacing","xxs","l","$selected","backgroundLight","ScreenReaderOnly"],"mappings":"iCAIa,MAAAA,EAAkBC,EAAOC,GAAG;;;;EAM5BC,EAAqBF,EAAOG,EAEvC;;;;qBAImB,EAAGC,sBACpBA,EAAmB,SAAW;;;;;;;;EAUrBC,EAAeL,EAAOM,EAGjC;;;WAGS,EAAGC,aAAYC,qBACtBD,GAAcC,EAAkB,OAAS;EAGhCC,EAAoBT,EAAOC,GAKtC;;eAEa,EACXS,cACAC,yBACAJ,aACAC,qBAEAD,GAAeG,GAAeC,GAA2BH,EACrD,WACA;EAGKI,EAAgBZ,EAAOC,GAAG;;;EAK1BY,EAAgBb,EAAOc,IAAI;;;;;EAO3BC,EAAiBf,EAAOgB,MAGnC;;;;;;WAMS,EAAGC,WAAUC,WACpBD,EACIC,EAAMC,OAAOF,SACE,SAAfC,EAAME,KACJF,EAAMC,OAAOE,SACbH,EAAMC,OAAOG;eACR,EAAGJ,WAAYA,EAAMK,UAAUC;;;;;;;;;;;;iBAY7B,EAAGP,cAAgBA,EAAW,aAAe;;EAIjDQ,EAAezB,EAAOC,GAAyC;;;;aAI/D,EAAGyB,YAAcA,EAAS,EAAI,OAAS;;uBAE7B,EAAGR,WAAYA,EAAMS,WAAWC;eACxC,EAAGF,YAAcA,EAAS,GAAK,OAAS;;;uBAGhC,EAAGR,WAAYA,EAAMS,WAAWE;eACxC,EAAGH,YAAcA,EAAS,GAAK,OAAS;;EAI1CI,EAAM9B,EAAOgB,MAAgD;;oBAEtD,EAAGE,WAAYA,EAAMa,QAAQC;;YAErC,EAAGd,WAAY,QAAQA,EAAMa,QAAQC;WACtC,EAAGd,WAAYA,EAAMK,UAAUU;YAC9B,EAAGf,WAAYA,EAAMK,UAAUU;;;YAG/B,EAAGf,WACX,aACiB,SAAfA,EAAME,KAAkBF,EAAMC,OAAOE,SAAWH,EAAMC,OAAOG;sBAE7C,EAAGJ,QAAOgB,eAC5BA,EACI,GACiB,SAAfhB,EAAME,KAAkBF,EAAMC,OAAOE,SAAWH,EAAMC,OAAOG,UAE/DJ,EAAMC,OAAOgB;;;;;;;;;EAYRC,EAAmBpC,EAAOc,IAAI;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import CheckBox, { CheckBoxProps } from ".";
+import { type StoryObj } from "@storybook/react";
+import CheckBox, { type CheckBoxProps } from ".";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o,{forwardRef as t}from"react";import{useTheme as s,ThemeProvider as i}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as d}from"../ErrorText/index.js";import{IconFa as m}from"../IconFa/index.js";import{StyledLabel as c,StyledInput as n,SelectedBorder as f,CheckWrapper as u,Check as h}from"./styles.js";var p=t((function(t,p){var E=s(),b=e(e({},a),E),x=t.children,j=t.hasError,k=t.errorMessage,v=r(t,["children","hasError","errorMessage"]);return o.createElement(i,{theme:b},o.createElement(c,{$hasError:j||!!k||!1,$checked:t.checked||t.defaultChecked||!1,$disabled:t.disabled||!1},o.createElement(n,e({},v,{disabled:t.disabled||!1,type:"checkbox",ref:p,"aria-describedby":t.id&&k?"".concat(t.id,"-error"):void 0})),o.createElement(f,null),x||t.value,b.utilities.useDefaultFromControls?null:o.createElement(u,null,o.createElement(h,null,o.createElement(m,{faIcon:l,color:"check",size:"1.25em"})))),!!k&&o.createElement(d,{marginTop:"xxs",id:t.id?"".concat(t.id,"-error"):void 0},k))}));export{p as Checkbox,p as default};
+import e,{forwardRef as r}from"react";import{useTheme as o,ThemeProvider as t}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as m,StyledInput as a,SelectedBorder as c,CheckWrapper as n,Check as f}from"./styles.js";const u=r(((r,u)=>{const p=o(),h={...s,...p},{children:E,hasError:x,errorMessage:b,...k}=r;return e.createElement(t,{theme:h},e.createElement(m,{$hasError:x||!!b||!1,$checked:r.checked||r.defaultChecked||!1,$disabled:r.disabled||!1},e.createElement(a,{...k,disabled:r.disabled||!1,type:"checkbox",ref:u,"aria-describedby":r.id&&b?`${r.id}-error`:void 0}),e.createElement(c,null),E||r.value,h.utilities.useDefaultFromControls?null:e.createElement(n,null,e.createElement(f,null,e.createElement(d,{faIcon:l,color:"check",size:"1.25em"})))),!!b&&e.createElement(i,{marginTop:"xxs",id:r.id?`${r.id}-error`:void 0},b))}));u.displayName="Checkbox";export{u as Checkbox,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = forwardRef(\n  (props: CheckBoxProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const { children, hasError, errorMessage, ...rest } = props;\n\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={hasError || !!errorMessage || false}\n          $checked={props.checked || props.defaultChecked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"checkbox\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n            }\n          />\n          <SelectedBorder />\n          {children || props.value}\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check>\n                <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n              </Check>\n            </CheckWrapper>\n          )}\n        </StyledLabel>\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"ghBAoCaA,EAAWC,GACtB,SAACC,EAAsBC,GACrB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGGK,EAA8CP,EAAKO,SAAzCC,EAAoCR,EAA5BQ,SAAEC,EAA0BT,eAATU,IAASV,EAAhD,CAA6C,WAAA,WAAA,iBAEnD,OACEW,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAACC,cAAAE,EACY,CAAAC,UAAAP,KAAcC,IAAgB,EAAKO,SACpChB,EAAMiB,SAAWjB,EAAMkB,iBAAkB,YACxClB,EAAMmB,WAAY,GAE7BR,EAAAC,cAACQ,EACKf,EAAA,CAAA,EAAAK,GACJS,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,WACLpB,IAAKA,EAAG,mBAEJD,EAAMsB,IAAQb,EAAe,GAAGc,OAAAvB,EAAMsB,GAAE,eAAWE,KAGzDb,EAAAC,cAACa,EAAiB,MACjBlB,GAAYP,EAAM0B,MAClBtB,EAAMuB,UAAUC,uBAAyB,KACxCjB,gBAACkB,EAAY,KACXlB,EAAAC,cAACkB,EAAK,KACJnB,EAAAC,cAACmB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD1B,GACDE,gBAACyB,EAAS,CACRC,UAAU,MACVf,GAAItB,EAAMsB,GAAK,GAAGC,OAAAvB,EAAMsB,kBAAaE,GAEpCf,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = forwardRef(\n  (props: CheckBoxProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const { children, hasError, errorMessage, ...rest } = props;\n\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={hasError || !!errorMessage || false}\n          $checked={props.checked || props.defaultChecked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"checkbox\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n            }\n          />\n          <SelectedBorder />\n          {children || props.value}\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check>\n                <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n              </Check>\n            </CheckWrapper>\n          )}\n        </StyledLabel>\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop","displayName"],"mappings":"4bAoCa,MAAAA,EAAWC,GACtB,CAACC,EAAsBC,KACrB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EAEtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAACC,cAAAE,EACY,CAAAC,UAAAP,KAAcC,IAAgB,EAAKO,SACpCf,EAAMgB,SAAWhB,EAAMiB,iBAAkB,YACxCjB,EAAMkB,WAAY,GAE7BR,EAAAC,cAACQ,EACK,IAAAV,EACJS,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLnB,IAAKA,EAAG,mBAEJD,EAAMqB,IAAQb,EAAe,GAAGR,EAAMqB,gBAAaC,IAGzDZ,EAAAC,cAACY,EAAiB,MACjBjB,GAAYN,EAAMwB,MAClBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjDzB,GACDE,gBAACwB,EAAS,CACRC,UAAU,MACVd,GAAIrB,EAAMqB,GAAK,GAAGrB,EAAMqB,gBAAaC,GAEpCd,GAGS,IAKtBV,EAASsC,YAAc"}

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

@@ -1,2 +1,106 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as t}from"styled-components";var i,e,r,s,a,l,c,d,p="1.5rem",h=o.div(i||(i=n(["\n  display: inline-block;\n  height: ",";\n  width: ",";\n  position: absolute;\n  top: calc(50% - ("," / 2));\n  left: ",";\n"],["\n  display: inline-block;\n  height: ",";\n  width: ",";\n  position: absolute;\n  top: calc(50% - ("," / 2));\n  left: ",";\n"])),p,p,p,(function(n){return n.theme.spacing.xs})),u=o.span(e||(e=n(["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  height: ",";\n  width: ",";\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n"],["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  height: ",";\n  width: ",";\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n"])),(function(n){return n.theme.colors.selectionBorder}),p,p),b=o.label(s||(s=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ",";\n  font-size: ",";\n  font-family: ",";\n\n  background-color: ",";\n  position: relative;\n\n  cursor: ",";\n  display: block;\n\n  color: ",";\n  padding: ",";\n  &:focus ~ "," "," {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ",";\n    }\n  }\n\n  ","\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ",";\n  font-size: ",";\n  font-family: ",";\n\n  background-color: ",";\n  position: relative;\n\n  cursor: ",";\n  display: block;\n\n  color: ",";\n  padding: ",";\n  &:focus ~ "," "," {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ",";\n    }\n  }\n\n  ","\n"])),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontSizeBase}),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.$disabled?"not-allowed":"pointer"}),(function(n){var o=n.theme;return n.$disabled?o.colors.disabled:o.colors.textDark}),(function(n){var o=n.theme;return"calc( (".concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xl)}),h,u,(function(n){var o=n.theme;return n.$disabled&&o.colors.disabled}),(function(o){var i=o.theme,e=o.$disabled,s=o.$checked,a=o.$hasError;return i.utilities.useDefaultFromControls?null:t(r||(r=n(["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid ","\n              ",";\n          }\n\n          &:hover "," "," {\n            border: solid ","\n              ",";\n          }\n        "],["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid ","\n              ",";\n          }\n\n          &:hover "," "," {\n            border: solid ","\n              ",";\n          }\n        "])),h,u,"2px",e?i.colors.disabled:a?i.colors.danger:s?i.colors.check:i.colors.inputBorder,h,u,"2px",e?i.colors.disabled:i.colours)})),f=o.div(a||(a=n(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"]))),g=o.input(d||(d=n(["\n  margin-right: 5px !important;\n\n  ","\n"],["\n  margin-right: 5px !important;\n\n  ","\n"])),(function(o){var i=o.theme;return i.utilities.useDefaultFromControls?t(l||(l=n(["\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ",";\n        "],["\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ",";\n        "])),i.spacing.s):t(c||(c=n(["\n          /* This hides the original input */\n          position: absolute;\n          left: ",";\n          opacity: 0;\n\n          &:focus ~ "," {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ",";\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ "," svg path {\n            transform: rotateY(0deg);\n          }\n        "],["\n          /* This hides the original input */\n          position: absolute;\n          left: ",";\n          opacity: 0;\n\n          &:focus ~ "," {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ",";\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ "," svg path {\n            transform: rotateY(0deg);\n          }\n        "])),i.spacing.xxs,f,i.colors.inputBorder,h)}));export{u as Check,h as CheckWrapper,f as SelectedBorder,g as StyledInput,b as StyledLabel};
+import o,{css as e}from"styled-components";const t="1.5rem",i=o.div`
+  display: inline-block;
+  height: ${t};
+  width: ${t};
+  position: absolute;
+  top: calc(50% - (${t} / 2));
+  left: ${({theme:{spacing:{xs:o}}})=>o};
+`,r=o.span`
+  display: block;
+  position: relative;
+  border: 2px solid ${({theme:o})=>o.colors.selectionBorder};
+  height: ${t};
+  width: ${t};
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  transition: border 0.25s ease;
+  overflow: hidden;
+
+  svg {
+    path {
+      transition: transform 0.25s ease;
+      transform: rotateY(90deg);
+      transform-origin: center;
+    }
+  }
+`,s=o.label`
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+  line-height: ${({theme:o})=>o.typography.lineHeight};
+  font-size: ${({theme:o})=>o.typography.fontSizeBase};
+  font-family: ${({theme:o})=>o.typography.fontFamilyBase};
+
+  background-color: ${({theme:o})=>o.colors.backgroundLight};
+  position: relative;
+
+  cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
+  display: block;
+
+  color: ${({theme:o,$disabled:e})=>e?o.colors.disabled:o.colors.textDark};
+  padding: ${({theme:o})=>`calc( (3em - ( ${o.utilities.inputBorderWidth} * 2) - ${o.typography.lineHeight} ) / 2) ${o.spacing.m} calc( (3em - ( ${o.utilities.inputBorderWidth} * 2) - ${o.typography.lineHeight} ) / 2) ${o.spacing.xl}`};
+  &:focus ~ ${i} ${r} {
+    outline: 2px solid #7aacfe; /* for non-webkit browsers */
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  svg {
+    path {
+      fill: ${({theme:o,$disabled:e})=>e&&o.colors.disabled};
+    }
+  }
+
+  ${({theme:o,$disabled:t,$checked:s,$hasError:l})=>o.utilities.useDefaultFromControls?null:e`
+          min-height: 2rem;
+
+          ${i} ${r} {
+            border: solid ${"2px"}
+              ${t?o.colors.disabled:l?o.colors.danger:s?o.colors.check:o.colors.inputBorder};
+          }
+
+          &:hover ${i} ${r} {
+            border: solid ${"2px"}
+              ${t?o.colors.disabled:o.colours};
+          }
+        `}
+`,l=o.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`,n=o.input`
+  margin-right: 5px !important;
+
+  ${({theme:o})=>o.utilities.useDefaultFromControls?e`
+          position: absolute;
+          display: inline-block;
+          transform: translate(-50%, -50%);
+          top: 50%;
+          margin: 0;
+          padding: 0;
+          left: ${o.spacing.s};
+        `:e`
+          /* This hides the original input */
+          position: absolute;
+          left: ${o.spacing.xxs};
+          opacity: 0;
+
+          &:focus ~ ${l} {
+            outline: none !important;
+            box-shadow: inset 0 0 0 2px ${o.colors.inputBorder};
+            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;
+          }
+
+          &:checked ~ ${i} svg path {
+            transform: rotateY(0deg);
+          }
+        `}
+`;export{r as Check,i as CheckWrapper,l as SelectedBorder,n as StyledInput,s as StyledLabel};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $checked: boolean;\n  $disabled: boolean;\n  $hasError: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, $disabled }) => $disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, $disabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<{\n  theme: ThemeType;\n}>`\n  margin-right: 5px !important;\n\n  ${({ theme }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          /* This hides the original input */\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","colours","SelectedBorder","templateObject_5","StyledInput","input","templateObject_8","templateObject_6","s","templateObject_7","xxs"],"mappings":"2HAGA,oBAAMA,EAAiB,SAIVC,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,eAAA,gDAAA,oBAAA,OAAA,CAEpC,yCAEwB,eACD,gDAEU,oBAKzB,SAREL,EACDA,EAEUA,GACX,SAACM,GAIH,OAFWA,EAAAC,MAAAC,QAAAC,EAEX,IAGKC,EAAQR,EAAOS,KAAIC,IAAAA,EAAAP,EAAA,CAAA,mEAAA,gBAAA,eAAA,8QAAA,CAE9B,mEAG+D,gBACvC,eACD,iRAFH,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOC,eAAb,GACzBd,EACDA,GAkBEe,EAAcb,EAAOc,MAKhCC,IAAAA,EAAAZ,EAAA,CAAA,iHAAA,mBAAA,qBAAA,4BAAA,yCAAA,oCAAA,iBAAA,kBAAA,IAAA,+JAAA,sBAAA,MAAA,CAAA,iHAOyD,mBACA,qBACI,4BAEE,yCAGK,oCAIT,iBAEyM,kBAC5O,IAAS,+JAOuC,sBAyBjE,SA9CQ,SAACC,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,UAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAC,MAAaW,WAAWE,YAAjB,IACb,SAACd,GAAc,OAAPA,EAAAC,MAAaW,WAAWG,cAAjB,IAEV,SAACf,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,IAGzB,SAAChB,GAAkB,OAAPA,EAAAiB,UAAoB,cAAgB,SAA7B,IAGpB,SAACjB,OAAEC,EAAKD,EAAAC,MACf,OAD0BD,EAAAiB,UACdhB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOY,QAAjD,IACS,SAACnB,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBApEkB,MAoEK,SAAAmB,OAAQnB,EAAMoB,UAAUC,iBAAgB,YAAAF,OAAWnB,EAAMW,WAAWC,8BAAqBZ,EAAMC,QAAQqB,EAAY,YAAAH,OApExH,sBAoE6InB,EAAMoB,UAAUC,oCAA2BrB,EAAMW,WAAWC,WAAqB,YAAAO,OAAAnB,EAAMC,QAAQsB,GAA9P,GACU7B,EAAgBS,GAOhB,SAACJ,OAAEC,EAAKD,EAAAC,MAAkB,OAAPD,EAAAiB,WAAoBhB,EAAMM,OAAOW,QAA1B,IAIpC,SAAClB,OAAEC,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UAAEQ,EAAQzB,EAAAyB,SAAEC,EAAS1B,EAAA0B,UACxC,OAAAzB,EAAMoB,UAAUM,uBACZ,KACAC,EAAGC,IAAAA,EAAA9B,EAAA,CAAA,8CAAA,IAAA,iCAAA,mBAAA,uCAAA,IAAA,iCAAA,mBAAA,4BAAA,CAAA,8CAGa,IAAS,iCACW,mBAOE,uCAGd,IAAS,iCACG,mBACqB,8BAbrDJ,EAAgBS,EArFH,MAuFTa,EACEhB,EAAMM,OAAOW,SACbQ,EACEzB,EAAMM,OAAOuB,OACbL,EACExB,EAAMM,OAAOwB,MACb9B,EAAMM,OAAOyB,YAGfrC,EAAgBS,EAhGX,MAkGTa,EAAYhB,EAAMM,OAAOW,SAAWjB,EAAMgC,QAlBtD,IAuBSC,EAAiBtC,EAAOC,IAAGsC,IAAAA,EAAApC,EAAA,CAAA,qFAAA,CAAA,wFAS3BqC,EAAcxC,EAAOyC,MAAKC,IAAAA,EAAAvC,EAAA,CAAA,0CAAA,MAAA,CAErC,0CA6BO,SA1BL,SAACC,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAAAA,EAAMoB,UAAUM,uBACZC,EAAGW,IAAAA,EAAAxC,EAAA,CAAA,qMAAA,eAAA,CAAA,qMAOsB,iBAAfE,EAAMC,QAAQsC,GAExBZ,EAAGa,IAAAA,EAAA1C,EAAA,CAAA,mGAAA,mDAAA,sFAAA,8GAAA,6EAAA,CAAA,mGAGwB,mDAGC,sFAE8B,8GAI9B,+EATlBE,EAAMC,QAAQwC,IAGVR,EAEoBjC,EAAMM,OAAOyB,YAI/BrC,EAtBpB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $checked: boolean;\n  $disabled: boolean;\n  $hasError: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, $disabled }) => $disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, $disabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<{\n  theme: ThemeType;\n}>`\n  margin-right: 5px !important;\n\n  ${({ theme }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          /* This hides the original input */\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_SIZE","CheckWrapper","styled","div","theme","spacing","xs","Check","span","colors","selectionBorder","StyledLabel","label","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","utilities","inputBorderWidth","m","xl","$checked","$hasError","useDefaultFromControls","css","danger","check","inputBorder","colours","SelectedBorder","StyledInput","input","s","xxs"],"mappings":"2CAGA,MAAMA,EAAiB,SAIVC,EAAeC,EAAOC,GAEjC;;YAEUH;WACDA;;qBAEUA;UACX,EACNI,OACEC,SAAWC,UAETA;EAGKC,EAAQL,EAAOM,IAE1B;;;sBAGoB,EAAGJ,WAAYA,EAAMK,OAAOC;YACtCV;WACDA;;;;;;;;;;;;;;;;EAkBEW,EAAcT,EAAOU,KAKhC;;;;;;;iBAOe,EAAGR,WAAYA,EAAMS,WAAWC;eAClC,EAAGV,WAAYA,EAAMS,WAAWE;iBAC9B,EAAGX,WAAYA,EAAMS,WAAWG;;sBAE3B,EAAGZ,WAAYA,EAAMK,OAAOQ;;;YAGtC,EAAGC,eAAiBA,EAAY,cAAgB;;;WAGjD,EAAGd,QAAOc,eACjBA,EAAYd,EAAMK,OAAOU,SAAWf,EAAMK,OAAOW;aACxC,EAAGhB,WACZ,kBAA+BA,EAAMiB,UAAUC,2BAA2BlB,EAAMS,WAAWC,qBAAqBV,EAAMC,QAAQkB,oBAAiCnB,EAAMiB,UAAUC,2BAA2BlB,EAAMS,WAAWC,qBAAqBV,EAAMC,QAAQmB;cACpPvB,KAAgBM;;;;;;;cAOhB,EAAGH,QAAOc,eAAgBA,GAAad,EAAMK,OAAOU;;;;IAI9D,EAAGf,QAAOc,YAAWO,WAAUC,eAC/BtB,EAAMiB,UAAUM,uBACZ,KACAC,CAAG;;;YAGC3B,KAAgBM;4BArFH;gBAuFTW,EACEd,EAAMK,OAAOU,SACbO,EACEtB,EAAMK,OAAOoB,OACbJ,EACErB,EAAMK,OAAOqB,MACb1B,EAAMK,OAAOsB;;;oBAGf9B,KAAgBM;4BAhGX;gBAkGTW,EAAYd,EAAMK,OAAOU,SAAWf,EAAM4B;;;EAK7CC,EAAiB/B,EAAOC,GAAG;;;;;;EAS3B+B,EAAchC,EAAOiC,KAEhC;;;IAGE,EAAG/B,WACHA,EAAMiB,UAAUM,uBACZC,CAAG;;;;;;;kBAOOxB,EAAMC,QAAQ+B;UAExBR,CAAG;;;kBAGOxB,EAAMC,QAAQgC;;;sBAGVJ;;0CAEoB7B,EAAMK,OAAOsB;;;;wBAI/B9B;;;;"}

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

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

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{IconFa as c}from"../IconFa/index.js";import{CustomHeader as d,DefaultHeader as m,FlippingIcon as u,CollapseContent as s,transitionDurationSeconds as p}from"./styles.js";function f(f){var h=f.id,x=f.headerTitleText,y=f.headerTitleTextColor,T=f.headerTitleTextSize,b=f.headerTitleTextFontFamily,v=f.headerComponent,E=f.startOpen,k=f.onOpenChange,C=f.children,$=n(E||!1),g=$[0],j=$[1],F=n(E?"initial":"0"),S=F[0],I=F[1],w=r(null),z=r(null),D=a(),H=e(e({},l),D),O=function(){var e=w.current;(null==z?void 0:z.current)&&clearTimeout(null==z?void 0:z.current);var t=!g;j(t),null!==e&&I("".concat(e.scrollHeight,"px")),!1===t?setTimeout((function(){return I("0")}),10):z.current=setTimeout((function(){return I("initial")}),1e3*p),void 0!==k&&k(t)};return o((function(){j(E||!1),I(E?"initial":"0")}),[E]),t.createElement("div",{id:h},v?t.createElement(d,{theme:H,"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,"aria-disabled":!1,"aria-label":x,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),O())},role:"button",tabIndex:0},v):t.createElement(m,{"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,theme:H,type:"button",appearance:"tertiary",$textColor:y,$textSize:T,$textFontFamily:b},x,t.createElement(u,{$open:g},t.createElement(c,{faIcon:i}))),t.createElement(s,{theme:H,id:"".concat(h,"-content"),ref:w,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(h,"-header"),$contentHeight:S,$openStatus:g},C))}export{f as Collapse,f as default};
+import e,{useState as t,useRef as r,useEffect as n}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as i}from"../../themes/cruk.js";import{IconFa as l}from"../IconFa/index.js";import{CustomHeader as d,DefaultHeader as c,FlippingIcon as m,CollapseContent as s,transitionDurationSeconds as p}from"./styles.js";function h({id:h,headerTitleText:u,headerTitleTextColor:x,headerTitleTextSize:f,headerTitleTextFontFamily:$,headerComponent:y,startOpen:T,onOpenChange:b,children:E}){const[k,C]=t(T||!1),[g,F]=t(T?"initial":"0"),j=r(null),v=r(null),S=a(),I={...i,...S},w=()=>{const{current:e}=j;v?.current&&clearTimeout(v?.current);const t=!k;C(t),null!==e&&F(`${e.scrollHeight}px`),!1===t?setTimeout((()=>F("0")),10):v.current=setTimeout((()=>F("initial")),1e3*p),void 0!==b&&b(t)};return n((()=>{C(T||!1),F(T?"initial":"0")}),[T]),e.createElement("div",{id:h},y?e.createElement(d,{theme:I,"aria-controls":`${h}-header`,"aria-expanded":k,id:`${h}-header`,onClick:w,"aria-disabled":!1,"aria-label":u,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),w())},role:"button",tabIndex:0},y):e.createElement(c,{"aria-controls":`${h}-header`,"aria-expanded":k,id:`${h}-header`,onClick:w,theme:I,type:"button",appearance:"tertiary",$textColor:x,$textSize:f,$textFontFamily:$},u,e.createElement(m,{$open:k},e.createElement(l,{faIcon:o}))),e.createElement(s,{theme:I,id:`${h}-content`,ref:j,role:"region","aria-hidden":!k,"aria-labelledby":`${h}-header`,$contentHeight:g,$openStatus:k},E))}export{h as Collapse,h as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const foundTheme = useTheme();\n  const theme: ThemeType = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    startOpen ? setContentHeight(\"initial\") : setContentHeight(\"0\");\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          theme={theme}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          theme={theme}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={headerTitleTextColor}\n          $textSize={headerTitleTextSize}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        theme={theme}\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","__assign","defaultTheme","toggleCollapse","current","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"kfAiDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAiB,WACb,IAAAC,EAAYT,EAAOS,SACvBP,aAAA,EAAAA,EAAiBO,UAASC,aAAaR,eAAAA,EAAiBO,SAC5D,IAAME,GAAgBhB,EACtBC,EAAce,GAEE,OAAZF,GACFV,EAAiB,GAAGa,OAAAH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,YAAW,WAAM,OAAAf,EAAiB,IAAI,GAAE,IAExCG,EAAgBO,QAAUK,YACxB,WAAM,OAAAf,EAAiB,aACK,IAA5BgB,QAGiBC,IAAjBzB,GACFA,EAAaoB,EAEhB,EAmBD,OANAM,GAAU,WACRrB,EAAcN,IAAa,GAEfS,EAAZT,EAA6B,UAA8B,IAC7D,GAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAACC,cAAAC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACTqC,QAASb,EACM,iBAAA,eACHvB,EACZqC,UA5Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEH,EAoBOkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAGhB,OAAA5B,aACH,gBAAAW,EACfX,GAAI,UAAGA,EAAE,WACTqC,QAASb,EACTH,MAAOA,EACPwB,KAAK,SACLC,WAAW,WAAUC,WACT7C,EACD8C,UAAA7C,kBACMC,GAEhBH,EACDiC,EAACC,cAAAc,SAAoBtC,GACnBuB,EAACC,cAAAe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACdhC,MAAOA,EACPrB,GAAI,GAAA4B,OAAG5B,EAAY,YACnBsD,IAAKtC,EACL0B,KAAK,wBACS/B,EACG,kBAAA,GAAAiB,OAAG5B,EAAW,WAAAuD,eACfzC,EAAa0C,YAChB7C,GAEZH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const foundTheme = useTheme();\n  const theme: ThemeType = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          theme={theme}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          theme={theme}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={headerTitleTextColor}\n          $textSize={headerTitleTextSize}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        theme={theme}\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","openStatus","setOpenStatus","useState","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","defaultTheme","toggleCollapse","current","clearTimeout","newOpenState","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"8aAiDM,SAAUA,GAASC,GACvBA,EAAEC,gBACFA,EAAeC,qBACfA,EAAoBC,oBACpBA,EAAmBC,0BACnBA,EAAyBC,gBACzBA,EAAeC,UACfA,EAASC,aACTA,EAAYC,SACZA,IAEA,MAAOC,EAAYC,GAAiBC,EAASL,IAAa,IACnDM,EAAeC,GAAoBF,EACxCL,EAAY,UAAY,KAEpBQ,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EAAmB,IACpBC,KACAH,GAGCI,EAAiB,KACrB,MAAMC,QAAEA,GAAYR,EAChBE,GAAiBM,SAASC,aAAaP,GAAiBM,SAC5D,MAAME,GAAgBf,EACtBC,EAAcc,GAEE,OAAZF,GACFT,EAAiB,GAAGS,EAAQG,mBAGT,IAAjBD,EAEFE,YAAW,IAAMb,EAAiB,MAAM,IAExCG,EAAgBM,QAAUI,YACxB,IAAMb,EAAiB,YACK,IAA5Bc,QAGiBC,IAAjBrB,GACFA,EAAaiB,IAyBjB,OAVAK,GAAU,KACRnB,EAAcJ,IAAa,GAGzBO,EADEP,EACe,UAEA,OAElB,CAACA,IAGFwB,EAAAC,cAAA,MAAA,CAAK/B,GAAIA,GACNK,EACCyB,EAACC,cAAAC,GACCb,MAAOA,EAAK,gBACG,GAAGnB,2BACHS,EACfT,GAAI,GAAGA,WACPiC,QAASZ,EACM,iBAAA,eACHpB,EACZiC,UAhCeC,IAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNhB,MA0BIiB,KAAK,SACLC,SAAU,GAETlC,GAGHyB,gBAACU,EAAa,CAAA,gBACG,GAAGxC,WACH,gBAAAS,EACfT,GAAI,GAAGA,WACPiC,QAASZ,EACTF,MAAOA,EACPsB,KAAK,SACLC,WAAW,WAAUC,WACTzC,EACD0C,UAAAzC,kBACMC,GAEhBH,EACD6B,EAACC,cAAAc,SAAoBpC,GACnBqB,EAACC,cAAAe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACd9B,MAAOA,EACPnB,GAAI,GAAGA,YACPkD,IAAKpC,EACLwB,KAAK,wBACS7B,EACG,kBAAA,GAAGT,WAAWmD,eACfvC,EAAawC,YAChB3C,GAEZD,GAIT"}

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

@@ -1,2 +1,32 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Button as t}from"../Button/index.js";var i,e,r,a,l=.5,s=o.span(i||(i=n(["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"],["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"])),(function(n){return n.$open?"translateY(0.1em) scaleY(-1)":"initial"}),.5),f=o(t)(e||(e=n(["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"],["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"])),(function(n){var o=n.theme,t=n.$textColor;return t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor}),(function(n){var o=n.theme,t=o.fontSizes,i=o.fontSizes.m,e=n.$textSize;return e?t[e]:i}),(function(n){var o=n.theme;return n.$textFontFamily||o.typography.fontFamilyBase}),(function(n){var o=n.theme.colors,t=n.$textColor;return t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor})),m=o.div(r||(r=n(["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"],["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"])),.5,(function(n){return n.$contentHeight}),(function(n){return n.$openStatus?"visible":"hidden"})),c=o.div(a||(a=n(["\n  cursor: pointer;\n"],["\n  cursor: pointer;\n"])));export{m as CollapseContent,c as CustomHeader,f as DefaultHeader,s as FlippingIcon,l as transitionDurationSeconds};
+import o from"styled-components";import{Button as t}from"../Button/index.js";const e=.5,i=o.span`
+  display: inline-block;
+  transform: ${({$open:o})=>o?"translateY(0.1em) scaleY(-1)":"initial"};
+  transition-duration: ${.5}s;
+`,n=o(t)`
+  display: flex;
+  color: ${({theme:o,$textColor:t})=>t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor};
+  font-size: ${({theme:{fontSizes:o,fontSizes:{m:t}},$textSize:e})=>e?o[e]:t};
+  font-family: ${({theme:o,$textFontFamily:t})=>t||o.typography.fontFamilyBase};
+  font-weight: normal;
+  margin-bottom: 0;
+  height: initial;
+  text-decoration: none;
+  text-align: left;
+  border-radius: 0;
+  &:hover,
+  &:focus {
+    color: ${({theme:{colors:o},$textColor:t})=>t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor};
+  }
+`,r=o.div`
+  margin: 0;
+  transition: ${.5}s ease;
+  height: ${({$contentHeight:o})=>o};
+  visibility: ${({$openStatus:o})=>o?"visible":"hidden"};
+  overflow: hidden;
+  & > p {
+    margin-top: 0;
+  }
+`,l=o.div`
+  cursor: pointer;
+`;export{r as CollapseContent,l as CustomHeader,n as DefaultHeader,i as FlippingIcon,e as transitionDurationSeconds};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  theme: ThemeType;\n  $textColor?: string;\n  $textSize?: FontSizeType;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ theme, $textColor }) =>\n    !!$textColor &&\n    typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$textColor as ColorKeyType]\n      : $textColor || theme.colors.collapseHeaderColor};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  font-family: ${({ theme, $textFontFamily }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ theme: { colors }, $textColor }) =>\n      $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n        ? colors[$textColor as ColorKeyType]\n        : $textColor || colors.collapseHeaderColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","templateObject_1","__makeTemplateObject","_a","$open","DefaultHeader","Button","templateObject_2","theme","$textColor","colors","collapseHeaderColor","_b","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","templateObject_3","$contentHeight","$openStatus","CustomHeader","templateObject_4"],"mappings":"6JASO,YAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,KAAwBC,IAAAA,EAAAC,EAAA,CAAA,4CAAA,6BAAA,QAAA,CAAA,4CAGL,6BACJ,WAFnC,SAACC,GACZ,OADmBA,EAAAC,MACX,+BAAiC,SAAzC,GALqC,IAS5BC,EAAgBN,EAAOO,EAAPP,CAK3BQ,IAAAA,EAAAL,EAAA,CAAA,gCAAA,mBAAA,qBAAA,+KAAA,YAAA,CAAA,gCAMoD,mBAOR,qBAEQ,+KAYJ,eAzBvC,SAACC,OAAEK,EAAKL,EAAAK,MAAEC,EAAUN,EAAAM,WAC3B,OAAEA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC,mBAH/B,IAIW,SAACR,OACZS,EAGCT,EAAAK,MAFCK,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASZ,EAAAY,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACX,OAAEK,EAAKL,EAAAK,MACrB,OADsCL,EAAAa,iBACnBR,EAAMS,WAAWC,cAApC,IASS,SAACf,OAAWO,EAAMP,EAAAK,MAAAE,OAAID,EAAUN,EAAAM,WACvC,OAAAA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC,mBAFzB,IAMOQ,EAAkBpB,EAAOqB,IAGpCC,IAAAA,EAAAnB,EAAA,CAAA,iCAAA,sBAAA,oBAAA,gEAAA,CAAA,iCAEuC,sBACqC,oBAExC,kEArDG,IAmD7B,SAACC,GAAmD,OAAnCA,EAAAmB,cAAmC,IAChD,SAACnB,GACb,OAD0BA,EAAAoB,YACZ,UAAY,QAA1B,IAOSC,EAAezB,EAAOqB,IAAGK,IAAAA,EAAAvB,EAAA,CAAA,0BAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  theme: ThemeType;\n  $textColor?: string;\n  $textSize?: FontSizeType;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ theme, $textColor }) =>\n    !!$textColor &&\n    typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$textColor as ColorKeyType]\n      : $textColor || theme.colors.collapseHeaderColor};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  font-family: ${({ theme, $textFontFamily }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ theme: { colors }, $textColor }) =>\n      $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n        ? colors[$textColor as ColorKeyType]\n        : $textColor || colors.collapseHeaderColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","$open","DefaultHeader","Button","theme","$textColor","colors","collapseHeaderColor","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","$contentHeight","$openStatus","CustomHeader"],"mappings":"6EASO,MAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,IAAwB;;eAE5C,EAAGC,WACdA,EAAQ,+BAAiC;yBALJ;EAS5BC,EAAgBH,EAAOI,EAKlC;;WAES,EAAGC,QAAOC,gBACfA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC;eACpB,EACXH,OACEI,YACAA,WAAaC,MAEfC,eACKA,EAAYF,EAAUE,GAAaD;iBAC3B,EAAGL,QAAOO,qBACvBA,GAAmBP,EAAMQ,WAAWC;;;;;;;;;aAS3B,EAAGT,OAASE,UAAUD,gBAC7BA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC;;EAIlBO,EAAkBf,EAAOgB,GAGpC;;gBAhDuC;YAmD7B,EAAGC,oBAAiDA;gBAChD,EAAGC,iBACfA,EAAc,UAAY;;;;;EAOjBC,EAAenB,EAAOgB,GAAG;;"}

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

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

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t}from"styled-components";import{ErrorText as r}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as n}from"../TextField/index.js";import{Fieldset as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as i,ErrorTextWrapper as m}from"./styles.js";function d(d){var u=d.label,s=d.hintText,p=d.day,y=d.month,h=d.year,c=d.dayName,x=void 0===c?"day":c,E=d.monthName,g=void 0===E?"month":E,b=d.yearName,f=void 0===b?"year":b,v=d.dayHasError,q=d.monthHasError,F=d.yearHasError,L=d.errorMessage,C=d.onChange,B=void 0===C?function(){}:C,M=d.onBlur,T=void 0===M?function(){}:M,j=d.onFocus,W=void 0===j?function(){}:j,H=d.disabled,I=d.required,N=t();return e.createElement(o,null,e.createElement(a,{as:"legend",textWeight:N.typography.fontWeightLabels||700,marginBottom:"xxs",textFontFamily:N.typography.fontFamilyLabel},u,!!I&&e.createElement("span",{style:{fontWeight:N.typography.fontWeightBase}}," (required)")),s&&e.createElement(a,null,s),e.createElement(l,null,e.createElement(n,{label:"Day",type:"text",name:x,required:!!I,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:B,onBlur:T,onFocus:W,hasError:v,disabled:H})),e.createElement(l,null,e.createElement(n,{label:"Month",type:"text",name:g,required:!!I,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:y,onChange:B,onBlur:T,onFocus:W,hasError:q,disabled:H})),e.createElement(i,null,e.createElement(n,{label:"Year",type:"text",name:f,required:!!I,hideRequiredInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:h,onChange:B,onBlur:T,onFocus:W,hasError:F,disabled:H})),L&&e.createElement(m,null,e.createElement(r,{marginTop:"xxs"},L)))}export{d as DateField,d as default};
+import e from"react";import{useTheme as t}from"styled-components";import{ErrorText as r}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as n}from"../TextField/index.js";import{Fieldset as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as m,ErrorTextWrapper as i}from"./styles.js";function d({label:d,hintText:u,day:s,month:p,year:y,dayName:h="day",monthName:c="month",yearName:x="year",dayHasError:E,monthHasError:g,yearHasError:b,errorMessage:f,onChange:q=()=>{},onBlur:F=()=>{},onFocus:L=()=>{},disabled:C,required:B}){const M=t();return e.createElement(o,null,e.createElement(a,{as:"legend",textWeight:M.typography.fontWeightLabels||700,marginBottom:"xxs",textFontFamily:M.typography.fontFamilyLabel},d,!!B&&e.createElement("span",{style:{fontWeight:M.typography.fontWeightBase}}," (required)")),u&&e.createElement(a,null,u),e.createElement(l,null,e.createElement(n,{label:"Day",type:"text",name:h,required:!!B,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:s,onChange:q,onBlur:F,onFocus:L,hasError:E,disabled:C})),e.createElement(l,null,e.createElement(n,{label:"Month",type:"text",name:c,required:!!B,hideRequiredInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:q,onBlur:F,onFocus:L,hasError:g,disabled:C})),e.createElement(m,null,e.createElement(n,{label:"Year",type:"text",name:x,required:!!B,hideRequiredInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:y,onChange:q,onBlur:F,onFocus:L,hasError:b,disabled:C})),f&&e.createElement(i,null,e.createElement(r,{marginTop:"xxs"},f)))}export{d as DateField,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { useTheme } from \"styled-components\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n} from \"./styles\";\nimport { type ThemeType } from \"../../types\";\n\nexport type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n};\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: DateFieldProps) {\n  const theme = useTheme();\n  const typedTheme = theme as ThemeType;\n  return (\n    <Fieldset>\n      <Text\n        as=\"legend\"\n        textWeight={typedTheme.typography.fontWeightLabels || 700}\n        marginBottom=\"xxs\"\n        textFontFamily={typedTheme.typography.fontFamilyLabel}\n      >\n        {label}\n        {!!required && (\n          <span\n            style={{\n              fontWeight: typedTheme.typography.fontWeightBase,\n            }}\n          >\n            {` (required)`}\n          </span>\n        )}\n      </Text>\n      {hintText && <Text>{hintText}</Text>}\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\n      )}\n    </Fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","typedTheme","useTheme","React","Fieldset","createElement","Text","as","textWeight","typography","fontWeightLabels","marginBottom","textFontFamily","fontFamilyLabel","style","fontWeight","fontWeightBase","DateTextFieldWrapper","TextField","type","name","hideRequiredInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"oUA6CM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAeN,EAAAO,QAAfA,OAAO,IAAAD,EAAG,MAAKA,EACfE,EAAmBR,EAAAS,UAAnBA,OAAS,IAAAD,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWZ,EAAAY,YACXC,EAAab,EAAAa,cACbC,EAAYd,EAAAc,aACZC,iBACAC,EAAAhB,EAAAiB,SAAAA,OAAW,IAAAD,EAAA,WAEX,EAACA,EACDE,EAEClB,EAAAmB,OAFDA,OAAS,IAAAD,EAAA,WAET,EAACA,EACDE,EAECpB,EAAAqB,QAFDA,OAAU,IAAAD,EAAA,WAEV,IACAE,EAAQtB,EAAAsB,SACRC,EAAQvB,EAAAuB,SAGFC,EADQC,IAEd,OACEC,gBAACC,EAAQ,KACPD,EAACE,cAAAC,EACC,CAAAC,GAAG,SACHC,WAAYP,EAAWQ,WAAWC,kBAAoB,IACtDC,aAAa,MACbC,eAAgBX,EAAWQ,WAAWI,iBAErCnC,IACEsB,GACDG,EAAAE,cAAA,OAAA,CACES,MAAO,CACLC,WAAYd,EAAWQ,WAAWO,iBAGnC,gBAINrC,GAAYwB,EAAAE,cAACC,EAAI,KAAE3B,GACpBwB,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRxC,MAAM,MACNyC,KAAK,OACLC,KAAMpC,EACNgB,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAO9C,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUtC,EACVU,SAAUA,KAGdI,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRxC,MAAM,QACNyC,KAAK,OACLC,KAAMlC,EACNc,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAO7C,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUrC,EACVS,SAAUA,KAGdI,EAAAE,cAACuB,EAAyB,KACxBzB,EAAAE,cAACa,EAAS,CACRxC,MAAM,OACNyC,KAAK,OACLC,KAAMhC,EACNY,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAO5C,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT6B,SAAUpC,EACVQ,SAAUA,KAGbP,GACCW,EAAAE,cAACwB,EAAgB,KACf1B,EAAAE,cAACyB,EAAS,CAACC,UAAU,OAAOvC,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { useTheme } from \"styled-components\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n} from \"./styles\";\nimport { type ThemeType } from \"../../types\";\n\nexport type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n};\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: DateFieldProps) {\n  const theme = useTheme();\n  const typedTheme = theme as ThemeType;\n  return (\n    <Fieldset>\n      <Text\n        as=\"legend\"\n        textWeight={typedTheme.typography.fontWeightLabels || 700}\n        marginBottom=\"xxs\"\n        textFontFamily={typedTheme.typography.fontFamilyLabel}\n      >\n        {label}\n        {!!required && (\n          <span\n            style={{\n              fontWeight: typedTheme.typography.fontWeightBase,\n            }}\n          >\n            {` (required)`}\n          </span>\n        )}\n      </Text>\n      {hintText && <Text>{hintText}</Text>}\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\n      )}\n    </Fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","label","hintText","day","month","year","dayName","monthName","yearName","dayHasError","monthHasError","yearHasError","errorMessage","onChange","onBlur","onFocus","disabled","required","typedTheme","useTheme","React","Fieldset","createElement","Text","as","textWeight","typography","fontWeightLabels","marginBottom","textFontFamily","fontFamilyLabel","style","fontWeight","fontWeightBase","DateTextFieldWrapper","TextField","type","name","hideRequiredInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"6UA6CgBA,GAAUC,MACxBA,EAAKC,SACLA,EAAQC,IACRA,EAAGC,MACHA,EAAKC,KACLA,EAAIC,QACJA,EAAU,MAAKC,UACfA,EAAY,QAAOC,SACnBA,EAAW,OAAMC,YACjBA,EAAWC,cACXA,EAAaC,aACbA,EAAYC,aACZA,EAAYC,SACZA,EAAW,OAEVC,OACDA,EAAS,OAERC,QACDA,EAAU,OAETC,SACDA,EAAQC,SACRA,IAEA,MACMC,EADQC,IAEd,OACEC,gBAACC,EAAQ,KACPD,EAACE,cAAAC,EACC,CAAAC,GAAG,SACHC,WAAYP,EAAWQ,WAAWC,kBAAoB,IACtDC,aAAa,MACbC,eAAgBX,EAAWQ,WAAWI,iBAErC7B,IACEgB,GACDG,EAAAE,cAAA,OAAA,CACES,MAAO,CACLC,WAAYd,EAAWQ,WAAWO,iBAGnC,gBAIN/B,GAAYkB,EAAAE,cAACC,EAAI,KAAErB,GACpBkB,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRlC,MAAM,MACNmC,KAAK,OACLC,KAAM/B,EACNW,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOxC,EACPU,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUnC,EACVO,SAAUA,KAGdI,EAAAE,cAACY,EAAoB,KACnBd,EAAAE,cAACa,EAAS,CACRlC,MAAM,QACNmC,KAAK,OACLC,KAAM9B,EACNU,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOvC,EACPS,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUlC,EACVM,SAAUA,KAGdI,EAAAE,cAACuB,EAAyB,KACxBzB,EAAAE,cAACa,EAAS,CACRlC,MAAM,OACNmC,KAAK,OACLC,KAAM7B,EACNS,WAAYA,EACZqB,qBAAmB,EACnBC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOtC,EACPQ,SAAUA,EACVC,OAAQA,EACRC,QAASA,EACT6B,SAAUjC,EACVK,SAAUA,KAGbJ,GACCQ,EAAAE,cAACwB,EAAgB,KACf1B,EAAAE,cAACyB,EAAS,CAACC,UAAU,OAAOpC,IAKtC"}

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

@@ -1,2 +1,27 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{Text as o}from"../Text/index.js";var r=i.fieldset(e||(e=n(["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"],["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"])));i(o)(t||(t=n(["\n  font-family: ",";\n"],["\n  font-family: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}));var e,t,a,s,b,m=i.div(a||(a=n(["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"],["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.spacing.xs}),(function(n){return n.theme.typography.fontWeightBase})),d=i(m)(s||(s=n(["\n  width: 80px;\n"],["\n  width: 80px;\n"]))),g=i.div(b||(b=n(["\n  clear: left;\n"],["\n  clear: left;\n"])));export{m as DateTextFieldWrapper,g as ErrorTextWrapper,r as Fieldset,d as LargeDateTextFieldWrapper};
+import i from"styled-components";import{Text as e}from"../Text/index.js";const o=i.fieldset`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  *,
+  *:after,
+  *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+`;i(e)`
+  font-family: ${({theme:i})=>i.typography.fontFamilyLabel};
+`;const t=i.div`
+  display: inline-block;
+  width: 60px;
+  margin-right: ${({theme:i})=>i.spacing.xs};
+  span {
+    margin-bottom: 0.25rem; // this is smaller than xxs spacing
+    font-weight: ${({theme:i})=>i.typography.fontWeightBase};
+  }
+`,r=i(t)`
+  width: 80px;
+`,n=i.div`
+  clear: left;
+`;export{t as DateTextFieldWrapper,n as ErrorTextWrapper,o as Fieldset,r as LargeDateTextFieldWrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const TextAsLabel = styled(Text)<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n`;\n\nexport const DateTextFieldWrapper = styled.div<{ theme: ThemeType }>`\n  display: inline-block;\n  width: 60px;\n  margin-right: ${({ theme }) => theme.spacing.xs};\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled(DateTextFieldWrapper)`\n  width: 80px;\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","templateObject_1","__makeTemplateObject","Text","templateObject_2","_a","theme","typography","fontFamilyLabel","DateTextFieldWrapper","div","templateObject_3","spacing","xs","fontWeightBase","LargeDateTextFieldWrapper","templateObject_4","ErrorTextWrapper","templateObject_5"],"mappings":"yJAIa,IAAAA,EAAWC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,0LAAA,CAAA,6LAaZH,EAAOI,EAAPJ,CAAYK,IAAAA,EAAAF,EAAA,CAAA,oBAAA,OAAA,CAAsB,oBACG,UAA/C,SAACG,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IAGzB,cAAMC,EAAuBV,EAAOW,IAAyBC,IAAAA,EAAAT,EAAA,CAAA,+DAAA,kGAAA,YAAA,CAAA,+DAGnB,kGAGgB,eAH/C,SAACG,GAAc,OAAPA,EAAAC,MAAaM,QAAQC,EAAd,IAGd,SAACR,GAAc,OAAPA,EAAAC,MAAaC,WAAWO,cAAjB,IAIrBC,EAA4BhB,EAAOU,EAAPV,CAA4BiB,IAAAA,EAAAd,EAAA,CAAA,sBAAA,CAAA,yBAIxDe,EAAmBlB,EAAOW,IAAGQ,IAAAA,EAAAhB,EAAA,CAAA,sBAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const TextAsLabel = styled(Text)<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n`;\n\nexport const DateTextFieldWrapper = styled.div<{ theme: ThemeType }>`\n  display: inline-block;\n  width: 60px;\n  margin-right: ${({ theme }) => theme.spacing.xs};\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled(DateTextFieldWrapper)`\n  width: 80px;\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","Text","theme","typography","fontFamilyLabel","DateTextFieldWrapper","div","spacing","xs","fontWeightBase","LargeDateTextFieldWrapper","ErrorTextWrapper"],"mappings":"yEAIa,MAAAA,EAAWC,EAAOC,QAAQ;;;;;;;;;;;EAaZD,EAAOE,EAA2B;iBAC5C,EAAGC,WAAYA,EAAMC,WAAWC;EAGpC,MAAAC,EAAuBN,EAAOO,GAAyB;;;kBAGlD,EAAGJ,WAAYA,EAAMK,QAAQC;;;mBAG5B,EAAGN,WAAYA,EAAMC,WAAWM;;EAItCC,EAA4BX,EAAOM,EAAqB;;EAIxDM,EAAmBZ,EAAOO,GAAG;;"}

package/lib/src/components/Divider.js

@@ -1,2 +1,18 @@
-import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import e from"react";import t from"styled-components";var i,o=t.div(i||(i=n(['\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: "";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n'],['\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: "";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n']))),l=function(n){var t=n.children;return e.createElement(o,null,t)};export{l as Divider,l as default};
+import e from"react";import t from"styled-components";const o=t.div`
+  align-items: center;
+  display: flex;
+  flex-basis: 100%;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  text-align: center;
+  width: 100%;
+  &:before,
+  &:after {
+    background-color: #333;
+    content: "";
+    display: inline-block;
+    flex-grow: 1;
+    height: 1px;
+  }
+`,n=({children:t})=>e.createElement(o,null,t);export{n as Divider,n as default};
 //# sourceMappingURL=Divider.js.map

package/lib/src/components/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nconst StyledDivider = styled.div`\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: \"\";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n`;\n\nexport const Divider = ({ children }: { children?: ReactNode }) => (\n  <StyledDivider>{children}</StyledDivider>\n);\n\nexport default Divider;\n"],"names":["StyledDivider","styled","div","templateObject_1","__makeTemplateObject","Divider","_a","children","React","createElement"],"mappings":"mIAGA,MAAMA,EAAgBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,0SAAA,CAAA,6SAkBnBC,EAAU,SAACC,GAAE,IAAAC,EAAQD,EAAAC,SAAiC,OACjEC,EAACC,cAAAT,EAAe,KAAAO,EADiD"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nconst StyledDivider = styled.div`\n  align-items: center;\n  display: flex;\n  flex-basis: 100%;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  text-align: center;\n  width: 100%;\n  &:before,\n  &:after {\n    background-color: #333;\n    content: \"\";\n    display: inline-block;\n    flex-grow: 1;\n    height: 1px;\n  }\n`;\n\nexport const Divider = ({ children }: { children?: ReactNode }) => (\n  <StyledDivider>{children}</StyledDivider>\n);\n\nexport default Divider;\n"],"names":["StyledDivider","styled","div","Divider","children","React","createElement"],"mappings":"sDAGA,MAAMA,EAAgBC,EAAOC,GAAG;;;;;;;;;;;;;;;;EAkBnBC,EAAU,EAAGC,cACxBC,EAACC,cAAAN,OAAeI"}

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

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

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{faTriangleExclamation as s}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{StyledErrorText as n}from"./styles.js";import{IconFa as i}from"../IconFa/index.js";import{Box as a}from"../Box/index.js";function l(l){var d=l.children,f=l.as,p=void 0===f?"span":f,c=e(l,["children","as"]),u=t(),x=o(o({},m),u),h="string"==typeof d&&d.length;return r.createElement(n,o({forwardedAs:p},c,{theme:x,role:"alert"}),h?r.createElement(a,{as:"span",marginRight:"xxs"},r.createElement(i,{faIcon:s,size:"1em"})):null,d)}export{l as ErrorText,l as default};
+import e from"react";import{useTheme as o}from"styled-components";import{faTriangleExclamation as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as t}from"../../themes/cruk.js";import{StyledErrorText as s}from"./styles.js";import{IconFa as m}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";function i({children:i,as:a="span",...f}){const l=o(),c={...t,...l},p="string"==typeof i&&i.length;return e.createElement(s,{forwardedAs:a,...f,theme:c,role:"alert"},p?e.createElement(n,{as:"span",marginRight:"xxs"},e.createElement(m,{faIcon:r,size:"1em"})):null,i)}export{i as ErrorText,i as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText forwardedAs={as} {...props} theme={theme} role=\"alert\">\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","children","_b","as","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","shouldShowIcon","length","React","createElement","StyledErrorText","forwardedAs","role","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"4aAqBM,SAAUA,EAAUC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAAF,EAAAG,GAAAA,OAAK,IAAAD,EAAA,OAAMA,EAAKE,EAAKC,EAAAL,EAAjC,mBAClBM,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAqC,iBAAbV,GAAyBA,EAASW,OAChE,OACEC,EAACC,cAAAC,EAAgBN,EAAA,CAAAO,YAAab,GAAQC,EAAK,CAAEI,MAAOA,EAAOS,KAAK,UAC7DN,EACCE,EAACC,cAAAI,EAAI,CAAAf,GAAG,OAAOgB,YAAY,OACzBN,EAAAC,cAACM,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHtB,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText forwardedAs={as} {...props} theme={theme} role=\"alert\">\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","children","as","props","foundTheme","useTheme","theme","defaultTheme","shouldShowIcon","length","React","createElement","StyledErrorText","forwardedAs","role","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"4VAqBgB,SAAAA,GAAUC,SAAEA,EAAQC,GAAEA,EAAK,UAAWC,IACpD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAqC,iBAAbP,GAAyBA,EAASQ,OAChE,OACEC,EAACC,cAAAC,EAAgB,CAAAC,YAAaX,KAAQC,EAAOG,MAAOA,EAAOQ,KAAK,SAC7DN,EACCE,EAACC,cAAAI,EAAI,CAAAb,GAAG,OAAOc,YAAY,OACzBN,EAAAC,cAACM,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHnB,EAGP"}

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

@@ -1,2 +1,6 @@
-import{__makeTemplateObject as o}from"../../../node_modules/tslib/tslib.es6.js";import n from"styled-components";import{Text as t}from"../Text/index.js";var e,r=n(t)(e||(e=o(["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"],["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"])),(function(o){return o.theme.colors.textError}),(function(o){return o.theme.typography.fontWeightHeavy}));export{r as StyledErrorText,r as default};
+import o from"styled-components";import{Text as t}from"../Text/index.js";const e=o(t)`
+  display: inline-block;
+  color: ${({theme:o})=>o.colors.textError};
+  font-weight: ${({theme:o})=>o.typography.fontWeightHeavy};
+`;export{e as StyledErrorText,e as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledErrorText = styled(Text)<ThemeProps>`\n  display: inline-block;\n  color: ${({ theme }) => theme.colors.textError};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeavy};\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","templateObject_1","__makeTemplateObject","_a","theme","colors","textError","typography","fontWeightHeavy"],"mappings":"yJAOa,MAAAA,EAAkBC,EAAOC,EAAPD,CAAwBE,IAAAA,EAAAC,EAAA,CAAA,wCAAA,qBAAA,OAAA,CAAA,wCAEP,qBACgB,UADrD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,SAAb,IACT,SAACH,GAAc,OAAPA,EAAAC,MAAaG,WAAWC,eAAjB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledErrorText = styled(Text)<ThemeProps>`\n  display: inline-block;\n  color: ${({ theme }) => theme.colors.textError};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeavy};\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","theme","colors","textError","typography","fontWeightHeavy"],"mappings":"+EAOaA,EAAkBC,EAAOC,EAAiB;;WAE5C,EAAGC,WAAYA,EAAMC,OAAOC;iBACtB,EAAGF,WAAYA,EAAMG,WAAWC;"}

package/lib/src/components/Flex.js

@@ -1,2 +1,8 @@
-import{__makeTemplateObject as e,__assign as n}from"../../node_modules/tslib/tslib.es6.js";import t from"react";import i from"styled-components";import{spacing as r,spacingPropsToSpacingPropsInternal as m}from"./Spacing/index.js";var o,a=i.div(o||(o=e(["\n  display: block;\n  @media (min-width: ",") {\n    display: flex;\n  }\n  ","\n"],["\n  display: block;\n  @media (min-width: ",") {\n    display: flex;\n  }\n  ","\n"])),(function(e){return e.theme.breakpoint.tablet}),(function(e){return r(e,e.theme)}));function l(e){var i=m(e);return t.createElement(a,n({theme:e.theme},i))}export{l as Flex,l as default};
+import e from"react";import t from"styled-components";import{spacing as m,spacingPropsToSpacingPropsInternal as o}from"./Spacing/index.js";const i=t.div`
+  display: block;
+  @media (min-width: ${({theme:e})=>e.breakpoint.tablet}) {
+    display: flex;
+  }
+  ${e=>m(e,e.theme)}
+`;function n(t){const m=o(t);return e.createElement(i,{theme:t.theme,...m})}export{n as Flex,n as default};
 //# sourceMappingURL=Flex.js.map