@cruk/cruk-react-components 5.0.8 → 6.0.1

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

@@ -1,109 +1,2 @@
-import o,{css as r}from"styled-components";const t="3rem",e="4rem",n=o.span`
-  margin-left: ${({theme:o})=>o.spacing.xxs};
-  &:first-of-type {
-    margin-left: 0;
-  }
-`,a=o.button`
-  box-sizing: border-box;
-  min-height: ${t};
-  height: min-content;
-  display: inline-block;
-  vertical-align: middle;
-
-  padding: ${({theme:o,$isIconButton:r})=>r?"0":`calc( (${t} - ( ${o.button.buttonBorderThickness} * 2) - ${o.typography.lineHeight} ) / 2) ${o.button.horizontalPadding}`};
-  width: ${({$isIconButton:o})=>o?`${t}`:"auto"};
-  min-width: ${({$isIconButton:o})=>o?`${t}`:"auto"};
-
-  border-radius: ${({theme:o})=>o.button.borderRadius};
-  border-style: solid;
-  border-width: ${({theme:o})=>o.button.buttonBorderThickness};
-
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease;
-
-  cursor: pointer;
-  font-size: ${({theme:{fontSizes:{m:o}}})=>o};
-  font-family: ${({theme:{typography:{fontFamilyButtons:o}}})=>o};
-  font-weight: ${({theme:{typography:{fontWeightButtons:o}}})=>o};
-  text-align: center;
-  text-transform: ${({theme:o})=>o.button.textTransform};
-  text-decoration: ${({theme:o})=>o.button.textDecoration};
-
-  &:focus-visible {
-    outline: auto;
-  }
-
-  ${o=>"primary"===o.$appearance&&r`
-      background-color: ${o.theme.colors.buttonPrimaryBackground};
-      border-color: ${o.theme.colors.buttonPrimaryBorder};
-      color: ${o.theme.colors.buttonPrimaryText} !important;
-      &:focus,
-      &:hover {
-        background-color: ${o.theme.colors.buttonPrimaryBackgroundHover};
-        border-color: ${o.theme.colors.buttonPrimaryBorderHover};
-        color: ${o.theme.colors.buttonPrimaryTextHover} !important;
-      }
-      &:disabled {
-        cursor: not-allowed;
-        background-color: ${o.theme.colors.buttonPrimaryDisabledBackground};
-        color: ${o.theme.colors.buttonPrimaryDisabledText} !important;
-        border-color: ${o.theme.colors.buttonPrimaryDisabledBorder};
-      }
-    `}
-
-  ${o=>"secondary"===o.$appearance&&r`
-      background-color: ${o.theme.colors.buttonSecondaryBackground};
-      border-color: ${o.theme.colors.buttonSecondaryBorder};
-      color: ${o.theme.colors.buttonSecondaryText} !important;
-      &:focus,
-      &:hover {
-        background-color: ${o.theme.colors.buttonSecondaryBackgroundHover};
-        border-color: ${o.theme.colors.buttonSecondaryBorderHover};
-        color: ${o.theme.colors.buttonSecondaryTextHover} !important;
-      }
-      &:disabled {
-        cursor: not-allowed;
-        background-color: ${o.theme.colors.buttonSecondaryDisabledBackground};
-        color: ${o.theme.colors.buttonSecondaryDisabledText} !important;
-        border-color: ${o.theme.colors.buttonSecondaryDisabledBorder};
-      }
-    `}
-
-  ${o=>"tertiary"===o.$appearance&&r`
-      display: inline-block;
-      padding: 0;
-      border: 0px;
-      background-color: rgba(255, 255, 255, 0);
-      transition: color 0.2s ease;
-      color: ${o.theme.colors.buttonTertiaryText};
-      &:focus,
-      &:hover {
-        color: ${o.theme.colors.buttonTertiaryTextHover};
-      }
-      &:disabled {
-        cursor: not-allowed;
-        background-color: transparent;
-        color: ${o.theme.colors.buttonTertiaryDisabledText} !important;
-        border-color: transparent;
-      }
-    `}
-  
-  ${({theme:o,$size:t,$isIconButton:n})=>"l"===t&&r`
-      min-height: ${e};
-      border-radius: ${o.button.borderRadiusLarge};
-      padding: ${n?"0":`calc( (${e} - ( ${o.button.buttonBorderThickness} * 2) - ${o.typography.lineHeight} ) / 2) ${o.spacing.m}`};
-      min-width: ${n?`${e}`:"auto"};
-      height: ${n?`${e}`:"min-content"};
-    `}
-
-  ${o=>o.$full&&r`
-      width: 100%;
-    `}
-
-  ${o=>o.$css&&r`
-      ${o.$css}
-    `}
-`;export{n as Spacer,a as StyledButton};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var t,e,c,a,i,l,d,s,u="3rem",b="4rem",m=o.span(t||(t=n(["\n  margin-left: ",";\n  &:first-of-type {\n    margin-left: 0;\n  }\n"],["\n  margin-left: ",";\n  &:first-of-type {\n    margin-left: 0;\n  }\n"])),(function(n){return n.theme.spacing.xxs})),h=o.button(s||(s=n(["\n  box-sizing: border-box;\n  min-height: ",";\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ",";\n  width: ",";\n  min-width: ",";\n\n  border-radius: ",";\n  border-style: solid;\n  border-width: ",";\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ",";\n  font-family: ",";\n  font-weight: ",";\n  text-align: center;\n  text-transform: ",";\n  text-decoration: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n  \n  ","\n\n  ","\n\n  ","\n"],["\n  box-sizing: border-box;\n  min-height: ",";\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ",";\n  width: ",";\n  min-width: ",";\n\n  border-radius: ",";\n  border-style: solid;\n  border-width: ",";\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ",";\n  font-family: ",";\n  font-weight: ",";\n  text-align: center;\n  text-transform: ",";\n  text-decoration: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n  \n  ","\n\n  ","\n\n  ","\n"])),u,(function(n){var o=n.theme;return n.$isIconButton?"0":"calc( (".concat(u," - ( ").concat(o.button.buttonBorderThickness," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.button.horizontalPadding)}),(function(n){return n.$isIconButton?"".concat(u):"auto"}),(function(n){return n.$isIconButton?"".concat(u):"auto"}),(function(n){return n.theme.button.borderRadius}),(function(n){return n.theme.button.buttonBorderThickness}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.fontFamilyButtons}),(function(n){return n.theme.typography.fontWeightButtons}),(function(n){return n.theme.button.textTransform}),(function(n){return n.theme.button.textDecoration}),(function(o){return"primary"===o.$appearance&&r(e||(e=n(["\n      background-color: ",";\n      border-color: ",";\n      color: "," !important;\n      &:focus,\n      &:hover {\n        background-color: ",";\n        border-color: ",";\n        color: "," !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ",";\n        color: "," !important;\n        border-color: ",";\n      }\n    "],["\n      background-color: ",";\n      border-color: ",";\n      color: "," !important;\n      &:focus,\n      &:hover {\n        background-color: ",";\n        border-color: ",";\n        color: "," !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ",";\n        color: "," !important;\n        border-color: ",";\n      }\n    "])),o.theme.colors.buttonPrimaryBackground,o.theme.colors.buttonPrimaryBorder,o.theme.colors.buttonPrimaryText,o.theme.colors.buttonPrimaryBackgroundHover,o.theme.colors.buttonPrimaryBorderHover,o.theme.colors.buttonPrimaryTextHover,o.theme.colors.buttonPrimaryDisabledBackground,o.theme.colors.buttonPrimaryDisabledText,o.theme.colors.buttonPrimaryDisabledBorder)}),(function(o){return"secondary"===o.$appearance&&r(c||(c=n(["\n      background-color: ",";\n      border-color: ",";\n      color: "," !important;\n      &:focus,\n      &:hover {\n        background-color: ",";\n        border-color: ",";\n        color: "," !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ",";\n        color: "," !important;\n        border-color: ",";\n      }\n    "],["\n      background-color: ",";\n      border-color: ",";\n      color: "," !important;\n      &:focus,\n      &:hover {\n        background-color: ",";\n        border-color: ",";\n        color: "," !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ",";\n        color: "," !important;\n        border-color: ",";\n      }\n    "])),o.theme.colors.buttonSecondaryBackground,o.theme.colors.buttonSecondaryBorder,o.theme.colors.buttonSecondaryText,o.theme.colors.buttonSecondaryBackgroundHover,o.theme.colors.buttonSecondaryBorderHover,o.theme.colors.buttonSecondaryTextHover,o.theme.colors.buttonSecondaryDisabledBackground,o.theme.colors.buttonSecondaryDisabledText,o.theme.colors.buttonSecondaryDisabledBorder)}),(function(o){return"tertiary"===o.$appearance&&r(a||(a=n(["\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ",";\n      &:focus,\n      &:hover {\n        color: ",";\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: "," !important;\n        border-color: transparent;\n      }\n    "],["\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ",";\n      &:focus,\n      &:hover {\n        color: ",";\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: "," !important;\n        border-color: transparent;\n      }\n    "])),o.theme.colors.buttonTertiaryText,o.theme.colors.buttonTertiaryTextHover,o.theme.colors.buttonTertiaryDisabledText)}),(function(o){var t=o.theme,e=o.$size,c=o.$isIconButton;return"l"===e&&r(i||(i=n(["\n      min-height: ",";\n      border-radius: ",";\n      padding: ",";\n      min-width: ",";\n      height: ",";\n    "],["\n      min-height: ",";\n      border-radius: ",";\n      padding: ",";\n      min-width: ",";\n      height: ",";\n    "])),b,t.button.borderRadiusLarge,c?"0":"calc( (".concat(b," - ( ").concat(t.button.buttonBorderThickness," * 2) - ").concat(t.typography.lineHeight," ) / 2) ").concat(t.spacing.m),c?"".concat(b):"auto",c?"".concat(b):"min-content")}),(function(o){return o.$full&&r(l||(l=n(["\n      width: 100%;\n    "],["\n      width: 100%;\n    "])))}),(function(o){return o.$css&&r(d||(d=n(["\n      ","\n    "],["\n      ","\n    "])),o.$css)}));export{m as Spacer,h as StyledButton};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n  margin-left: ${({ theme }) => theme.spacing.xxs};\n  &:first-of-type {\n    margin-left: 0;\n  }\n`;\n\nexport const StyledButton = styled.button<{\n  theme: ThemeType;\n  href?: string;\n  $isIconButton: boolean;\n  $appearance?: ButtonAppearanceType;\n  $full?: boolean;\n  $size?: \"m\" | \"l\";\n  $css?: string;\n}>`\n  box-sizing: border-box;\n  min-height: ${BUTTON_HEIGHT};\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ${({ theme, $isIconButton }) =>\n    $isIconButton\n      ? \"0\"\n      : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n  width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n  min-width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  border-style: solid;\n  border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ${({\n    theme: {\n      fontSizes: { m },\n    },\n  }) => m};\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyButtons },\n    },\n  }) => fontFamilyButtons};\n  font-weight: ${({\n    theme: {\n      typography: { fontWeightButtons },\n    },\n  }) => fontWeightButtons};\n  text-align: center;\n  text-transform: ${({ theme }) => theme.button.textTransform};\n  text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${(props) =>\n    props.$appearance === \"primary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonPrimaryBackground};\n      border-color: ${props.theme.colors.buttonPrimaryBorder};\n      color: ${props.theme.colors.buttonPrimaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n        color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n        color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"secondary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonSecondaryBackground};\n      border-color: ${props.theme.colors.buttonSecondaryBorder};\n      color: ${props.theme.colors.buttonSecondaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n        color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors\n          .buttonSecondaryDisabledBackground};\n        color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"tertiary\" &&\n    css`\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ${props.theme.colors.buttonTertiaryText};\n      &:focus,\n      &:hover {\n        color: ${props.theme.colors.buttonTertiaryTextHover};\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n        border-color: transparent;\n      }\n    `}\n  \n  ${({ theme, $size, $isIconButton }) =>\n    $size === \"l\" &&\n    css`\n      min-height: ${BUTTON_HEIGHT_LARGE};\n      border-radius: ${theme.button.borderRadiusLarge};\n      padding: ${$isIconButton\n        ? \"0\"\n        : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n      min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n      height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n    `}\n\n  ${(props) =>\n    props.$full &&\n    css`\n      width: 100%;\n    `}\n\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","theme","spacing","xxs","StyledButton","button","$isIconButton","buttonBorderThickness","typography","lineHeight","horizontalPadding","borderRadius","fontSizes","m","fontFamilyButtons","fontWeightButtons","textTransform","textDecoration","props","$appearance","css","colors","buttonPrimaryBackground","buttonPrimaryBorder","buttonPrimaryText","buttonPrimaryBackgroundHover","buttonPrimaryBorderHover","buttonPrimaryTextHover","buttonPrimaryDisabledBackground","buttonPrimaryDisabledText","buttonPrimaryDisabledBorder","buttonSecondaryBackground","buttonSecondaryBorder","buttonSecondaryText","buttonSecondaryBackgroundHover","buttonSecondaryBorderHover","buttonSecondaryTextHover","buttonSecondaryDisabledBackground","buttonSecondaryDisabledText","buttonSecondaryDisabledBorder","buttonTertiaryText","buttonTertiaryTextHover","buttonTertiaryDisabledText","$size","borderRadiusLarge","$full","$css"],"mappings":"2CAIA,MAAMA,EAAgB,OAChBC,EAAsB,OAEfC,EAASC,EAAOC,IAA0B;iBACtC,EAAGC,WAAYA,EAAMC,QAAQC;;;;EAMjCC,EAAeL,EAAOM,MAQjC;;gBAEcT;;;;;aAKH,EAAGK,QAAOK,mBACnBA,EACI,IACA,UAAUV,SAAqBK,EAAMI,OAAOE,gCAAgCN,EAAMO,WAAWC,qBAAqBR,EAAMI,OAAOK;WAC5H,EAAGJ,mBACVA,EAAgB,GAAGV,IAAkB;eAC1B,EAAGU,mBACdA,EAAgB,GAAGV,IAAkB;;mBAEtB,EAAGK,WAAYA,EAAMI,OAAOM;;kBAE7B,EAAGV,WAAYA,EAAMI,OAAOE;;;;;;;;eAQ/B,EACXN,OACEW,WAAaC,SAEXA;iBACS,EACbZ,OACEO,YAAcM,yBAEZA;iBACS,EACbb,OACEO,YAAcO,yBAEZA;;oBAEY,EAAGd,WAAYA,EAAMI,OAAOW;qBAC3B,EAAGf,WAAYA,EAAMI,OAAOY;;;;;;IAM5CC,GACqB,YAAtBA,EAAMC,aACNC,CAAG;0BACmBF,EAAMjB,MAAMoB,OAAOC;sBACvBJ,EAAMjB,MAAMoB,OAAOE;eAC1BL,EAAMjB,MAAMoB,OAAOG;;;4BAGNN,EAAMjB,MAAMoB,OAAOI;wBACvBP,EAAMjB,MAAMoB,OAAOK;iBAC1BR,EAAMjB,MAAMoB,OAAOM;;;;4BAIRT,EAAMjB,MAAMoB,OAAOO;iBAC9BV,EAAMjB,MAAMoB,OAAOQ;wBACZX,EAAMjB,MAAMoB,OAAOS;;;;IAItCZ,GACqB,cAAtBA,EAAMC,aACNC,CAAG;0BACmBF,EAAMjB,MAAMoB,OAAOU;sBACvBb,EAAMjB,MAAMoB,OAAOW;eAC1Bd,EAAMjB,MAAMoB,OAAOY;;;4BAGNf,EAAMjB,MAAMoB,OAAOa;wBACvBhB,EAAMjB,MAAMoB,OAAOc;iBAC1BjB,EAAMjB,MAAMoB,OAAOe;;;;4BAIRlB,EAAMjB,MAAMoB,OAC7BgB;iBACMnB,EAAMjB,MAAMoB,OAAOiB;wBACZpB,EAAMjB,MAAMoB,OAAOkB;;;;IAItCrB,GACqB,aAAtBA,EAAMC,aACNC,CAAG;;;;;;eAMQF,EAAMjB,MAAMoB,OAAOmB;;;iBAGjBtB,EAAMjB,MAAMoB,OAAOoB;;;;;iBAKnBvB,EAAMjB,MAAMoB,OAAOqB;;;;;IAKhC,EAAGzC,QAAO0C,QAAOrC,mBACP,MAAVqC,GACAvB,CAAG;oBACavB;uBACGI,EAAMI,OAAOuC;iBACnBtC,EACP,IACA,UAAUT,SAA2BI,EAAMI,OAAOE,gCAAgCN,EAAMO,WAAWC,qBAAqBR,EAAMC,QAAQW;mBAC7HP,EAAgB,GAAGT,IAAwB;gBAC9CS,EAAgB,GAAGT,IAAwB;;;IAGtDqB,GACDA,EAAM2B,OACNzB,CAAG;;;;IAIFF,GACDA,EAAM4B,MACN1B,CAAG;QACCF,EAAM4B;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n  margin-left: ${({ theme }) => theme.spacing.xxs};\n  &:first-of-type {\n    margin-left: 0;\n  }\n`;\n\nexport const StyledButton = styled.button<{\n  theme: ThemeType;\n  href?: string;\n  $isIconButton: boolean;\n  $appearance?: ButtonAppearanceType;\n  $full?: boolean;\n  $size?: \"m\" | \"l\";\n  $css?: string;\n}>`\n  box-sizing: border-box;\n  min-height: ${BUTTON_HEIGHT};\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ${({ theme, $isIconButton }) =>\n    $isIconButton\n      ? \"0\"\n      : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n  width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n  min-width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  border-style: solid;\n  border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ${({\n    theme: {\n      fontSizes: { m },\n    },\n  }) => m};\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyButtons },\n    },\n  }) => fontFamilyButtons};\n  font-weight: ${({\n    theme: {\n      typography: { fontWeightButtons },\n    },\n  }) => fontWeightButtons};\n  text-align: center;\n  text-transform: ${({ theme }) => theme.button.textTransform};\n  text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${(props) =>\n    props.$appearance === \"primary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonPrimaryBackground};\n      border-color: ${props.theme.colors.buttonPrimaryBorder};\n      color: ${props.theme.colors.buttonPrimaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n        color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n        color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"secondary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonSecondaryBackground};\n      border-color: ${props.theme.colors.buttonSecondaryBorder};\n      color: ${props.theme.colors.buttonSecondaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n        color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors\n          .buttonSecondaryDisabledBackground};\n        color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"tertiary\" &&\n    css`\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ${props.theme.colors.buttonTertiaryText};\n      &:focus,\n      &:hover {\n        color: ${props.theme.colors.buttonTertiaryTextHover};\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n        border-color: transparent;\n      }\n    `}\n  \n  ${({ theme, $size, $isIconButton }) =>\n    $size === \"l\" &&\n    css`\n      min-height: ${BUTTON_HEIGHT_LARGE};\n      border-radius: ${theme.button.borderRadiusLarge};\n      padding: ${$isIconButton\n        ? \"0\"\n        : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n      min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n      height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n    `}\n\n  ${(props) =>\n    props.$full &&\n    css`\n      width: 100%;\n    `}\n\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","templateObject_1","__makeTemplateObject","_a","theme","spacing","xxs","StyledButton","button","$isIconButton","concat","buttonBorderThickness","typography","lineHeight","horizontalPadding","borderRadius","fontSizes","m","fontFamilyButtons","fontWeightButtons","textTransform","textDecoration","props","$appearance","css","colors","buttonPrimaryBackground","buttonPrimaryBorder","buttonPrimaryText","buttonPrimaryBackgroundHover","buttonPrimaryBorderHover","buttonPrimaryTextHover","buttonPrimaryDisabledBackground","buttonPrimaryDisabledText","buttonPrimaryDisabledBorder","templateObject_3","buttonSecondaryBackground","buttonSecondaryBorder","buttonSecondaryText","buttonSecondaryBackgroundHover","buttonSecondaryBorderHover","buttonSecondaryTextHover","buttonSecondaryDisabledBackground","buttonSecondaryDisabledText","buttonSecondaryDisabledBorder","templateObject_4","buttonTertiaryText","buttonTertiaryTextHover","buttonTertiaryDisabledText","$size","templateObject_5","borderRadiusLarge","$full","templateObject_6","$css","templateObject_7"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  DotContainer,\n  Dot,\n  CarouselButton,\n  ButtonWrapper,\n  VerticalAlign,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nexport const Dots = ({\n  count,\n  currentPosition = 0,\n  scrollToPosition,\n  next,\n  previous,\n}: {\n  count: number;\n  currentPosition: number;\n  scrollToPosition: (to: number) => void;\n  next: () => void;\n  previous: () => void;\n}) => {\n  const moreOnRight = currentPosition !== count - 1;\n  const moreOnLeft = currentPosition !== 0;\n  const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n  return (\n    <ButtonWrapper>\n      <CarouselButton\n        disabled={!moreOnLeft}\n        aria-label=\"previous\"\n        onClick={() => {\n          previous();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n\n      <DotContainer $count={count}>\n        {countArray.map((item, index) => {\n          const isSelected = index === currentPosition;\n          const scrollTo = () => {\n            scrollToPosition(index);\n          };\n          return (\n            <Dot\n              key={item}\n              role=\"switch\"\n              aria-checked={isSelected}\n              onClick={scrollTo}\n              $selected={isSelected}\n            >\n              <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n            </Dot>\n          );\n        })}\n      </DotContainer>\n\n      <CarouselButton\n        disabled={!moreOnRight}\n        aria-label=\"next\"\n        onClick={() => {\n          next();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n    </ButtonWrapper>\n  );\n};\n\nexport default Dots;\n"],"names":["Dots","count","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","React","ButtonWrapper","createElement","CarouselButton","disabled","onClick","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","DotContainer","$count","map","item","index","isSelected","Dot","key","role","faCaretRight"],"mappings":"sTAca,MAAAA,EAAO,EAClBC,QACAC,kBAAkB,EAClBC,mBACAC,OACAC,eAQA,MAAMC,EAAcJ,IAAoBD,EAAQ,EAC1CM,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQV,IAAS,CAACW,EAAGC,IAAM,aAAaA,MAExE,OACEC,gBAACC,EAAa,KACZD,EAAAE,cAACC,EAAc,CACbC,UAAWX,EACA,aAAA,WACXY,QAAS,KACPd,GAAU,GAGZS,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQC,EAAaC,KAAK,WAClCV,EAACE,cAAAS,EAAqE,KAAA,uCAI1EX,EAAAE,cAACU,EAAY,CAAAC,OAAS1B,GACnBO,EAAWoB,KAAI,CAACC,EAAMC,KACrB,MAAMC,EAAaD,IAAU5B,EAI7B,OACEY,EAACE,cAAAgB,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdZ,QARa,KACfhB,EAAiB2B,EAAM,YAQVC,GAEXjB,EAACE,cAAAS,OAAkB,4BAA4BK,KAC3C,KAKZhB,EAAAE,cAACC,EAAc,CACbC,UAAWZ,EACA,aAAA,OACXa,QAAS,KACPf,GAAM,GAGRU,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQa,EAAcX,KAAK,WACnCV,EAAAE,cAACS,EAAqE,KAAA,uCAG5D"}
+{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  DotContainer,\n  Dot,\n  CarouselButton,\n  ButtonWrapper,\n  VerticalAlign,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nexport const Dots = ({\n  count,\n  currentPosition = 0,\n  scrollToPosition,\n  next,\n  previous,\n}: {\n  count: number;\n  currentPosition: number;\n  scrollToPosition: (to: number) => void;\n  next: () => void;\n  previous: () => void;\n}) => {\n  const moreOnRight = currentPosition !== count - 1;\n  const moreOnLeft = currentPosition !== 0;\n  const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n  return (\n    <ButtonWrapper>\n      <CarouselButton\n        disabled={!moreOnLeft}\n        aria-label=\"previous\"\n        onClick={() => {\n          previous();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n\n      <DotContainer $count={count}>\n        {countArray.map((item, index) => {\n          const isSelected = index === currentPosition;\n          const scrollTo = () => {\n            scrollToPosition(index);\n          };\n          return (\n            <Dot\n              key={item}\n              role=\"switch\"\n              aria-checked={isSelected}\n              onClick={scrollTo}\n              $selected={isSelected}\n            >\n              <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n            </Dot>\n          );\n        })}\n      </DotContainer>\n\n      <CarouselButton\n        disabled={!moreOnRight}\n        aria-label=\"next\"\n        onClick={() => {\n          next();\n        }}\n      >\n        <VerticalAlign>\n          <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n          <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n        </VerticalAlign>\n      </CarouselButton>\n    </ButtonWrapper>\n  );\n};\n\nexport default Dots;\n"],"names":["Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","React","ButtonWrapper","createElement","CarouselButton","disabled","onClick","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","DotContainer","$count","map","item","index","isSelected","Dot","key","role","faCaretRight"],"mappings":"sTAcO,IAAMA,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAQFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,IAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAG,IAE3E,OACEE,gBAACC,EAAa,KACZD,EAACE,cAAAC,EACC,CAAAC,UAAWZ,EACA,aAAA,WACXa,QAAS,WACPf,MAGFU,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQC,EAAaC,KAAK,WAClCV,EAACE,cAAAS,EAAqE,KAAA,uCAI1EX,EAACE,cAAAU,EAAqB,CAAAC,OAAA5B,GACnBQ,EAAWqB,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAU7B,EAI7B,OACEa,EAACE,cAAAgB,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdZ,QARa,WACfjB,EAAiB4B,EAClB,YAOcC,GAEXjB,EAACE,cAAAS,OAAkB,4BAA4BZ,OAAAiB,IAGrD,KAGFhB,EAACE,cAAAC,EACC,CAAAC,UAAWb,EACA,aAAA,OACXc,QAAS,WACPhB,MAGFW,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQa,EAAcX,KAAK,WACnCV,EAAAE,cAACS,EAAqE,KAAA,uCAKhF"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\nimport {\n  CarouselWrapper,\n  CarouselCardInner,\n  CarouselCard,\n  CarouselScrollArea,\n} from \"./styles\";\n\nexport type CarouselProps = {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n};\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: CarouselProps) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>();\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <>\n      <Box>\n        <CarouselWrapper>\n          <CarouselScrollArea\n            ref={scrollRef}\n            aria-live=\"assertive\"\n            $smoothScrolling={smoothScrolling}\n            tabIndex={0}\n          >\n            {childArray.map((child, index) => {\n              const isSelected = index === currentPosition;\n              const keyString = `card-${index}`;\n              return (\n                <CarouselCard\n                  key={keyString}\n                  $onlyChild={onlyChild}\n                  $fullWidthChild={fullWidthChild}\n                >\n                  <InView\n                    threshold={0.5}\n                    as=\"div\"\n                    onChange={(inView) => {\n                      if (inView) {\n                        setPosition(index);\n                      }\n                    }}\n                  >\n                    <CarouselCardInner\n                      $onlyChild={onlyChild}\n                      $isSelected={isSelected}\n                      $shrinkUnselectedPages={shrinkUnselectedPages}\n                      $fullWidthChild={fullWidthChild}\n                    >\n                      {child}\n                    </CarouselCardInner>\n                  </InView>\n                </CarouselCard>\n              );\n            })}\n          </CarouselScrollArea>\n        </CarouselWrapper>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","startPosition","children","onPositionChanged","shrinkUnselectedPages","fullWidthChild","timer","React","useRef","isStartPositionSet","currentPosition","setCurrentPosition","useState","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","Fragment","Box","CarouselWrapper","CarouselScrollArea","ref","$smoothScrolling","tabIndex","map","child","index","isSelected","keyString","CarouselCard","key","$onlyChild","$fullWidthChild","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","$isSelected","$shrinkUnselectedPages","Dots","count","next","previous","memo"],"mappings":"8VAyCaA,EAAW,EACtBC,gBACAC,WACAC,oBACAC,yBAAwB,EACxBC,kBAAiB,MAEjB,MAAMC,EAAQC,EAAMC,SACdC,OAA8C,IAAlBR,GAC3BS,EAAiBC,GAAsBC,EAASX,GAAiB,IACjEY,EAAiBC,GAAsBF,GAAUH,GAClDM,EAAYP,EAAyB,MAGrCQ,EAAaT,EAAMU,SAASC,QAAQhB,GAAUiB,OAAOC,SA6BrDC,EAAoBC,IACxB,GAAIP,GAAWQ,QAAS,CACtB,MAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQrB,SAAS0B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQrB,SAASoB,GACxC,IAAKO,EAAM,OACX,MAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,KAMzBmB,GAAU,KACJxB,GACFK,GAAmB,KAEpB,CAACb,IAEJgC,GAAU,KACHpB,GACHQ,EAAiBpB,GAAiB,KAEnC,CAACY,IAEJ,MAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACErB,EAAA4B,cAAA5B,EAAA6B,SAAA,KACE7B,EAAA4B,cAACE,EAAG,KACF9B,EAAA4B,cAACG,EAAe,KACd/B,EAAC4B,cAAAI,GACCC,IAAKzB,EACK,YAAA,YACQ0B,iBAAA5B,EAClB6B,SAAU,GAET1B,EAAW2B,KAAI,CAACC,EAAOC,KACtB,MAAMC,EAAaD,IAAUnC,EACvBqC,EAAY,QAAQF,IAC1B,OACEtC,EAAC4B,cAAAa,EACC,CAAAC,IAAKF,EAASG,WACFhB,EAASiB,gBACJ9C,GAEjBE,EAAA4B,cAACiB,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAWC,IA1FT,IAAClC,EA2FGkC,GA1FlB9C,KADeY,EA4FauB,KA1FhClC,EAAmBW,GAEfhB,GACFmD,aAAanD,GAAOiB,SAEtBjB,EAAMiB,QAAUmC,YAAW,KACrBvD,GAAqBU,GAMvBV,EAAkBmB,KAEnB,QAgFaf,EAAA4B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRd,EACWe,uBAAAzD,EACP+C,gBAAA9C,GAEhBuC,IAGQ,OAMxB5B,EAAWY,OAAS,EACnBrB,EAAA4B,cAACE,EAAG,KACF9B,EAAA4B,cAAC2B,EAAI,CACHC,MAAO/C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClB2C,KAlGG,KACX3C,EAAiBX,EAAkB,EAAE,EAkG7BuD,SA/FO,KACf5C,EAAiBX,EAAkB,EAAE,KAiG/B,KACH,EAIQwD,EAAKlE"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\nimport {\n  CarouselWrapper,\n  CarouselCardInner,\n  CarouselCard,\n  CarouselScrollArea,\n} from \"./styles\";\n\nexport type CarouselProps = {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n};\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: CarouselProps) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>(\n    undefined,\n  );\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <>\n      <Box>\n        <CarouselWrapper>\n          <CarouselScrollArea\n            ref={scrollRef}\n            aria-live=\"assertive\"\n            $smoothScrolling={smoothScrolling}\n            tabIndex={0}\n          >\n            {childArray.map((child, index) => {\n              const isSelected = index === currentPosition;\n              const keyString = `card-${index}`;\n              return (\n                <CarouselCard\n                  key={keyString}\n                  $onlyChild={onlyChild}\n                  $fullWidthChild={fullWidthChild}\n                >\n                  <InView\n                    threshold={0.5}\n                    as=\"div\"\n                    onChange={(inView) => {\n                      if (inView) {\n                        setPosition(index);\n                      }\n                    }}\n                  >\n                    <CarouselCardInner\n                      $onlyChild={onlyChild}\n                      $isSelected={isSelected}\n                      $shrinkUnselectedPages={shrinkUnselectedPages}\n                      $fullWidthChild={fullWidthChild}\n                    >\n                      {child}\n                    </CarouselCardInner>\n                  </InView>\n                </CarouselCard>\n              );\n            })}\n          </CarouselScrollArea>\n        </CarouselWrapper>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","undefined","_c","fullWidthChild","timer","React","useRef","isStartPositionSet","_d","useState","currentPosition","setCurrentPosition","_e","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","Fragment","Box","CarouselWrapper","CarouselScrollArea","ref","tabIndex","map","child","index","isSelected","keyString","concat","CarouselCard","key","$onlyChild","$fullWidthChild","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","$isSelected","$shrinkUnselectedPages","Dots","count","next","previous","memo"],"mappings":"wVAyCO,IAAMA,EAAW,SAACC,OACvBC,EAAaD,EAAAC,cACbC,EAAQF,EAAAE,SACRC,EAAiBH,EAAAG,kBACjBC,EAA6BJ,EAAAK,sBAA7BA,OAAwBC,IAAAF,KACxBG,EAAAP,EAAAQ,eAAAA,OAAcF,IAAAC,GAAQA,EAEhBE,EAAQC,EAAMC,YAClBL,GAEIM,OAA8C,IAAlBX,EAC5BY,EAAwCC,EAASb,GAAiB,GAAjEc,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYT,EAAyB,MAGrCU,EAAaX,EAAMY,SAASC,QAAQrB,GAAUsB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAASd,EAATc,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQ1B,SAAS+B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQ1B,SAASyB,GACxC,IAAKO,EAAM,OACX,IAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,GAGxB,EAGDmB,GAAU,WACJ1B,GACFO,GAAmB,EAEvB,GAAG,CAAClB,IAEJqC,GAAU,WACHpB,GACHQ,EAAiBzB,GAAiB,EAEtC,GAAG,CAACiB,IAEJ,IAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACEvB,EAAA8B,cAAA9B,EAAA+B,SAAA,KACE/B,EAAA8B,cAACE,EAAG,KACFhC,EAAA8B,cAACG,EAAe,KACdjC,EAAC8B,cAAAI,GACCC,IAAKzB,EACK,YAAA,6BACQF,EAClB4B,SAAU,GAETzB,EAAW0B,KAAI,SAACC,EAAOC,GACtB,IAAMC,EAAaD,IAAUlC,EACvBoC,EAAY,QAAQC,OAAAH,GAC1B,OACEvC,EAAC8B,cAAAa,EACC,CAAAC,IAAKH,EAASI,WACFhB,EAASiB,gBACJhD,GAEjBE,EAAA8B,cAACiB,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAU,SAACC,GA1FT,IAAClC,EA2FGkC,GA1FlB9C,KADeY,EA4FasB,KA1FhCjC,EAAmBW,GAEflB,GACFqD,aAAarD,eAAAA,EAAOmB,SAEtBnB,EAAMmB,QAAUmC,YAAW,WACrB5D,GAAqBe,GAMvBf,EAAkBwB,EAErB,GAAE,QAgFajB,EAAA8B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRf,EACWgB,uBAAA7D,EACPmD,gBAAAhD,GAEhBwC,IAKV,OAIN3B,EAAWY,OAAS,EACnBvB,EAAA8B,cAACE,EAAG,KACFhC,EAAA8B,cAAC2B,EAAI,CACHC,MAAO/C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClB2C,KAlGG,WACX3C,EAAiBX,EAAkB,EACpC,EAiGSuD,SA/FO,WACf5C,EAAiBX,EAAkB,EACpC,KAgGO,KAGV,EAEewD,EAAKxE"}

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

