@cruk/cruk-react-components 6.2.3 → 7.0.0

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  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    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 = ({ ...props }: BoxProps) => {\n  const { children, backgroundColor, ref, ...rest } = props;\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const restWithInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <StyledBox\n      theme={theme}\n      $backgroundColor={backgroundColor}\n      {...restWithInternalSpacingProps}\n      ref={ref}\n    >\n      {children}\n    </StyledBox>\n  );\n};\n\nexport default Box;\n"],"names":["Box","_a","props","__rest","children","backgroundColor","ref","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor"],"mappings":"oTAgCO,IAAMA,EAAM,SAACC,OAAKC,EAAKC,EAAAF,EAAV,IACVG,EAA4CF,EAAKE,SAAvCC,EAAkCH,EAAKG,gBAAtBC,EAAiBJ,MAATK,IAASL,EAA9C,CAAA,WAAA,kBAAA,QACAM,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAA+BC,EAAmCP,GAExE,OACEQ,EAAAC,cAACC,KACCP,MAAOA,EAAKQ,iBACMb,GACdQ,EAA4B,CAChCP,IAAKA,IAEJF,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nimport { type ColourVariableType } from \"../../types\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string | ColourVariableType;\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 = ({ ...props }: BoxProps) => {\n  const { children, backgroundColor, ref, ...rest } = props;\n  const restWithInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n  const backgroundColorValue = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : undefined;\n\n  return (\n    <StyledBox\n      $backgroundColor={backgroundColorValue}\n      {...restWithInternalSpacingProps}\n      ref={ref}\n    >\n      {children}\n    </StyledBox>\n  );\n};\n\nexport default Box;\n"],"names":["Box","_a","props","__rest","children","backgroundColor","ref","rest","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","backgroundColorValue","themeColorOrString","undefined","React","createElement","StyledBox","__assign","$backgroundColor"],"mappings":"qRAgCO,IAAMA,EAAM,SAACC,OAAKC,EAAKC,EAAAF,EAAV,IACVG,EAA4CF,EAAKE,SAAvCC,EAAkCH,EAAKG,gBAAtBC,EAAiBJ,MAATK,IAASL,EAA9C,CAAA,WAAA,kBAAA,QACAM,EAA+BC,EAAmCF,GAClEG,EAAuBL,EACzBM,EAAmBN,QACnBO,EAEJ,OACEC,EAAAC,cAACC,EAASC,EAAA,CAAAC,iBACUP,GACdF,EAA4B,CAChCF,IAAKA,IAEJF,EAGP"}

package/lib/src/components/Box/styles.d.ts

@@ -1,9 +1,8 @@
 import { type SpacingPropsInternal } from "../Spacing";
-import { type ThemeType } from "../../types";
+import { type colours } from "../../types";
 type StyledBoxProps = SpacingPropsInternal & {
-    $backgroundColor?: string;
+    $backgroundColor?: (typeof colours)[number] | string;
     $css?: string;
-    theme: ThemeType;
 };
 export declare const StyledBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBoxProps>> & string;
 export default StyledBox;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{spacing as r}from"../Spacing/index.js";var t,a=o.div(t||(t=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  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"])),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,r=n.$backgroundColor;return r&&void 0!==o.colors[r]?o.colors[r]:r||"transparent"},function(n){return r(n,n.theme)});export{a as StyledBox,a as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";import{spacing as o}from"../Spacing/index.js";var a,d=r.div(a||(a=n(["\n  background-color: ",";\n  // if we set a background color, add padding\n  padding: ",";\n  margin: 0 0 var(--spacing-m, 2rem) 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"],["\n  background-color: ",";\n  // if we set a background color, add padding\n  padding: ",";\n  margin: 0 0 var(--spacing-m, 2rem) 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"])),function(n){var r=n.$backgroundColor;return r||"transparent"},function(n){return n.$backgroundColor?"var(--spacing-s, 1.5rem)":0},function(n){return o(n)});export{d as StyledBox,d 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 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, $backgroundColor }) =>\n    $backgroundColor &&\n    typeof theme.colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$backgroundColor as ColorKeyType]\n      : $backgroundColor || \"transparent\"};\n\n  ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","_a","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props"],"mappings":"qKAWaA,EAAYC,EAAOC,0KAAmB,yBACc,iBAEvB,oBACI,8EAUL,UAEc,QAfjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,EACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,EAMT,SAACP,OAAEC,EAAKD,EAAAC,MAAEG,EAAgBJ,EAAAI,iBAC5C,OAAAA,QAC0D,IAAnDH,EAAMC,OAAOE,GAChBH,EAAMC,OAAOE,GACbA,GAAoB,aAHxB,EAKA,SAACI,GAAU,OAAAH,EAAQG,EAAOA,EAAMP,MAArB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport { type colours } from \"../../types\";\n\ntype StyledBoxProps = SpacingPropsInternal & {\n  $backgroundColor?: (typeof colours)[number] | string;\n  $css?: string;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n  background-color: ${({ $backgroundColor }) =>\n    $backgroundColor ? $backgroundColor : \"transparent\"};\n  // if we set a background color, add padding\n  padding: ${({ $backgroundColor }) =>\n    $backgroundColor ? \"var(--spacing-s, 1.5rem)\" : 0};\n  margin: 0 0 var(--spacing-m, 2rem) 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ${(props) => spacing(props)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","templateObject_1","__makeTemplateObject","_a","$backgroundColor","props","spacing"],"mappings":"+JAUO,MAAMA,EAAYC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yBAAA,iEAAA,mGAAA,MAAA,CAAgB,yBAEI,iEAGF,mGAOxB,QAXP,SAACC,GAAE,IAAAC,EAAgBD,EAAAC,iBACrC,OAAAA,GAAsC,aAAtC,EAES,SAACD,GACV,OAD4BA,EAAAC,iBACT,2BAA6B,CAAhD,EAOA,SAACC,GAAU,OAAAC,EAAQD,EAAR"}

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

