@cruk/cruk-react-components 5.0.7 → 5.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BadgeProps = {\n  /** background colour of badge */\n  backgroundColor?: string;\n  /** border colour of badge */\n  borderColor?: string;\n  /** text colour of badge */\n  textColor?: string;\n  /** size of badge */\n  size?: SpaceType;\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size = \"xs\",\n  backgroundColor = \"primary\",\n  borderColor = \"transparent\",\n  textColor = \"textOnPrimary\",\n  isSquare,\n}: BadgeProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n\n  return (\n    <StyledBadge\n      theme={theme}\n      $isSquare={isSquareCalculated}\n      $size={size}\n      $backgroundColor={themeColorOrString(backgroundColor, theme)}\n      $borderColor={themeColorOrString(borderColor, theme)}\n      $textColor={themeColorOrString(textColor, theme)}\n    >\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","isSquare","foundTheme","useTheme","theme","__assign","defaultTheme","isSquareCalculated","React","createElement","StyledBadge","$isSquare","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"gSAqCM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAWF,EAAAG,KAAXA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,aAAkB,UAASD,EAC3BE,EAAAN,EAAAO,YAAAA,OAAc,IAAAD,EAAA,gBACdE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,gBAAeA,EAC3BE,EAAQV,EAAAU,SAEFC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAqBN,QAAAA,IAAkC,iBAAbT,GAEhD,OACEgB,EAACC,cAAAC,EACC,CAAAN,MAAOA,EAAKO,UACDJ,EAAkBK,MACtBlB,EACWmB,iBAAAC,EAAmBlB,EAAiBQ,GACxCW,aAAAD,EAAmBhB,EAAaM,cAClCU,EAAmBd,EAAWI,IAEzCZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BadgeProps = {\n  /** background colour of badge */\n  backgroundColor?: string;\n  /** border colour of badge */\n  borderColor?: string;\n  /** text colour of badge */\n  textColor?: string;\n  /** size of badge */\n  size?: SpaceType;\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size = \"xs\",\n  backgroundColor = \"primary\",\n  borderColor = \"transparent\",\n  textColor = \"textOnPrimary\",\n  isSquare,\n}: BadgeProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n\n  return (\n    <StyledBadge\n      theme={theme}\n      $isSquare={isSquareCalculated}\n      $size={size}\n      $backgroundColor={themeColorOrString(backgroundColor, theme)}\n      $borderColor={themeColorOrString(borderColor, theme)}\n      $textColor={themeColorOrString(textColor, theme)}\n    >\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","children","size","backgroundColor","borderColor","textColor","isSquare","foundTheme","useTheme","theme","defaultTheme","isSquareCalculated","React","createElement","StyledBadge","$isSquare","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"4NAqCM,SAAUA,GAAMC,SACpBA,EAAQC,KACRA,EAAO,KAAIC,gBACXA,EAAkB,UAASC,YAC3BA,EAAc,cAAaC,UAC3BA,EAAY,gBAAeC,SAC3BA,IAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAqBL,KAAkC,iBAAbL,GAEhD,OACEW,EAACC,cAAAC,EACC,CAAAL,MAAOA,EAAKM,UACDJ,EAAkBK,MACtBd,EACWe,iBAAAC,EAAmBf,EAAiBM,GACxCU,aAAAD,EAAmBd,EAAaK,cAClCS,EAAmBb,EAAWI,IAEzCR,EAGP"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n  $backgroundColor: string;\n  $borderColor: string;\n  $textColor: string;\n  $isSquare: boolean;\n  $size: SpaceType;\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  border-width: 1px;\n  border-style: solid;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  padding: ${({ theme, $isSquare }) => ($isSquare ? 0 : theme.spacing.xxs)};\n  border-radius: ${({ $isSquare }) => ($isSquare ? \"50%\" : ` 1.5rem`)};\n  height: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  width: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  line-height: ${({ $isSquare, $size, theme }) =>\n    $isSquare\n      ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`\n      : ` 1rem`};\n  min-width: ${({ $size, theme }) =>\n    `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  border-color: ${({ $borderColor }) => $borderColor};\n  color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_1","__makeTemplateObject","_a","theme","fontSizes","m","$isSquare","spacing","xxs","$size","concat","xs","$backgroundColor","$borderColor","$textColor"],"mappings":"iHAIO,MAAMA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iHAAA,iBAAA,uBAAA,gBAAA,eAAA,qBAAA,mBAAA,4BAAA,sBAAA,eAAA,OAAA,CAOpC,iHAK6C,iBAC2B,uBACL,gBAES,eAEA,qBAI/D,mBAE0C,4BAEO,sBACZ,eACX,UAhB1B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,UAAUC,CAAhB,IACjB,SAACH,OAAEC,EAAKD,EAAAC,MAAkB,OAAPD,EAAAI,UAAoB,EAAIH,EAAMI,QAAQC,GAA/B,IACpB,SAACN,GAAkB,OAAPA,EAAAI,UAAoB,MAAQ,SAArB,IAC1B,SAACJ,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAClC,OAAAG,EAAY,eAAQH,EAAMI,QAAQE,GAAY,OAAAC,OAAAP,EAAMI,QAAQI,GAAK,KAAG,MAApE,IACO,SAACT,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACjC,OAAAG,EAAY,eAAQH,EAAMI,QAAQE,GAAY,OAAAC,OAAAP,EAAMI,QAAQI,GAAK,KAAG,MAApE,IACa,SAACT,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACvC,OAAAG,EACI,QAAAI,OAAQP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,KACrD,OAFJ,IAGW,SAACT,OAAEO,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC1B,MAAA,QAAQO,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAArD,IAEkB,SAACT,GAAyB,OAAPA,EAAAU,gBAAO,IAC9B,SAACV,GAAqB,OAAPA,EAAAW,YAAO,IAC7B,SAACX,GAAmB,OAAPA,EAAAY,UAAO"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n  $backgroundColor: string;\n  $borderColor: string;\n  $textColor: string;\n  $isSquare: boolean;\n  $size: SpaceType;\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  border-width: 1px;\n  border-style: solid;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  padding: ${({ theme, $isSquare }) => ($isSquare ? 0 : theme.spacing.xxs)};\n  border-radius: ${({ $isSquare }) => ($isSquare ? \"50%\" : ` 1.5rem`)};\n  height: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  width: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  line-height: ${({ $isSquare, $size, theme }) =>\n    $isSquare\n      ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`\n      : ` 1rem`};\n  min-width: ${({ $size, theme }) =>\n    `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  border-color: ${({ $borderColor }) => $borderColor};\n  color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","theme","fontSizes","m","$isSquare","spacing","xxs","$size","xs","$backgroundColor","$borderColor","$textColor"],"mappings":"iCAIa,MAAAA,EAAcC,EAAOC,IAOhC;;;;;eAKa,EAAGC,WAAYA,EAAMC,UAAUC;aACjC,EAAGF,QAAOG,eAAiBA,EAAY,EAAIH,EAAMI,QAAQC;mBACnD,EAAGF,eAAiBA,EAAY,MAAQ;YAC/C,EAAGA,YAAWG,QAAON,WAC7BG,EAAY,QAAQH,EAAMI,QAAQE,QAAYN,EAAMI,QAAQG,MAAQ;WAC7D,EAAGJ,YAAWG,QAAON,WAC5BG,EAAY,QAAQH,EAAMI,QAAQE,QAAYN,EAAMI,QAAQG,MAAQ;iBACvD,EAAGJ,YAAWG,QAAON,WAClCG,EACI,QAAQH,EAAMI,QAAQE,QAAYN,EAAMI,QAAQG,MAChD;eACO,EAAGD,QAAON,WACrB,QAAQA,EAAMI,QAAQE,QAAYN,EAAMI,QAAQG;;sBAE9B,EAAGC,sBAAuBA;kBAC9B,EAAGC,kBAAmBA;WAC7B,EAAGC,gBAAiBA;"}

package/lib/{components → src/components}/Box/Box.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Box from ".";
 declare const _default: {
     title: string;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\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 = forwardRef(\n  ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n    const { children, backgroundColor, ...rest } = props;\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const restWithInternalSpacingProps =\n      spacingPropsToSpacingPropsInternal(rest);\n\n    return (\n      <StyledBox\n        theme={theme}\n        $backgroundColor={backgroundColor}\n        {...restWithInternalSpacingProps}\n        ref={ref}\n      >\n        {children}\n      </StyledBox>\n    );\n  },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","backgroundColor","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor"],"mappings":"yUAiCaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAAuCF,EAA/BE,SAAEC,EAA6BH,EAAdG,gBAAKC,EAASH,EAAAD,EAAzC,CAAA,WAAA,oBACAK,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EACJC,EAAmCP,GAErC,OACEQ,EAACC,cAAAC,KACCP,MAAOA,EACWQ,iBAAAZ,GACdO,EAA4B,CAChCX,IAAKA,IAEJG,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n  ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n    const { children, backgroundColor, ...rest } = props;\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const restWithInternalSpacingProps =\n      spacingPropsToSpacingPropsInternal(rest);\n\n    return (\n      <StyledBox\n        theme={theme}\n        $backgroundColor={backgroundColor}\n        {...restWithInternalSpacingProps}\n        ref={ref}\n      >\n        {children}\n      </StyledBox>\n    );\n  },\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n"],"names":["Box","forwardRef","props","ref","children","backgroundColor","rest","foundTheme","useTheme","theme","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor","displayName"],"mappings":"qPAiCO,MAAMA,EAAMC,GACjB,KAAMC,GAAmBC,KACvB,MAAMC,SAAEA,EAAQC,gBAAEA,KAAoBC,GAASJ,EACzCK,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EACJC,EAAmCN,GAErC,OACEO,EAACC,cAAAC,GACCN,MAAOA,EACWO,iBAAAX,KACdM,EACJR,IAAKA,GAEJC,EACS,IAKlBJ,EAAIiB,YAAc"}

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

@@ -1,2 +1,14 @@
-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 o from"styled-components";import{spacing as r}from"../Spacing/index.js";const t=o.div`
+  background-color: ${({theme:o})=>o.colors.backgroundLight};
+  padding: ${({theme:o,$backgroundColor:r})=>r?o.spacing.s:0};
+  margin: 0 0 ${({theme:o})=>o.spacing.m} 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  background-color: ${({theme:o,$backgroundColor:r})=>r&&void 0!==o.colors[r]?o.colors[r]:r||"transparent"};
+
+  ${o=>r(o,o.theme)}
+`;export{t as StyledBox,t 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,SAfjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,IACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,IAMT,SAACP,OAAEC,EAAKD,EAAAC,MAAEG,EAAgBJ,EAAAI,iBAC5C,OAAAA,QAC0D,IAAnDH,EAAMC,OAAOE,GAChBH,EAAMC,OAAOE,GACbA,GAAoB,aAHxB,IAKA,SAACI,GAAU,OAAAH,EAAQG,EAAOA,EAAMP,MAAmB"}
+{"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","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props"],"mappings":"+EAWa,MAAAA,EAAYC,EAAOC,GAAmB;sBAC7B,EAAGC,WAAYA,EAAMC,OAAOC;aACrC,EAAGF,QAAOG,sBACnBA,EAAmBH,EAAMI,QAAQC,EAAI;gBACzB,EAAGL,WAAYA,EAAMI,QAAQE;;;;;;sBAMvB,EAAGN,QAAOG,sBAC5BA,QAC0D,IAAnDH,EAAMC,OAAOE,GAChBH,EAAMC,OAAOE,GACbA,GAAoB;;IAEvBI,GAAUH,EAAQG,EAAOA,EAAMP;"}

package/lib/{components → src/components}/Button/Button.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import { Button } from "./";
 declare const _default: {
     title: string;

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref?: Ref<HTMLElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const {\n      appearance = \"primary\",\n      isIconButton = false,\n      full = false,\n      size = \"m\",\n      children,\n      ...rest\n    } = props;\n\n    const childArray = React.Children.toArray(children);\n    const isChildString = typeof childArray[0] === \"string\";\n    const firstElement = childArray[0] as ReactElement;\n\n    // button has a fixed width if there is a single icon\n    const setIconButton = !!(\n      isIconButton ||\n      (childArray.length === 1 && !isChildString && firstElement?.type) ===\n        IconFa\n    );\n\n    return (\n      <StyledButton\n        as={props.href ? \"a\" : \"button\"}\n        {...(props.href ? { role: \"button\" } : {})}\n        $full={!!full}\n        $size={size}\n        $appearance={appearance}\n        $isIconButton={setIconButton}\n        {...rest}\n        theme={theme}\n        ref={ref}\n      >\n        {props.children && childArray.length\n          ? React.Children.map(\n              props.children,\n              (child: ReactNode, index: number) => (\n                <Spacer theme={theme} key={index}>\n                  {child}\n                </Spacer>\n              ),\n            )\n          : null}\n      </StyledButton>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","_a","appearance","_b","isIconButton","_c","full","_d","size","children","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key"],"mappings":"2TAyCaA,EAASC,GACpB,SAACC,EAAoBC,GACnB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EAMEP,EANoBQ,WAAtBA,OAAa,IAAAD,EAAA,YACbE,EAKET,EALkBU,aAApBA,OAAe,IAAAD,KACfE,EAIEX,EAAKY,KAJPA,cAAYD,EACZE,EAGEb,OAHFc,OAAO,IAAAD,EAAA,IAAGA,EACVE,EAEEf,WADCgB,IACDhB,EAPE,CAOL,aAAA,eAAA,OAAA,OAAA,aAEKiB,EAAaC,EAAMC,SAASC,QAAQL,GACpCM,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJb,IACuB,IAAtBO,EAAWO,SAAiBH,IAAiBC,aAAY,EAAZA,EAAcG,SAC1DC,GAGJ,OACER,EAAAS,cAACC,EAAYvB,EAAA,CACXwB,GAAI7B,EAAM8B,KAAO,IAAM,UAClB9B,EAAM8B,KAAO,CAAEC,KAAM,UAAa,CAAA,EAChC,CAAAC,QAAEpB,EACFqB,MAAAnB,EACMoB,YAAA1B,EACE2B,cAAAZ,GACXP,EACJ,CAAAZ,MAAOA,EACPH,IAAKA,IAEJD,EAAMe,UAAYE,EAAWO,OAC1BN,EAAMC,SAASiB,IACbpC,EAAMe,UACN,SAACsB,EAAkBC,GAAkB,OACnCpB,EAAAS,cAACY,EAAM,CAACnC,MAAOA,EAAOoC,IAAKF,GACxBD,EAEJ,IAEH,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref?: Ref<HTMLElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const {\n      appearance = \"primary\",\n      isIconButton = false,\n      full = false,\n      size = \"m\",\n      children,\n      ...rest\n    } = props;\n\n    const childArray = React.Children.toArray(children);\n    const isChildString = typeof childArray[0] === \"string\";\n    const firstElement = childArray[0] as ReactElement;\n\n    // button has a fixed width if there is a single icon\n    const setIconButton = !!(\n      isIconButton ||\n      (childArray.length === 1 && !isChildString && firstElement?.type) ===\n        IconFa\n    );\n\n    return (\n      <StyledButton\n        as={props.href ? \"a\" : \"button\"}\n        {...(props.href ? { role: \"button\" } : {})}\n        $full={!!full}\n        $size={size}\n        $appearance={appearance}\n        $isIconButton={setIconButton}\n        {...rest}\n        theme={theme}\n        ref={ref}\n      >\n        {props.children && childArray.length\n          ? React.Children.map(\n              props.children,\n              (child: ReactNode, index: number) => (\n                <Spacer theme={theme} key={index}>\n                  {child}\n                </Spacer>\n              ),\n            )\n          : null}\n      </StyledButton>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"],"names":["Button","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","appearance","isIconButton","full","size","children","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key","displayName"],"mappings":"uOAyCa,MAAAA,EAASC,GACpB,CAACC,EAAoBC,KACnB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,WACJA,EAAa,UAASC,aACtBA,GAAe,EAAKC,KACpBA,GAAO,EAAKC,KACZA,EAAO,IAAGC,SACVA,KACGC,GACDX,EAEEY,EAAaC,EAAMC,SAASC,QAAQL,GACpCM,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJX,IACuB,IAAtBK,EAAWO,SAAiBH,GAAiBC,GAAcG,QAC1DC,GAGJ,OACER,EAAAS,cAACC,EAAY,CACXC,GAAIxB,EAAMyB,KAAO,IAAM,YAClBzB,EAAMyB,KAAO,CAAEC,KAAM,UAAa,CAAA,EAChCC,QAAEnB,EACFoB,MAAAnB,EACMoB,YAAAvB,EACEwB,cAAAZ,KACXP,EACJP,MAAOA,EACPH,IAAKA,GAEJD,EAAMU,UAAYE,EAAWO,OAC1BN,EAAMC,SAASiB,IACb/B,EAAMU,UACN,CAACsB,EAAkBC,IACjBpB,EAAAS,cAACY,EAAM,CAAC9B,MAAOA,EAAO+B,IAAKF,GACxBD,KAIP,KACS,IAKrBlC,EAAOsC,YAAc"}

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