@@ -1,97 +1,2 @@
-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};
+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};
 //# 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","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;;;;;;;;;;;"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as o,ThemeProvider as t}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as m,StyledInput as a,SelectedBorder as c,CheckWrapper as n,Check as f}from"./styles.js";const u=r(((r,u)=>{const p=o(),h={...s,...p},{children:E,hasError:x,errorMessage:b,...k}=r;return e.createElement(t,{theme:h},e.createElement(m,{$hasError:x||!!b||!1,$checked:r.checked||r.defaultChecked||!1,$disabled:r.disabled||!1},e.createElement(a,{...k,disabled:r.disabled||!1,type:"checkbox",ref:u,"aria-describedby":r.id&&b?`${r.id}-error`:void 0}),e.createElement(c,null),E||r.value,h.utilities.useDefaultFromControls?null:e.createElement(n,null,e.createElement(f,null,e.createElement(d,{faIcon:l,color:"check",size:"1.25em"})))),!!b&&e.createElement(i,{marginTop:"xxs",id:r.id?`${r.id}-error`:void 0},b))}));u.displayName="Checkbox";export{u as Checkbox,u as default};
+import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t,ThemeProvider as s}from"styled-components";import{faCheck as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as m,StyledInput as c,SelectedBorder as n,CheckWrapper as f,Check as u}from"./styles.js";var h=function(h){var p=t(),E=e(e({},l),p),b=h.children,x=h.hasError,j=h.errorMessage,k=h.ref,v=r(h,["children","hasError","errorMessage","ref"]);return o.createElement(s,{theme:E},o.createElement(m,{$hasError:x||!!j||!1,$checked:h.checked||h.defaultChecked||!1,$disabled:h.disabled||!1},o.createElement(c,e({},v,{disabled:h.disabled||!1,type:"checkbox",ref:k,"aria-describedby":h.id&&j?"".concat(h.id,"-error"):void 0})),o.createElement(n,null),b||h.value,E.utilities.useDefaultFromControls?null:o.createElement(f,null,o.createElement(u,null,o.createElement(d,{faIcon:i,color:"check",size:"1.25em"})))),!!j&&o.createElement(a,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},j))};export{h as Checkbox,h 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\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop","displayName"],"mappings":"4bAoCa,MAAAA,EAAWC,GACtB,CAACC,EAAsBC,KACrB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EAEtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAACC,cAAAE,EACY,CAAAC,UAAAP,KAAcC,IAAgB,EAAKO,SACpCf,EAAMgB,SAAWhB,EAAMiB,iBAAkB,YACxCjB,EAAMkB,WAAY,GAE7BR,EAAAC,cAACQ,EACK,IAAAV,EACJS,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLnB,IAAKA,EAAG,mBAEJD,EAAMqB,IAAQb,EAAe,GAAGR,EAAMqB,gBAAaC,IAGzDZ,EAAAC,cAACY,EAAiB,MACjBjB,GAAYN,EAAMwB,MAClBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjDzB,GACDE,gBAACwB,EAAS,CACRC,UAAU,MACVd,GAAIrB,EAAMqB,GAAK,GAAGrB,EAAMqB,gBAAaC,GAEpCd,GAGS,IAKtBV,EAASsC,YAAc"}
+{"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","__assign","defaultTheme","children","hasError","errorMessage","ref","rest","__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":"2fAkCO,IAAMA,EAAW,SAACC,GACvB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGGK,EAAmDN,EAA3CM,SAAEC,EAAyCP,EAAKO,SAApCC,EAA+BR,eAAjBS,EAAiBT,EAAdS,IAAKC,EAAIC,EAAKX,EAArD,CAAkD,WAAA,WAAA,eAAA,QAExD,OACEY,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAACC,cAAAE,EACY,CAAAC,UAAAT,KAAcC,IAAgB,EAAKS,SACpCjB,EAAMkB,SAAWlB,EAAMmB,iBAAkB,YACxCnB,EAAMoB,WAAY,GAE7BR,EAAAC,cAACQ,EACKjB,EAAA,CAAA,EAAAM,GACJU,SAAUpB,EAAMoB,WAAY,EAC5BE,KAAK,WACLb,IAAKA,EAAG,mBAEJT,EAAMuB,IAAQf,EAAe,GAAGgB,OAAAxB,EAAMuB,GAAE,eAAWE,KAGzDb,EAAAC,cAACa,EAAiB,MACjBpB,GAAYN,EAAM2B,MAClBxB,EAAMyB,UAAUC,uBAAyB,KACxCjB,gBAACkB,EAAY,KACXlB,EAAAC,cAACkB,EAAK,KACJnB,EAAAC,cAACmB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD5B,GACDI,gBAACyB,EAAS,CACRC,UAAU,MACVf,GAAIvB,EAAMuB,GAAK,GAAGC,OAAAxB,EAAMuB,kBAAaE,GAEpCjB,GAKX"}

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

@@ -1,106 +1,2 @@
-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};
+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};
 //# sourceMappingURL=styles.js.map