@cruk/cruk-react-components 5.0.0 → 5.0.2

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r,{css as o}from"styled-components";var e,i,t=r.span(i||(i=n(["\n  border-width: 1px;\n  border-style: solid;\n  background-color: ",";\n  color: ",";\n  border-color: ",";\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ",";\n  line-height: 1rem;\n  padding: ",";\n  display: inline-block;\n  min-width: ",";\n\n  ","\n"],["\n  border-width: 1px;\n  border-style: solid;\n  background-color: ",";\n  color: ",";\n  border-color: ",";\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ",";\n  line-height: 1rem;\n  padding: ",";\n  display: inline-block;\n  min-width: ",";\n\n  ","\n"])),(function(n){var r=n.theme.colors,o=n.backgroundColor;return o&&void 0!==r[o]?r[o]:o||r.primary}),(function(n){var r=n.theme.colors,o=n.textColor;return o&&void 0!==r[o]?r[o]:o||r.textOnPrimary}),(function(n){var r=n.theme.colors,o=n.borderColor,e=n.backgroundColor;return o&&void 0!==r[o]?r[o]:o||(e&&void 0!==r[e]?r[e]:e||r.primary)}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.spacing.xxs}),(function(n){var r=n.size,o=n.theme,e=o.spacing,i=o.spacing.xs;return"calc(".concat(e[r]," + ").concat(i,")")}),(function(r){var i=r.isText,t=r.theme,c=r.size;return!i&&o(e||(e=n(["\n      padding: 0;\n      border-radius: 50%;\n      height: ",";\n      width: ",";\n      line-height: ",";\n      svg {\n        height: ",";\n      }\n    "],["\n      padding: 0;\n      border-radius: 50%;\n      height: ",";\n      width: ",";\n      line-height: ",";\n      svg {\n        height: ",";\n      }\n    "])),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]))}));export{t as StyledBadge,t as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r,{css as o}from"styled-components";var e,i,t=r.span(i||(i=n(["\n  border-width: 1px;\n  border-style: solid;\n  background-color: ",";\n  color: ",";\n  border-color: ",";\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ",";\n  line-height: 1rem;\n  padding: ",";\n  display: inline-block;\n  min-width: ",";\n\n  ","\n"],["\n  border-width: 1px;\n  border-style: solid;\n  background-color: ",";\n  color: ",";\n  border-color: ",";\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ",";\n  line-height: 1rem;\n  padding: ",";\n  display: inline-block;\n  min-width: ",";\n\n  ","\n"])),(function(n){var r=n.theme.colors,o=n.$backgroundColor;return o&&void 0!==r[o]?r[o]:o||r.primary}),(function(n){var r=n.theme.colors,o=n.$textColor;return o&&void 0!==r[o]?r[o]:o||r.textOnPrimary}),(function(n){var r=n.theme.colors,o=n.$borderColor,e=n.$backgroundColor;return o&&void 0!==r[o]?r[o]:o||(e&&void 0!==r[e]?r[e]:e||r.primary)}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.spacing.xxs}),(function(n){var r=n.$size,o=n.theme,e=o.spacing,i=o.spacing.xs;return"calc(".concat(e[r]," + ").concat(i,")")}),(function(r){var i=r.$isText,t=r.theme,c=r.$size;return!i&&o(e||(e=n(["\n      padding: 0;\n      border-radius: 50%;\n      height: ",";\n      width: ",";\n      line-height: ",";\n      svg {\n        height: ",";\n      }\n    "],["\n      padding: 0;\n      border-radius: 50%;\n      height: ",";\n      width: ",";\n      line-height: ",";\n      svg {\n        height: ",";\n      }\n    "])),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]))}));export{t as StyledBadge,t as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ColorKeyType, type SpaceType, type ThemeType } from \"../../types\";\n\ntype StyleBadgeProps = {\n  backgroundColor?: string;\n  borderColor?: string;\n  textColor?: string;\n  isText?: boolean;\n  size: SpaceType;\n  theme: ThemeType;\n};\n\nexport const StyledBadge = styled.span<StyleBadgeProps>`\n  border-width: 1px;\n  border-style: solid;\n  background-color: ${({\n    theme: { colors },\n    backgroundColor,\n  }: StyleBadgeProps) =>\n    backgroundColor &&\n    typeof colors[backgroundColor as ColorKeyType] !== \"undefined\"\n      ? colors[backgroundColor as ColorKeyType]\n      : backgroundColor || colors.primary};\n  color: ${({ theme: { colors }, textColor }: StyleBadgeProps) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor || colors.textOnPrimary};\n  border-color: ${({\n    theme: { colors },\n    borderColor,\n    backgroundColor,\n  }: StyleBadgeProps) =>\n    borderColor && typeof colors[borderColor as ColorKeyType] !== \"undefined\"\n      ? colors[borderColor as ColorKeyType]\n      : borderColor ||\n        (backgroundColor &&\n        typeof colors[backgroundColor as ColorKeyType] !== \"undefined\"\n          ? colors[backgroundColor as ColorKeyType]\n          : backgroundColor || colors.primary)};\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ${({ theme }: StyleBadgeProps) => theme.fontSizes.m};\n  line-height: 1rem;\n  padding: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }: StyleBadgeProps) => xxs};\n  display: inline-block;\n  min-width: ${({\n    size,\n    theme: {\n      spacing,\n      spacing: { xs },\n    },\n  }: StyleBadgeProps) => `calc(${spacing[size]} + ${xs})`};\n\n  ${({ isText, theme, size }: StyleBadgeProps) =>\n    !isText &&\n    css`\n      padding: 0;\n      border-radius: 50%;\n      height: ${`calc(${theme.spacing[size]} + ${theme.spacing.xs})`};\n      width: ${`calc(${theme.spacing[size]} + ${theme.spacing.xs})`};\n      line-height: ${`calc(${theme.spacing[size]} + ${theme.spacing.xs})`};\n      svg {\n        height: ${`calc(${theme.spacing[size]}`};\n      }\n    `}\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_2","__makeTemplateObject","_a","colors","theme","backgroundColor","primary","textColor","textOnPrimary","borderColor","fontSizes","m","spacing","xxs","size","_b","xs","concat","isText","css"],"mappings":"2HAaa,QAAAA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,uEAAA,eAAA,sBAAA,oEAAA,uCAAA,6CAAA,UAAA,MAAA,CAAiB,uEAUd,eAIA,sBAYK,oEAGkB,uCAMpC,6CAQ6B,UAapD,SArDiB,SAACC,OACVC,EAAMD,EAAAE,MAAAD,OACfE,EAAeH,EAAAG,gBAEf,OAAAA,QACmD,IAA5CF,EAAOE,GACVF,EAAOE,GACPA,GAAmBF,EAAOG,OAH9B,IAIO,SAACJ,OAAWC,EAAMD,EAAAE,MAAAD,OAAII,EAASL,EAAAK,UACtC,OAAAA,QAA0D,IAAtCJ,EAAOI,GACvBJ,EAAOI,GACPA,GAAaJ,EAAOK,aAFxB,IAGc,SAACN,GACN,IAAAC,iBACTM,EAAWP,EAAAO,YACXJ,EAAeH,EAAAG,gBAEf,OAAAI,QAA8D,IAAxCN,EAAOM,GACzBN,EAAOM,GACPA,IACCJ,QACkD,IAA5CF,EAAOE,GACVF,EAAOE,GACPA,GAAmBF,EAAOG,QANlC,IASW,SAACJ,GAA+B,OAAxBA,EAAAE,MAA8BM,UAAUC,CAAhB,IAElC,SAACT,GAIW,OAFLA,EAAAE,MAAAQ,QAAAC,GAEK,IAEV,SAACX,OACZY,EAAIZ,EAAAY,KACJC,EAGCb,EAAAE,MAFCQ,EAAOG,EAAAH,QACII,EAAED,EAAAH,QAAAI,GAEM,MAAA,eAAQJ,EAAQE,GAAK,OAAAG,OAAMD,EAAK,IAAhC,IAErB,SAACd,GAAE,IAAAgB,WAAQd,EAAKF,EAAAE,MAAEU,EAAIZ,EAAAY,KACtB,OAACI,GACDC,gLAAG,iEAG6D,mBACD,yBACM,mCAE1B,sBAJ/B,QAAAF,OAAQb,EAAMQ,QAAQE,iBAAWV,EAAMQ,QAAQI,GAAE,KAClD,QAAAC,OAAQb,EAAMQ,QAAQE,GAAK,OAAAG,OAAMb,EAAMQ,QAAQI,GAAK,KAC9C,QAAQC,OAAAb,EAAMQ,QAAQE,GAAW,OAAAG,OAAAb,EAAMQ,QAAQI,QAElD,QAAAC,OAAQb,EAAMQ,QAAQE,IARpC"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ColorKeyType, type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n  $backgroundColor?: string;\n  $borderColor?: string;\n  $textColor?: string;\n  $isText?: boolean;\n  $size: SpaceType;\n  theme: ThemeType;\n}>`\n  border-width: 1px;\n  border-style: solid;\n  background-color: ${({ theme: { colors }, $backgroundColor }) =>\n    $backgroundColor &&\n    typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n      ? colors[$backgroundColor as ColorKeyType]\n      : $backgroundColor || colors.primary};\n  color: ${({ theme: { colors }, $textColor }) =>\n    $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? colors[$textColor as ColorKeyType]\n      : $textColor || colors.textOnPrimary};\n  border-color: ${({ theme: { colors }, $borderColor, $backgroundColor }) =>\n    $borderColor && typeof colors[$borderColor as ColorKeyType] !== \"undefined\"\n      ? colors[$borderColor as ColorKeyType]\n      : $borderColor ||\n        ($backgroundColor &&\n        typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n          ? colors[$backgroundColor as ColorKeyType]\n          : $backgroundColor || colors.primary)};\n  text-align: center;\n  border-radius: 1.5rem;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  line-height: 1rem;\n  padding: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n  display: inline-block;\n  min-width: ${({\n    $size,\n    theme: {\n      spacing,\n      spacing: { xs },\n    },\n  }) => `calc(${spacing[$size]} + ${xs})`};\n\n  ${({ $isText, theme, $size }) =>\n    !$isText &&\n    css`\n      padding: 0;\n      border-radius: 50%;\n      height: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n      width: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n      line-height: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n      svg {\n        height: ${`calc(${theme.spacing[$size]}`};\n      }\n    `}\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_2","__makeTemplateObject","_a","colors","theme","$backgroundColor","primary","$textColor","textOnPrimary","$borderColor","fontSizes","m","spacing","xxs","$size","_b","xs","concat","$isText","css"],"mappings":"2HAIa,QAAAA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,uEAAA,eAAA,sBAAA,oEAAA,uCAAA,6CAAA,UAAA,MAAA,CAOpC,uEAOwC,eAIA,sBAQK,oEAGA,uCAMpC,6CAQ8B,UAapC,SA9CiB,SAACC,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAgBH,EAAAG,iBACxD,OAAAA,QACoD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoBF,EAAOG,OAH/B,IAIO,SAACJ,OAAWC,EAAMD,EAAAE,MAAAD,OAAII,EAAUL,EAAAK,WACvC,OAAAA,QAA4D,IAAvCJ,EAAOI,GACxBJ,EAAOI,GACPA,GAAcJ,EAAOK,aAFzB,IAGc,SAACN,GAAW,IAAAC,iBAAUM,EAAYP,EAAAO,aAAEJ,EAAgBH,EAAAG,iBAClE,OAAAI,QAAgE,IAAzCN,EAAOM,GAC1BN,EAAOM,GACPA,IACCJ,QACmD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoBF,EAAOG,QANnC,IASW,SAACJ,GAAc,OAAPA,EAAAE,MAAaM,UAAUC,CAAhB,IAEjB,SAACT,GAIN,OAFYA,EAAAE,MAAAQ,QAAAC,GAEZ,IAEO,SAACX,OACZY,EAAKZ,EAAAY,MACLC,EAGCb,EAAAE,MAFCQ,EAAOG,EAAAH,QACII,EAAED,EAAAH,QAAAI,GAEX,MAAA,eAAQJ,EAAQE,GAAM,OAAAG,OAAMD,EAAK,IAAjC,IAEJ,SAACd,GAAE,IAAAgB,YAASd,EAAKF,EAAAE,MAAEU,EAAKZ,EAAAY,MACxB,OAACI,GACDC,gLAAG,iEAG8D,mBACD,yBACM,mCAE1B,sBAJhC,QAAAF,OAAQb,EAAMQ,QAAQE,iBAAYV,EAAMQ,QAAQI,GAAE,KACnD,QAAAC,OAAQb,EAAMQ,QAAQE,GAAM,OAAAG,OAAMb,EAAMQ,QAAQI,GAAK,KAC/C,QAAQC,OAAAb,EAAMQ,QAAQE,GAAY,OAAAG,OAAAb,EAAMQ,QAAQI,QAEnD,QAAAC,OAAQb,EAAMQ,QAAQE,IARpC"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t,{forwardRef as o}from"react";import{useTheme as m}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{StyledBox as i}from"./styles.js";var l=o((function(o,l){var n=e(o,[]),f=n.children,c=e(n,["children"]),p=m(),a=r(r({},s),p);return t.createElement(i,r({theme:a},c,{ref:l}),f)}));export{l as Box,l as default};
+import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e,{forwardRef as s}from"react";import{useTheme as t}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as c}from"../Spacing/index.js";import{StyledBox as n}from"./styles.js";var i=s((function(s,i){var l=r(s,[]),a=l.children,d=l.backgroundColor,f=l.css,p=r(l,["children","backgroundColor","css"]),u=t(),b=o(o({},m),u),g=c(p);return e.createElement(n,o({theme:b,$css:f,$backgroundColor:d},g,{ref:i}),a)}));export{i as Box,i as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string;\n    css?: string;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n  ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n    const { children, ...rest } = props;\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    return (\n      <StyledBox theme={theme} {...rest} ref={ref}>\n        {children}\n      </StyledBox>\n    );\n  },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","StyledBox"],"mappings":"gQA+BaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAAsBF,EAAdE,SAAKC,EAAIF,EAAKD,EAAxB,CAAqB,aACrBI,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,EAAUJ,EAAA,CAAAD,MAAOA,GAAWH,EAAI,CAAEJ,IAAKA,IACrCG,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string;\n    css?: string;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n  ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n    const { children, backgroundColor, css, ...rest } = props;\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const restWithInternalSpacingProps =\n      spacingPropsToSpacingPropsInternal(rest);\n\n    return (\n      <StyledBox\n        theme={theme}\n        $css={css}\n        $backgroundColor={backgroundColor}\n        {...restWithInternalSpacingProps}\n        ref={ref}\n      >\n        {children}\n      </StyledBox>\n    );\n  },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","backgroundColor","css","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","StyledBox","$backgroundColor"],"mappings":"yUAkCaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAA4CF,EAAKE,SAAvCC,EAAkCH,EAAnBG,gBAAEC,EAAiBJ,MAATK,IAASL,EAA9C,CAA2C,WAAA,kBAAA,QAC3CM,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EACJC,EAAmCP,GAErC,OACEQ,gBAACC,EAASL,EAAA,CACRD,MAAOA,OACDJ,EAAGW,iBACSZ,GACdQ,GACJZ,IAAKA,IAEJG,EAGP"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";import{Spacing as t}from"../Spacing/index.js";var c,i,a=o.div(i||(i=n(["\n  background-color: ",";\n  padding: ",";\n  margin: 0 0 "," 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ",";\n\n  ","\n  ","\n"],["\n  background-color: ",";\n  padding: ",";\n  margin: 0 0 "," 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ",";\n\n  ","\n  ","\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme;return n.backgroundColor?o.spacing.s:0}),(function(n){return n.theme.spacing.m}),(function(n){var o=n.theme.colors,r=n.backgroundColor;return r&&void 0!==o[r]?o[r]:r||"transparent"}),(function(o){return o.css&&r(c||(c=n(["\n      ","\n    "],["\n      ","\n    "])),o.css)}),(function(n){return t(n,n.theme)}));export{a as StyledBox,a as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";import{spacing as t}from"../Spacing/index.js";var c,i,a=o.div(i||(i=n(["\n  background-color: ",";\n  padding: ",";\n  margin: 0 0 "," 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ",";\n\n  ","\n  ","\n"],["\n  background-color: ",";\n  padding: ",";\n  margin: 0 0 "," 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ",";\n\n  ","\n  ","\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme;return n.$backgroundColor?o.spacing.s:0}),(function(n){return n.theme.spacing.m}),(function(n){var o=n.theme.colors,r=n.$backgroundColor;return r&&void 0!==o[r]?o[r]:r||"transparent"}),(function(o){return o.$css&&r(c||(c=n(["\n      ","\n    "],["\n      ","\n    "])),o.$css)}),(function(n){return t(n,n.theme)}));export{a as StyledBox,a as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport Spacing, { type SpacingProps } from \"../Spacing\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\n\ntype StyledBoxProps = SpacingProps & {\n  backgroundColor?: string;\n  css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n  background-color: ${({ theme }: StyledBoxProps) =>\n    theme.colors.backgroundLight};\n  padding: ${({ theme, backgroundColor }: StyledBoxProps) =>\n    backgroundColor ? theme.spacing.s : 0};\n  margin: 0 0 ${({ theme }: StyledBoxProps) => theme.spacing.m} 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ${({\n    theme: { colors },\n    backgroundColor,\n  }: StyledBoxProps) =>\n    backgroundColor &&\n    typeof colors[backgroundColor as ColorKeyType] !== \"undefined\"\n      ? colors[backgroundColor as ColorKeyType]\n      : backgroundColor || \"transparent\"};\n\n  ${(props: StyledBoxProps) =>\n    props.css &&\n    css`\n      ${props.css}\n    `}\n  ${(props) => Spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","templateObject_2","__makeTemplateObject","_a","theme","colors","backgroundLight","backgroundColor","spacing","s","m","props","css","templateObject_1","Spacing"],"mappings":"iLAWaA,EAAYC,EAAOC,IAAmBC,IAAAA,EAAAC,EAAA,CAAA,yBAAA,iBAAA,oBAAA,8EAAA,UAAA,OAAA,MAAA,CAAA,yBAEnB,iBAES,oBACqB,8EAatB,UAMnC,OACkD,SAxBjC,SAACC,GACnB,OAD0BA,EAAAC,MACpBC,OAAOC,eAAb,IACS,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADkCD,EAAAI,gBAChBH,EAAMI,QAAQC,EAAI,CAApC,IACY,SAACN,GAA8B,OAAvBA,EAAAC,MAA6BI,QAAQE,CAAd,IAMzB,SAACP,OACVE,EAAMF,EAAAC,MAAAC,OACfE,EAAeJ,EAAAI,gBAEf,OAAAA,QACmD,IAA5CF,EAAOE,GACVF,EAAOE,GACPA,GAAmB,aAHvB,IAKA,SAACI,GACD,OAAAA,EAAMC,KACNA,EAAGC,IAAAA,EAAAX,EAAA,CAAA,WAAA,UAAA,CAAA,WACU,YAATS,EAAMC,IAFV,IAIA,SAACD,GAAU,OAAAG,EAAQH,EAAOA,EAAMP"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\n\ntype StyledBoxProps = SpacingPropsInternal & {\n  $backgroundColor?: string;\n  $css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  padding: ${({ theme, $backgroundColor }) =>\n    $backgroundColor ? theme.spacing.s : 0};\n  margin: 0 0 ${({ theme }) => theme.spacing.m} 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  background-color: ${({ theme: { colors }, $backgroundColor }) =>\n    $backgroundColor &&\n    typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n      ? colors[$backgroundColor as ColorKeyType]\n      : $backgroundColor || \"transparent\"};\n\n  ${(props: StyledBoxProps) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n  ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","templateObject_2","__makeTemplateObject","_a","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props","$css","css","templateObject_1"],"mappings":"iLAWaA,EAAYC,EAAOC,IAAmBC,IAAAA,EAAAC,EAAA,CAAA,yBAAA,iBAAA,oBAAA,8EAAA,UAAA,OAAA,MAAA,CAAA,yBACc,iBAEvB,oBACI,8EAUL,UAMpC,OACkD,SApBjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,IACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,IAMT,SAACP,OAAWE,EAAMF,EAAAC,MAAAC,OAAIE,EAAgBJ,EAAAI,iBACxD,OAAAA,QACoD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoB,aAHxB,IAKA,SAACI,GACD,OAAAA,EAAMC,MACNC,EAAGC,IAAAA,EAAAZ,EAAA,CAAA,WAAA,UAAA,CAAA,WACW,YAAVS,EAAMC,KAFV,IAIA,SAACD,GAAU,OAAAH,EAAQG,EAAOA,EAAMP"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{IconFa as i}from"../IconFa/index.js";import{StyledButton as l,Spacer as m}from"./styles.js";var a=t((function(t,a){var s=o(),p=e(e({},n),s),c=t.appearance,f=void 0===c?"primary":c,u=t.isIconButton,d=void 0!==u&&u,h=r.Children.toArray(t.children),y="string"==typeof h[0],v=h[0],b=!(!d&&(1===h.length&&!y&&(null==v?void 0:v.type))!==i);return r.createElement(l,e({as:t.href?"a":"button"},t.href?{role:"button"}:{},{full:!1,size:"m"},t,{appearance:f,isIconButton:b,theme:p,ref:a}),t.children&&h.length?r.Children.map(t.children,(function(e,t){return r.createElement(m,{theme:p,key:t},e)})):null)}));export{a as Button,a as default};
+import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import t,{forwardRef as o}from"react";import{useTheme as n}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{IconFa as l}from"../IconFa/index.js";import{StyledButton as a,Spacer as m}from"./styles.js";var s=o((function(o,s){var c=n(),p=e(e({},i),c),u=o.appearance,d=void 0===u?"primary":u,f=o.isIconButton,h=void 0!==f&&f,v=o.full,y=void 0!==v&&v,b=o.size,j=void 0===b?"m":b,I=o.children,$=r(o,["appearance","isIconButton","full","size","children"]),g=t.Children.toArray(I),z="string"==typeof g[0],B=g[0],k=!(!h&&(1===g.length&&!z&&(null==B?void 0:B.type))!==l);return t.createElement(a,e({as:o.href?"a":"button"},o.href?{role:"button"}:{},{$full:!!y,$size:j,$appearance:d,$isIconButton:k},$,{theme:p,ref:s}),o.children&&g.length?t.Children.map(o.children,(function(e,r){return t.createElement(m,{theme:p,key:r},e)})):null)}));export{s as Button,s as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref?: Ref<HTMLElement>) => {\n    const foundTheme = useTheme();\n\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const { appearance = \"primary\", isIconButton = false } = props;\n    const childArray = React.Children.toArray(props.children);\n    const isChildString = typeof childArray[0] === \"string\";\n    const firstElement = childArray[0] as ReactElement;\n\n    // button has a fixed width if there is a single icon\n    const setIconButton = !!(\n      isIconButton ||\n      (childArray.length === 1 && !isChildString && firstElement?.type) ===\n        IconFa\n    );\n\n    return (\n      <StyledButton\n        as={props.href ? \"a\" : \"button\"}\n        {...(props.href ? { role: \"button\" } : {})}\n        {...{\n          full: false,\n          size: \"m\",\n          ...props,\n        }}\n        appearance={appearance}\n        isIconButton={setIconButton}\n        theme={theme}\n        ref={ref}\n      >\n        {props.children && childArray.length\n          ? React.Children.map(\n              props.children,\n              (child: ReactNode, index: number) => (\n                <Spacer theme={theme} key={index}>\n                  {child}\n                </Spacer>\n              ),\n            )\n          : null}\n      </StyledButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","_a","appearance","_b","isIconButton","childArray","React","Children","toArray","children","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","full","size","map","child","index","Spacer","key"],"mappings":"+SAyCaA,EAASC,GACpB,SAACC,EAAoBC,GACnB,IAAMC,EAAaC,IAEbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAEGK,EAAiDP,EAAKQ,WAAtDA,aAAa,UAASD,EAAEE,EAAyBT,EAALU,aAApBA,OAAe,IAAAD,KACzCE,EAAaC,EAAMC,SAASC,QAAQd,EAAMe,UAC1CC,EAAyC,iBAAlBL,EAAW,GAClCM,EAAeN,EAAW,GAG1BO,KACJR,IACuB,IAAtBC,EAAWQ,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAC1DC,GAGJ,OACET,EAACU,cAAAC,EACClB,EAAA,CAAAmB,GAAIxB,EAAMyB,KAAO,IAAM,UAClBzB,EAAMyB,KAAO,CAAEC,KAAM,UAAa,CAAE,EAEvC,CAAAC,MAAM,EACNC,KAAM,KACH5B,EAAK,CAEVQ,WAAYA,EACZE,aAAcQ,EACdd,MAAOA,EACPH,IAAKA,IAEJD,EAAMe,UAAYJ,EAAWQ,OAC1BP,EAAMC,SAASgB,IACb7B,EAAMe,UACN,SAACe,EAAkBC,GAAkB,OACnCnB,EAAAU,cAACU,EAAM,CAAC5B,MAAOA,EAAO6B,IAAKF,GACxBD,MAIP,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref?: Ref<HTMLElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const {\n      appearance = \"primary\",\n      isIconButton = false,\n      full = false,\n      size = \"m\",\n      children,\n      ...rest\n    } = props;\n\n    const childArray = React.Children.toArray(children);\n    const isChildString = typeof childArray[0] === \"string\";\n    const firstElement = childArray[0] as ReactElement;\n\n    // button has a fixed width if there is a single icon\n    const setIconButton = !!(\n      isIconButton ||\n      (childArray.length === 1 && !isChildString && firstElement?.type) ===\n        IconFa\n    );\n\n    return (\n      <StyledButton\n        as={props.href ? \"a\" : \"button\"}\n        {...(props.href ? { role: \"button\" } : {})}\n        $full={!!full}\n        $size={size}\n        $appearance={appearance}\n        $isIconButton={setIconButton}\n        {...rest}\n        theme={theme}\n        ref={ref}\n      >\n        {props.children && childArray.length\n          ? React.Children.map(\n              props.children,\n              (child: ReactNode, index: number) => (\n                <Spacer theme={theme} key={index}>\n                  {child}\n                </Spacer>\n              ),\n            )\n          : null}\n      </StyledButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","_a","appearance","_b","isIconButton","_c","full","_d","size","children","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key"],"mappings":"2TAyCaA,EAASC,GACpB,SAACC,EAAoBC,GACnB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EAMEP,EANoBQ,WAAtBA,OAAa,IAAAD,EAAA,YACbE,EAKET,EALkBU,aAApBA,OAAe,IAAAD,KACfE,EAIEX,EAAKY,KAJPA,cAAYD,EACZE,EAGEb,OAHFc,OAAO,IAAAD,EAAA,IAAGA,EACVE,EAEEf,WADCgB,IACDhB,EAPE,CAOL,aAAA,eAAA,OAAA,OAAA,aAEKiB,EAAaC,EAAMC,SAASC,QAAQL,GACpCM,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJb,IACuB,IAAtBO,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAC1DC,GAGJ,OACER,EAAAS,cAACC,EAAYvB,EAAA,CACXwB,GAAI7B,EAAM8B,KAAO,IAAM,UAClB9B,EAAM8B,KAAO,CAAEC,KAAM,UAAa,CAAE,EAClC,CAAAC,QAAEpB,EACFqB,MAAAnB,EACMoB,YAAA1B,EACE2B,cAAAZ,GACXP,EACJ,CAAAZ,MAAOA,EACPH,IAAKA,IAEJD,EAAMe,UAAYE,EAAWO,OAC1BN,EAAMC,SAASiB,IACbpC,EAAMe,UACN,SAACsB,EAAkBC,GAAkB,OACnCpB,EAAAS,cAACY,EAAM,CAACnC,MAAOA,EAAOoC,IAAKF,GACxBD,MAIP,KAGV"}

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

@@ -1,2 +1,2 @@
-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};
+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\ntype StyledButtonProps = {\n  isIconButton: boolean;\n  appearance?: ButtonAppearanceType;\n  full?: boolean;\n  theme: ThemeType;\n  href?: string;\n  size?: \"m\" | \"l\";\n  css?: string;\n};\n\nexport const StyledButton = styled.button<StyledButtonProps>`\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 }) => (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","templateObject_7"],"mappings":"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"}
+{"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{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{faCaretLeft as n,faCaretRight as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as l}from"../IconFa/index.js";import{ButtonWrapper as o,DotContainer as c,Dot as a,ScreenReaderOnly as i,CarouselButton as m,VerticalAlign as s}from"./styles.js";var u=function(r){return t.createElement("div",null,t.createElement(m,e({},r,{"aria-label":"previous"}),t.createElement(s,null,t.createElement(l,{faIcon:n,size:"1.25em"}),t.createElement(i,null,"Scroll carousel to previous index"))))},d=function(n){return t.createElement("div",null,t.createElement(m,e({},n,{"aria-label":"next"}),t.createElement(s,null,t.createElement(l,{faIcon:r,size:"1.25em"}),t.createElement(i,null,"Scroll carousel to previous index"))))},f=function(e){var n=e.count,r=e.currentPosition,l=void 0===r?0:r,m=e.scrollToPosition,s=e.next,f=e.previous,E=l!==n-1,p=0!==l,v=Array.from({length:n},(function(e,t){return"arrayIndex".concat(t)}));return t.createElement(o,null,t.createElement(u,{disabled:!p,onClick:f}),t.createElement(c,{count:n},v.map((function(e,n){var r=n===l;return t.createElement(a,{key:e,selected:r,role:"switch","aria-checked":r,onClick:function(){m(n)}},t.createElement(i,null,"Scroll carousel to index ".concat(n)))}))),t.createElement(d,{disabled:!E,onClick:s}))};export{u as CarouselLeftButton,d as CarouselRightButton,f as Dots,f as default};
+import e from"react";import{faCaretLeft as t,faCaretRight as n}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as l}from"../IconFa/index.js";import{ButtonWrapper as r,DotContainer as o,Dot as a,ScreenReaderOnly as c,CarouselButton as i,VerticalAlign as s}from"./styles.js";var u=function(n){return e.createElement("div",null,e.createElement(i,{disabled:!!n.disabled,"aria-label":"previous"},e.createElement(s,null,e.createElement(l,{faIcon:t,size:"1.25em"}),e.createElement(c,null,"Scroll carousel to previous index"))))},m=function(t){return e.createElement("div",null,e.createElement(i,{disabled:!!t.disabled,"aria-label":"next"},e.createElement(s,null,e.createElement(l,{faIcon:n,size:"1.25em"}),e.createElement(c,null,"Scroll carousel to previous index"))))},d=function(t){var n=t.count,l=t.currentPosition,i=void 0===l?0:l,s=t.scrollToPosition,d=t.next,f=t.previous,E=i!==n-1,v=0!==i,p=Array.from({length:n},(function(e,t){return"arrayIndex".concat(t)}));return e.createElement(r,null,e.createElement(u,{disabled:!v,onClick:f}),e.createElement(o,{$count:n},p.map((function(t,n){var l=n===i;return e.createElement(a,{key:t,role:"switch","aria-checked":l,onClick:function(){s(n)},$selected:l},e.createElement(c,null,"Scroll carousel to index ".concat(n)))}))),e.createElement(m,{disabled:!E,onClick:d}))};export{u as CarouselLeftButton,m as CarouselRightButton,d as Dots,d 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, { type ButtonHTMLAttributes } 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\ntype DotProps = {\n  count: number;\n  currentPosition: number;\n  scrollToPosition: (to: number) => void;\n  next: () => void;\n  previous: () => void;\n};\n\nexport const CarouselLeftButton = (\n  props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n  <div>\n    <CarouselButton {...props} aria-label=\"previous\">\n      <VerticalAlign>\n        <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n        <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n      </VerticalAlign>\n    </CarouselButton>\n  </div>\n);\n\nexport const CarouselRightButton = (\n  props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n  <div>\n    <CarouselButton {...props} aria-label=\"next\">\n      <VerticalAlign>\n        <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n        <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n      </VerticalAlign>\n    </CarouselButton>\n  </div>\n);\n\nexport const Dots = ({\n  count,\n  currentPosition = 0,\n  scrollToPosition,\n  next,\n  previous,\n}: DotProps) => {\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      <CarouselLeftButton disabled={!moreOnLeft} onClick={previous} />\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              selected={isSelected}\n              role=\"switch\"\n              aria-checked={isSelected}\n              onClick={scrollTo}\n            >\n              <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n            </Dot>\n          );\n        })}\n      </DotContainer>\n\n      <CarouselRightButton disabled={!moreOnRight} onClick={next} />\n    </ButtonWrapper>\n  );\n};\n\nexport default Dots;\n"],"names":["CarouselLeftButton","props","React","createElement","CarouselButton","__assign","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","CarouselRightButton","faCaretRight","Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","ButtonWrapper","disabled","onClick","DotContainer","map","item","index","isSelected","Dot","key","selected","role"],"mappings":"8XAsBaA,EAAqB,SAChCC,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAAAC,cAACC,EAAcC,EAAA,CAAA,EAAKJ,EAAK,CAAA,aAAa,aACpCC,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQC,EAAaC,KAAK,WAClCR,EAACC,cAAAQ,8CAIP,EAEWC,EAAsB,SACjCX,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAAAC,cAACC,EAAcC,EAAA,CAAA,EAAKJ,EAAK,CAAA,aAAa,SACpCC,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQK,EAAcH,KAAK,WACnCR,EAACC,cAAAQ,8CAIP,EAEWG,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAEFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,IAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAG,IAE3E,OACE3B,gBAAC6B,EAAa,KACZ7B,EAACC,cAAAH,EAAmB,CAAAgC,UAAWT,EAAYU,QAASZ,IAEpDnB,EAAAC,cAAC+B,EAAY,CAAClB,MAAOA,GAClBQ,EAAWW,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAUnB,EAI7B,OACEhB,gBAACqC,EAAG,CACFC,IAAKJ,EACLK,SAAUH,EACVI,KAAK,SAAQ,eACCJ,EACdL,QATa,WACfd,EAAiBkB,EACnB,GASInC,EAACC,cAAAQ,OAAkB,4BAA4BmB,OAAAO,IAGrD,KAGFnC,EAAAC,cAACS,EAAmB,CAACoB,UAAWV,EAAaW,QAASb,IAG5D"}
+{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes } 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 CarouselLeftButton = (\n  props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n  <div>\n    <CarouselButton disabled={!!props.disabled} aria-label=\"previous\">\n      <VerticalAlign>\n        <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n        <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n      </VerticalAlign>\n    </CarouselButton>\n  </div>\n);\n\nexport const CarouselRightButton = (\n  props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n  <div>\n    <CarouselButton disabled={!!props.disabled} aria-label=\"next\">\n      <VerticalAlign>\n        <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n        <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n      </VerticalAlign>\n    </CarouselButton>\n  </div>\n);\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      <CarouselLeftButton disabled={!moreOnLeft} onClick={previous} />\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      <CarouselRightButton disabled={!moreOnRight} onClick={next} />\n    </ButtonWrapper>\n  );\n};\n\nexport default Dots;\n"],"names":["CarouselLeftButton","props","React","createElement","CarouselButton","disabled","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","CarouselRightButton","faCaretRight","Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","ButtonWrapper","onClick","DotContainer","$count","map","item","index","isSelected","Dot","key","role"],"mappings":"0TAcaA,EAAqB,SAChCC,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAACC,cAAAC,EAAe,CAAAC,WAAYJ,EAAMI,SAAQ,aAAa,YACrDH,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQC,EAAaC,KAAK,WAClCR,EAACC,cAAAQ,8CAIP,EAEWC,EAAsB,SACjCX,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAACC,cAAAC,EAAe,CAAAC,WAAYJ,EAAMI,SAAQ,aAAa,QACrDH,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQK,EAAcH,KAAK,WACnCR,EAACC,cAAAQ,8CAIP,EAEWG,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,OACE3B,gBAAC6B,EAAa,KACZ7B,EAACC,cAAAH,EAAmB,CAAAK,UAAWkB,EAAYS,QAASX,IAEpDnB,EAACC,cAAA8B,EAAqB,CAAAC,OAAAlB,GACnBQ,EAAWW,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAUnB,EAI7B,OACEhB,EAACC,cAAAoC,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdN,QARa,WACfb,EAAiBkB,EACnB,YAOeC,GAEXpC,EAACC,cAAAQ,OAAkB,4BAA4BmB,OAAAO,IAGrD,KAGFnC,EAAAC,cAACS,EAAmB,CAACP,UAAWiB,EAAaU,QAASZ,IAG5D"}

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

