@cruk/cruk-react-components 5.0.7 → 6.0.0

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

@@ -1,2 +1,97 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var o,t,r,i,a,s,l,c,d,p,h=e.div(o||(o=n(["\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n"],["\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n"]))),m=e.ul(t||(t=n(["\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ",";\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  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ",";\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"])),(function(n){return n.$smoothScrolling?"smooth":"auto"})),u=e.li(r||(r=n(["\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ",";\n"],["\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ",";\n"])),(function(n){var e=n.$onlyChild,o=n.$fullWidthChild;return e||o?"100%":"80%"})),f=e.div(i||(i=n(["\n  transition: transform 0.2s linear;\n  transform: ",";\n"],["\n  transition: transform 0.2s linear;\n  transform: ",";\n"])),(function(n){var e=n.$isSelected,o=n.$shrinkUnselectedPages,t=n.$onlyChild,r=n.$fullWidthChild;return t||e&&o||r?"scale(1)":"scale(0.9)"})),g=e.div(a||(a=n(["\n  display: flex;\n  justify-content: center;\n"],["\n  display: flex;\n  justify-content: center;\n"]))),b=e.span(s||(s=n(["\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n"],["\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n"]))),x=e.button(l||(l=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: ",";\n  font-size: ",";\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: ",";\n  }\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: ",";\n  font-size: ",";\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: ",";\n  }\n"])),(function(n){var e=n.disabled,o=n.theme;return e?o.colors.disabled:"su2c"===o.name?o.colors.textDark:o.colors.primary}),(function(n){return n.theme.fontSizes.xxxl}),(function(n){return n.disabled?"scale(0.8)":"scale(1)"})),w=e.div(c||(c=n(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n"])),(function(n){return n.$count>6?"none":"flex"}),(function(n){return n.theme.breakpoint.tablet}),(function(n){return n.$count>10?"none":"flex"}),(function(n){return n.theme.breakpoint.desktop}),(function(n){return n.$count>20?"none":"flex"})),y=e.button(d||(d=n(["\n  border: none;\n  outline-offset: ",";\n  padding: 0;\n  margin: ",";\n  width: ",";\n  height: ",";\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ",";\n  background-color: ",";\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  border: none;\n  outline-offset: ",";\n  padding: 0;\n  margin: ",";\n  width: ",";\n  height: ",";\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ",";\n  background-color: ",";\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"])),(function(n){return n.theme.spacing.xxs}),(function(n){var e=n.theme;return"auto ".concat(e.spacing.xxs)}),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.fontSizes.l}),(function(n){var e=n.theme;return"solid 1px ".concat("su2c"===e.name?e.colors.textDark:e.colors.primary)}),(function(n){var e=n.theme;return n.$selected?"".concat("su2c"===e.name?e.colors.textDark:e.colors.primary):e.colors.backgroundLight})),v=e.span(p||(p=n(["\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  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"])));export{g as ButtonWrapper,x as CarouselButton,u as CarouselCard,f as CarouselCardInner,m as CarouselScrollArea,h as CarouselWrapper,y as Dot,w as DotContainer,v as ScreenReaderOnly,b as VerticalAlign};
+import e from"styled-components";const o=e.div`
+  position: relative;
+  width: 100%;
+  overflow-y: hidden;
+`,t=e.ul`
+  position: relative;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: ${({$smoothScrolling:e})=>e?"smooth":"auto"};
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+  height: 100%;
+`,i=e.li`
+  scroll-snap-align: center;
+  display: inline-block;
+  width: ${({$onlyChild:e,$fullWidthChild:o})=>e||o?"100%":"80%"};
+`,r=e.div`
+  transition: transform 0.2s linear;
+  transform: ${({$isSelected:e,$shrinkUnselectedPages:o,$onlyChild:t,$fullWidthChild:i})=>t||e&&o||i?"scale(1)":"scale(0.9)"};
+`,n=e.div`
+  display: flex;
+  justify-content: center;
+`,s=e.span`
+  display: block;
+  margin: auto;
+  height: 2rem;
+  line-height: 1.75rem;
+`,l=e.button`
+  height: 100%;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0);
+  border: none;
+  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */
+  color: ${({disabled:e,theme:o})=>e?o.colors.disabled:"su2c"===o.name?o.colors.textDark:o.colors.primary};
+  font-size: ${({theme:e})=>e.fontSizes.xxxl};
+  font-weight: 600;
+  transition:
+    color 0.3s ease,
+    transform 0.3s ease;
+  max-width: 3rem;
+  padding: 0;
+  vertical-align: middle;
+  user-select: none;
+
+  transform: scale(0.8);
+  &:hover {
+    transform: ${({disabled:e})=>e?"scale(0.8)":"scale(1)"};
+  }
+`,a=e.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  display: ${({$count:e})=>e>6?"none":"flex"};
+
+  @media (min-width: ${({theme:e})=>e.breakpoint.tablet}) {
+    display: ${({$count:e})=>e>10?"none":"flex"};
+  }
+
+  @media (min-width: ${({theme:e})=>e.breakpoint.desktop}) {
+    display: ${({$count:e})=>e>20?"none":"flex"};
+  }
+`,d=e.button`
+  border: none;
+  outline-offset: ${({theme:e})=>e.spacing.xxs};
+  padding: 0;
+  margin: ${({theme:e})=>`auto ${e.spacing.xxs}`};
+  width: ${({theme:e})=>e.fontSizes.l};
+  height: ${({theme:e})=>e.fontSizes.l};
+  border-radius: 50%;
+  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */
+  border: ${({theme:e})=>`solid 1px ${"su2c"===e.name?e.colors.textDark:e.colors.primary}`};
+  background-color: ${({theme:e,$selected:o})=>o?`${"su2c"===e.name?e.colors.textDark:e.colors.primary}`:e.colors.backgroundLight};
+  user-select: none;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+  transform: scale(0.8);
+  &:hover {
+    transform: scale(1);
+  }
+`,c=e.span`
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  margin-bottom: -1px;
+  margin-right: -1px;
+  overflow: hidden;
+  padding: 0px;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;export{n as ButtonWrapper,l as CarouselButton,i as CarouselCard,r as CarouselCardInner,t as CarouselScrollArea,o as CarouselWrapper,d as Dot,a as DotContainer,c as ScreenReaderOnly,s as VerticalAlign};
 //# sourceMappingURL=styles.js.map

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":"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"}
+{"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,9 +1,9 @@
 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>>;
+    component: (props: CheckBoxProps) => React.JSX.Element;
     args: {
         id: string;
         disabled: boolean;

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

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

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 from"react";import{useTheme as r,ThemeProvider as o}from"styled-components";import{faCheck as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{IconFa as i}from"../IconFa/index.js";import{StyledLabel as d,StyledInput as m,SelectedBorder as c,CheckWrapper as a,Check as n}from"./styles.js";const f=f=>{const u=r(),p={...l,...u},{children:E,hasError:h,errorMessage:x,ref:b,...k}=f;return e.createElement(o,{theme:p},e.createElement(d,{$hasError:h||!!x||!1,$checked:f.checked||f.defaultChecked||!1,$disabled:f.disabled||!1},e.createElement(m,{...k,disabled:f.disabled||!1,type:"checkbox",ref:b,"aria-describedby":f.id&&x?`${f.id}-error`:void 0}),e.createElement(c,null),E||f.value,p.utilities.useDefaultFromControls?null:e.createElement(a,null,e.createElement(n,null,e.createElement(i,{faIcon:t,color:"check",size:"1.25em"})))),!!x&&e.createElement(s,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},x))};export{f as Checkbox,f 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  type ReactNode,\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>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = (props: CheckBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const { children, hasError, errorMessage, ref, ...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\nexport default Checkbox;\n"],"names":["Checkbox","props","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","ref","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"],"mappings":"2aAkCa,MAAAA,EAAYC,IACvB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,EAAYC,IAAEA,KAAQC,GAAST,EAE3D,OACEU,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAACC,cAAAE,EACY,CAAAC,UAAAR,KAAcC,IAAgB,EAAKQ,SACpCf,EAAMgB,SAAWhB,EAAMiB,iBAAkB,YACxCjB,EAAMkB,WAAY,GAE7BR,EAAAC,cAACQ,EACK,IAAAV,EACJS,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLZ,IAAKA,EAAG,mBAEJR,EAAMqB,IAAQd,EAAe,GAAGP,EAAMqB,gBAAaC,IAGzDZ,EAAAC,cAACY,EAAiB,MACjBlB,GAAYL,EAAMwB,MAClBrB,EAAMsB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD1B,GACDG,gBAACwB,EAAS,CACRC,UAAU,MACVd,GAAIrB,EAAMqB,GAAK,GAAGrB,EAAMqB,gBAAaC,GAEpCf,GAGS"}

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":"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"}
+{"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/{components → src/components}/Collapse/styles.d.ts

@@ -3,14 +3,22 @@ export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $open: boolean;
 }>> & string;
-export declare const DefaultHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+export declare const DefaultHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType;
+    full?: boolean;
+    href?: string;
+    size?: "m" | "l";
+    css?: unknown;
+    as?: import("react").ElementType;
+    isIconButton?: boolean;
+    ref?: import("react").Ref<HTMLElement>;
+    children?: import("react").ReactNode;
 }, {
     theme: ThemeType;
     $textColor?: string;
     $textSize?: FontSizeType;
     $textFontFamily?: string;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const CollapseContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $contentHeight: string;
     $openStatus: boolean;

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