@cruk/cruk-react-components 5.0.6 → 5.0.7

package/lib/components/Badge/index.d.ts

@@ -11,6 +11,8 @@ export type BadgeProps = {
     size?: SpaceType;
     /** contents of badge */
     children?: ReactNode;
+    /** forces shape to have equal width and height set by size attribute */
+    isSquare?: boolean;
 };
 /**
  * Displays a numeric or icon indicator. You can use the icon prop to
@@ -25,5 +27,5 @@ at the end of a sentence, link, or button. Unless the context is clear,
 consider including additional context with a visually hidden piece of
 additional text.
  */
-export declare function Badge({ children, size, backgroundColor, borderColor, textColor, }: BadgeProps): React.JSX.Element;
+export declare function Badge({ children, size, backgroundColor, borderColor, textColor, isSquare, }: BadgeProps): React.JSX.Element;
 export default Badge;

package/lib/components/Badge/styles.d.ts

@@ -3,7 +3,7 @@ export declare const StyledBadge: import("styled-components/dist/types").IStyled
     $backgroundColor: string;
     $borderColor: string;
     $textColor: string;
-    $isText: boolean;
+    $isSquare: boolean;
     $size: SpaceType;
     theme: ThemeType;
 }>> & string;

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

@@ -1,2 +1,2 @@
-import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledBadge as i}from"./styles.js";import{themeColorOrString as s}from"../../utils/themeUtils.js";function m(m){var l=m.children,n=m.size,d=void 0===n?"xs":n,a=m.backgroundColor,p=void 0===a?"primary":a,f=m.borderColor,c=void 0===f?"transparent":f,u=m.textColor,b=void 0===u?"textOnPrimary":u,x=t(),C=o(o({},e),x),v="string"==typeof l;return r.createElement(i,{theme:C,$isText:v,$size:d,$backgroundColor:s(p,C),$borderColor:s(c,C),$textColor:s(b,C)},l)}export{m as Badge,m as default};
+import{__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledBadge as i}from"./styles.js";import{themeColorOrString as s}from"../../utils/themeUtils.js";function m(m){var l=m.children,n=m.size,a=void 0===n?"xs":n,d=m.backgroundColor,p=void 0===d?"primary":d,u=m.borderColor,f=void 0===u?"transparent":u,c=m.textColor,b=void 0===c?"textOnPrimary":c,C=m.isSquare,v=t(),x=r(r({},e),v),y=null!=C?C:!("string"==typeof l);return o.createElement(i,{theme:x,$isSquare:y,$size:a,$backgroundColor:s(p,x),$borderColor:s(f,x),$textColor:s(b,x)},l)}export{m as Badge,m as default};
 //# sourceMappingURL=index.js.map

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};\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}: BadgeProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const isText = typeof children === \"string\";\n  return (\n    <StyledBadge\n      theme={theme}\n      $isText={isText}\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","foundTheme","useTheme","theme","__assign","defaultTheme","isText","React","createElement","StyledBadge","$isText","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"gSAmCM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAWF,EAAAG,KAAXA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,OAAkB,IAAAD,EAAA,UAASA,EAC3BE,EAA2BN,EAAAO,YAA3BA,OAAW,IAAAD,EAAG,cAAaA,EAC3BE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,gBAAeA,EAErBE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAA6B,iBAAbd,EACtB,OACEe,EAACC,cAAAC,EACC,CAAAN,MAAOA,EAAKO,QACHJ,EAAMK,MACRjB,EACWkB,iBAAAC,EAAmBjB,EAAiBO,GACxCW,aAAAD,EAAmBf,EAAaK,cAClCU,EAAmBb,EAAWG,IAEzCX,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","_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"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var e,r=t.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 t=n.theme;return n.$isText?t.spacing.xxs:0}),(function(n){return n.$isText?" 1.5rem":"50%"}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?" 1rem":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$size,e=n.theme;return"calc(".concat(e.spacing[t]," + ").concat(e.spacing.xs,")")}),(function(n){return n.$backgroundColor}),(function(n){return n.$borderColor}),(function(n){return n.$textColor}));export{r as StyledBadge,r as default};
+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};
 //# 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  $isText: 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, $isText }) => ($isText ? theme.spacing.xxs : 0)};\n  border-radius: ${({ $isText }) => ($isText ? ` 1.5rem` : \"50%\")};\n  height: ${({ $isText, $size, theme }) =>\n    $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n  width: ${({ $isText, $size, theme }) =>\n    $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n  line-height: ${({ $isText, $size, theme }) =>\n    $isText ? ` 1rem` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\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","$isText","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,iBACuB,uBACL,gBAEW,eAEA,qBAEC,mBAEpB,4BAEO,sBACZ,eACX,UAd1B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,UAAUC,CAAhB,IACjB,SAACH,OAAEC,EAAKD,EAAAC,MAAgB,OAAPD,EAAAI,QAAkBH,EAAMI,QAAQC,IAAM,CAA/B,IAClB,SAACN,GAAgB,OAAPA,EAAAI,QAAkB,UAAY,KAAvB,IACxB,SAACJ,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAChC,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACO,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC/B,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACa,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACrC,OAAAG,EAAU,QAAU,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAzE,IACW,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","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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  position: absolute;\n  top: calc(50% - (${RADIO_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  pointer-events: none;\n  border-radius: 100%;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ${RADIO_INNER_SIZE};\n    width: ${RADIO_INNER_SIZE};\n    top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  vertical-align: middle;\n\n  ${({ theme, $disabled: isDisabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n            &:before {\n              background-color: ${$checked\n                ? theme.colors.check\n                : `rgba(255, 255, 255, 0)`};\n            }\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled ? theme.colors.disabled : theme.colors.check};\n          }\n        `}\n`;\n\nexport const VerticalAlign = styled.span<{\n  theme: ThemeType;\n}>`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n\n  ${({ theme }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n        `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","isDisabled","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s"],"mappings":"2HAGA,sBAAMA,EAAa,SACbC,EAAmB,UAGZC,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,eAAA,gDAAA,oBAAA,OAAA,CAEpC,yCAEoB,eACD,gDAEU,oBAKrB,SAREN,EACDA,EAEUA,GACX,SAACO,GAIH,OAFWA,EAAAC,MAAAC,QAAAC,EAEX,IAGKC,EAAQR,EAAOS,KAAIC,IAAAA,EAAAP,EAAA,CAAA,mEAAA,iEAAA,eAAA,+RAAA,iBAAA,2BAAA,kCAAA,oIAAA,CAE9B,mEAG+D,iEAG3C,eACD,+RAgBS,iBACD,2BACU,kCACC,uIAvBlB,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOC,eAAb,GAGzBf,EACDA,EAgBGC,EACDA,EACUA,EACCA,GAOXe,EAAcb,EAAOc,MAKhCC,IAAAA,EAAAZ,EAAA,CAAA,iHAAA,mBAAA,qBAAA,4BAAA,yDAAA,2CAAA,iBAAA,qCAAA,MAAA,CAAA,iHAOyD,mBACA,qBACI,4BAEE,yDAIK,2CAIT,iBAEyM,qCA6B7P,SA3CQ,SAACC,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,UAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAC,MAAaW,WAAWE,YAAjB,IACb,SAACd,GAAc,OAAPA,EAAAC,MAAaW,WAAWG,cAAjB,IAEV,SAACf,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,IAIzB,SAAChB,GAAkB,OAAPA,EAAAiB,UAAoB,cAAgB,SAA7B,IAGpB,SAACjB,OAAEC,EAAKD,EAAAC,MACf,OAD0BD,EAAAiB,UACdhB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOY,QAAjD,IACS,SAACnB,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBA9EkB,MA8EK,SAAAmB,OAAQnB,EAAMoB,UAAUC,iBAAgB,YAAAF,OAAWnB,EAAMW,WAAWC,8BAAqBZ,EAAMC,QAAQqB,EAAY,YAAAH,OA9ExH,sBA8E6InB,EAAMoB,UAAUC,oCAA2BrB,EAAMW,WAAWC,WAAqB,YAAAO,OAAAnB,EAAMC,QAAQsB,GAA9P,IAGA,SAACxB,OAAEC,EAAKD,EAAAC,MAAawB,EAAUzB,EAAAiB,UAAES,EAAQ1B,EAAA0B,SAAEC,EAAS3B,EAAA2B,UACpD,OAAA1B,EAAMoB,UAAUO,uBACZ,KACAC,EAAGC,IAAAA,EAAA/B,EAAA,CAAA,8CAAA,IAAA,oDAAA,8DAAA,sDAAA,IAAA,oDAAA,4BAAA,CAAA,8CAGa,IAAS,oDAQa,8DAIJ,sDAIV,IAAS,oDAE8B,8BAlB3DJ,EAAgBS,EAEZqB,EACExB,EAAMM,OAAOW,SACbS,EACE1B,EAAMM,OAAOwB,OACbL,EACEzB,EAAMM,OAAOyB,MACb/B,EAAMM,OAAO0B,YAEDP,EAChBzB,EAAMM,OAAOyB,MACb,yBAIErC,EAAgBS,EAEpBqB,EAAaxB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOyB,MAvB9D,IA4BSE,EAAgBtC,EAAOS,KAAI8B,IAAAA,EAAApC,EAAA,CAAA,8FAAA,0CAAA,CAEtC,8FAI+D,6CAA3C,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,IAKxBoB,EAAiBxC,EAAOC,IAAGwC,IAAAA,EAAAtC,EAAA,CAAA,iJAAA,CAAA,oJAU3BuC,EAAc1C,EAAO2C,MAGhCC,IAAAA,EAAAzC,EAAA,CAAA,8JAAA,UAAA,MAAA,CAAA,8JAYS,UAuBF,SA3BS,SAACC,GAIX,OAFYA,EAAAC,MAAAC,QAAAuC,GAEZ,IAEJ,SAACzC,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAAAA,EAAMoB,UAAUO,uBACZC,EAAGa,IAAAA,EAAA3C,EAAA,CAAA,qMAAA,eAAA,CAAA,qMAOsB,iBAAfE,EAAMC,QAAQyC,GAExBd,wSAAG,oDAEwB,mDAGC,sFAE8B,iGALhD5B,EAAMC,QAAQuC,IAGVL,EAEoBnC,EAAMM,OAAO0B,YAjBnD"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  position: absolute;\n  top: calc(50% - (${RADIO_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  pointer-events: none;\n  border-radius: 100%;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ${RADIO_INNER_SIZE};\n    width: ${RADIO_INNER_SIZE};\n    top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  vertical-align: middle;\n\n  ${({ theme, $disabled: isDisabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n            &:before {\n              background-color: ${$checked\n                ? theme.colors.check\n                : `rgba(255, 255, 255, 0)`};\n            }\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled ? theme.colors.disabled : theme.colors.check};\n          }\n        `}\n`;\n\nexport const VerticalAlign = styled.span<{\n  theme: ThemeType;\n}>`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n\n  ${({ theme, disabled }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} ${Check}::before {\n            background: ${disabled\n              ? theme.colors.disabled\n              : theme.colors.check};\n          }\n        `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","isDisabled","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s","templateObject_8"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruk/cruk-react-components",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "React components implementing CRUK, RFL, SU2C & Bowelbabe designs",
   "license": "MIT",
   "publishConfig": {
@@ -25,7 +25,7 @@
     "node-test-watch": "node --import tsx --test-reporter=spec --watch --test 'src/utils/__tests__/testHelpers.test.ts'",
     "test": "npm run node-test && npm run cypress-headless",
     "clean": "rm -rf node_modules/",
-    "release": "node release.js",
+    "release": "release-it",
     "rollup:build-lib": "npm run clean-lib && rollup --config",
     "prettier": "prettier --write '**/*.{ts,tsx}'",
     "prettier:test": "prettier --check src/**/*.{ts,tsx}",
@@ -125,6 +125,7 @@
     "react-focus-lock": "^2.5.2",
     "react-intersection-observer": "^9.1.0",
     "react-is": "^18.2.0",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "release-it": "^17.10.0"
   }
 }