@cruk/cruk-react-components 5.0.8 → 6.0.1

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

@@ -1,133 +1,2 @@
-import e,{css as o,keyframes as t}from"styled-components";const r="16px",s=()=>t`
-    0% {
-    width: 0px;
-    height: 0px;
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    width: 64px;
-    height: 64px;
-    right: -32px;
-  }
-`,i=()=>t`
-  0% {
-    transform: scale(1);
-    border-radius: 0px;
-
-  }
-  50% {
-    transform:scale(1.025);
-  }
-  100% {
-    transform: scale(1);
-     border-radius: 0px;
-  }
-`,a=e.div`
-  margin-top: ${r};
-`,n=e.div`
-  position: relative;
-  height: ${r};
-  margin-bottom: 0;
-  background-color: ${({theme:{colors:{progressBarBackground:e}}})=>e};
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-
-  ${({$percentage:e,$secondaryPercentage:t})=>(100===e||100===t)&&o`
-      animation: ${i} 0.3s 0.5s 1 ease-out;
-    `}
-`,h=e.div`
-  position: absolute;
-  left: 0;
-  height: ${r};
-  background-color: ${({$barColor:e,$isSecondary:o,theme:t})=>e||o?t.colors.progressBarSecondary:t.colors.progressBar};
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  transition: width 0.6s ease;
-  width: ${({$percentage:e})=>e}%;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 0px;
-    height: 0px;
-    border-radius: 50%;
-    opacity: 0;
-    filter: blur(2px);
-    background-color: ${({$barColor:e,$isSecondary:o,theme:{colors:{progressBar:t,progressBarSecondary:r}}})=>e||o?r:t};
-
-    ${({$percentage:e})=>100===e&&o`
-        animation: ${s} 0.33s 0.75s 3 ease-in;
-      `}
-  }
-`,c=e.span`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-`,d=e.div`
-  position: relative;
-  width: ${({$circleSize:e})=>e};
-  height: ${({$circleSize:e})=>e};
-  background: none;
-  margin: 0 auto;
-  box-shadow: none;
-`,l=e.svg`
-  position: absolute;
-  transform: rotate(-90deg);
-  fill: none;
-  stroke-linecap: round;
-  width: 100%;
-  height: 100%;
-`,p=e.circle`
-  stroke: ${({theme:e})=>e.tokenColors.grey_200};
-`,f=e.circle`
-  stroke: ${({$isSecondary:e,$barColor:o,theme:{colors:{circularProgress:t,circularProgressSecondary:r}}})=>o||e?r:t};
-  animation: ${({$isSecondary:e,strokeDashoffset:o,$strokeDashoffsetInit:r})=>e?(({$strokeDashoffsetInit:e,strokeDashoffset:o})=>t`
-  0% {
-     stroke-dashoffset: ${e} ;
-  }
-  100% {
-     stroke-dashoffset: ${o} ;
-  }
-`)({strokeDashoffset:o,$strokeDashoffsetInit:r}):(({$strokeDashoffsetInit:e,strokeDashoffset:o})=>t`
-  0% {
-     stroke-dashoffset: ${e} ;
-  }
-  50% {
-     stroke-dashoffset: ${o} ;
-  }
-  100% {
-     stroke-dashoffset: ${o} ;
-  }
-`)({strokeDashoffset:o,$strokeDashoffsetInit:r})}
-    1s linear;
-`,g=e.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  z-index: 2;
-  font-size: ${({theme:{fontSizes:{l:e}}})=>e};
-  line-height: ${({theme:{fontSizes:{l:e}}})=>e};
-  text-align: center;
-  height: 100%;
-  color: ${({theme:{colors:{textDark:e}}})=>e};
-`;export{l as CircleSvg,g as CircularValue,d as CircularWrapper,p as EmptyCircle,f as FullCircle,h as LineProgressBar,n as LineProgressBarWrapper,a as ProgressBarWrapper,c as ScreenReaderOnly};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o,keyframes as e}from"styled-components";var r,i,s,a,h,c,d,f,l,p,u,g,b,x,m,k="16px",w=function(){return e(s||(s=n(["\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n"],["\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n"])))},y=function(){return e(a||(a=n(["\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n"],["\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n"])))},v=t.div(h||(h=n(["\n  margin-top: ",";\n"],["\n  margin-top: ",";\n"])),k),$=t.div(d||(d=n(["\n  position: relative;\n  height: ",";\n  margin-bottom: 0;\n  background-color: ",";\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"],["\n  position: relative;\n  height: ",";\n  margin-bottom: 0;\n  background-color: ",";\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"])),k,(function(n){return n.theme.colors.progressBarBackground}),(function(t){var e=t.$percentage,r=t.$secondaryPercentage;return(100===e||100===r)&&o(c||(c=n(["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "],["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "])),y)})),D=t.div(l||(l=n(["\n  position: absolute;\n  left: 0;\n  height: ",";\n  background-color: ",";\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ",'%;\n\n  &::before {\n    content: "";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ',";\n\n    ","\n  }\n"],["\n  position: absolute;\n  left: 0;\n  height: ",";\n  background-color: ",";\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ",'%;\n\n  &::before {\n    content: "";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ',";\n\n    ","\n  }\n"])),k,(function(n){var t=n.$barColor,o=n.$isSecondary,e=n.theme;return t||o?e.colors.progressBarSecondary:e.colors.progressBar}),(function(n){return n.$percentage}),(function(n){var t=n.$barColor,o=n.$isSecondary,e=n.theme.colors,r=e.progressBar,i=e.progressBarSecondary;return t||o?i:r}),(function(t){return 100===t.$percentage&&o(f||(f=n(["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "],["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "])),w)})),S=t.span(p||(p=n(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"],["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"]))),z=t.div(u||(u=n(["\n  position: relative;\n  width: ",";\n  height: ",";\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n"],["\n  position: relative;\n  width: ",";\n  height: ",";\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n"])),(function(n){return n.$circleSize}),(function(n){return n.$circleSize})),B=t.svg(g||(g=n(["\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n"],["\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n"]))),I=t.circle(b||(b=n(["\n  stroke: ",";\n"],["\n  stroke: ",";\n"])),(function(n){return n.theme.tokenColors.grey_200})),C=t.circle(x||(x=n(["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"],["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"])),(function(n){var t=n.$isSecondary,o=n.$barColor,e=n.theme.colors,r=e.circularProgress,i=e.circularProgressSecondary;return o||t?i:r}),(function(t){var o=t.$isSecondary,s=t.strokeDashoffset,a=t.$strokeDashoffsetInit;return o?function(t){var o=t.$strokeDashoffsetInit,r=t.strokeDashoffset;return e(i||(i=n(["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"],["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"])),o,r)}({strokeDashoffset:s,$strokeDashoffsetInit:a}):function(t){var o=t.$strokeDashoffsetInit,i=t.strokeDashoffset;return e(r||(r=n(["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  50% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"],["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  50% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"])),o,i,i)}({strokeDashoffset:s,$strokeDashoffsetInit:a})})),j=t.div(m||(m=n(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ",";\n  line-height: ",";\n  text-align: center;\n  height: 100%;\n  color: ",";\n"],["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ",";\n  line-height: ",";\n  text-align: center;\n  height: 100%;\n  color: ",";\n"])),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.colors.textDark}));export{B as CircleSvg,j as CircularValue,z as CircularWrapper,I as EmptyCircle,C as FullCircle,D as LineProgressBar,$ as LineProgressBarWrapper,v as ProgressBarWrapper,S as ScreenReaderOnly};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","LineBarPulseKeyFrames","ProgressBarWrapper","styled","div","LineProgressBarWrapper","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","LineProgressBar","$barColor","$isSecondary","progressBarSecondary","progressBar","ScreenReaderOnly","span","CircularWrapper","$circleSize","CircleSvg","svg","EmptyCircle","circle","tokenColors","grey_200","FullCircle","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","SecondaryCircleFillKeyFrames","CircleFillKeyFrames","CircularValue","fontSizes","l","textDark"],"mappings":"0DAGA,MAAMA,EAAa,OAkCbC,EAA0B,IAAMC,CAAS;;;;;;;;;;;;;;;EAiBzCC,EAAwB,IAAMD,CAAS;;;;;;;;;;;;;EAehCE,EAAqBC,EAAOC,GAAG;gBAC5BN;EAGHO,EAAyBF,EAAOC,GAI3C;;YAEUN;;sBAEU,EAClBQ,OACEC,QAAUC,6BAERA;;;IAGJ,EAAGC,cAAaC,2BACC,MAAhBD,GAAgD,MAAzBC,IACxBC,CAAG;mBACYV;;EAINW,EAAkBT,EAAOC,GAKpC;;;YAGUN;sBACU,EAAGe,YAAWC,eAAcR,WAC5CO,GAAeC,EACbR,EAAMC,OAAOQ,qBACbT,EAAMC,OAAOS;;;WAGV,EAAGP,iBAAkBA;;;;;;;;;;;;;;;;wBAgBR,EAClBI,YACAC,eACAR,OACEC,QAAUS,cAAaD,4BAEpBF,GAAaC,EAAeC,EAAuBC;;MAExD,EAAGP,iBACa,MAAhBA,GACAE,CAAG;qBACYZ;;;EAKRkB,EAAmBd,EAAOe,IAAI;;;;;;;;;EAW9BC,EAAkBhB,EAAOC,GAGpC;;WAES,EAAGgB,iBAAkBA;YACpB,EAAGA,iBAAkBA;;;;EAMpBC,EAAYlB,EAAOmB,GAAG;;;;;;;EAStBC,EAAcpB,EAAOqB,MAEhC;YACU,EAAGlB,WAAYA,EAAMmB,YAAYC;EAGhCC,EAAaxB,EAAOqB,MAM/B;YACU,EACRV,eACAD,YACAP,OACEC,QAAUqB,mBAAkBC,iCAG9BhB,GAAaC,EAAee,EAA4BD;eAC7C,EAAGd,eAAcgB,mBAAkBC,2BAC5CjB,EA3K+B,GACnCiB,wBACAD,sBACuC9B,CAAS;;0BAExB+B;;;0BAGAD;;EAoKhBE,CAA6B,CAC3BF,mBACAC,0BA7LgB,GAC1BA,wBACAD,sBACuC9B,CAAS;;0BAExB+B;;;0BAGAD;;;0BAGAA;;EAoLhBG,CAAoB,CAAEH,mBAAkBC;;EAIrCG,EAAgB/B,EAAOC,GAElC;;;;;;;;;;;eAWa,EACXE,OACE6B,WAAaC,SAEXA;iBACS,EACb9B,OACE6B,WAAaC,SAEXA;;;WAGG,EACP9B,OACEC,QAAU8B,gBAERA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","$barColor","$isSecondary","progressBarSecondary","progressBar","_b","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","$circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","tokenColors","grey_200","FullCircle","templateObject_14","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15","fontSizes","l","textDark"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = forwardRef(\n  (props: RadioProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, hasError, errorMessage, ...rest } = props;\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={props.hasError || !!props.errorMessage || false}\n          className={props.className}\n          $checked={props.checked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"radio\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!props.errorMessage\n                ? `${props.id}-error`\n                : undefined\n            }\n          />\n          <SelectedBorder />\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check />\n            </CheckWrapper>\n          )}\n          <VerticalAlign>{props.children || props.value}</VerticalAlign>\n        </StyledLabel>\n        {!!props.errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {props.errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","className","$checked","checked","$disabled","disabled","StyledInput","type","id","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop","displayName"],"mappings":"wUAmCa,MAAAA,EAAQC,GACnB,CAACC,EAAmBC,KAClB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EACtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMO,YAAcP,EAAMQ,eAAgB,EACrDO,UAAWf,EAAMe,UACPC,SAAAhB,EAAMiB,UAAW,EAChBC,UAAAlB,EAAMmB,WAAY,GAE7BT,EAAAC,cAACS,EAAW,IACNX,EACJU,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,QACLpB,IAAKA,EAEH,mBAAED,EAAMsB,IAAQtB,EAAMQ,aAClB,GAAGR,EAAMsB,gBACTC,IAGRb,EAAAC,cAACa,EAAiB,MACjBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAACC,cAAAiB,EAAQ,OAGblB,EAACC,cAAAkB,EAAe,KAAA7B,EAAMM,UAAYN,EAAM8B,UAEvC9B,EAAMQ,cACPE,EAACC,cAAAoB,EACC,CAAAC,UAAU,MACVV,GAAItB,EAAMsB,GAAK,GAAGtB,EAAMsB,gBAAaC,GAEpCvB,EAAMQ,cAGG,IAKtBV,EAAMmC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = (props: RadioProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLabel\n        $hasError={props.hasError || !!props.errorMessage || false}\n        className={props.className}\n        $checked={props.checked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"radio\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!props.errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        {theme.utilities.useDefaultFromControls ? null : (\n          <CheckWrapper>\n            <Check />\n          </CheckWrapper>\n        )}\n        <VerticalAlign>{props.children || props.value}</VerticalAlign>\n      </StyledLabel>\n      {!!props.errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {props.errorMessage}\n        </ErrorText>\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Radio;\n"],"names":["Radio","props","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","ref","rest","__rest","React","createElement","ThemeProvider","StyledLabel","$hasError","errorMessage","className","$checked","checked","$disabled","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"uYAiCO,IAAMA,EAAQ,SAACC,GACpB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGsDD,EAA3CM,SAA2CN,EAAKO,SAALP,eAAjB,IAAAQ,EAAiBR,EAAdQ,IAAKC,EAAIC,EAAKV,EAArD,CAAkD,WAAA,WAAA,eAAA,QACxD,OACEW,EAACC,cAAAC,EAAc,CAAAV,MAAOA,GACpBQ,EAAAC,cAACE,EAAW,CAAAC,UACCf,EAAMO,YAAcP,EAAMgB,eAAgB,EACrDC,UAAWjB,EAAMiB,UACPC,SAAAlB,EAAMmB,UAAW,EAChBC,UAAApB,EAAMqB,WAAY,GAE7BV,EAAAC,cAACU,EACKlB,EAAA,CAAA,EAAAK,GACJY,SAAUrB,EAAMqB,WAAY,EAC5BE,KAAK,QACLf,IAAKA,EAEH,mBAAER,EAAMwB,IAAQxB,EAAMgB,aAAe,GAAGS,OAAAzB,EAAMwB,GAAE,eAAWE,KAG/Df,EAAAC,cAACe,EAAiB,MACjBxB,EAAMyB,UAAUC,uBAAyB,KACxClB,gBAACmB,EAAY,KACXnB,EAACC,cAAAmB,EAAQ,OAGbpB,EAACC,cAAAoB,EAAe,KAAAhC,EAAMM,UAAYN,EAAMiC,UAEvCjC,EAAMgB,cACPL,EAACC,cAAAsB,EACC,CAAAC,UAAU,MACVX,GAAIxB,EAAMwB,GAAK,UAAGxB,EAAMwB,GAAE,eAAWE,GAEpC1B,EAAMgB,cAKjB"}

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

@@ -1,126 +1,2 @@
-import o,{css as e}from"styled-components";const i="1.5rem",t="0.75rem",r=o.div`
-  display: inline-block;
-  height: ${i};
-  width: ${i};
-  position: absolute;
-  top: calc(50% - (${i} / 2));
-  left: ${({theme:{spacing:{xs:o}}})=>o};
-`,l=o.span`
-  display: block;
-  position: relative;
-  border: 2px solid ${({theme:o})=>o.colors.selectionBorder};
-  pointer-events: none;
-  border-radius: 100%;
-  height: ${i};
-  width: ${i};
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
-  transition:
-    border 0.25s linear,
-    box-shadow 0.25s linear;
-
-  &:before {
-    display: block;
-    position: absolute;
-    content: "";
-    border-radius: 100%;
-    pointer-events: none;
-    height: ${t};
-    width: ${t};
-    top: calc(50% - (${t} / 2));
-    left: calc(50% - (${t} / 2));
-    margin: auto;
-    background-color: rgba(255, 255, 255, 0);
-    transition: background-color 0.25s linear;
-  }
-`,n=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};
-  width: 100%;
-  position: relative;
-
-  cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
-  display: inline-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}`};
-  vertical-align: middle;
-
-  ${({theme:o,$disabled:i,$checked:t,$hasError:n})=>o.utilities.useDefaultFromControls?null:e`
-          min-height: 2rem;
-
-          ${r} ${l} {
-            border: solid 2px
-              ${i?o.colors.disabled:n?o.colors.danger:t?o.colors.check:o.colors.inputBorder};
-            &:before {
-              background-color: ${t?o.colors.check:"rgba(255, 255, 255, 0)"};
-            }
-          }
-
-          &:hover ${r} ${l} {
-            border: solid 2px
-              ${i?o.colors.disabled:o.colors.check};
-          }
-        `}
-`,s=o.span`
-  display: inline;
-  vertical-align: middle;
-  line-height: 100%;
-  background-color: ${({theme:o})=>o.colors.backgroundLight};
-  min-height: 2em;
-  z-index: 1;
-`,a=o.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  z-index: 0;
-`,d=o.input`
-  *,
-  *:after,
-  *:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  margin-right: ${({theme:{spacing:{xxs:o}}})=>o};
-
-  ${({theme:o,disabled:i})=>o.utilities.useDefaultFromControls?e`
-          position: absolute;
-          display: inline-block;
-          transform: translate(-50%, -50%);
-          top: 50%;
-          margin: 0;
-          padding: 0;
-          left: ${o.spacing.s};
-        `:e`
-          position: absolute;
-          left: ${o.spacing.xxs};
-          opacity: 0;
-
-          &:focus ~ ${a} {
-            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 ~ ${r} ${l}::before {
-            background: ${i?o.colors.disabled:o.colors.check};
-          }
-        `}
-`;export{l as Check,r as CheckWrapper,a as SelectedBorder,d as StyledInput,n as StyledLabel,s as VerticalAlign};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var i,t,r,l,a,s,c,d,b,h="1.5rem",p="0.75rem",g=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"])),h,h,h,(function(n){return n.theme.spacing.xs})),u=o.span(t||(t=n(["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  pointer-events: none;\n  border-radius: 100%;\n  height: ",";\n  width: ",';\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ',";\n    width: ",";\n    top: calc(50% - ("," / 2));\n    left: calc(50% - ("," / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n"],["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  pointer-events: none;\n  border-radius: 100%;\n  height: ",";\n  width: ",';\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ',";\n    width: ",";\n    top: calc(50% - ("," / 2));\n    left: calc(50% - ("," / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n"])),(function(n){return n.theme.colors.selectionBorder}),h,h,p,p,p,p),f=o.label(l||(l=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  width: 100%;\n  position: relative;\n\n  cursor: ",";\n  display: inline-block;\n\n  color: ",";\n  padding: ",";\n  vertical-align: middle;\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  width: 100%;\n  position: relative;\n\n  cursor: ",";\n  display: inline-block;\n\n  color: ",";\n  padding: ",";\n  vertical-align: middle;\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)}),(function(o){var i=o.theme,t=o.$disabled,l=o.$checked,a=o.$hasError;return i.utilities.useDefaultFromControls?null:e(r||(r=n(["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid 2px\n              ",";\n            &:before {\n              background-color: ",";\n            }\n          }\n\n          &:hover "," "," {\n            border: solid 2px\n              ",";\n          }\n        "],["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid 2px\n              ",";\n            &:before {\n              background-color: ",";\n            }\n          }\n\n          &:hover "," "," {\n            border: solid 2px\n              ",";\n          }\n        "])),g,u,t?i.colors.disabled:a?i.colors.danger:l?i.colors.check:i.colors.inputBorder,l?i.colors.check:"rgba(255, 255, 255, 0)",g,u,t?i.colors.disabled:i.colors.check)})),m=o.span(a||(a=n(["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ",";\n  min-height: 2em;\n  z-index: 1;\n"],["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ",";\n  min-height: 2em;\n  z-index: 1;\n"])),(function(n){return n.theme.colors.backgroundLight})),x=o.div(s||(s=n(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"]))),k=o.input(b||(b=n(["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ",";\n\n  ","\n"],["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ",";\n\n  ","\n"])),(function(n){return n.theme.spacing.xxs}),(function(o){var i=o.theme,t=o.disabled;return i.utilities.useDefaultFromControls?e(c||(c=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):e(d||(d=n(["\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 ~ "," ","::before {\n            background: ",";\n          }\n        "],["\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 ~ "," ","::before {\n            background: ",";\n          }\n        "])),i.spacing.xxs,x,i.colors.inputBorder,g,u,t?i.colors.disabled:i.colors.check)}));export{u as Check,g as CheckWrapper,x as SelectedBorder,k as StyledInput,f as StyledLabel,m as VerticalAlign};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  position: absolute;\n  top: calc(50% - (${RADIO_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  pointer-events: none;\n  border-radius: 100%;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ${RADIO_INNER_SIZE};\n    width: ${RADIO_INNER_SIZE};\n    top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: 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  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-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  vertical-align: middle;\n\n  ${({ theme, $disabled: isDisabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n            &:before {\n              background-color: ${$checked\n                ? theme.colors.check\n                : `rgba(255, 255, 255, 0)`};\n            }\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled ? theme.colors.disabled : theme.colors.check};\n          }\n        `}\n`;\n\nexport const VerticalAlign = styled.span<{\n  theme: ThemeType;\n}>`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n\n  ${({ theme, disabled }) =>\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          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} ${Check}::before {\n            background: ${disabled\n              ? theme.colors.disabled\n              : theme.colors.check};\n          }\n        `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_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","isDisabled","$checked","$hasError","useDefaultFromControls","css","danger","check","inputBorder","VerticalAlign","SelectedBorder","StyledInput","input","xxs","s"],"mappings":"2CAGA,MAAMA,EAAa,SACbC,EAAmB,UAGZC,EAAeC,EAAOC,GAEjC;;YAEUJ;WACDA;;qBAEUA;UACX,EACNK,OACEC,SAAWC,UAETA;EAGKC,EAAQL,EAAOM,IAE1B;;;sBAGoB,EAAGJ,WAAYA,EAAMK,OAAOC;;;YAGtCX;WACDA;;;;;;;;;;;;;;;;cAgBGC;aACDA;uBACUA;wBACCA;;;;;EAOXW,EAAcT,EAAOU,KAKhC;;;;;;;iBAOe,EAAGR,WAAYA,EAAMS,WAAWC;eAClC,EAAGV,WAAYA,EAAMS,WAAWE;iBAC9B,EAAGX,WAAYA,EAAMS,WAAWG;;sBAE3B,EAAGZ,WAAYA,EAAMK,OAAOQ;;;;YAItC,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;;;IAG9P,EAAGpB,QAAOc,UAAWO,EAAYC,WAAUC,eAC3CvB,EAAMiB,UAAUO,uBACZ,KACAC,CAAG;;;YAGC5B,KAAgBM;;gBAEZkB,EACErB,EAAMK,OAAOU,SACbQ,EACEvB,EAAMK,OAAOqB,OACbJ,EACEtB,EAAMK,OAAOsB,MACb3B,EAAMK,OAAOuB;;kCAEDN,EAChBtB,EAAMK,OAAOsB,MACb;;;;oBAIE9B,KAAgBM;;gBAEpBkB,EAAarB,EAAMK,OAAOU,SAAWf,EAAMK,OAAOsB;;;EAKrDE,EAAgB/B,EAAOM,IAElC;;;;sBAIoB,EAAGJ,WAAYA,EAAMK,OAAOQ;;;EAKrCiB,EAAiBhC,EAAOC,GAAG;;;;;;;;EAU3BgC,EAAcjC,EAAOkC,KAGhC;;;;;;;;kBAQgB,EACdhC,OACEC,SAAWgC,WAETA;;IAEJ,EAAGjC,QAAOe,cACVf,EAAMiB,UAAUO,uBACZC,CAAG;;;;;;;kBAOOzB,EAAMC,QAAQiC;UAExBT,CAAG;;kBAEOzB,EAAMC,QAAQgC;;;sBAGVH;;0CAEoB9B,EAAMK,OAAOuB;;;;wBAI/B/B,KAAgBM;0BACdY,EACVf,EAAMK,OAAOU,SACbf,EAAMK,OAAOsB;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  position: absolute;\n  top: calc(50% - (${RADIO_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  pointer-events: none;\n  border-radius: 100%;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ${RADIO_INNER_SIZE};\n    width: ${RADIO_INNER_SIZE};\n    top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: 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  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-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  vertical-align: middle;\n\n  ${({ theme, $disabled: isDisabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n            &:before {\n              background-color: ${$checked\n                ? theme.colors.check\n                : `rgba(255, 255, 255, 0)`};\n            }\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled ? theme.colors.disabled : theme.colors.check};\n          }\n        `}\n`;\n\nexport const VerticalAlign = styled.span<{\n  theme: ThemeType;\n}>`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n\n  ${({ theme, disabled }) =>\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          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} ${Check}::before {\n            background: ${disabled\n              ? theme.colors.disabled\n              : theme.colors.check};\n          }\n        `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_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","isDisabled","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s","templateObject_8"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t,ThemeProvider as n}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{StyledFieldSet as l,StyledLegend as m,StyledRadio as a}from"./styles.js";function o(o){const u=t(),c={...r,...u},{legend:s,attributes:i,onChange:p,selectedValue:f="",name:h}=o;return e.createElement(n,{theme:c},e.createElement(l,null,e.createElement(m,null,s),i.map((t=>e.createElement(a,{$numberOfAttributes:i.length||0,key:t.value,checked:f===t.value,onChange:p,name:h,value:t.value},t.option)))))}export{o as RadioConsent,o as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{StyledFieldSet as m,StyledLegend as o,StyledRadio as a}from"./styles.js";function u(u){var s=n(),i=e(e({},l),s),c=u.legend,f=u.attributes,p=u.onChange,d=u.selectedValue,h=void 0===d?"":d,v=u.name;return t.createElement(r,{theme:i},t.createElement(m,null,t.createElement(o,null,c),f.map((function(e){return t.createElement(a,{$numberOfAttributes:f.length||0,key:e.value,checked:h===e.value,onChange:p,name:v,value:e.value},e.option)}))))}export{u as RadioConsent,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledFieldSet, StyledLegend, StyledRadio } from \"./styles\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\nexport type RadioConsentProps = {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldSet>\n        <StyledLegend>{legend}</StyledLegend>\n        {attributes.map((item: Attribute) => (\n          <StyledRadio\n            $numberOfAttributes={attributes.length || 0}\n            key={item.value}\n            checked={selectedValue === item.value}\n            onChange={onChange}\n            name={name}\n            value={item.value}\n          >\n            {item.option}\n          </StyledRadio>\n        ))}\n      </StyledFieldSet>\n    </ThemeProvider>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","foundTheme","useTheme","theme","defaultTheme","legend","attributes","onChange","selectedValue","name","React","createElement","ThemeProvider","StyledFieldSet","StyledLegend","map","item","StyledRadio","$numberOfAttributes","length","key","value","checked","option"],"mappings":"sNA+BM,SAAUA,EAAaC,GAC3B,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,OAAEA,EAAMC,WAAEA,EAAUC,SAAEA,EAAQC,cAAEA,EAAgB,GAAEC,KAAEA,GAAST,EAEnE,OACEU,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAAAC,cAACE,EAAc,KACbH,EAACC,cAAAG,EAAc,KAAAT,GACdC,EAAWS,KAAKC,GACfN,EAAAC,cAACM,EAAW,CAAAC,oBACWZ,EAAWa,QAAU,EAC1CC,IAAKJ,EAAKK,MACVC,QAASd,IAAkBQ,EAAKK,MAChCd,SAAUA,EACVE,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,WAMlB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledFieldSet, StyledLegend, StyledRadio } from \"./styles\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\nexport type RadioConsentProps = {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldSet>\n        <StyledLegend>{legend}</StyledLegend>\n        {attributes.map((item: Attribute) => (\n          <StyledRadio\n            $numberOfAttributes={attributes.length || 0}\n            key={item.value}\n            checked={selectedValue === item.value}\n            onChange={onChange}\n            name={name}\n            value={item.value}\n          >\n            {item.option}\n          </StyledRadio>\n        ))}\n      </StyledFieldSet>\n    </ThemeProvider>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","foundTheme","useTheme","theme","__assign","defaultTheme","legend","attributes","onChange","_a","selectedValue","undefined","name","React","createElement","ThemeProvider","StyledFieldSet","StyledLegend","map","item","StyledRadio","$numberOfAttributes","length","key","value","checked","option"],"mappings":"0RA+BM,SAAUA,EAAaC,GAC3B,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAEGK,EAA2DN,EAAKM,OAAxDC,EAAmDP,EAAzCO,WAAEC,EAAuCR,EAAKQ,SAAlCC,EAA6BT,EAAKU,cAAlCA,OAAgBC,IAAAF,EAAA,GAAEA,EAAEG,EAASZ,EAAKY,KAExE,OACEC,EAACC,cAAAC,EAAc,CAAAZ,MAAOA,GACpBU,EAAAC,cAACE,EAAc,KACbH,EAACC,cAAAG,EAAc,KAAAX,GACdC,EAAWW,KAAI,SAACC,GAAoB,OACnCN,EAAAC,cAACM,EAAW,CAAAC,oBACWd,EAAWe,QAAU,EAC1CC,IAAKJ,EAAKK,MACVC,QAASf,IAAkBS,EAAKK,MAChChB,SAAUA,EACVI,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,OAET,KAIT"}

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

@@ -1,27 +1,2 @@
-import e from"styled-components";import{Radio as t}from"../Radio/index.js";const i=e(t)`
-  display: block;
-  float: left;
-  text-align: left;
-  margin-left: ${({theme:e})=>e.spacing.s};
-  max-width: ${"5em"};
-  width: ${({$numberOfAttributes:e,theme:t})=>`calc(((100% - 20%) / ${e}) - ${t.spacing.s})`};
-`,o=e.legend`
-  width: ${"20%"};
-  display: block;
-  float: left;
-  font-family: ${({theme:e})=>e.typography.fontFamilyBase};
-`,a=e.fieldset`
-  box-sizing: border-box;
-  *,
-  *:after,
-  *:before {
-    box-sizing: border-box;
-  }
-  display: block;
-  position: relative;
-  border: none;
-  padding: 0;
-  margin: 0 0 ${({theme:e})=>e.spacing.s} 0;
-  width: 100%;
-`;export{a as StyledFieldSet,o as StyledLegend,i as StyledRadio};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Radio as e}from"../Radio/index.js";var i,o,r,a=t(e)(i||(i=n(["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"],["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"])),(function(n){return n.theme.spacing.s}),"5em",(function(n){var t=n.$numberOfAttributes,e=n.theme;return"calc(((100% - ".concat("20%",") / ").concat(t,") - ").concat(e.spacing.s,")")})),l=t.legend(o||(o=n(["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"],["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"])),"20%",(function(n){return n.theme.typography.fontFamilyBase})),d=t.fieldset(r||(r=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"])),(function(n){return n.theme.spacing.s}));export{d as StyledFieldSet,l as StyledLegend,a as StyledRadio};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport RadioInput from \"../Radio\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst LEGEND_WIDTH = \"20%\";\nconst MAX_WIDTH = \"5em\";\n\ntype StyleRadioWidthProp = { $numberOfAttributes: number; theme: ThemeType };\n\nexport const StyledRadio = styled(RadioInput)<StyleRadioWidthProp>`\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ${({ theme }) => theme.spacing.s};\n  max-width: ${MAX_WIDTH};\n  width: ${({ $numberOfAttributes, theme }) =>\n    `calc(((100% - ${LEGEND_WIDTH}) / ${$numberOfAttributes}) - ${theme.spacing.s})`};\n`;\n\nexport const StyledLegend = styled.legend<{\n  theme: ThemeType;\n}>`\n  width: ${LEGEND_WIDTH};\n  display: block;\n  float: left;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n  width: 100%;\n`;\n"],"names":["StyledRadio","styled","RadioInput","theme","spacing","s","$numberOfAttributes","StyledLegend","legend","typography","fontFamilyBase","StyledFieldSet","fieldset"],"mappings":"2EAMA,MAKaA,EAAcC,EAAOC,EAAgC;;;;iBAIjD,EAAGC,WAAYA,EAAMC,QAAQC;eAR5B;WAUP,EAAGC,sBAAqBH,WAC/B,wBAAoCG,QAA0BH,EAAMC,QAAQC;EAGnEE,EAAeN,EAAOO,MAEjC;WAjBmB;;;iBAqBJ,EAAGL,WAAYA,EAAMM,WAAWC;EAGpCC,EAAiBV,EAAOW,QAEnC;;;;;;;;;;;gBAWc,EAAGT,WAAYA,EAAMC,QAAQC;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport RadioInput from \"../Radio\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst LEGEND_WIDTH = \"20%\";\nconst MAX_WIDTH = \"5em\";\n\ntype StyleRadioWidthProp = { $numberOfAttributes: number; theme: ThemeType };\n\nexport const StyledRadio = styled(RadioInput)<StyleRadioWidthProp>`\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ${({ theme }) => theme.spacing.s};\n  max-width: ${MAX_WIDTH};\n  width: ${({ $numberOfAttributes, theme }) =>\n    `calc(((100% - ${LEGEND_WIDTH}) / ${$numberOfAttributes}) - ${theme.spacing.s})`};\n`;\n\nexport const StyledLegend = styled.legend<{\n  theme: ThemeType;\n}>`\n  width: ${LEGEND_WIDTH};\n  display: block;\n  float: left;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n  width: 100%;\n`;\n"],"names":["StyledRadio","styled","RadioInput","templateObject_1","__makeTemplateObject","_a","theme","spacing","s","$numberOfAttributes","concat","StyledLegend","legend","templateObject_2","typography","fontFamilyBase","StyledFieldSet","fieldset","templateObject_3"],"mappings":"2JAMA,UAKaA,EAAcC,EAAOC,EAAPD,CAAkBE,IAAAA,EAAAC,EAAA,CAAA,4EAAA,mBAAA,eAAA,OAAA,CAAqB,4EAInB,mBACvB,eAE4D,UAHnE,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,GARd,OAUP,SAACH,OAAEI,EAAmBJ,EAAAI,oBAAEH,EAAKD,EAAAC,MACpC,MAAA,iBAAAI,OAZiB,MAYY,QAAAA,OAAOD,EAAmB,QAAAC,OAAOJ,EAAMC,QAAQC,EAAI,IAAhF,IAGSG,EAAeV,EAAOW,OAAMC,IAAAA,EAAAT,EAAA,CAAA,cAAA,wDAAA,OAAA,CAEvC,cACqB,wDAGwC,SArB1C,OAqBJ,SAACC,GAAc,OAAPA,EAAAC,MAAaQ,WAAWC,cAAjB,IAGnBC,EAAiBf,EAAOgB,SAAQC,IAAAA,EAAAd,EAAA,CAAA,0LAAA,yBAAA,CAE3C,0LAW4C,4BAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = forwardRef(\n  (\n    {\n      errorMessage,\n      hasError,\n      required,\n      label,\n      hintText,\n      hideRequiredInLabel,\n      ...props\n    }: SelectProps,\n    ref?: Ref<HTMLSelectElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    return (\n      <LabelWrapper\n        label={label}\n        hintText={hintText}\n        required={(!hideRequiredInLabel && required) || false}\n      >\n        <StyledSelect\n          {...props}\n          ref={ref}\n          theme={theme}\n          required={required}\n          aria-invalid={hasError || !!errorMessage || false}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          $hasError={hasError || !!errorMessage || false}\n        />\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </LabelWrapper>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"],"names":["Select","forwardRef","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","props","ref","foundTheme","useTheme","theme","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","undefined","$hasError","ErrorText","marginTop","displayName"],"mappings":"yQAkCa,MAAAA,EAASC,GACpB,EAEIC,eACAC,WACAC,WACAC,QACAC,WACAC,yBACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,gBAACC,EAAY,CACXV,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDU,EAACE,cAAAC,EACK,IAAAT,EACJC,IAAKA,EACLG,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CM,EAAMU,IAAQhB,EAAe,GAAGM,EAAMU,gBAAaC,EAE5CC,UAAAjB,KAAcD,IAAgB,MAExCA,GACDY,gBAACO,EAAS,CACRC,UAAU,MACVJ,GAAIV,EAAMU,GAAK,GAAGV,EAAMU,gBAAaC,GAEpCjB,GAGQ,IAKrBF,EAAOuB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        theme={theme}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"wUAgCO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAAmBN,EAAAM,oBACnBC,QACGC,EARkBC,EAAAT,EAAA,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,sBAAA,QAUfU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXZ,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDY,EAACE,cAAAC,EACKL,EAAA,CAAA,EAAAL,EACJ,CAAAD,IAAKA,EACLK,MAAOA,EACPT,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMW,IAAQlB,EAAe,GAAGmB,OAAAZ,EAAMW,kBAAaE,EAE5CC,UAAApB,KAAcD,IAAgB,OAExCA,GACDc,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAGC,OAAAZ,EAAMW,kBAAaE,GAEpCpB,GAKX"}

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

@@ -1,42 +1,2 @@
-import e,{css as o}from"styled-components";const r="3rem",t=e.select`
-  appearance: none;
-  background: linear-gradient(
-      45deg,
-      ${({theme:e})=>e.colors.backgroundLight} 50%,
-      ${({theme:e})=>e.colors.selectBackground} 50%
-    ),
-    linear-gradient(
-      135deg,
-      ${({theme:e})=>e.colors.selectBackground} 50%,
-      ${({theme:e})=>e.colors.backgroundLight} 50%
-    );
-  background-color: ${({theme:e})=>e.colors.backgroundLight};
-  background-position:
-    calc(100% - 16px) 50%,
-    calc(100% - 10px) 50%;
-  background-size: 6px 6px;
-  background-repeat: no-repeat;
-  border: ${({theme:e,$hasError:o,$errorMessage:r})=>`solid ${e.utilities.inputBorderWidth} ${o||r?e.colors.textError:e.colors.textInputBorder}`};
-  color: ${({theme:e})=>e.colors.textDark};
-  display: block;
-  font-size: ${({theme:e})=>e.fontSizes.m};
-  min-height: ${r};
-  padding: ${({theme:e})=>`calc( (${r} - ( ${e.utilities.inputBorderWidth} * 2) - ${e.typography.lineHeight} ) / 2) ${e.spacing.m} calc( (${r} - ( ${e.utilities.inputBorderWidth} * 2) - ${e.typography.lineHeight} ) / 2) ${e.spacing.xs}`};
-  width: 100%;
-  transition: border-color 150ms linear;
-  &:hover {
-    border-color: ${({theme:e})=>e.colors.secondary};
-  }
-  &:disabled {
-    border-color: ${({theme:e})=>e.colors.disabled};
-    color: ${({theme:e})=>e.colors.disabled};
-  }
-
-  ${({theme:e})=>e.utilities.useDefaultFocusRect?null:o`
-          &:focus {
-            outline: 0;
-            border-color: ${e.colors.tertiary};
-          }
-        `};
-`;export{t as StyledSelect,t as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,c="3rem",i=o.select(t||(t=n(["\n  appearance: none;\n  background: linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"],["\n  appearance: none;\n  background: linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.$hasError,e=n.$errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(r||e?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),c,(function(n){var o=n.theme;return"calc( (".concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "],["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "])),t.colors.tertiary)}));export{i as StyledSelect,i as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n  $hasError: boolean;\n  $errorMessage?: string;\n  theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n  appearance: none;\n  background: linear-gradient(\n      45deg,\n      ${({ theme }) => theme.colors.backgroundLight} 50%,\n      ${({ theme }) => theme.colors.selectBackground} 50%\n    ),\n    linear-gradient(\n      135deg,\n      ${({ theme }) => theme.colors.selectBackground} 50%,\n      ${({ theme }) => theme.colors.backgroundLight} 50%\n    );\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ${({ theme, $hasError, $errorMessage }) =>\n    `solid ${theme.utilities.inputBorderWidth} ${\n      $hasError || $errorMessage\n        ? theme.colors.textError\n        : theme.colors.textInputBorder\n    }`};\n  color: ${({ theme }) => theme.colors.textDark};\n  display: block;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  min-height: ${BUTTON_HEIGHT};\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.xs}`};\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.secondary};\n  }\n  &:disabled {\n    border-color: ${({ theme }) => theme.colors.disabled};\n    color: ${({ theme }) => theme.colors.disabled};\n  }\n\n  ${({ theme }) =>\n    !theme.utilities.useDefaultFocusRect\n      ? css`\n          &:focus {\n            outline: 0;\n            border-color: ${theme.colors.tertiary};\n          }\n        `\n      : null};\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","tertiary"],"mappings":"2CAIA,MAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,MAAyB;;;;QAI7C,EAAGC,WAAYA,EAAMC,OAAOC;QAC5B,EAAGF,WAAYA,EAAMC,OAAOE;;;;QAI5B,EAAGH,WAAYA,EAAMC,OAAOE;QAC5B,EAAGH,WAAYA,EAAMC,OAAOC;;sBAEd,EAAGF,WAAYA,EAAMC,OAAOC;;;;;;YAMtC,EAAGF,QAAOI,YAAWC,mBAC7B,SAASL,EAAMM,UAAUC,oBACvBH,GAAaC,EACTL,EAAMC,OAAOO,UACbR,EAAMC,OAAOQ;WAEZ,EAAGT,WAAYA,EAAMC,OAAOS;;eAExB,EAAGV,WAAYA,EAAMW,UAAUC;gBAC9BhB;aACH,EAAGI,WACZ,UAAUJ,SAAqBI,EAAMM,UAAUC,2BAA2BP,EAAMa,WAAWC,qBAAqBd,EAAMe,QAAQH,YAAYhB,SAAqBI,EAAMM,UAAUC,2BAA2BP,EAAMa,WAAWC,qBAAqBd,EAAMe,QAAQC;;;;oBAI9O,EAAGhB,WAAYA,EAAMC,OAAOgB;;;oBAG5B,EAAGjB,WAAYA,EAAMC,OAAOiB;aACnC,EAAGlB,WAAYA,EAAMC,OAAOiB;;;IAGrC,EAAGlB,WACFA,EAAMM,UAAUa,oBAOb,KANAC,CAAG;;;4BAGiBpB,EAAMC,OAAOoB;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n  $hasError: boolean;\n  $errorMessage?: string;\n  theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n  appearance: none;\n  background: linear-gradient(\n      45deg,\n      ${({ theme }) => theme.colors.backgroundLight} 50%,\n      ${({ theme }) => theme.colors.selectBackground} 50%\n    ),\n    linear-gradient(\n      135deg,\n      ${({ theme }) => theme.colors.selectBackground} 50%,\n      ${({ theme }) => theme.colors.backgroundLight} 50%\n    );\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ${({ theme, $hasError, $errorMessage }) =>\n    `solid ${theme.utilities.inputBorderWidth} ${\n      $hasError || $errorMessage\n        ? theme.colors.textError\n        : theme.colors.textInputBorder\n    }`};\n  color: ${({ theme }) => theme.colors.textDark};\n  display: block;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  min-height: ${BUTTON_HEIGHT};\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.xs}`};\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.secondary};\n  }\n  &:disabled {\n    border-color: ${({ theme }) => theme.colors.disabled};\n    color: ${({ theme }) => theme.colors.disabled};\n  }\n\n  ${({ theme }) =>\n    !theme.utilities.useDefaultFocusRect\n      ? css`\n          &:focus {\n            outline: 0;\n            border-color: ${theme.colors.tertiary};\n          }\n        `\n      : null};\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","_a","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","templateObject_1","__makeTemplateObject","tertiary"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,2oBAAyB,8EAIF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,UA5CJ,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IAIf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IACf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAED,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAMzB,SAACH,GAAE,IAAAC,UAAOI,EAASL,EAAAK,UAAEC,EAAaN,EAAAM,cAC1C,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAaC,EACTL,EAAMC,OAAOQ,UACbT,EAAMC,OAAOS,gBAHnB,IAKO,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,IAEX,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,GACdlB,GACH,SAACI,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUL,EAAa,SAAAW,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,EAAY,YAAAP,OAAAX,kBAAqBK,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,WAAqB,YAAAT,OAAAN,EAAMgB,QAAQC,GAA9P,IAIgB,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,IAGf,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IACtB,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IAGxB,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBvB,EAAMC,OAAOuB,SAJrC"}