@@ -1,2 +1,2 @@
-import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import 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 a}from"./styles.js";var m=function(m){var s=o(),c=e(e({},n),s),f=m.appearance,p=void 0===f?"primary":f,u=m.isIconButton,d=void 0!==u&&u,h=m.full,v=void 0!==h&&h,y=m.size,b=void 0===y?"m":y,j=m.children,I=m.ref,$=r(m,["appearance","isIconButton","full","size","children","ref"]),g=t.Children.toArray(j),z="string"==typeof g[0],B=g[0],k=!(!d&&(1===g.length&&!z&&(null==B?void 0:B.type))!==i);return t.createElement(l,e({as:m.href?"a":"button"},m.href?{role:"button"}:{},{$full:!!v,$size:b,$appearance:p,$isIconButton:k},$,{theme:c,ref:I}),m.children&&g.length?t.Children.map(m.children,function(e,r){return t.createElement(a,{theme:c,key:r},e)}):null)};export{m as Button,m as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{IconFa as n}from"../IconFa/index.js";import{StyledButton as o,Spacer as i}from"./styles.js";var l=function(l){var a=l.appearance,s=void 0===a?"primary":a,c=l.isIconButton,f=void 0!==c&&c,u=l.full,d=void 0!==u&&u,p=l.size,m=void 0===p?"m":p,h=l.children,v=l.ref,y=e(l,["appearance","isIconButton","full","size","children","ref"]),b=t.Children.toArray(h),I="string"==typeof b[0],$=b[0],g=!(!f&&(1===b.length&&!I&&(null==$?void 0:$.type))!==n);return t.createElement(o,r({as:l.href?"a":"button"},l.href?{role:"button"}:{},{$full:!!d,$size:m,$appearance:s,$isIconButton:g},y,{ref:v}),l.children&&b.length?t.Children.map(l.children,function(e,r){return t.createElement(i,{key:r},e)}):null)};export{l as Button,l 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  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 = (props: ButtonProps) => {\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    ref,\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<HTMLElement>;\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) === 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\nexport default Button;\n"],"names":["Button","props","foundTheme","useTheme","theme","__assign","defaultTheme","_a","appearance","_b","isIconButton","_c","full","_d","size","children","ref","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":"sSAwCO,IAAMA,EAAS,SAACC,GACrB,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGHK,EAOEN,EAAKO,WAPPA,aAAa,UAASD,EACtBE,EAMER,EAAKS,aANPA,OAAY,IAAAD,GAAQA,EACpBE,EAKEV,EAAKW,KALPA,OAAI,IAAAD,GAAQA,EACZE,EAIEZ,EAAKa,KAJPA,OAAI,IAAAD,EAAG,IAAGA,EACVE,EAGEd,EAAKc,SAFPC,EAEEf,EAAKe,IADJC,IACDhB,EARE,CAAA,aAAA,eAAA,OAAA,OAAA,WAAA,QAUAiB,EAAaC,EAAMC,SAASC,QAAQN,GACpCO,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJd,IACuB,IAAtBQ,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAAUC,GAGxE,OACER,EAAAS,cAACC,EAAYxB,EAAA,CACXyB,GAAI7B,EAAM8B,KAAO,IAAM,UAClB9B,EAAM8B,KAAO,CAAEC,KAAM,UAAa,CAAA,EAAG,CAAAC,QACjCrB,EAAIsB,MACNpB,EAAIqB,YACE3B,EAAU4B,cACRZ,GACXP,EAAI,CACRb,MAAOA,EACPY,IAAKA,IAEJf,EAAMc,UAAYG,EAAWO,OAC1BN,EAAMC,SAASiB,IACbpC,EAAMc,SACN,SAACuB,EAAkBC,GAAkB,OACnCpB,EAAAS,cAACY,EAAM,CAACpC,MAAOA,EAAOqC,IAAKF,GACxBD,EAFgC,GAMvC,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  type ReactElement,\n  type ElementType,\n} from \"react\";\n\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 = (props: ButtonProps) => {\n  const {\n    appearance = \"primary\",\n    isIconButton = false,\n    full = false,\n    size = \"m\",\n    children,\n    ref,\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<HTMLElement>;\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) === 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      ref={ref}\n    >\n      {props.children && childArray.length\n        ? React.Children.map(\n            props.children,\n            (child: ReactNode, index: number) => (\n              <Spacer key={index}>{child}</Spacer>\n            ),\n          )\n        : null}\n    </StyledButton>\n  );\n};\n\nexport default Button;\n"],"names":["Button","props","_a","appearance","_b","isIconButton","_c","full","_d","size","children","ref","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","__assign","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key"],"mappings":"wMAsCO,IAAMA,EAAS,SAACC,GAEnB,IAAAC,EAOED,EAAKE,WAPPA,aAAa,UAASD,EACtBE,EAMEH,EAAKI,aANPA,OAAY,IAAAD,GAAQA,EACpBE,EAKEL,EAAKM,KALPA,OAAI,IAAAD,GAAQA,EACZE,EAIEP,EAAKQ,KAJPA,OAAI,IAAAD,EAAG,IAAGA,EACVE,EAGET,EAAKS,SAFPC,EAEEV,EAAKU,IADJC,IACDX,EARE,CAAA,aAAA,eAAA,OAAA,OAAA,WAAA,QAUAY,EAAaC,EAAMC,SAASC,QAAQN,GACpCO,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJd,IACuB,IAAtBQ,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAAUC,GAGxE,OACER,EAAAS,cAACC,EAAYC,EAAA,CACXC,GAAIzB,EAAM0B,KAAO,IAAM,UAClB1B,EAAM0B,KAAO,CAAEC,KAAM,UAAa,CAAA,EAAG,CAAAC,QACjCtB,EAAIuB,MACNrB,EAAIsB,YACE5B,EAAU6B,cACRb,GACXP,EAAI,CACRD,IAAKA,IAEJV,EAAMS,UAAYG,EAAWO,OAC1BN,EAAMC,SAASkB,IACbhC,EAAMS,SACN,SAACwB,EAAkBC,GAAkB,OACnCrB,EAAAS,cAACa,EAAM,CAACC,IAAKF,GAAQD,EADc,GAIvC,KAGV"}

package/lib/src/components/Button/styles.d.ts