@@ -1,2 +1,2 @@
-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(),x=void 0!==f,P=n(f||0),T=P[0],y=P[1],j=n(!x),W=j[0],k=j[1],b=r(null),B=e.Children.toArray(m).filter(Boolean),S=function(e){if(null==b?void 0:b.current){var t=b.current.scrollWidth,n=0===e,r=e===b.current.children.length-1,l=b.current.children[e];if(!l)return;var o=l.offsetLeft;n?b.current.scrollTo(0,0):r?b.current.scrollTo(t,0):b.current.scrollTo(o,0),W||k(!0)}};l((function(){x&&k(!1)}),[f]),l((function(){W||S(f||0)}),[W]);var U=1===B.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(u,null,e.createElement(s,{ref:b,"aria-live":"assertive",smoothScrolling:W,tabIndex:0},B.map((function(t,n){var r=n===T,l="card-".concat(n);return e.createElement(a,{key:l,onlyChild:U,fullWidthChild:p},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&T!==(t=n)&&(y(t),C&&clearTimeout(null==C?void 0:C.current),C.current=setTimeout((function(){h&&W&&h(t)}),500))}},e.createElement(d,{onlyChild:U,isSelected:r,shrinkUnselectedPages:g,fullWidthChild:p},t)))}))))),B.length>1?e.createElement(i,null,e.createElement(c,{count:B.length,currentPosition:T,scrollToPosition:S,next:function(){S(T+1)},previous:function(){S(T-1)}})):null)};t(f);export{f 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!==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","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_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","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","Dots","count","next","previous","memo"],"mappings":"wVAyCO,IAAMA,EAAW,SAACC,OACvBC,EAAaD,EAAAC,cACbC,EAAQF,EAAAE,SACRC,EAAiBH,EAAAG,kBACjBC,EAA6BJ,EAAAK,sBAA7BA,OAAwB,IAAAD,KACxBE,EAAAN,EAAAO,eAAAA,OAAc,IAAAD,GAAQA,EAEhBE,EAAQC,EAAMC,SACdC,OAA8C,IAAlBV,EAC5BW,EAAwCC,EAASZ,GAAiB,GAAjEa,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYT,EAAyB,MAGrCU,EAAaX,EAAMY,SAASC,QAAQpB,GAAUqB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAAS,EAATA,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQzB,SAAS8B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQzB,SAASwB,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,EAEtB,CACH,EAGAmB,GAAU,WACJ1B,GACFO,GAAmB,EAEvB,GAAG,CAACjB,IAEJoC,GAAU,WACHpB,GACHQ,EAAiBxB,GAAiB,EAEtC,GAAG,CAACgB,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,YACVF,gBAAiBA,EACjB4B,SAAU,GAETzB,EAAW0B,KAAI,SAACC,EAAOC,GACtB,IAAMC,EAAaD,IAAUlC,EACvBoC,EAAY,QAAQC,OAAAH,GAC1B,OACEvC,EAAA8B,cAACa,EAAY,CACXC,IAAKH,EACLZ,UAAWA,EACX/B,eAAgBA,GAEhBE,EAAA8B,cAACe,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAU,SAACC,GA1FT,IAAChC,EA2FGgC,GA1FlB5C,KADeY,EA4FasB,KA1FhCjC,EAAmBW,GAEflB,GACFmD,aAAanD,eAAAA,EAAOmB,SAEtBnB,EAAMmB,QAAUiC,YAAW,WACrBzD,GAAqBc,GAMvBd,EAAkBuB,EAErB,GAAE,QAgFajB,EAAC8B,cAAAsB,GACCvB,UAAWA,EACXW,WAAYA,EACZ5C,sBAAuBA,EACvBE,eAAgBA,GAEfwC,IAKV,OAIN3B,EAAWY,OAAS,EACnBvB,EAAA8B,cAACE,EAAG,KACFhC,EAAA8B,cAACuB,EAAI,CACHC,MAAO3C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClBuC,KAlGG,WACXvC,EAAiBX,EAAkB,EACrC,EAiGUmD,SA/FO,WACfxC,EAAiBX,EAAkB,EACrC,KAgGQ,KAGV,EAEeoD,EAAKnE"}
+{"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","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_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,OAAwB,IAAAD,KACxBE,EAAAN,EAAAO,eAAAA,OAAc,IAAAD,GAAQA,EAEhBE,EAAQC,EAAMC,SACdC,OAA8C,IAAlBV,EAC5BW,EAAwCC,EAASZ,GAAiB,GAAjEa,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYT,EAAyB,MAGrCU,EAAaX,EAAMY,SAASC,QAAQpB,GAAUqB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAAS,EAATA,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQzB,SAAS8B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQzB,SAASwB,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,EAEtB,CACH,EAGAmB,GAAU,WACJ1B,GACFO,GAAmB,EAEvB,GAAG,CAACjB,IAEJoC,GAAU,WACHpB,GACHQ,EAAiBxB,GAAiB,EAEtC,GAAG,CAACgB,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,WACrB3D,GAAqBc,GAMvBd,EAAkBuB,EAErB,GAAE,QAgFajB,EAAA8B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRf,EACWgB,uBAAA5D,EACPkD,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,EACrC,EAiGUuD,SA/FO,WACf5C,EAAiBX,EAAkB,EACrC,KAgGQ,KAGV,EAEewD,EAAKvE"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var o,t,r,i,a,s,l,c,d,p,h=e.div(o||(o=n(["\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n"],["\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n"]))),m=e.ul(t||(t=n(["\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ",";\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n"],["\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ",";\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n"])),(function(n){return n.smoothScrolling?"smooth":"auto"})),u=e.li(r||(r=n(["\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ",";\n"],["\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ",";\n"])),(function(n){var e=n.onlyChild,o=n.fullWidthChild;return e||o?"100%":"80%"})),f=e.div(i||(i=n(["\n  transition: transform 0.2s linear;\n  transform: ",";\n"],["\n  transition: transform 0.2s linear;\n  transform: ",";\n"])),(function(n){var e=n.isSelected,o=n.shrinkUnselectedPages,t=n.onlyChild,r=n.fullWidthChild;return t||e&&o||r?"scale(1)":"scale(0.9)"})),g=e.div(a||(a=n(["\n  display: flex;\n  justify-content: center;\n"],["\n  display: flex;\n  justify-content: center;\n"]))),b=e.span(s||(s=n(["\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n"],["\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n"]))),x=e.button(l||(l=n(["\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ",";\n  font-size: ",";\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ",";\n  }\n"],["\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ",";\n  font-size: ",";\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ",";\n  }\n"])),(function(n){var e=n.disabled,o=n.theme;return e?o.colors.disabled:"su2c"===o.name?o.colors.textDark:o.colors.primary}),(function(n){return n.theme.fontSizes.xxxl}),(function(n){return n.disabled?"scale(0.8)":"scale(1)"})),w=e.div(c||(c=n(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n\n  @media (min-width: ",") {\n    display: ",";\n  }\n"])),(function(n){return n.count>6?"none":"flex"}),(function(n){return n.theme.breakpoint.tablet}),(function(n){return n.count>10?"none":"flex"}),(function(n){return n.theme.breakpoint.desktop}),(function(n){return n.count>20?"none":"flex"})),y=e.button(d||(d=n(["\n  border: none;\n  outline-offset: ",";\n  padding: 0;\n  margin: ",";\n  width: ",";\n  height: ",";\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ",";\n  background-color: ",";\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n"],["\n  border: none;\n  outline-offset: ",";\n  padding: 0;\n  margin: ",";\n  width: ",";\n  height: ",";\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ",";\n  background-color: ",";\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n"])),(function(n){return n.theme.spacing.xxs}),(function(n){var e=n.theme;return"auto ".concat(e.spacing.xxs)}),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.fontSizes.l}),(function(n){var e=n.theme;return"solid 1px ".concat("su2c"===e.name?e.colors.textDark:e.colors.primary)}),(function(n){var e=n.theme;return n.selected?"".concat("su2c"===e.name?e.colors.textDark:e.colors.primary):e.colors.backgroundLight})),v=e.span(p||(p=n(["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"],["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"])));export{g as ButtonWrapper,x as CarouselButton,u as CarouselCard,f as CarouselCardInner,m as CarouselScrollArea,h as CarouselWrapper,y as Dot,w as DotContainer,v as ScreenReaderOnly,b as VerticalAlign};
+import{__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\";\nimport { type ButtonHTMLAttributes } from \"react\";\n\nimport { type ThemeType } from \"../../types\";\n\nexport const CarouselWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n`;\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\n\ntype CarouselScrollAreaProps = {\n  smoothScrolling: boolean;\n};\n\ntype CarouselCardProps = {\n  onlyChild: boolean;\n  fullWidthChild: boolean;\n};\n\ntype CarouselCardInnerProps = {\n  isSelected: boolean;\n  shrinkUnselectedPages: boolean;\n  onlyChild: boolean;\n  fullWidthChild: boolean;\n};\n\nexport const CarouselScrollArea = styled.ul<CarouselScrollAreaProps>`\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<CarouselCardProps>`\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<CarouselCardInnerProps>`\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\ntype CarouselButtonProps = ThemeProps & ButtonHTMLAttributes<HTMLElement>;\n\nexport const CarouselButton = styled.button<CarouselButtonProps>`\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\ntype DotContainerProps = ThemeProps & {\n  count: number;\n};\n\nexport const DotContainer = styled.div<DotContainerProps>`\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<ThemeProps & { selected: boolean }>`\n  border: none;\n  outline-offset: ${({ theme }) => theme.spacing.xxs};\n  padding: 0;\n  margin: ${({ theme }) => `auto ${theme.spacing.xxs}`};\n  width: ${({ theme }) => theme.fontSizes.l};\n  height: ${({ theme }) => theme.fontSizes.l};\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ${({ theme }) =>\n    `solid 1px ${\n      theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n    }`};\n  background-color: ${({ theme, selected }) =>\n    selected\n      ? `${\n          theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n        }`\n      : theme.colors.backgroundLight};\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.span`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["CarouselWrapper","styled","div","templateObject_1","__makeTemplateObject","CarouselScrollArea","ul","templateObject_2","_a","smoothScrolling","CarouselCard","li","templateObject_3","onlyChild","fullWidthChild","CarouselCardInner","templateObject_4","isSelected","shrinkUnselectedPages","ButtonWrapper","templateObject_5","VerticalAlign","span","templateObject_6","CarouselButton","button","templateObject_7","disabled","theme","colors","name","textDark","primary","fontSizes","xxxl","DotContainer","count","breakpoint","tablet","desktop","Dot","templateObject_9","spacing","xxs","l","concat","selected","backgroundLight","ScreenReaderOnly","templateObject_10"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Carousel/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nexport const CarouselWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n`;\n\nexport const CarouselScrollArea = styled.ul<{\n  $smoothScrolling: boolean;\n}>`\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ${({ $smoothScrolling }) =>\n    $smoothScrolling ? \"smooth\" : \"auto\"};\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n`;\n\nexport const CarouselCard = styled.li<{\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ${({ $onlyChild, $fullWidthChild }) =>\n    $onlyChild || $fullWidthChild ? \"100%\" : \"80%\"};\n`;\n\nexport const CarouselCardInner = styled.div<{\n  $isSelected: boolean;\n  $shrinkUnselectedPages: boolean;\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  transition: transform 0.2s linear;\n  transform: ${({\n    $isSelected,\n    $shrinkUnselectedPages,\n    $onlyChild,\n    $fullWidthChild,\n  }) =>\n    $onlyChild || ($isSelected && $shrinkUnselectedPages) || $fullWidthChild\n      ? \"scale(1)\"\n      : \"scale(0.9)\"};\n`;\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nexport const VerticalAlign = styled.span`\n  display: block;\n  margin: auto;\n  height: 2rem;\n  line-height: 1.75rem;\n`;\n\nexport const CarouselButton = styled.button<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ${({ disabled, theme }) =>\n    disabled\n      ? theme.colors.disabled\n      : theme.name === \"su2c\"\n        ? theme.colors.textDark\n        : theme.colors.primary};\n  font-size: ${({ theme }) => theme.fontSizes.xxxl};\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ${({ disabled }) => (disabled ? \"scale(0.8)\" : \"scale(1)\")};\n  }\n`;\n\nexport const DotContainer = styled.div<{ $count: number; theme: ThemeType }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ${({ $count }) => ($count > 6 ? \"none\" : \"flex\")};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: ${({ $count }) => ($count > 10 ? \"none\" : \"flex\")};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: ${({ $count }) => ($count > 20 ? \"none\" : \"flex\")};\n  }\n`;\n\nexport const Dot = styled.button<{ $selected: boolean; theme: ThemeType }>`\n  border: none;\n  outline-offset: ${({ theme }) => theme.spacing.xxs};\n  padding: 0;\n  margin: ${({ theme }) => `auto ${theme.spacing.xxs}`};\n  width: ${({ theme }) => theme.fontSizes.l};\n  height: ${({ theme }) => theme.fontSizes.l};\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ${({ theme }) =>\n    `solid 1px ${\n      theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n    }`};\n  background-color: ${({ theme, $selected }) =>\n    $selected\n      ? `${\n          theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n        }`\n      : theme.colors.backgroundLight};\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.span`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["CarouselWrapper","styled","div","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{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o,{forwardRef as t}from"react";import{useTheme as s,ThemeProvider as i}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as d}from"../ErrorText/index.js";import{IconFa as m}from"../IconFa/index.js";import{StyledLabel as c,StyledInput as n,SelectedBorder as f,CheckWrapper as u,Check as p}from"./styles.js";var h=t((function(t,h){var E=s(),b=e(e({},a),E),x=t.children,g=r(t,["children"]);return o.createElement(i,{theme:b},o.createElement(c,{hasError:t.hasError||!!t.errorMessage||!1,checked:t.checked||t.defaultChecked||!1,disabled:t.disabled||!1},o.createElement(n,e({},g,{disabled:t.disabled||!1,type:"checkbox",ref:h,"aria-describedby":t.id&&t.errorMessage?"".concat(t.id,"-error"):void 0})),o.createElement(f,null),x||t.value,b.utilities.useDefaultFromControls?null:o.createElement(u,null,o.createElement(p,null,o.createElement(m,{faIcon:l,color:"check",size:"1.25em"})))),!!t.errorMessage&&o.createElement(d,{marginTop:"xxs",id:t.id?"".concat(t.id,"-error"):void 0},t.errorMessage))}));export{h as Checkbox,h as default};
+import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o,{forwardRef as t}from"react";import{useTheme as s,ThemeProvider as i}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as d}from"../ErrorText/index.js";import{IconFa as m}from"../IconFa/index.js";import{StyledLabel as c,StyledInput as n,SelectedBorder as f,CheckWrapper as u,Check as h}from"./styles.js";var p=t((function(t,p){var E=s(),b=e(e({},a),E),x=t.children,j=t.hasError,k=t.errorMessage,v=r(t,["children","hasError","errorMessage"]);return o.createElement(i,{theme:b},o.createElement(c,{$hasError:j||!!k||!1,$checked:t.checked||t.defaultChecked||!1,$disabled:t.disabled||!1},o.createElement(n,e({},v,{disabled:t.disabled||!1,type:"checkbox",ref:p,"aria-describedby":t.id&&k?"".concat(t.id,"-error"):void 0})),o.createElement(f,null),x||t.value,b.utilities.useDefaultFromControls?null:o.createElement(u,null,o.createElement(h,null,o.createElement(m,{faIcon:l,color:"check",size:"1.25em"})))),!!k&&o.createElement(d,{marginTop:"xxs",id:t.id?"".concat(t.id,"-error"):void 0},k))}));export{p as Checkbox,p as default};
 //# 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    const { children, ...propsWithoutChildren } = props;\n\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          hasError={props.hasError || !!props.errorMessage || false}\n          checked={props.checked || props.defaultChecked || false}\n          disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...propsWithoutChildren}\n            disabled={props.disabled || false}\n            type=\"checkbox\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!props.errorMessage\n                ? `${props.id}-error`\n                : 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        {!!props.errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {props.errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","children","propsWithoutChildren","__rest","React","createElement","ThemeProvider","StyledLabel","hasError","errorMessage","checked","defaultChecked","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"ghBAoCaA,EAAWC,GACtB,SAACC,EAAsBC,GACrB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAEGK,EAAsCP,EAA9BO,SAAKC,EAAoBC,EAAKT,EAAxC,CAAqC,aAE3C,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CACVC,SAAUd,EAAMc,YAAcd,EAAMe,eAAgB,EACpDC,QAAShB,EAAMgB,SAAWhB,EAAMiB,iBAAkB,EAClDC,SAAUlB,EAAMkB,WAAY,GAE5BR,EAAAC,cAACQ,EAAWd,EAAA,CAAA,EACNG,EAAoB,CACxBU,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLnB,IAAKA,EAEH,mBAAED,EAAMqB,IAAQrB,EAAMe,aAClB,GAAAO,OAAGtB,EAAMqB,GAAU,eACnBE,KAGRb,EAAAC,cAACa,EAAiB,MACjBjB,GAAYP,EAAMyB,MAClBrB,EAAMsB,UAAUC,uBAAyB,KACxCjB,gBAACkB,EAAY,KACXlB,EAAAC,cAACkB,EAAK,KACJnB,EAAAC,cAACmB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjDlC,EAAMe,cACPL,EAACC,cAAAwB,EACC,CAAAC,UAAU,MACVf,GAAIrB,EAAMqB,GAAK,UAAGrB,EAAMqB,GAAE,eAAWE,GAEpCvB,EAAMe,cAKjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = forwardRef(\n  (props: CheckBoxProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const { children, hasError, errorMessage, ...rest } = props;\n\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={hasError || !!errorMessage || false}\n          $checked={props.checked || props.defaultChecked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"checkbox\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n            }\n          />\n          <SelectedBorder />\n          {children || props.value}\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check>\n                <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n              </Check>\n            </CheckWrapper>\n          )}\n        </StyledLabel>\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"ghBAoCaA,EAAWC,GACtB,SAACC,EAAsBC,GACrB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGGK,EAA8CP,EAAKO,SAAzCC,EAAoCR,EAA5BQ,SAAEC,EAA0BT,eAATU,IAASV,EAAhD,CAA6C,WAAA,WAAA,iBAEnD,OACEW,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAACC,cAAAE,EACY,CAAAC,UAAAP,KAAcC,IAAgB,EAAKO,SACpChB,EAAMiB,SAAWjB,EAAMkB,iBAAkB,YACxClB,EAAMmB,WAAY,GAE7BR,EAAAC,cAACQ,EACKf,EAAA,CAAA,EAAAK,GACJS,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,WACLpB,IAAKA,EAAG,mBAEJD,EAAMsB,IAAQb,EAAe,GAAGc,OAAAvB,EAAMsB,GAAE,eAAWE,KAGzDb,EAAAC,cAACa,EAAiB,MACjBlB,GAAYP,EAAM0B,MAClBtB,EAAMuB,UAAUC,uBAAyB,KACxCjB,gBAACkB,EAAY,KACXlB,EAAAC,cAACkB,EAAK,KACJnB,EAAAC,cAACmB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD1B,GACDE,gBAACyB,EAAS,CACRC,UAAU,MACVf,GAAItB,EAAMsB,GAAK,GAAGC,OAAAvB,EAAMsB,kBAAaE,GAEpCf,GAKX"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\ntype StyledLabelProps = {\n  checked: boolean;\n  disabled: boolean;\n  hasError: boolean;\n  theme: ThemeType;\n};\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\n\nexport const CheckWrapper = styled.div<ThemeProps>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<ThemeProps>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<StyledLabelProps>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  position: relative;\n\n  cursor: ${({ disabled }) => (disabled ? \"not-allowed\" : \"pointer\")};\n  display: block;\n\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, disabled }) => disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, disabled: isDisabled, checked, hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${isDisabled\n                ? theme.colors.disabled\n                : hasError\n                  ? theme.colors.danger\n                  : checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${isDisabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<ThemeProps>`\n  margin-right: 5px !important;\n\n  ${({ theme }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          /* This hides the original input */\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","isDisabled","checked","hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","colours","SelectedBorder","templateObject_5","StyledInput","input","templateObject_8","templateObject_6","s","templateObject_7","xxs"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n\n  svg {\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $checked: boolean;\n  $disabled: boolean;\n  $hasError: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  &:focus ~ ${CheckWrapper} ${Check} {\n    outline: 2px solid #7aacfe; /* for non-webkit browsers */\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  svg {\n    path {\n      fill: ${({ theme, $disabled }) => $disabled && theme.colors.disabled};\n    }\n  }\n\n  ${({ theme, $disabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid ${BORDER_THICKNESS}\n              ${$disabled ? theme.colors.disabled : theme.colours};\n          }\n        `}\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n// TODO when we get rid of bootstrap remove !important.\nexport const StyledInput = styled.input<{\n  theme: ThemeType;\n}>`\n  margin-right: 5px !important;\n\n  ${({ theme }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          /* This hides the original input */\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} svg path {\n            transform: rotateY(0deg);\n          }\n        `}\n`;\n"],"names":["CHECK_BOX_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","colours","SelectedBorder","templateObject_5","StyledInput","input","templateObject_8","templateObject_6","s","templateObject_7","xxs"],"mappings":"2HAGA,oBAAMA,EAAiB,SAIVC,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,eAAA,gDAAA,oBAAA,OAAA,CAEpC,yCAEwB,eACD,gDAEU,oBAKzB,SAREL,EACDA,EAEUA,GACX,SAACM,GAIH,OAFWA,EAAAC,MAAAC,QAAAC,EAEX,IAGKC,EAAQR,EAAOS,KAAIC,IAAAA,EAAAP,EAAA,CAAA,mEAAA,gBAAA,eAAA,8QAAA,CAE9B,mEAG+D,gBACvC,eACD,iRAFH,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOC,eAAb,GACzBd,EACDA,GAkBEe,EAAcb,EAAOc,MAKhCC,IAAAA,EAAAZ,EAAA,CAAA,iHAAA,mBAAA,qBAAA,4BAAA,yCAAA,oCAAA,iBAAA,kBAAA,IAAA,+JAAA,sBAAA,MAAA,CAAA,iHAOyD,mBACA,qBACI,4BAEE,yCAGK,oCAIT,iBAEyM,kBAC5O,IAAS,+JAOuC,sBAyBjE,SA9CQ,SAACC,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,UAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAC,MAAaW,WAAWE,YAAjB,IACb,SAACd,GAAc,OAAPA,EAAAC,MAAaW,WAAWG,cAAjB,IAEV,SAACf,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,IAGzB,SAAChB,GAAkB,OAAPA,EAAAiB,UAAoB,cAAgB,SAA7B,IAGpB,SAACjB,OAAEC,EAAKD,EAAAC,MACf,OAD0BD,EAAAiB,UACdhB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOY,QAAjD,IACS,SAACnB,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBApEkB,MAoEK,SAAAmB,OAAQnB,EAAMoB,UAAUC,iBAAgB,YAAAF,OAAWnB,EAAMW,WAAWC,8BAAqBZ,EAAMC,QAAQqB,EAAY,YAAAH,OApExH,sBAoE6InB,EAAMoB,UAAUC,oCAA2BrB,EAAMW,WAAWC,WAAqB,YAAAO,OAAAnB,EAAMC,QAAQsB,GAA9P,GACU7B,EAAgBS,GAOhB,SAACJ,OAAEC,EAAKD,EAAAC,MAAkB,OAAPD,EAAAiB,WAAoBhB,EAAMM,OAAOW,QAA1B,IAIpC,SAAClB,OAAEC,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UAAEQ,EAAQzB,EAAAyB,SAAEC,EAAS1B,EAAA0B,UACxC,OAAAzB,EAAMoB,UAAUM,uBACZ,KACAC,EAAGC,IAAAA,EAAA9B,EAAA,CAAA,8CAAA,IAAA,iCAAA,mBAAA,uCAAA,IAAA,iCAAA,mBAAA,4BAAA,CAAA,8CAGa,IAAS,iCACW,mBAOE,uCAGd,IAAS,iCACG,mBACqB,8BAbrDJ,EAAgBS,EArFH,MAuFTa,EACEhB,EAAMM,OAAOW,SACbQ,EACEzB,EAAMM,OAAOuB,OACbL,EACExB,EAAMM,OAAOwB,MACb9B,EAAMM,OAAOyB,YAGfrC,EAAgBS,EAhGX,MAkGTa,EAAYhB,EAAMM,OAAOW,SAAWjB,EAAMgC,QAlBtD,IAuBSC,EAAiBtC,EAAOC,IAAGsC,IAAAA,EAAApC,EAAA,CAAA,qFAAA,CAAA,wFAS3BqC,EAAcxC,EAAOyC,MAAKC,IAAAA,EAAAvC,EAAA,CAAA,0CAAA,MAAA,CAErC,0CA6BO,SA1BL,SAACC,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAAAA,EAAMoB,UAAUM,uBACZC,EAAGW,IAAAA,EAAAxC,EAAA,CAAA,qMAAA,eAAA,CAAA,qMAOsB,iBAAfE,EAAMC,QAAQsC,GAExBZ,EAAGa,IAAAA,EAAA1C,EAAA,CAAA,mGAAA,mDAAA,sFAAA,8GAAA,6EAAA,CAAA,mGAGwB,mDAGC,sFAE8B,8GAI9B,+EATlBE,EAAMC,QAAQwC,IAGVR,EAEoBjC,EAAMM,OAAOyB,YAI/BrC,EAtBpB"}

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

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