@@ -1,2 +1,109 @@
-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 o,{css as r}from"styled-components";const t="3rem",e="4rem",n=o.span`
+  margin-left: ${({theme:o})=>o.spacing.xxs};
+  &:first-of-type {
+    margin-left: 0;
+  }
+`,a=o.button`
+  box-sizing: border-box;
+  min-height: ${t};
+  height: min-content;
+  display: inline-block;
+  vertical-align: middle;
+
+  padding: ${({theme:o,$isIconButton:r})=>r?"0":`calc( (${t} - ( ${o.button.buttonBorderThickness} * 2) - ${o.typography.lineHeight} ) / 2) ${o.button.horizontalPadding}`};
+  width: ${({$isIconButton:o})=>o?`${t}`:"auto"};
+  min-width: ${({$isIconButton:o})=>o?`${t}`:"auto"};
+
+  border-radius: ${({theme:o})=>o.button.borderRadius};
+  border-style: solid;
+  border-width: ${({theme:o})=>o.button.buttonBorderThickness};
+
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+
+  cursor: pointer;
+  font-size: ${({theme:{fontSizes:{m:o}}})=>o};
+  font-family: ${({theme:{typography:{fontFamilyButtons:o}}})=>o};
+  font-weight: ${({theme:{typography:{fontWeightButtons:o}}})=>o};
+  text-align: center;
+  text-transform: ${({theme:o})=>o.button.textTransform};
+  text-decoration: ${({theme:o})=>o.button.textDecoration};
+
+  &:focus-visible {
+    outline: auto;
+  }
+
+  ${o=>"primary"===o.$appearance&&r`
+      background-color: ${o.theme.colors.buttonPrimaryBackground};
+      border-color: ${o.theme.colors.buttonPrimaryBorder};
+      color: ${o.theme.colors.buttonPrimaryText} !important;
+      &:focus,
+      &:hover {
+        background-color: ${o.theme.colors.buttonPrimaryBackgroundHover};
+        border-color: ${o.theme.colors.buttonPrimaryBorderHover};
+        color: ${o.theme.colors.buttonPrimaryTextHover} !important;
+      }
+      &:disabled {
+        cursor: not-allowed;
+        background-color: ${o.theme.colors.buttonPrimaryDisabledBackground};
+        color: ${o.theme.colors.buttonPrimaryDisabledText} !important;
+        border-color: ${o.theme.colors.buttonPrimaryDisabledBorder};
+      }
+    `}
+
+  ${o=>"secondary"===o.$appearance&&r`
+      background-color: ${o.theme.colors.buttonSecondaryBackground};
+      border-color: ${o.theme.colors.buttonSecondaryBorder};
+      color: ${o.theme.colors.buttonSecondaryText} !important;
+      &:focus,
+      &:hover {
+        background-color: ${o.theme.colors.buttonSecondaryBackgroundHover};
+        border-color: ${o.theme.colors.buttonSecondaryBorderHover};
+        color: ${o.theme.colors.buttonSecondaryTextHover} !important;
+      }
+      &:disabled {
+        cursor: not-allowed;
+        background-color: ${o.theme.colors.buttonSecondaryDisabledBackground};
+        color: ${o.theme.colors.buttonSecondaryDisabledText} !important;
+        border-color: ${o.theme.colors.buttonSecondaryDisabledBorder};
+      }
+    `}
+
+  ${o=>"tertiary"===o.$appearance&&r`
+      display: inline-block;
+      padding: 0;
+      border: 0px;
+      background-color: rgba(255, 255, 255, 0);
+      transition: color 0.2s ease;
+      color: ${o.theme.colors.buttonTertiaryText};
+      &:focus,
+      &:hover {
+        color: ${o.theme.colors.buttonTertiaryTextHover};
+      }
+      &:disabled {
+        cursor: not-allowed;
+        background-color: transparent;
+        color: ${o.theme.colors.buttonTertiaryDisabledText} !important;
+        border-color: transparent;
+      }
+    `}
+  
+  ${({theme:o,$size:t,$isIconButton:n})=>"l"===t&&r`
+      min-height: ${e};
+      border-radius: ${o.button.borderRadiusLarge};
+      padding: ${n?"0":`calc( (${e} - ( ${o.button.buttonBorderThickness} * 2) - ${o.typography.lineHeight} ) / 2) ${o.spacing.m}`};
+      min-width: ${n?`${e}`:"auto"};
+      height: ${n?`${e}`:"min-content"};
+    `}
+
+  ${o=>o.$full&&r`
+      width: 100%;
+    `}
+
+  ${o=>o.$css&&r`
+      ${o.$css}
+    `}
+`;export{n as Spacer,a as StyledButton};
 //# 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":"2HAIA,oBAAMA,EAAgB,OAChBC,EAAsB,OAEfC,EAASC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,sDAAA,CAAsB,oBACN,yDAAhC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,GAAd,IAMnBC,EAAeR,EAAOS,unBAQjC,8CAE2B,gGAQ6H,eAE3G,mBAEA,yBAEY,8CAEQ,8IAY1D,qBAKgB,qBAKA,+CAEoC,yBACE,0DAwB1D,SAqBA,SAqBA,WAYA,SAMA,SAMA,QAnIWZ,GAKH,SAACO,OAAEC,EAAKD,EAAAC,MACjB,OADgCD,EAAAM,cAE5B,IACA,iBAAUb,EAAa,SAAAc,OAAQN,EAAMI,OAAOG,sBAAqB,YAAAD,OAAWN,EAAMQ,WAAWC,WAAU,YAAAH,OAAWN,EAAMI,OAAOM,kBAFnI,IAGO,SAACX,GACR,OADuBA,EAAAM,cACP,GAAAC,OAAGd,GAAkB,MAArC,IACW,SAACO,GACZ,OAD2BA,EAAAM,cACX,GAAAC,OAAGd,GAAkB,MAArC,IAEe,SAACO,GAAc,OAAPA,EAAAC,MAAaI,OAAOO,YAAb,IAEhB,SAACZ,GAAc,OAAPA,EAAAC,MAAaI,OAAOG,qBAAb,IAQlB,SAACR,GAIR,OAFYA,EAAAC,MAAAY,UAAAC,CAEZ,IACS,SAACd,GAIV,OAF6BA,EAAAC,MAAAQ,WAAAM,iBAE7B,IACS,SAACf,GAIV,OAF6BA,EAAAC,MAAAQ,WAAAO,iBAE7B,IAEY,SAAChB,GAAc,OAAPA,EAAAC,MAAaI,OAAOY,aAAb,IACd,SAACjB,GAAc,OAAPA,EAAAC,MAAaI,OAAOa,cAAb,IAMhC,SAACC,GACD,MAAsB,YAAtBA,EAAMC,aACNC,yYAAG,6BAC6D,0BACR,mBACT,4EAGwB,4BACR,qBACT,sGAIoB,qBACjB,uCACS,sBAb5CF,EAAMlB,MAAMqB,OAAOC,wBACvBJ,EAAMlB,MAAMqB,OAAOE,oBAC1BL,EAAMlB,MAAMqB,OAAOG,kBAGNN,EAAMlB,MAAMqB,OAAOI,6BACvBP,EAAMlB,MAAMqB,OAAOK,yBAC1BR,EAAMlB,MAAMqB,OAAOM,uBAIRT,EAAMlB,MAAMqB,OAAOO,gCAC9BV,EAAMlB,MAAMqB,OAAOQ,0BACZX,EAAMlB,MAAMqB,OAAOS,4BAfvC,IAmBA,SAACZ,GACD,MAAsB,cAAtBA,EAAMC,aACNC,EAAGW,IAAAA,EAAAjC,EAAA,CAAA,6BAAA,0BAAA,mBAAA,4EAAA,4BAAA,qBAAA,sGAAA,qBAAA,uCAAA,oBAAA,CAAA,6BAC+D,0BACR,mBACT,4EAGwB,4BACR,qBACT,sGAKhB,qBACmB,uCACS,sBAd9CoB,EAAMlB,MAAMqB,OAAOW,0BACvBd,EAAMlB,MAAMqB,OAAOY,sBAC1Bf,EAAMlB,MAAMqB,OAAOa,oBAGNhB,EAAMlB,MAAMqB,OAAOc,+BACvBjB,EAAMlB,MAAMqB,OAAOe,2BAC1BlB,EAAMlB,MAAMqB,OAAOgB,yBAIRnB,EAAMlB,MAAMqB,OAC7BiB,kCACMpB,EAAMlB,MAAMqB,OAAOkB,4BACZrB,EAAMlB,MAAMqB,OAAOmB,8BAhBvC,IAoBA,SAACtB,GACD,MAAsB,aAAtBA,EAAMC,aACNC,EAAGqB,IAAAA,EAAA3C,EAAA,CAAA,4KAAA,sDAAA,wHAAA,mEAAA,CAAA,4KAM6C,sDAGO,wHAKG,qEAR/CoB,EAAMlB,MAAMqB,OAAOqB,mBAGjBxB,EAAMlB,MAAMqB,OAAOsB,wBAKnBzB,EAAMlB,MAAMqB,OAAOuB,2BAfhC,IAoBA,SAAC7C,GAAE,IAAAC,UAAO6C,EAAK9C,EAAA8C,MAAExC,EAAaN,EAAAM,cAC9B,MAAU,MAAVwC,GACAzB,EAAG0B,IAAAA,EAAAhD,EAAA,CAAA,uBAAA,2BAAA,qBAAA,uBAAA,oBAAA,WAAA,CAAA,uBACgC,2BACc,qBAG8F,uBAC/E,oBACI,aANpDL,EACGO,EAAMI,OAAO2C,kBACnB1C,EACP,IACA,iBAAUZ,EAAmB,SAAAa,OAAQN,EAAMI,OAAOG,sBAAqB,YAAAD,OAAWN,EAAMQ,WAAWC,WAAU,YAAAH,OAAWN,EAAMC,QAAQY,GAC7HR,EAAgB,GAAGC,OAAAb,GAAwB,OAC9CY,EAAgB,GAAGC,OAAAb,GAAwB,cARvD,IAWA,SAACyB,GACD,OAAAA,EAAM8B,OACN5B,EAAG6B,IAAAA,EAAAnD,EAAA,CAAA,8BAAA,CAAA,gCADH,IAKA,SAACoB,GACD,OAAAA,EAAMgC,MACN9B,EAAG+B,IAAAA,EAAArD,EAAA,CAAA,WAAA,UAAA,CAAA,WACW,YAAVoB,EAAMgC,KAFV"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n  margin-left: ${({ theme }) => theme.spacing.xxs};\n  &:first-of-type {\n    margin-left: 0;\n  }\n`;\n\nexport const StyledButton = styled.button<{\n  theme: ThemeType;\n  href?: string;\n  $isIconButton: boolean;\n  $appearance?: ButtonAppearanceType;\n  $full?: boolean;\n  $size?: \"m\" | \"l\";\n  $css?: string;\n}>`\n  box-sizing: border-box;\n  min-height: ${BUTTON_HEIGHT};\n  height: min-content;\n  display: inline-block;\n  vertical-align: middle;\n\n  padding: ${({ theme, $isIconButton }) =>\n    $isIconButton\n      ? \"0\"\n      : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n  width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n  min-width: ${({ $isIconButton }) =>\n    $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  border-style: solid;\n  border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n\n  cursor: pointer;\n  font-size: ${({\n    theme: {\n      fontSizes: { m },\n    },\n  }) => m};\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyButtons },\n    },\n  }) => fontFamilyButtons};\n  font-weight: ${({\n    theme: {\n      typography: { fontWeightButtons },\n    },\n  }) => fontWeightButtons};\n  text-align: center;\n  text-transform: ${({ theme }) => theme.button.textTransform};\n  text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${(props) =>\n    props.$appearance === \"primary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonPrimaryBackground};\n      border-color: ${props.theme.colors.buttonPrimaryBorder};\n      color: ${props.theme.colors.buttonPrimaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n        color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n        color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"secondary\" &&\n    css`\n      background-color: ${props.theme.colors.buttonSecondaryBackground};\n      border-color: ${props.theme.colors.buttonSecondaryBorder};\n      color: ${props.theme.colors.buttonSecondaryText} !important;\n      &:focus,\n      &:hover {\n        background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n        border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n        color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: ${props.theme.colors\n          .buttonSecondaryDisabledBackground};\n        color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n        border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n      }\n    `}\n\n  ${(props) =>\n    props.$appearance === \"tertiary\" &&\n    css`\n      display: inline-block;\n      padding: 0;\n      border: 0px;\n      background-color: rgba(255, 255, 255, 0);\n      transition: color 0.2s ease;\n      color: ${props.theme.colors.buttonTertiaryText};\n      &:focus,\n      &:hover {\n        color: ${props.theme.colors.buttonTertiaryTextHover};\n      }\n      &:disabled {\n        cursor: not-allowed;\n        background-color: transparent;\n        color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n        border-color: transparent;\n      }\n    `}\n  \n  ${({ theme, $size, $isIconButton }) =>\n    $size === \"l\" &&\n    css`\n      min-height: ${BUTTON_HEIGHT_LARGE};\n      border-radius: ${theme.button.borderRadiusLarge};\n      padding: ${$isIconButton\n        ? \"0\"\n        : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n      min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n      height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n    `}\n\n  ${(props) =>\n    props.$full &&\n    css`\n      width: 100%;\n    `}\n\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","theme","spacing","xxs","StyledButton","button","$isIconButton","buttonBorderThickness","typography","lineHeight","horizontalPadding","borderRadius","fontSizes","m","fontFamilyButtons","fontWeightButtons","textTransform","textDecoration","props","$appearance","css","colors","buttonPrimaryBackground","buttonPrimaryBorder","buttonPrimaryText","buttonPrimaryBackgroundHover","buttonPrimaryBorderHover","buttonPrimaryTextHover","buttonPrimaryDisabledBackground","buttonPrimaryDisabledText","buttonPrimaryDisabledBorder","buttonSecondaryBackground","buttonSecondaryBorder","buttonSecondaryText","buttonSecondaryBackgroundHover","buttonSecondaryBorderHover","buttonSecondaryTextHover","buttonSecondaryDisabledBackground","buttonSecondaryDisabledText","buttonSecondaryDisabledBorder","buttonTertiaryText","buttonTertiaryTextHover","buttonTertiaryDisabledText","$size","borderRadiusLarge","$full","$css"],"mappings":"2CAIA,MAAMA,EAAgB,OAChBC,EAAsB,OAEfC,EAASC,EAAOC,IAA0B;iBACtC,EAAGC,WAAYA,EAAMC,QAAQC;;;;EAMjCC,EAAeL,EAAOM,MAQjC;;gBAEcT;;;;;aAKH,EAAGK,QAAOK,mBACnBA,EACI,IACA,UAAUV,SAAqBK,EAAMI,OAAOE,gCAAgCN,EAAMO,WAAWC,qBAAqBR,EAAMI,OAAOK;WAC5H,EAAGJ,mBACVA,EAAgB,GAAGV,IAAkB;eAC1B,EAAGU,mBACdA,EAAgB,GAAGV,IAAkB;;mBAEtB,EAAGK,WAAYA,EAAMI,OAAOM;;kBAE7B,EAAGV,WAAYA,EAAMI,OAAOE;;;;;;;;eAQ/B,EACXN,OACEW,WAAaC,SAEXA;iBACS,EACbZ,OACEO,YAAcM,yBAEZA;iBACS,EACbb,OACEO,YAAcO,yBAEZA;;oBAEY,EAAGd,WAAYA,EAAMI,OAAOW;qBAC3B,EAAGf,WAAYA,EAAMI,OAAOY;;;;;;IAM5CC,GACqB,YAAtBA,EAAMC,aACNC,CAAG;0BACmBF,EAAMjB,MAAMoB,OAAOC;sBACvBJ,EAAMjB,MAAMoB,OAAOE;eAC1BL,EAAMjB,MAAMoB,OAAOG;;;4BAGNN,EAAMjB,MAAMoB,OAAOI;wBACvBP,EAAMjB,MAAMoB,OAAOK;iBAC1BR,EAAMjB,MAAMoB,OAAOM;;;;4BAIRT,EAAMjB,MAAMoB,OAAOO;iBAC9BV,EAAMjB,MAAMoB,OAAOQ;wBACZX,EAAMjB,MAAMoB,OAAOS;;;;IAItCZ,GACqB,cAAtBA,EAAMC,aACNC,CAAG;0BACmBF,EAAMjB,MAAMoB,OAAOU;sBACvBb,EAAMjB,MAAMoB,OAAOW;eAC1Bd,EAAMjB,MAAMoB,OAAOY;;;4BAGNf,EAAMjB,MAAMoB,OAAOa;wBACvBhB,EAAMjB,MAAMoB,OAAOc;iBAC1BjB,EAAMjB,MAAMoB,OAAOe;;;;4BAIRlB,EAAMjB,MAAMoB,OAC7BgB;iBACMnB,EAAMjB,MAAMoB,OAAOiB;wBACZpB,EAAMjB,MAAMoB,OAAOkB;;;;IAItCrB,GACqB,aAAtBA,EAAMC,aACNC,CAAG;;;;;;eAMQF,EAAMjB,MAAMoB,OAAOmB;;;iBAGjBtB,EAAMjB,MAAMoB,OAAOoB;;;;;iBAKnBvB,EAAMjB,MAAMoB,OAAOqB;;;;;IAKhC,EAAGzC,QAAO0C,QAAOrC,mBACP,MAAVqC,GACAvB,CAAG;oBACavB;uBACGI,EAAMI,OAAOuC;iBACnBtC,EACP,IACA,UAAUT,SAA2BI,EAAMI,OAAOE,gCAAgCN,EAAMO,WAAWC,qBAAqBR,EAAMC,QAAQW;mBAC7HP,EAAgB,GAAGT,IAAwB;gBAC9CS,EAAgB,GAAGT,IAAwB;;;IAGtDqB,GACDA,EAAM2B,OACNzB,CAAG;;;;IAIFF,GACDA,EAAM4B,MACN1B,CAAG;QACCF,EAAM4B;;"}

package/lib/{components → src/components}/Carousel/Carousel.stories.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import Carousel, { CarouselProps } from ".";
+import { type StoryObj } from "@storybook/react";
+import Carousel, { type CarouselProps } from ".";
 declare const _default: {
     title: string;
     component: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;

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

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

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

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

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

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

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

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

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

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