@@ -1,9 +1,6 @@
-import { type ThemeType, type ButtonAppearanceType } from "../../types";
-export declare const Spacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
+import { type ButtonAppearanceType } from "../../types";
+export declare const Spacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    theme: ThemeType;
     href?: string;
     $isIconButton: boolean;
     $appearance?: ButtonAppearanceType;

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 r}from"../../../node_modules/tslib/tslib.es6.js";import n,{css as o}from"styled-components";var t,e,a,c,i,d,l,b,s=n.span(t||(t=r(["\n  margin-left: var(--spacing-xxs, 1rem);\n  &:first-of-type {\n    margin-left: 0;\n  }\n"],["\n  margin-left: var(--spacing-xxs, 1rem);\n  &:first-of-type {\n    margin-left: 0;\n  }\n"]))),u=n.button(b||(b=r(["\n  --_button-height: 3rem;\n  --_button-height-large: 4rem;\n\n  box-sizing: border-box;\n  min-height: var(--_button-height, 3rem);\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ",";\n  width: ",";\n  min-width: ",';\n  border-radius: var(--btn-border-radius, 0px);\n  border-style: solid;\n  border-width: var(--btn-border-thickness, 2px);\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: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-buttons, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-buttons, 400);\n  text-align: center;\n  text-transform: var(--btn-text-transform, none);\n  text-decoration: var(--btn-text-decoration, none);\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ',"\n\n  ","\n\n  ","\n  \n  ","\n\n  ","\n\n  ","\n"],["\n  --_button-height: 3rem;\n  --_button-height-large: 4rem;\n\n  box-sizing: border-box;\n  min-height: var(--_button-height, 3rem);\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ",";\n  width: ",";\n  min-width: ",';\n  border-radius: var(--btn-border-radius, 0px);\n  border-style: solid;\n  border-width: var(--btn-border-thickness, 2px);\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: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-buttons, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-buttons, 400);\n  text-align: center;\n  text-transform: var(--btn-text-transform, none);\n  text-decoration: var(--btn-text-decoration, none);\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ',"\n\n  ","\n\n  ","\n  \n  ","\n\n  ","\n\n  ","\n"])),function(r){return r.$isIconButton?"0":"calc( (var(--_button-height, 3rem) - ( var(--btn-border-thickness, 2px) * 2) - var(--typ-line-height, 1.5em) ) / 2) var(--btn-horizontal-padding, 1.5em)"},function(r){return r.$isIconButton?"var(--_button-height, 3rem)":"auto"},function(r){return r.$isIconButton?"var(--_button-height, 3rem)":"auto"},function(n){return"primary"===n.$appearance&&o(e||(e=r(["\n      background-color: var(--clr-button-primary-background, #e60079);\n      border-color: var(--clr-button-primary-border, #e60079);\n      color: var(--clr-button-primary-text, #ffffff) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-primary-background-hover, #cc006c);\n        border-color: var(--clr-button-primary-border-hover, #cc006c);\n        color: var(--clr-button-primary-text-hover, #ffffff) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-primary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-primary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-primary-disabled-border, #e6e6e6);\n      }\n    "],["\n      background-color: var(--clr-button-primary-background, #e60079);\n      border-color: var(--clr-button-primary-border, #e60079);\n      color: var(--clr-button-primary-text, #ffffff) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-primary-background-hover, #cc006c);\n        border-color: var(--clr-button-primary-border-hover, #cc006c);\n        color: var(--clr-button-primary-text-hover, #ffffff) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-primary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-primary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-primary-disabled-border, #e6e6e6);\n      }\n    "])))},function(n){return"secondary"===n.$appearance&&o(a||(a=r(["\n      background-color: var(--clr-button-secondary-background, #ffffff);\n      border-color: var(--clr-button-secondary-border, #e60079);\n      color: var(--clr-button-secondary-text, #e60079) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-secondary-background-hover, #ffe6f3);\n        border-color: var(--clr-button-secondary-border-hover, #ffe6f3);\n        color: var(--clr-button-secondary-text-hover, #e60079) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-secondary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-secondary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-secondary-disabled-border, #e6e6e6);\n      }\n    "],["\n      background-color: var(--clr-button-secondary-background, #ffffff);\n      border-color: var(--clr-button-secondary-border, #e60079);\n      color: var(--clr-button-secondary-text, #e60079) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-secondary-background-hover, #ffe6f3);\n        border-color: var(--clr-button-secondary-border-hover, #ffe6f3);\n        color: var(--clr-button-secondary-text-hover, #e60079) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-secondary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-secondary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-secondary-disabled-border, #e6e6e6);\n      }\n    "])))},function(n){return"tertiary"===n.$appearance&&o(c||(c=r(["\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: var(--clr-button-tertiary-text, #e60079);\n      &:focus,\n      &:hover {\n        color: var(--clr-button-tertiary-text-hover, #cc006c);\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: var(--clr-button-tertiary-disabled-text, #666666) !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: var(--clr-button-tertiary-text, #e60079);\n      &:focus,\n      &:hover {\n        color: var(--clr-button-tertiary-text-hover, #cc006c);\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: var(--clr-button-tertiary-disabled-text, #666666) !important;\n        border-color: transparent;\n      }\n    "])))},function(n){var t=n.$size,e=n.$isIconButton;return"l"===t&&o(i||(i=r(["\n      min-height: var(--_button-height-large, 4rem);\n      border-radius: var(--btn-border-radius-large, 0px);\n      padding: ",";\n      min-width: ",";\n      height: ",";\n    "],["\n      min-height: var(--_button-height-large, 4rem);\n      border-radius: var(--btn-border-radius-large, 0px);\n      padding: ",";\n      min-width: ",";\n      height: ",";\n    "])),e?"0":"calc( (var(--_button-height-large, 4rem) - ( var(--btn-border-thickness, 2px) * 2) - var(--typ-line-height, 1.5em) ) / 2) var(--btn-horizontal-padding, 2rem)",e?"var(--_button-height-large, 4rem)":"auto",e?"var(--_button-height-large, 4rem)":"min-content")},function(n){return n.$full&&o(d||(d=r(["\n      width: 100%;\n    "],["\n      width: 100%;\n    "])))},function(n){return n.$css&&o(l||(l=r(["\n      ","\n    "],["\n      ","\n    "])),n.$css)});export{s as Spacer,u as StyledButton};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n  margin-left: ${({ theme }) => theme.spacing.xxs};\n  &:first-of-type {\n    margin-left: 0;\n  }\n`;\n\nexport const StyledButton = styled.button<{\n  theme: ThemeType;\n  href?: string;\n  $isIconButton: boolean;\n  $appearance?: ButtonAppearanceType;\n  $full?: boolean;\n  $size?: \"m\" | \"l\";\n  $css?: string;\n}>`\n  box-sizing: border-box;\n  min-height: ${BUTTON_HEIGHT};\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ${({ theme, $isIconButton }) =>\n    $isIconButton\n      ? \"0\"\n      : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n  width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n  min-width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  border-style: solid;\n  border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ${({\n    theme: {\n      fontSizes: { m },\n    },\n  }) => m};\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyButtons },\n    },\n  }) => fontFamilyButtons};\n  font-weight: ${({\n    theme: {\n      typography: { fontWeightButtons },\n    },\n  }) => fontWeightButtons};\n  text-align: center;\n  text-transform: ${({ theme }) => theme.button.textTransform};\n  text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${(props) =>\n    props.$appearance === \"primary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonPrimaryBackground};\n      border-color: ${props.theme.colors.buttonPrimaryBorder};\n      color: ${props.theme.colors.buttonPrimaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n        color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n        color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"secondary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonSecondaryBackground};\n      border-color: ${props.theme.colors.buttonSecondaryBorder};\n      color: ${props.theme.colors.buttonSecondaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n        color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors\n          .buttonSecondaryDisabledBackground};\n        color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"tertiary\" &&\n    css`\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ${props.theme.colors.buttonTertiaryText};\n      &:focus,\n      &:hover {\n        color: ${props.theme.colors.buttonTertiaryTextHover};\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n        border-color: transparent;\n      }\n    `}\n  \n  ${({ theme, $size, $isIconButton }) =>\n    $size === \"l\" &&\n    css`\n      min-height: ${BUTTON_HEIGHT_LARGE};\n      border-radius: ${theme.button.borderRadiusLarge};\n      padding: ${$isIconButton\n        ? \"0\"\n        : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n      min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n      height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n    `}\n\n  ${(props) =>\n    props.$full &&\n    css`\n      width: 100%;\n    `}\n\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","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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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport const Spacer = styled.span`\n  margin-left: var(--spacing-xxs, 1rem);\n  &:first-of-type {\n    margin-left: 0;\n  }\n`;\n\nexport const StyledButton = styled.button<{\n  href?: string;\n  $isIconButton: boolean;\n  $appearance?: ButtonAppearanceType;\n  $full?: boolean;\n  $size?: \"m\" | \"l\";\n  $css?: string;\n}>`\n  --_button-height: 3rem;\n  --_button-height-large: 4rem;\n\n  box-sizing: border-box;\n  min-height: var(--_button-height, 3rem);\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ${({ $isIconButton }) =>\n    $isIconButton\n      ? \"0\"\n      : `calc( (var(--_button-height, 3rem) - ( var(--btn-border-thickness, 2px) * 2) - var(--typ-line-height, 1.5em) ) / 2) var(--btn-horizontal-padding, 1.5em)`};\n  width: ${({ $isIconButton }) =>\n    $isIconButton ? `var(--_button-height, 3rem)` : \"auto\"};\n  min-width: ${({ $isIconButton }) =>\n    $isIconButton ? `var(--_button-height, 3rem)` : \"auto\"};\n  border-radius: var(--btn-border-radius, 0px);\n  border-style: solid;\n  border-width: var(--btn-border-thickness, 2px);\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: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-buttons, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-buttons, 400);\n  text-align: center;\n  text-transform: var(--btn-text-transform, none);\n  text-decoration: var(--btn-text-decoration, none);\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${(props) =>\n    props.$appearance === \"primary\" &&\n    css`\n      background-color: var(--clr-button-primary-background, #e60079);\n      border-color: var(--clr-button-primary-border, #e60079);\n      color: var(--clr-button-primary-text, #ffffff) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-primary-background-hover, #cc006c);\n        border-color: var(--clr-button-primary-border-hover, #cc006c);\n        color: var(--clr-button-primary-text-hover, #ffffff) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-primary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-primary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-primary-disabled-border, #e6e6e6);\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"secondary\" &&\n    css`\n      background-color: var(--clr-button-secondary-background, #ffffff);\n      border-color: var(--clr-button-secondary-border, #e60079);\n      color: var(--clr-button-secondary-text, #e60079) !important;\n      &:focus,\n      &:hover {\n        background-color: var(--clr-button-secondary-background-hover, #ffe6f3);\n        border-color: var(--clr-button-secondary-border-hover, #ffe6f3);\n        color: var(--clr-button-secondary-text-hover, #e60079) !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: var(\n          --clr-button-secondary-disabled-background,\n          #e6e6e6\n        );\n        color: var(--clr-button-secondary-disabled-text, #666666) !important;\n        border-color: var(--clr-button-secondary-disabled-border, #e6e6e6);\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: var(--clr-button-tertiary-text, #e60079);\n      &:focus,\n      &:hover {\n        color: var(--clr-button-tertiary-text-hover, #cc006c);\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: var(--clr-button-tertiary-disabled-text, #666666) !important;\n        border-color: transparent;\n      }\n    `}\n  \n  ${({ $size, $isIconButton }) =>\n    $size === \"l\" &&\n    css`\n      min-height: var(--_button-height-large, 4rem);\n      border-radius: var(--btn-border-radius-large, 0px);\n      padding: ${$isIconButton\n        ? \"0\"\n        : `calc( (var(--_button-height-large, 4rem) - ( var(--btn-border-thickness, 2px) * 2) - var(--typ-line-height, 1.5em) ) / 2) var(--btn-horizontal-padding, 2rem)`};\n      min-width: ${$isIconButton\n        ? `var(--_button-height-large, 4rem)`\n        : \"auto\"};\n      height: ${$isIconButton\n        ? `var(--_button-height-large, 4rem)`\n        : \"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":["Spacer","styled","span","templateObject_1","__makeTemplateObject","StyledButton","button","templateObject_8","_a","$isIconButton","props","$appearance","css","templateObject_2","templateObject_3","templateObject_4","$size","templateObject_5","$full","templateObject_6","$css","templateObject_7"],"mappings":"2HAIO,oBAAMA,EAASC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,+FAAA,CAAA,kGAOpBC,EAAeJ,EAAOK,OAAMC,IAAAA,EAAAH,EAAA,CAAA,oOAAA,eAAA,mBAAA,6lBAAA,SAAA,SAAA,WAAA,SAAA,SAAA,MAAA,CAOvC,oOAagK,eAExG,mBAEA,6lBA2CrD,SAuBA,SAqBA,WAgBA,SAMA,SAMA,QA1HQ,SAACI,GACV,OADyBA,EAAAC,cAErB,IACA,0JAFJ,EAGO,SAACD,GACR,OADuBA,EAAAC,cACP,8BAAgC,MAAhD,EACW,SAACD,GACZ,OAD2BA,EAAAC,cACX,8BAAgC,MAAhD,EAsBA,SAACC,GACD,MAAsB,YAAtBA,EAAMC,aACNC,EAAGC,IAAAA,EAAAT,EAAA,CAAA,uyBAAA,CAAA,yyBADH,EAsBA,SAACM,GACD,MAAsB,cAAtBA,EAAMC,aACNC,EAAGE,IAAAA,EAAAV,EAAA,CAAA,yzBAAA,CAAA,2zBADH,EAsBA,SAACM,GACD,MAAsB,aAAtBA,EAAMC,aACNC,EAAGG,IAAAA,EAAAX,EAAA,CAAA,2hBAAA,CAAA,6hBADH,EAoBA,SAACI,OAAEQ,EAAKR,EAAAQ,MAAEP,EAAaD,EAAAC,cACvB,MAAU,MAAVO,GACAJ,EAAGK,IAAAA,EAAAb,EAAA,CAAA,qIAAA,uBAAA,oBAAA,WAAA,CAAA,qIAKkK,uBAGzJ,oBAGO,aARNK,EACP,IACA,gKACSA,EACT,oCACA,OACMA,EACN,oCACA,cAZN,EAeA,SAACC,GACD,OAAAA,EAAMQ,OACNN,EAAGO,IAAAA,EAAAf,EAAA,CAAA,8BAAA,CAAA,gCADH,EAKA,SAACM,GACD,OAAAA,EAAMU,MACNR,EAAGS,IAAAA,EAAAjB,EAAA,CAAA,WAAA,UAAA,CAAA,WACW,YAAVM,EAAMU,KAFV"}

package/lib/src/components/Carousel/styles.d.ts

@@ -1,4 +1,3 @@
-import { type ThemeType } from "../../types";
 export declare const CarouselWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CarouselScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     $smoothScrolling: boolean;
@@ -15,16 +14,11 @@ export declare const CarouselCardInner: import("styled-components/dist/types").I
 }>> & string;
 export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    disabled: boolean;
-    theme: ThemeType;
-}>> & string;
+export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const DotContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $count: number;
-    theme: ThemeType;
 }>> & string;
 export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $selected: boolean;
-    theme: ThemeType;
 }>> & string;
 export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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  font-size: 1em;\n"],["\n  display: flex;\n  justify-content: center;\n  font-size: 1em;\n"]))),b=e.span(s||(s=n(["\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\n"],["\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\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,r,t,i,a,s,l,d,c,p,m=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"]))),f=e.ul(r||(r=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"}),h=e.li(t||(t=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%"}),u=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,r=n.$onlyChild,t=n.$fullWidthChild;return r||e&&o||t?"scale(1)":"scale(0.9)"}),g=e.div(a||(a=n(["\n  display: flex;\n  justify-content: center;\n  font-size: 1em;\n"],["\n  display: flex;\n  justify-content: center;\n  font-size: 1em;\n"]))),x=e.span(s||(s=n(["\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\n"],["\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\n"]))),b=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: var(--clr-carousel-button, #e60079);\n  font-size: var(--font-size-xxxl, 2rem);\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: scale(1);\n\n    &:disabled {\n      transform: scale(0.8);\n    }\n  }\n\n  &:disabled {\n    color: var(--clr-disabled, #e6e6e6);\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: var(--clr-carousel-button, #e60079);\n  font-size: var(--font-size-xxxl, 2rem);\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: scale(1);\n\n    &:disabled {\n      transform: scale(0.8);\n    }\n  }\n\n  &:disabled {\n    color: var(--clr-disabled, #e6e6e6);\n  }\n"]))),v=e.div(d||(d=n(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: 768px) {\n    display: ",";\n  }\n\n  @media (min-width: 1024px) {\n    display: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ",";\n\n  @media (min-width: 768px) {\n    display: ",";\n  }\n\n  @media (min-width: 1024px) {\n    display: ",";\n  }\n"])),function(n){return n.$count>6?"none":"flex"},function(n){return n.$count>10?"none":"flex"},function(n){return n.$count>20?"none":"flex"}),w=e.button(c||(c=n(["\n  border: none;\n  outline-offset: var(--spacing-xxs, 1rem);\n  padding: 0;\n  margin: auto var(--spacing-xxs, 1rem);\n  width: var(--font-size-l, 1.25rem);\n  height: var(--font-size-l, 1.25rem);\n  border-radius: 50%;\n\n  border: solid 1px var(--clr-carousel-button, #000000);\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: var(--spacing-xxs, 1rem);\n  padding: 0;\n  margin: auto var(--spacing-xxs, 1rem);\n  width: var(--font-size-l, 1.25rem);\n  height: var(--font-size-l, 1.25rem);\n  border-radius: 50%;\n\n  border: solid 1px var(--clr-carousel-button, #000000);\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.$selected?"var(--clr-carousel-button, #000000)":"var(--clr-background-light, #ffffff)"}),y=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,b as CarouselButton,h as CarouselCard,u as CarouselCardInner,f as CarouselScrollArea,m as CarouselWrapper,w as Dot,v as DotContainer,y as ScreenReaderOnly,x as VerticalAlign};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Carousel/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nexport const CarouselWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-y: hidden;\n`;\n\nexport const CarouselScrollArea = styled.ul<{\n  $smoothScrolling: boolean;\n}>`\n  position: relative;\n  overflow-x: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: ${({ $smoothScrolling }) =>\n    $smoothScrolling ? \"smooth\" : \"auto\"};\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n  padding-left: 0;\n  padding-right: 0;\n  padding-bottom: 20px;\n  margin-bottom: -20px;\n  height: 100%;\n`;\n\nexport const CarouselCard = styled.li<{\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  scroll-snap-align: center;\n  display: inline-block;\n  width: ${({ $onlyChild, $fullWidthChild }) =>\n    $onlyChild || $fullWidthChild ? \"100%\" : \"80%\"};\n`;\n\nexport const CarouselCardInner = styled.div<{\n  $isSelected: boolean;\n  $shrinkUnselectedPages: boolean;\n  $onlyChild: boolean;\n  $fullWidthChild: boolean;\n}>`\n  transition: transform 0.2s linear;\n  transform: ${({\n    $isSelected,\n    $shrinkUnselectedPages,\n    $onlyChild,\n    $fullWidthChild,\n  }) =>\n    $onlyChild || ($isSelected && $shrinkUnselectedPages) || $fullWidthChild\n      ? \"scale(1)\"\n      : \"scale(0.9)\"};\n`;\n\nexport const ButtonWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  font-size: 1em;\n`;\n\nexport const VerticalAlign = styled.span`\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\n`;\n\nexport const CarouselButton = styled.button<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  height: 100%;\n  cursor: pointer;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  color: ${({ disabled, theme }) =>\n    disabled\n      ? theme.colors.disabled\n      : theme.name === \"su2c\"\n        ? theme.colors.textDark\n        : theme.colors.primary};\n  font-size: ${({ theme }) => theme.fontSizes.xxxl};\n  font-weight: 600;\n  transition:\n    color 0.3s ease,\n    transform 0.3s ease;\n  max-width: 3rem;\n  padding: 0;\n  vertical-align: middle;\n  user-select: none;\n\n  transform: scale(0.8);\n  &:hover {\n    transform: ${({ disabled }) => (disabled ? \"scale(0.8)\" : \"scale(1)\")};\n  }\n`;\n\nexport const DotContainer = styled.div<{ $count: number; theme: ThemeType }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ${({ $count }) => ($count > 6 ? \"none\" : \"flex\")};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    display: ${({ $count }) => ($count > 10 ? \"none\" : \"flex\")};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: ${({ $count }) => ($count > 20 ? \"none\" : \"flex\")};\n  }\n`;\n\nexport const Dot = styled.button<{ $selected: boolean; theme: ThemeType }>`\n  border: none;\n  outline-offset: ${({ theme }) => theme.spacing.xxs};\n  padding: 0;\n  margin: ${({ theme }) => `auto ${theme.spacing.xxs}`};\n  width: ${({ theme }) => theme.fontSizes.l};\n  height: ${({ theme }) => theme.fontSizes.l};\n  border-radius: 50%;\n  /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */\n  border: ${({ theme }) =>\n    `solid 1px ${\n      theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n    }`};\n  background-color: ${({ theme, $selected }) =>\n    $selected\n      ? `${\n          theme.name === \"su2c\" ? theme.colors.textDark : theme.colors.primary\n        }`\n      : theme.colors.backgroundLight};\n  user-select: none;\n  transition:\n    background-color 0.3s ease,\n    transform 0.3s ease;\n  transform: scale(0.8);\n  &:hover {\n    transform: scale(1);\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.span`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["CarouselWrapper","styled","div","templateObject_1","__makeTemplateObject","CarouselScrollArea","ul","templateObject_2","_a","$smoothScrolling","CarouselCard","li","templateObject_3","$onlyChild","$fullWidthChild","CarouselCardInner","templateObject_4","$isSelected","$shrinkUnselectedPages","ButtonWrapper","templateObject_5","VerticalAlign","span","templateObject_6","CarouselButton","button","templateObject_7","disabled","theme","colors","name","textDark","primary","fontSizes","xxxl","DotContainer","$count","breakpoint","tablet","desktop","Dot","templateObject_9","spacing","xxs","l","concat","$selected","backgroundLight","ScreenReaderOnly","templateObject_10"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Carousel/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\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  font-size: 1em;\n`;\n\nexport const VerticalAlign = styled.span`\n  display: block;\n  margin: auto;\n  height: 1.25em; // should be same size a icon size\n`;\n\nexport const CarouselButton = styled.button`\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: var(--clr-carousel-button, #e60079);\n  font-size: var(--font-size-xxxl, 2rem);\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: scale(1);\n\n    &:disabled {\n      transform: scale(0.8);\n    }\n  }\n\n  &:disabled {\n    color: var(--clr-disabled, #e6e6e6);\n  }\n`;\n\nexport const DotContainer = styled.div<{ $count: number }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  display: ${({ $count }) => ($count > 6 ? \"none\" : \"flex\")};\n\n  @media (min-width: 768px) {\n    display: ${({ $count }) => ($count > 10 ? \"none\" : \"flex\")};\n  }\n\n  @media (min-width: 1024px) {\n    display: ${({ $count }) => ($count > 20 ? \"none\" : \"flex\")};\n  }\n`;\n\nexport const Dot = styled.button<{ $selected: boolean }>`\n  border: none;\n  outline-offset: var(--spacing-xxs, 1rem);\n  padding: 0;\n  margin: auto var(--spacing-xxs, 1rem);\n  width: var(--font-size-l, 1.25rem);\n  height: var(--font-size-l, 1.25rem);\n  border-radius: 50%;\n\n  border: solid 1px var(--clr-carousel-button, #000000);\n  background-color: ${({ $selected }) =>\n    $selected\n      ? \"var(--clr-carousel-button, #000000)\"\n      : \"var(--clr-background-light, #ffffff)\"};\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","DotContainer","templateObject_8","$count","Dot","templateObject_9","$selected","ScreenReaderOnly","templateObject_10"],"mappings":"iHAEO,wBAAMA,EAAkBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oEAAA,CAAA,uEAM5BC,EAAqBJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,wGAAA,iLAAA,CAEzC,wGAKsC,mLADnB,SAACI,GAClB,OADoCA,EAAAC,iBACjB,SAAW,MAA9B,GAUSC,EAAeT,EAAOU,GAAEC,IAAAA,EAAAR,EAAA,CAAA,sEAAA,OAAA,CAGnC,sEAIgD,SADvC,SAACI,OAAEK,EAAUL,EAAAK,WAAEC,EAAeN,EAAAM,gBACrC,OAAAD,GAAcC,EAAkB,OAAS,KAAzC,GAGSC,EAAoBd,EAAOC,IAAGc,IAAAA,EAAAZ,EAAA,CAAA,wDAAA,OAAA,CAKzC,wDAUkB,SARL,SAACI,OACZS,EAAWT,EAAAS,YACXC,EAAsBV,EAAAU,uBACtBL,EAAUL,EAAAK,WACVC,EAAeN,EAAAM,gBAEf,OAAAD,GAAeI,GAAeC,GAA2BJ,EACrD,WACA,YAFJ,GAKSK,EAAgBlB,EAAOC,IAAGkB,IAAAA,EAAAhB,EAAA,CAAA,uEAAA,CAAA,0EAM1BiB,EAAgBpB,EAAOqB,KAAIC,IAAAA,EAAAnB,EAAA,CAAA,gGAAA,CAAA,mGAM3BoB,EAAiBvB,EAAOwB,OAAMC,IAAAA,EAAAtB,EAAA,CAAA,kpBAAA,CAAA,qpBA+B9BuB,EAAe1B,EAAOC,IAAG0B,IAAAA,EAAAxB,EAAA,CAAA,sFAAA,oDAAA,0DAAA,YAAA,CAAoB,sFAIC,oDAGG,0DAIA,cAPjD,SAACI,GAAe,OAAPA,EAAAqB,OAAiB,EAAI,OAAS,MAAvB,EAGd,SAACrB,GAAe,OAAPA,EAAAqB,OAAiB,GAAK,OAAS,MAAxB,EAIhB,SAACrB,GAAe,OAAPA,EAAAqB,OAAiB,GAAK,OAAS,MAAxB,GAIlBC,EAAM7B,EAAOwB,OAAMM,IAAAA,EAAA3B,EAAA,CAAA,kTAAA,6KAAA,CAAwB,kTAaV,+KAHxB,SAACI,GACnB,OAD8BA,EAAAwB,UAE1B,sCACA,sCAFJ,GAcSC,EAAmBhC,EAAOqB,KAAIY,IAAAA,EAAA9B,EAAA,CAAA,4NAAA,CAAA"}

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 from"react";import{useTheme as t,ThemeProvider as s}from"styled-components";import{faCheck as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as m,StyledInput as c,SelectedBorder as n,CheckWrapper as f,Check as u}from"./styles.js";var h=function(h){var p=t(),E=e(e({},l),p),b=h.children,x=h.hasError,j=h.errorMessage,k=h.ref,v=r(h,["children","hasError","errorMessage","ref"]);return o.createElement(s,{theme:E},o.createElement(m,{$hasError:x||!!j||!1,$checked:h.checked||h.defaultChecked||!1,$disabled:h.disabled||!1},o.createElement(c,e({},v,{disabled:h.disabled||!1,type:"checkbox",ref:k,"aria-describedby":h.id&&j?"".concat(h.id,"-error"):void 0})),o.createElement(n,null),b||h.value,E.utilities.useDefaultFromControls?null:o.createElement(f,null,o.createElement(u,null,o.createElement(d,{faIcon:i,color:"check",size:"1.25em"})))),!!j&&o.createElement(a,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},j))};export{h as Checkbox,h as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{faCheck as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{ErrorText as a}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as l,StyledInput as i,SelectedBorder as s,CheckWrapper as c,Check as n}from"./styles.js";var m=function(m){var f=m.children,E=m.hasError,u=m.errorMessage,h=m.ref,b=e(m,["children","hasError","errorMessage","ref"]);return o.createElement(o.Fragment,null,o.createElement(l,{$hasError:E||!!u||!1,$checked:m.checked||m.defaultChecked||!1,$disabled:m.disabled||!1},o.createElement(i,r({},b,{disabled:m.disabled||!1,type:"checkbox",ref:h,"aria-describedby":m.id&&u?"".concat(m.id,"-error"):void 0})),o.createElement(s,null),f||m.value,o.createElement(c,null,o.createElement(n,null,o.createElement(d,{faIcon:t,color:"check",size:"1.25em"})))),!!u&&o.createElement(a,{marginTop:"xxs",id:m.id?"".concat(m.id,"-error"):void 0},u))};export{m as Checkbox,m 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  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = (props: CheckBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLabel\n        $hasError={hasError || !!errorMessage || false}\n        $checked={props.checked || props.defaultChecked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"checkbox\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        {children || props.value}\n        {theme.utilities.useDefaultFromControls ? null : (\n          <CheckWrapper>\n            <Check>\n              <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n            </Check>\n          </CheckWrapper>\n        )}\n      </StyledLabel>\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","props","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","errorMessage","ref","rest","__rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"2fAkCO,IAAMA,EAAW,SAACC,GACvB,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGGK,EAAmDN,EAAKM,SAA9CC,EAAyCP,EAAKO,SAApCC,EAA+BR,eAAjBS,EAAiBT,EAAKS,IAAdC,EAAIC,EAAKX,EAArD,CAAA,WAAA,WAAA,eAAA,QAEN,OACEY,EAAAC,cAACC,EAAa,CAACX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,CAAAC,UACCT,KAAcC,IAAgB,EAAKS,SACpCjB,EAAMkB,SAAWlB,EAAMmB,iBAAkB,YACxCnB,EAAMoB,WAAY,GAE7BR,EAAAC,cAACQ,EAAWjB,EAAA,CAAA,EACNM,GACJU,SAAUpB,EAAMoB,WAAY,EAC5BE,KAAK,WACLb,IAAKA,EAAG,mBAEJT,EAAMuB,IAAQf,EAAe,GAAAgB,OAAGxB,EAAMuB,GAAE,eAAWE,KAGzDb,EAAAC,cAACa,EAAc,MACdpB,GAAYN,EAAM2B,MAClBxB,EAAMyB,UAAUC,uBAAyB,KACxCjB,gBAACkB,EAAY,KACXlB,EAAAC,cAACkB,EAAK,KACJnB,EAAAC,cAACmB,EAAM,CAACC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD5B,GACDI,gBAACyB,EAAS,CACRC,UAAU,MACVf,GAAIvB,EAAMuB,GAAK,GAAAC,OAAGxB,EAAMuB,kBAAaE,GAEpCjB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component\n */\nexport const Checkbox = (props: CheckBoxProps) => {\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  return (\n    <>\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        <CheckWrapper>\n          <Check>\n            <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n          </Check>\n        </CheckWrapper>\n      </StyledLabel>\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","props","children","hasError","errorMessage","ref","rest","__rest","React","createElement","Fragment","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","__assign","type","id","concat","undefined","SelectedBorder","value","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"0YAgCO,IAAMA,EAAW,SAACC,GACf,IAAAC,EAAmDD,EAAKC,SAA9CC,EAAyCF,EAAKE,SAApCC,EAA+BH,eAAjBI,EAAiBJ,EAAKI,IAAdC,EAAIC,EAAKN,EAArD,CAAA,WAAA,WAAA,eAAA,QAEN,OACEO,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAW,CAAAC,UACCT,KAAcC,IAAgB,EAAKS,SACpCZ,EAAMa,SAAWb,EAAMc,iBAAkB,YACxCd,EAAMe,WAAY,GAE7BR,EAAAC,cAACQ,EAAWC,EAAA,CAAA,EACNZ,GACJU,SAAUf,EAAMe,WAAY,EAC5BG,KAAK,WACLd,IAAKA,EAAG,mBAEJJ,EAAMmB,IAAQhB,EAAe,GAAAiB,OAAGpB,EAAMmB,GAAE,eAAWE,KAGzDd,EAAAC,cAACc,EAAc,MACdrB,GAAYD,EAAMuB,MACnBhB,EAAAC,cAACgB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAM,CAACC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAI/C3B,GACDI,gBAACwB,EAAS,CACRC,UAAU,MACVb,GAAInB,EAAMmB,GAAK,GAAAC,OAAGpB,EAAMmB,kBAAaE,GAEpClB,GAKX"}

package/lib/src/components/Checkbox/styles.d.ts

@@ -1,17 +1,9 @@
-import { type ThemeType } from "../../types";
-export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $checked: boolean;
     $disabled: boolean;
     $hasError: boolean;
-    theme: ThemeType;
 }>> & string;
 export declare const SelectedBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

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 e,i,r,s,a,l,c,d,p="1.5rem",h=o.div(e||(e=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}),f=o.span(i||(i=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  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n\n  svg {\n    vertical-align: baseline;\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  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n\n  svg {\n    vertical-align: baseline;\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,function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.m}),u=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  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\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  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\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.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml},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,f,function(n){var o=n.theme;return n.$disabled&&o.colors.disabled},function(o){var e=o.theme,i=o.$disabled,s=o.$checked,a=o.$hasError;return e.utilities.useDefaultFromControls?null:t(r||(r=n(["\n          min-height: 2rem;\n          "," "," {\n            border: solid ","\n              ",";\n          }\n          &:hover "," "," {\n            border: solid ","\n              ",";\n          }\n        "],["\n          min-height: 2rem;\n          "," "," {\n            border: solid ","\n              ",";\n          }\n          &:hover "," "," {\n            border: solid ","\n              ",";\n          }\n        "])),h,f,"2px",i?e.colors.disabled:a?e.colors.danger:s?e.colors.check:e.colors.inputBorder,h,f,"2px",i?e.colors.disabled:a?e.colors.danger:s?e.colors.check:e.colors.inputBorder)}),b=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 e=o.theme;return e.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        "])),e.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        "])),e.spacing.xxs,b,e.colors.inputBorder,h)});export{f as Check,h as CheckWrapper,b as SelectedBorder,g as StyledInput,u as StyledLabel};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var r,i,o,t,a,s=e.div(r||(r=n(["\n  --_check-box-size: 1.5rem;\n  --_button-height: 3em;\n  --_border-width: 2px;\n\n  display: inline-block;\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_check-box-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 0.5rem);\n"],["\n  --_check-box-size: 1.5rem;\n  --_button-height: 3em;\n  --_border-width: 2px;\n\n  display: inline-block;\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_check-box-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 0.5rem);\n"]))),d=e.span(i||(i=n(["\n  display: block;\n  position: relative;\n  border: 2px solid var(--clr-selection-border, #666);\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\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  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-m, 1rem);\n  }\n\n  svg {\n    vertical-align: baseline;\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 var(--clr-selection-border, #666);\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\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  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-m, 1rem);\n  }\n\n  svg {\n    vertical-align: baseline;\n    path {\n      transition: transform 0.25s ease;\n      transform: rotateY(90deg);\n      transform-origin: center;\n    }\n  }\n"]))),l=e.label(o||(o=n(['\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5rem);\n  font-size: var(--font-size-base, 1rem);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n\n  background-color: var(--clr-background-light, #fff);\n  position: relative;\n\n  cursor: ',";\n  display: block;\n\n  color: ",";\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 3rem);\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  min-height: 2rem;\n\n  "," "," {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ",";\n  }\n  &:hover "," "," {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ",";\n  }\n"],['\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5rem);\n  font-size: var(--font-size-base, 1rem);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n\n  background-color: var(--clr-background-light, #fff);\n  position: relative;\n\n  cursor: ',";\n  display: block;\n\n  color: ",";\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 3rem);\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  min-height: 2rem;\n\n  "," "," {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ",";\n  }\n  &:hover "," "," {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ",";\n  }\n"])),function(n){return n.$disabled?"not-allowed":"pointer"},function(n){return n.$disabled?"var(--clr-disabled, #e6e6e6)":"var(--clr-text-dark, #000)"},s,d,function(n){return n.$disabled?"var(--clr-disabled, #e6e6e6)":"var(--clr-check, #e60079)"},s,d,function(n){var e=n.$disabled,r=n.$hasError,i=n.$checked;return e?"var(--clr-disabled, #e6e6e6)":r?"var(--clr-danger, #ff0000)":i?"var(--clr-check, #e60079)":"var(--clr-input-border, #2e2d2c)"},s,d,function(n){var e=n.$disabled,r=n.$hasError,i=n.$checked;return e?"var(--clr-disabled, #e6e6e6)":r?"var(--clr-danger, #ff0000)":i?"var(--clr-check, #e60079)":"var(--clr-input-border, #2e2d2c)"}),c=e.div(t||(t=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"]))),h=e.input(a||(a=n(["\n  margin-right: 5px !important;\n\n  /* This hides the original input */\n  position: absolute;\n  left: var(--spacing-xxs, 0.5rem);\n  opacity: 0;\n\n  &:focus ~ "," {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2d2c);\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  margin-right: 5px !important;\n\n  /* This hides the original input */\n  position: absolute;\n  left: var(--spacing-xxs, 0.5rem);\n  opacity: 0;\n\n  &:focus ~ "," {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2d2c);\n    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n  }\n\n  &:checked ~ "," svg path {\n    transform: rotateY(0deg);\n  }\n"])),c,s);export{d as Check,s as CheckWrapper,c as SelectedBorder,h as StyledInput,l as StyledLabel};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Checkbox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst CHECK_BOX_SIZE = \"1.5rem\";\nconst BUTTON_HEIGHT = \"3em\";\nconst BORDER_THICKNESS = \"2px\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  position: absolute;\n  top: calc(50% - (${CHECK_BOX_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  height: ${CHECK_BOX_SIZE};\n  width: ${CHECK_BOX_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition: border 0.25s ease;\n  overflow: hidden;\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.m};\n  }\n\n  svg {\n    vertical-align: baseline;\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  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\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          ${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          &:hover ${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`;\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","colors","selectionBorder","breakpoint","desktopLarge","fontSizes","m","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","ml","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","xl","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","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 from \"styled-components\";\n\nexport const CheckWrapper = styled.div`\n  --_check-box-size: 1.5rem;\n  --_button-height: 3em;\n  --_border-width: 2px;\n\n  display: inline-block;\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_check-box-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 0.5rem);\n`;\n\nexport const Check = styled.span`\n  display: block;\n  position: relative;\n  border: 2px solid var(--clr-selection-border, #666);\n  height: var(--_check-box-size, 1.5rem);\n  width: var(--_check-box-size, 1.5rem);\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  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-m, 1rem);\n  }\n\n  svg {\n    vertical-align: baseline;\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}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5rem);\n  font-size: var(--font-size-base, 1rem);\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n\n  background-color: var(--clr-background-light, #fff);\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: block;\n\n  color: ${({ $disabled }) =>\n    $disabled ? \"var(--clr-disabled, #e6e6e6)\" : \"var(--clr-text-dark, #000)\"};\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 3rem);\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: ${({ $disabled }) =>\n        $disabled\n          ? \"var(--clr-disabled, #e6e6e6)\"\n          : \"var(--clr-check, #e60079)\"};\n    }\n  }\n\n  min-height: 2rem;\n\n  ${CheckWrapper} ${Check} {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ${({ $disabled, $hasError, $checked }) =>\n      $disabled\n        ? \"var(--clr-disabled, #e6e6e6)\"\n        : $hasError\n          ? \"var(--clr-danger, #ff0000)\"\n          : $checked\n            ? \"var(--clr-check, #e60079)\"\n            : \"var(--clr-input-border, #2e2d2c)\"};\n  }\n  &:hover ${CheckWrapper} ${Check} {\n    border-style: solid;\n    border-width: var(--_border-width, 2px);\n    border-color: ${({ $disabled, $hasError, $checked }) =>\n      $disabled\n        ? \"var(--clr-disabled, #e6e6e6)\"\n        : $hasError\n          ? \"var(--clr-danger, #ff0000)\"\n          : $checked\n            ? \"var(--clr-check, #e60079)\"\n            : \"var(--clr-input-border, #2e2d2c)\"};\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  margin-right: 5px !important;\n\n  /* This hides the original input */\n  position: absolute;\n  left: var(--spacing-xxs, 0.5rem);\n  opacity: 0;\n\n  &:focus ~ ${SelectedBorder} {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2d2c);\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"],"names":["CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","Check","span","templateObject_2","StyledLabel","label","templateObject_3","_a","$disabled","$hasError","$checked","SelectedBorder","templateObject_4","StyledInput","input","templateObject_5"],"mappings":"iHAEO,cAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6TAAA,CAAA,gUAazBC,EAAQJ,EAAOK,KAAIC,IAAAA,EAAAH,EAAA,CAAA,mnBAAA,CAAA,snBA4BnBI,EAAcP,EAAOQ,MAAKC,IAAAA,EAAAN,EAAA,CAAA,geAAA,oCAAA,2aAAA,IAAA,+JAAA,6CAAA,IAAA,iGAAA,qBAAA,IAAA,iGAAA,YAAA,CAIrC,geAmBoE,oCAIO,2aAiBnD,IAAS,+JAUI,6CAMvB,IAAS,iGAUuB,qBAExB,IAAS,iGAUe,cA3DpC,SAACO,GAAkB,OAAPA,EAAAC,UAAoB,cAAgB,SAA7B,EAGpB,SAACD,GACR,OADmBA,EAAAC,UACP,+BAAiC,4BAA7C,EAiBUZ,EAAgBK,EAOhB,SAACM,GACP,OADkBA,EAAAC,UAEd,+BACA,2BAFJ,EAQJZ,EAAgBK,EAGA,SAACM,GAAE,IAAAC,cAAWC,EAASF,EAAAE,UAAEC,EAAQH,EAAAG,SAC/C,OAAAF,EACI,+BACAC,EACE,6BACAC,EACE,4BACA,kCANR,EAQMd,EAAgBK,EAGR,SAACM,GAAE,IAAAC,cAAWC,EAASF,EAAAE,UAAEC,EAAQH,EAAAG,SAC/C,OAAAF,EACI,+BACAC,EACE,6BACAC,EACE,4BACA,kCANR,GAUOC,EAAiBd,EAAOC,IAAGc,IAAAA,EAAAZ,EAAA,CAAA,qFAAA,CAAA,wFAS3Ba,EAAchB,EAAOiB,MAAKC,IAAAA,EAAAf,EAAA,CAAA,wKAAA,yLAAA,qDAAA,CAAA,wKAQX,yLAMA,uDANdW,EAMEf"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const foundTheme = useTheme();\n  const theme: ThemeType = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          theme={theme}\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          theme={theme}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={headerTitleTextColor}\n          $textSize={headerTitleTextSize}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        theme={theme}\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","__assign","defaultTheme","toggleCollapse","current","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"kfAiDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAiB,WACb,IAAAC,EAAYT,EAAOS,SACvBP,aAAe,EAAfA,EAAiBO,UAASC,aAAaR,eAAAA,EAAiBO,SAC5D,IAAME,GAAgBhB,EACtBC,EAAce,GAEE,OAAZF,GACFV,EAAiB,GAAAa,OAAGH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,WAAW,WAAM,OAAAf,EAAiB,IAAjB,EAAuB,IAExCG,EAAgBO,QAAUK,WACxB,WAAM,OAAAf,EAAiB,UAAjB,EACsB,IAA5BgB,QAGiBC,IAAjBzB,GACFA,EAAaoB,EAEjB,EAuBA,OAVAM,EAAU,WACRrB,EAAcN,IAAa,GAGzBS,EADET,EACe,UAEA,IAErB,EAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAAAC,cAACC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACTqC,QAASb,EAAc,iBACR,eACHvB,EACZqC,UAhCc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEJ,EAwBQkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAAhB,OAAG5B,aAAW,gBACdW,EACfX,GAAI,UAAGA,EAAE,WACTqC,QAASb,EACTH,MAAOA,EACPwB,KAAK,SACLC,WAAW,WAAUC,WACT7C,EAAoB8C,UACrB7C,kBACMC,GAEhBH,EACDiC,EAAAC,cAACc,SAAoBtC,GACnBuB,EAAAC,cAACe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACdhC,MAAOA,EACPrB,GAAI,GAAA4B,OAAG5B,EAAE,YACTsD,IAAKtC,EACL0B,KAAK,wBACS/B,EAAU,kBACP,GAAAiB,OAAG5B,EAAE,WAASuD,eACfzC,EAAa0C,YAChB7C,GAEZH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  type HTMLAttributes,\n} from \"react\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport {\n  themeColorOrString,\n  themeFontSizeOrString,\n} from \"../../utils/themeUtils\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType } from \"../../types\";\nimport {\n  CustomHeader,\n  DefaultHeader,\n  FlippingIcon,\n  CollapseContent,\n  transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n  /** id is required for a11y reasons as we use aria attributes which depends on an id  */\n  id: string;\n  /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n  headerTitleText: string;\n  /** collapse header text colour */\n  headerTitleTextColor?: string;\n  /** collapse header text size */\n  headerTitleTextSize?: FontSizeType;\n  /** collapse header font family */\n  headerTitleTextFontFamily?: string;\n  /** custom collapse header component */\n  headerComponent?: ReactNode;\n  /** flag to indicate  */\n  startOpen?: boolean;\n  /** callback function that is passed isOpen flag  */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** children */\n  children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n  id,\n  headerTitleText,\n  headerTitleTextColor,\n  headerTitleTextSize,\n  headerTitleTextFontFamily,\n  headerComponent,\n  startOpen,\n  onOpenChange,\n  children,\n}: CollapseProps) {\n  const [openStatus, setOpenStatus] = useState(startOpen || false);\n  const [contentHeight, setContentHeight] = useState(\n    startOpen ? \"initial\" : \"0\",\n  );\n  const content = useRef<HTMLDivElement>(null);\n  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const textColour = headerTitleTextColor\n    ? themeColorOrString(headerTitleTextColor)\n    : \"var(--clr-collapse-header, #00007e)\";\n\n  const toggleCollapse = () => {\n    const { current } = content;\n    if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n    const newOpenState = !openStatus;\n    setOpenStatus(newOpenState);\n\n    if (current !== null) {\n      setContentHeight(`${current.scrollHeight}px`);\n    }\n\n    if (newOpenState === false) {\n      // Allow height to be rendered before setting to 0 for animation.\n      setTimeout(() => setContentHeight(\"0\"), 10);\n    } else {\n      transitionTimer.current = setTimeout(\n        () => setContentHeight(\"initial\"),\n        transitionDurationSeconds * 1000,\n      );\n    }\n    if (onOpenChange !== undefined) {\n      onOpenChange(newOpenState);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \" ||\n      event.key === \"Spacebar\"\n    ) {\n      event.preventDefault();\n      toggleCollapse();\n    }\n  };\n\n  useEffect(() => {\n    setOpenStatus(startOpen || false);\n    // if start open changes then we want to set the height without animation\n    if (startOpen) {\n      setContentHeight(\"initial\");\n    } else {\n      setContentHeight(\"0\");\n    }\n  }, [startOpen]);\n\n  return (\n    <div id={id}>\n      {headerComponent ? (\n        <CustomHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          aria-disabled={false}\n          aria-label={headerTitleText}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {headerComponent}\n        </CustomHeader>\n      ) : (\n        <DefaultHeader\n          aria-controls={`${id}-header`}\n          aria-expanded={openStatus}\n          id={`${id}-header`}\n          onClick={toggleCollapse}\n          type=\"button\"\n          appearance=\"tertiary\"\n          $textColor={textColour}\n          $textSize={themeFontSizeOrString(headerTitleTextSize || \"m\")}\n          $textFontFamily={headerTitleTextFontFamily}\n        >\n          {headerTitleText}\n          <FlippingIcon $open={openStatus}>\n            <IconFa faIcon={faChevronDown} />\n          </FlippingIcon>\n        </DefaultHeader>\n      )}\n      <CollapseContent\n        id={`${id}-content`}\n        ref={content}\n        role=\"region\"\n        aria-hidden={!openStatus}\n        aria-labelledby={`${id}-header`}\n        $contentHeight={contentHeight}\n        $openStatus={openStatus}\n      >\n        {children}\n      </CollapseContent>\n    </div>\n  );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","textColour","themeColorOrString","toggleCollapse","current","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","themeFontSizeOrString","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"0aAoDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAE/DE,EAAajB,EACfkB,EAAmBlB,GACnB,sCAEEmB,EAAiB,WACb,IAAAC,EAAYN,EAAOM,SACvBJ,aAAe,EAAfA,EAAiBI,UAASC,aAAaL,eAAAA,EAAiBI,SAC5D,IAAME,GAAgBb,EACtBC,EAAcY,GAEE,OAAZF,GACFP,EAAiB,GAAAU,OAAGH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,WAAW,WAAM,OAAAZ,EAAiB,IAAjB,EAAuB,IAExCG,EAAgBI,QAAUK,WACxB,WAAM,OAAAZ,EAAiB,UAAjB,EACsB,IAA5Ba,QAGiBC,IAAjBtB,GACFA,EAAaiB,EAEjB,EAuBA,OAVAM,EAAU,WACRlB,EAAcN,IAAa,GAGzBS,EADET,EACe,UAEA,IAErB,EAAG,CAACA,IAGFyB,EAAAC,cAAA,MAAA,CAAKhC,GAAIA,GACNK,EACC0B,EAAAC,cAACC,EAAY,CAAA,gBACI,GAAAR,OAAGzB,EAAE,2BACLW,EACfX,GAAI,GAAAyB,OAAGzB,EAAE,WACTkC,QAASb,EAAc,iBACR,eACHpB,EACZkC,UA/Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEJ,EAuBQkB,KAAK,SACLC,SAAU,GAETnC,GAGH0B,EAAAC,cAACS,mBACgB,GAAAhB,OAAGzB,EAAE,WAAS,gBACdW,EACfX,GAAI,GAAAyB,OAAGzB,aACPkC,QAASb,EACTqB,KAAK,SACLC,WAAW,WAAUC,WACTzB,EAAU0B,UACXC,EAAsB3C,GAAuB,qBACvCC,GAEhBH,EACD8B,EAAAC,cAACe,SAAoBpC,GACnBoB,EAAAC,cAACgB,GAAOC,OAAQC,MAItBnB,EAAAC,cAACmB,EAAe,CACdnD,GAAI,GAAAyB,OAAGzB,EAAE,YACToD,IAAKpC,EACLuB,KAAK,SAAQ,eACC5B,EAAU,kBACP,GAAAc,OAAGzB,aAAWqD,eACfvC,EAAawC,YAChB3C,GAEZH,GAIT"}

package/lib/src/components/Collapse/styles.d.ts

@@ -1,4 +1,3 @@
-import { type FontSizeType, type ThemeType } from "../../types";
 export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $open: boolean;
@@ -14,9 +13,8 @@ export declare const DefaultHeader: import("styled-components/dist/types").IStyl
     ref?: import("react").Ref<HTMLElement>;
     children?: import("react").ReactNode;
 }, {
-    theme: ThemeType;
     $textColor?: string;
-    $textSize?: FontSizeType;
+    $textSize?: string;
     $textFontFamily?: string;
 }>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const CollapseContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {