@cruk/cruk-react-components 6.2.2 → 7.0.0

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var i,t,o,r=e.legend(i||(i=n(["\n  display: block;\n  float: left;\n  font-family: ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  display: block;\n  float: left;\n  font-family: ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml}),a=e.fieldset(t||(t=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n"])),function(n){return n.theme.spacing.s}),s=e.div(o||(o=n(["\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n"])),function(n){return n.theme.spacing.m});export{s as OptionWrapper,a as StyledFieldSet,r as StyledLegend};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var e,r,t,a=i.legend(e||(e=n(['\n  display: block;\n  float: left;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n'],['\n  display: block;\n  float: left;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n']))),o=i.fieldset(r||(r=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 var(--spacing-s, 1.5rem) 0;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 var(--spacing-s, 1.5rem) 0;\n"]))),s=i.div(t||(t=n(["\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-m, 2rem);\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-m, 2rem);\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n"])));export{s as OptionWrapper,o as StyledFieldSet,a as StyledLegend};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledLegend = styled.legend<{\n  theme: ThemeType;\n}>`\n  display: block;\n  float: left;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n`;\n\nexport const OptionWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: flex;\n  flex-direction: row;\n  gap: ${({ theme }) => theme.spacing.m};\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n`;\n"],"names":["StyledLegend","styled","legend","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyBase","breakpoint","desktopLarge","fontSizes","ml","StyledFieldSet","fieldset","templateObject_2","spacing","s","OptionWrapper","div","templateObject_3","m"],"mappings":"iHAGO,UAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,uDAAA,kEAAA,uBAAA,YAAA,CAEvC,uDAG6D,kEAGI,uBACjB,cAJjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,cAAjB,EAGT,SAACH,GAAc,OAAPA,EAAAC,MAAaG,WAAWC,YAAjB,EACrB,SAACL,GAAc,OAAPA,EAAAC,MAAaK,UAAUC,EAAhB,GAInBC,EAAiBZ,EAAOa,SAAQC,IAAAA,EAAAX,EAAA,CAAA,qQAAA,SAAA,CAE3C,qQAY4C,WAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQC,CAAd,GAGlBC,EAAgBjB,EAAOkB,IAAGC,IAAAA,EAAAhB,EAAA,CAAA,sDAAA,qHAAA,CAErC,sDAGqC,uHAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQK,CAAd"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledLegend = styled.legend`\n  display: block;\n  float: left;\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n\nexport const StyledFieldSet = styled.fieldset`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 var(--spacing-s, 1.5rem) 0;\n`;\n\nexport const OptionWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-m, 2rem);\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0px;\n  label {\n    min-width: 0px;\n  }\n`;\n"],"names":["StyledLegend","styled","legend","templateObject_1","__makeTemplateObject","StyledFieldSet","fieldset","templateObject_2","OptionWrapper","div","templateObject_3"],"mappings":"iHAEO,UAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,+OAAA,CAAA,kPAW5BC,EAAiBJ,EAAOK,SAAQC,IAAAA,EAAAH,EAAA,CAAA,mSAAA,CAAA,sSAehCI,EAAgBP,EAAOQ,IAAGC,IAAAA,EAAAN,EAAA,CAAA,8LAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as d}from"../ErrorText/index.js";import n from"./styles.js";var s=function(s){var m=s.errorMessage,l=s.hasError,c=s.required,f=s.label,p=s.hintText,u=s.hideRequiredIndicationInLabel,b=s.ref,h=r(s,["errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref"]),x=t(),E=e(e({},o),x);return i.createElement(a,{label:f,hintText:p,required:!u&&c||!1},i.createElement(n,e({},h,{ref:b,theme:E,required:c,"aria-invalid":l||!!m||!1,"aria-describedby":h.id&&m?"".concat(h.id,"-error"):void 0,$hasError:l||!!m||!1})),!!m&&i.createElement(d,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},m))};export{s as Select,s as default};
+import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as t}from"../ErrorText/index.js";import{StyledSelect as o}from"./styles.js";var d=function(d){var n=d.errorMessage,s=d.hasError,l=d.required,m=d.label,c=d.hintText,b=d.hideRequiredIndicationInLabel,f=d.ref,u=r(d,["errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref"]);return i.createElement(a,{label:m,hintText:c,required:!b&&l||!1},i.createElement(o,e({},u,{ref:f,required:l,"aria-invalid":s||!!n||!1,"aria-describedby":u.id&&n?"".concat(u.id,"-error"):void 0,$hasError:s||!!n||!1})),!!n&&i.createElement(t,{marginTop:"xxs",id:u.id?"".concat(u.id,"-error"):void 0},n))};export{d as Select,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        theme={theme}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"wUAgCO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUfU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXZ,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DY,EAAAE,cAACC,EAAYL,EAAA,CAAA,EACPL,EAAK,CACTD,IAAKA,EACLK,MAAOA,EACPT,SAAUA,EAAQ,eACJD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMW,IAAQlB,EAAe,GAAAmB,OAAGZ,EAAMW,kBAAaE,EAASC,UAErDpB,KAAcD,IAAgB,OAExCA,GACDc,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAAC,OAAGZ,EAAMW,kBAAaE,GAEpCpB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"0PA8BO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUrB,OACEU,gBAACC,EAAY,CACXP,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DO,EAAAE,cAACC,OACKL,EAAK,CACTD,IAAKA,EACLJ,SAAUA,iBACID,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMM,IAAQb,EAAe,GAAAc,OAAGP,EAAMM,GAAE,eAAWE,EAASC,UAErDf,KAAcD,IAAgB,OAExCA,GACDS,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIN,EAAMM,GAAK,GAAAC,OAAGP,EAAMM,kBAAaE,GAEpCf,GAKX"}

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

@@ -1,9 +1,4 @@
-import { type ThemeType } from "../../types";
-type StyledSelectProps = {
+export declare const StyledSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {
     $hasError: boolean;
     $errorMessage?: string;
-    theme: ThemeType;
-};
-declare const StyledSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, StyledSelectProps>> & string;
-export default StyledSelect;
-export { StyledSelect };
+}>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var r,t,c="3rem",i=o.select(t||(t=n(["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.theme.colors.backgroundLight},function(n){return n.theme.colors.selectBackground},function(n){return n.theme.colors.selectBackground},function(n){return n.theme.colors.backgroundLight},function(n){return n.theme.colors.backgroundLight},function(n){var o=n.theme,e=n.$hasError,r=n.$errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(e||r?o.colors.textError:o.colors.textInputBorder)},function(n){return n.theme.colors.textDark},function(n){return n.theme.fontSizes.m},c,function(n){var o=n.theme;return"calc( (".concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)},function(n){return n.theme.colors.secondary},function(n){return n.theme.colors.disabled},function(n){return n.theme.colors.disabled},function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:e(r||(r=n(["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "],["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "])),t.colors.tertiary)},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml});export{i as StyledSelect,i as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";var e,a=r.select(e||(e=n(["\n  --_button-height: 3rem;\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      var(--clr-background-light, #fff) 50%,\n      var(--clr-select-background, #000) 50%\n    ),\n    linear-gradient(\n      135deg,\n      var(--clr-select-background, #000) 50%,\n      var(--clr-background-light, #fff) 50%\n    );\n  background-color: var(--clr-background-light, #fff);\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: var(--clr-text-dark, #000);\n  display: block;\n  font-size: var(--font-size-m, 1rem);\n  min-height: var(--_button-height, 3rem);\n  padding: calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xs, 1rem);\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"],["\n  --_button-height: 3rem;\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      var(--clr-background-light, #fff) 50%,\n      var(--clr-select-background, #000) 50%\n    ),\n    linear-gradient(\n      135deg,\n      var(--clr-select-background, #000) 50%,\n      var(--clr-background-light, #fff) 50%\n    );\n  background-color: var(--clr-background-light, #fff);\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: var(--clr-text-dark, #000);\n  display: block;\n  font-size: var(--font-size-m, 1rem);\n  min-height: var(--_button-height, 3rem);\n  padding: calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xs, 1rem);\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"])),function(n){var r=n.$hasError,e=n.$errorMessage;return"solid var(--size-border-width, 1px) ".concat(r||e?"var(--clr-text-error, #f00)":"var(--clr-text-input-border, #2e2c2d)")});export{a as StyledSelect};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n  $hasError: boolean;\n  $errorMessage?: string;\n  theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      ${({ theme }) => theme.colors.backgroundLight} 50%,\n      ${({ theme }) => theme.colors.selectBackground} 50%\n    ),\n    linear-gradient(\n      135deg,\n      ${({ theme }) => theme.colors.selectBackground} 50%,\n      ${({ theme }) => theme.colors.backgroundLight} 50%\n    );\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ${({ theme, $hasError, $errorMessage }) =>\n    `solid ${theme.utilities.inputBorderWidth} ${\n      $hasError || $errorMessage\n        ? theme.colors.textError\n        : theme.colors.textInputBorder\n    }`};\n  color: ${({ theme }) => theme.colors.textDark};\n  display: block;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  min-height: ${BUTTON_HEIGHT};\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.xs}`};\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.secondary};\n  }\n  &:disabled {\n    border-color: ${({ theme }) => theme.colors.disabled};\n    color: ${({ theme }) => theme.colors.disabled};\n  }\n\n  ${({ theme }) =>\n    !theme.utilities.useDefaultFocusRect\n      ? css`\n          &:focus {\n            outline: 0;\n            border-color: ${theme.colors.tertiary};\n          }\n        `\n      : null};\n\n  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","templateObject_2","__makeTemplateObject","_a","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","templateObject_1","tertiary","breakpoint","desktopLarge","ml"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,mFAAA,gBAAA,4DAAA,gBAAA,qCAAA,8JAAA,eAAA,sCAAA,oBAAA,iBAAA,+FAAA,6CAAA,iBAAA,eAAA,kEAAA,uBAAA,YAAA,CAAmB,mFAKF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,kEAGuD,uBACjB,cAhD1C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,EAIf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,EACf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EAED,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EAMzB,SAACH,GAAE,IAAAC,UAAOI,EAASL,EAAAK,UAAEC,EAAaN,EAAAM,cAC1C,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAaC,EACTL,EAAMC,OAAOQ,UACbT,EAAMC,OAAOS,gBAHnB,EAKO,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,EAEX,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,EACdpB,EACH,SAACM,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUP,EAAa,SAAAa,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,EAAC,YAAAP,OAAWb,kBAAqBO,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,WAAU,YAAAT,OAAWN,EAAMgB,QAAQC,GAA9P,EAIgB,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,EAGf,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,EACtB,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,EAGxB,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAxB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBE,EAAMC,OAAOsB,SAJrC,EAUmB,SAACxB,GAAc,OAAPA,EAAAC,MAAawB,WAAWC,YAAjB,EACrB,SAAC1B,GAAc,OAAPA,EAAAC,MAAaY,UAAUc,EAAhB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledSelect = styled.select<{\n  $hasError: boolean;\n  $errorMessage?: string;\n}>`\n  --_button-height: 3rem;\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      var(--clr-background-light, #fff) 50%,\n      var(--clr-select-background, #000) 50%\n    ),\n    linear-gradient(\n      135deg,\n      var(--clr-select-background, #000) 50%,\n      var(--clr-background-light, #fff) 50%\n    );\n  background-color: var(--clr-background-light, #fff);\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ${({ $hasError, $errorMessage }) =>\n    `solid var(--size-border-width, 1px) ${\n      $hasError || $errorMessage\n        ? \"var(--clr-text-error, #f00)\"\n        : \"var(--clr-text-input-border, #2e2c2d)\"\n    }`};\n  color: var(--clr-text-dark, #000);\n  display: block;\n  font-size: var(--font-size-m, 1rem);\n  min-height: var(--_button-height, 3rem);\n  padding: calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3rem) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xs, 1rem);\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n"],"names":["StyledSelect","styled","select","templateObject_1","__makeTemplateObject","_a","$hasError","$errorMessage","concat"],"mappings":"iHAEO,MAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,qiBAAA,w5BAAA,CAGvC,qiBAyBI,05BALM,SAACC,OAAEC,EAASD,EAAAC,UAAEC,EAAaF,EAAAE,cACnC,MAAA,uCAAAC,OACEF,GAAaC,EACT,8BACA,wCAHN"}

package/lib/src/components/Spacing/index.d.ts

@@ -1,4 +1,4 @@
-import { type SpaceType, type ThemeType } from "../../types";
+import { type SpaceType } from "../../types";
 export type SpacingProps = {
     margin?: SpaceType;
     marginTop?: SpaceType;
@@ -64,5 +64,5 @@ interface SpacingPropsInternalInterface {
     $paddingHorizontal?: SpaceType;
 }
 export declare function spacingPropsToSpacingPropsInternal(props: SpacingPropsInterface): SpacingPropsInternalInterface;
-export declare function spacing(props: SpacingPropsInternal, theme: ThemeType): string;
+export declare function spacing(props: SpacingPropsInternal): string;
 export default spacing;

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

@@ -1,2 +1,2 @@
-import{__assign as n}from"../../../node_modules/tslib/tslib.es6.js";function a(a){return n(n({},a),{margin:void 0,marginTop:void 0,marginRight:void 0,marginBottom:void 0,marginLeft:void 0,marginVertical:void 0,marginHorizontal:void 0,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,paddingVertical:void 0,paddingHorizontal:void 0,$margin:a.margin,$marginTop:a.marginTop,$marginRight:a.marginRight,$marginBottom:a.marginBottom,$marginLeft:a.marginLeft,$marginVertical:a.marginVertical,$marginHorizontal:a.marginHorizontal,$padding:a.padding,$paddingTop:a.paddingTop,$paddingRight:a.paddingRight,$paddingBottom:a.paddingBottom,$paddingLeft:a.paddingLeft,$paddingVertical:a.paddingVertical,$paddingHorizontal:a.paddingHorizontal})}function i(n,a){var i=n.$margin,t=n.$marginHorizontal,o=n.$marginVertical,g=n.$marginTop,d=n.$marginRight,p=n.$marginBottom,r=n.$marginLeft,c=n.$padding,m=n.$paddingHorizontal,l=n.$paddingVertical,$=n.$paddingTop,e=n.$paddingRight,s=n.$paddingBottom,u=n.$paddingLeft,f=i?a.spacing[i]:null,v=o?a.spacing[o]:null,h=t?a.spacing[t]:null,z=g?a.spacing[g]:null,B=d?a.spacing[d]:null,H=p?a.spacing[p]:null,L=r?a.spacing[r]:null,R=f?"margin: ".concat(f," !important;"):"",T=z?"margin-top: ".concat(z," !important;"):v?"margin-top: ".concat(v," !important;"):"",V=B?"margin-right: ".concat(B," !important;"):h?"margin-right: ".concat(h," !important;"):"",b=H?"margin-bottom: ".concat(H," !important;"):v?"margin-bottom: ".concat(v," !important;"):"",j=L?"margin-left: ".concat(L," !important;"):h?"margin-left: ".concat(h," !important;"):"",x=c?a.spacing[c]:null,_=l?a.spacing[l]:null,k=m?a.spacing[m]:null,q=$?a.spacing[$]:null,w=e?a.spacing[e]:null,y=s?a.spacing[s]:null,A=u?a.spacing[u]:null,C=x?"padding: ".concat(x," !important;"):"",D=q?"padding-top: ".concat(q," !important;"):_?"padding-top: ".concat(_," !important;"):"",E=w?"padding-right: ".concat(w," !important;"):k?"padding-right: ".concat(k," !important;"):"",F=y?"padding-bottom: ".concat(y," !important;"):_?"padding-bottom: ".concat(_," !important;"):"",G=A?"padding-left: ".concat(A," !important;"):k?"padding-left: ".concat(k," !important;"):"";return"\n    ".concat(R,"\n    ").concat(T,"\n    ").concat(V,"\n    ").concat(b,"\n    ").concat(j,"\n    ").concat(C,"\n    ").concat(D,"\n    ").concat(E,"\n    ").concat(F,"\n    ").concat(G,"\n  ")}export{i as default,i as spacing,a as spacingPropsToSpacingPropsInternal};
+import{__assign as n}from"../../../node_modules/tslib/tslib.es6.js";function a(a){return n(n({},a),{margin:void 0,marginTop:void 0,marginRight:void 0,marginBottom:void 0,marginLeft:void 0,marginVertical:void 0,marginHorizontal:void 0,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,paddingVertical:void 0,paddingHorizontal:void 0,$margin:a.margin,$marginTop:a.marginTop,$marginRight:a.marginRight,$marginBottom:a.marginBottom,$marginLeft:a.marginLeft,$marginVertical:a.marginVertical,$marginHorizontal:a.marginHorizontal,$padding:a.padding,$paddingTop:a.paddingTop,$paddingRight:a.paddingRight,$paddingBottom:a.paddingBottom,$paddingLeft:a.paddingLeft,$paddingVertical:a.paddingVertical,$paddingHorizontal:a.paddingHorizontal})}function t(n){var a=n.$margin,t=n.$marginHorizontal,i=n.$marginVertical,o=n.$marginTop,c=n.$marginRight,g=n.$marginBottom,r=n.$marginLeft,d=n.$padding,p=n.$paddingHorizontal,m=n.$paddingVertical,l=n.$paddingTop,v=n.$paddingRight,$=n.$paddingBottom,e=n.$paddingLeft,s=a?"var(--spacing-".concat(a,")"):null,u=i?"var(--spacing-".concat(i,")"):null,f=t?"var(--spacing-".concat(t,")"):null,h=o?"var(--spacing-".concat(o,")"):null,z=c?"var(--spacing-".concat(c,")"):null,B=g?"var(--spacing-".concat(g,")"):null,H=r?"var(--spacing-".concat(r,")"):null,L=s?"margin: ".concat(s," !important;"):"",R=h?"margin-top: ".concat(h," !important;"):u?"margin-top: ".concat(u," !important;"):"",T=z?"margin-right: ".concat(z," !important;"):f?"margin-right: ".concat(f," !important;"):"",V=B?"margin-bottom: ".concat(B," !important;"):u?"margin-bottom: ".concat(u," !important;"):"",b=H?"margin-left: ".concat(H," !important;"):f?"margin-left: ".concat(f," !important;"):"",j=d?"var(--spacing-".concat(d,")"):null,x=m?"var(--spacing-".concat(m,")"):null,_=p?"var(--spacing-".concat(p,")"):null,k=l?"var(--spacing-".concat(l,")"):null,q=v?"var(--spacing-".concat(v,")"):null,w=$?"var(--spacing-".concat($,")"):null,y=e?"var(--spacing-".concat(e,")"):null,A=j?"padding: ".concat(j," !important;"):"",C=k?"padding-top: ".concat(k," !important;"):x?"padding-top: ".concat(x," !important;"):"",D=q?"padding-right: ".concat(q," !important;"):_?"padding-right: ".concat(_," !important;"):"",E=w?"padding-bottom: ".concat(w," !important;"):x?"padding-bottom: ".concat(x," !important;"):"",F=y?"padding-left: ".concat(y," !important;"):_?"padding-left: ".concat(_," !important;"):"";return"\n    ".concat(L,"\n    ").concat(R,"\n    ").concat(T,"\n    ").concat(V,"\n    ").concat(b,"\n    ").concat(A,"\n    ").concat(C,"\n    ").concat(D,"\n    ").concat(E,"\n    ").concat(F,"\n  ")}export{t as default,t as spacing,a as spacingPropsToSpacingPropsInternal};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n  margin?: SpaceType;\n  marginTop?: SpaceType;\n  marginRight?: SpaceType;\n  marginBottom?: SpaceType;\n  marginLeft?: SpaceType;\n  marginVertical?: SpaceType;\n  marginHorizontal?: SpaceType;\n  padding?: SpaceType;\n  paddingTop?: SpaceType;\n  paddingRight?: SpaceType;\n  paddingBottom?: SpaceType;\n  paddingLeft?: SpaceType;\n  paddingVertical?: SpaceType;\n  paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n  margin?: SpaceType;\n  marginTop?: SpaceType;\n  marginRight?: SpaceType;\n  marginBottom?: SpaceType;\n  marginLeft?: SpaceType;\n  marginVertical?: SpaceType;\n  marginHorizontal?: SpaceType;\n  padding?: SpaceType;\n  paddingTop?: SpaceType;\n  paddingRight?: SpaceType;\n  paddingBottom?: SpaceType;\n  paddingLeft?: SpaceType;\n  paddingVertical?: SpaceType;\n  paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n  $margin?: SpaceType;\n  $marginTop?: SpaceType;\n  $marginRight?: SpaceType;\n  $marginBottom?: SpaceType;\n  $marginLeft?: SpaceType;\n  $marginVertical?: SpaceType;\n  $marginHorizontal?: SpaceType;\n  $padding?: SpaceType;\n  $paddingTop?: SpaceType;\n  $paddingRight?: SpaceType;\n  $paddingBottom?: SpaceType;\n  $paddingLeft?: SpaceType;\n  $paddingVertical?: SpaceType;\n  $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n  $margin?: SpaceType;\n  $marginTop?: SpaceType;\n  $marginRight?: SpaceType;\n  $marginBottom?: SpaceType;\n  $marginLeft?: SpaceType;\n  $marginVertical?: SpaceType;\n  $marginHorizontal?: SpaceType;\n  $padding?: SpaceType;\n  $paddingTop?: SpaceType;\n  $paddingRight?: SpaceType;\n  $paddingBottom?: SpaceType;\n  $paddingLeft?: SpaceType;\n  $paddingVertical?: SpaceType;\n  $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n  props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n  const internalProps = {\n    ...props,\n    margin: undefined,\n    marginTop: undefined,\n    marginRight: undefined,\n    marginBottom: undefined,\n    marginLeft: undefined,\n    marginVertical: undefined,\n    marginHorizontal: undefined,\n    padding: undefined,\n    paddingTop: undefined,\n    paddingRight: undefined,\n    paddingBottom: undefined,\n    paddingLeft: undefined,\n    paddingVertical: undefined,\n    paddingHorizontal: undefined,\n    $margin: props.margin,\n    $marginTop: props.marginTop,\n    $marginRight: props.marginRight,\n    $marginBottom: props.marginBottom,\n    $marginLeft: props.marginLeft,\n    $marginVertical: props.marginVertical,\n    $marginHorizontal: props.marginHorizontal,\n    $padding: props.padding,\n    $paddingTop: props.paddingTop,\n    $paddingRight: props.paddingRight,\n    $paddingBottom: props.paddingBottom,\n    $paddingLeft: props.paddingLeft,\n    $paddingVertical: props.paddingVertical,\n    $paddingHorizontal: props.paddingHorizontal,\n  };\n  return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n  const {\n    $margin,\n    $marginHorizontal,\n    $marginVertical,\n    $marginTop,\n    $marginRight,\n    $marginBottom,\n    $marginLeft,\n    $padding,\n    $paddingHorizontal,\n    $paddingVertical,\n    $paddingTop,\n    $paddingRight,\n    $paddingBottom,\n    $paddingLeft,\n  } = props;\n\n  const ma = $margin ? theme.spacing[$margin] : null;\n  const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n  const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n  const mt = $marginTop ? theme.spacing[$marginTop] : null;\n  const mr = $marginRight ? theme.spacing[$marginRight] : null;\n  const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n  const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n  const maString = ma ? `margin: ${ma} !important;` : \"\";\n  const mtString = mt\n    ? `margin-top: ${mt} !important;`\n    : mv\n      ? `margin-top: ${mv} !important;`\n      : \"\";\n  const mrString = mr\n    ? `margin-right: ${mr} !important;`\n    : mh\n      ? `margin-right: ${mh} !important;`\n      : \"\";\n  const mbString = mb\n    ? `margin-bottom: ${mb} !important;`\n    : mv\n      ? `margin-bottom: ${mv} !important;`\n      : \"\";\n  const mlString = ml\n    ? `margin-left: ${ml} !important;`\n    : mh\n      ? `margin-left: ${mh} !important;`\n      : \"\";\n\n  const pa = $padding ? theme.spacing[$padding] : null;\n  const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n  const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n  const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n  const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n  const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n  const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n  const paString = pa ? `padding: ${pa} !important;` : \"\";\n  const ptString = pt\n    ? `padding-top: ${pt} !important;`\n    : pv\n      ? `padding-top: ${pv} !important;`\n      : \"\";\n  const prString = pr\n    ? `padding-right: ${pr} !important;`\n    : ph\n      ? `padding-right: ${ph} !important;`\n      : \"\";\n  const pbString = pb\n    ? `padding-bottom: ${pb} !important;`\n    : pv\n      ? `padding-bottom: ${pv} !important;`\n      : \"\";\n  const plString = pl\n    ? `padding-left: ${pl} !important;`\n    : ph\n      ? `padding-left: ${ph} !important;`\n      : \"\";\n\n  return `\n    ${maString}\n    ${mtString}\n    ${mrString}\n    ${mbString}\n    ${mlString}\n    ${paString}\n    ${ptString}\n    ${prString}\n    ${pbString}\n    ${plString}\n  `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,CAEM,SAAUe,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAAKkB,WAVPC,EAUEnB,EAAKmB,aATPC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAAKwB,SANPM,EAME9B,EAAK8B,mBALPD,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEiC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,WAAAQ,OAAWR,EAAE,gBAAiB,GAC9CS,EAAWN,EACb,eAAAK,OAAeL,EAAE,gBACjBF,EACE,eAAAO,OAAeP,EAAE,gBACjB,GACAS,EAAWN,EACb,iBAAAI,OAAiBJ,EAAE,gBACnBF,EACE,iBAAAM,OAAiBN,EAAE,gBACnB,GACAS,EAAWN,EACb,kBAAAG,OAAkBH,EAAE,gBACpBJ,EACE,kBAAAO,OAAkBP,EAAE,gBACpB,GACAW,EAAWN,EACb,gBAAAE,OAAgBF,EAAE,gBAClBJ,EACE,gBAAAM,OAAgBN,EAAE,gBAClB,GAEAW,EAAKtB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CuB,EAAKlB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DmB,EAAKlB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DmB,EAAKxB,EAAcO,EAAMD,QAAQN,GAAe,KAChDyB,EAAKxB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDyB,EAAKxB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDyB,EAAKxB,EAAeI,EAAMD,QAAQH,GAAgB,KAElDyB,EAAWP,EAAK,YAAAL,OAAYK,EAAE,gBAAiB,GAC/CQ,EAAWL,EACb,gBAAAR,OAAgBQ,EAAE,gBAClBF,EACE,gBAAAN,OAAgBM,EAAE,gBAClB,GACAQ,EAAWL,EACb,kBAAAT,OAAkBS,EAAE,gBACpBF,EACE,kBAAAP,OAAkBO,EAAE,gBACpB,GACAQ,EAAWL,EACb,mBAAAV,OAAmBU,EAAE,gBACrBJ,EACE,mBAAAN,OAAmBM,EAAE,gBACrB,GACAU,EAAWL,EACb,iBAAAX,OAAiBW,EAAE,gBACnBJ,EACE,iBAAAP,OAAiBO,EAAE,gBACnB,GAEN,MAAO,SAAAP,OACHD,EAAQ,UAAAC,OACRC,mBACAC,EAAQ,UAAAF,OACRG,EAAQ,UAAAH,OACRI,mBACAQ,EAAQ,UAAAZ,OACRa,EAAQ,UAAAb,OACRc,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType } from \"../../types\";\n\nexport type SpacingProps = {\n  margin?: SpaceType;\n  marginTop?: SpaceType;\n  marginRight?: SpaceType;\n  marginBottom?: SpaceType;\n  marginLeft?: SpaceType;\n  marginVertical?: SpaceType;\n  marginHorizontal?: SpaceType;\n  padding?: SpaceType;\n  paddingTop?: SpaceType;\n  paddingRight?: SpaceType;\n  paddingBottom?: SpaceType;\n  paddingLeft?: SpaceType;\n  paddingVertical?: SpaceType;\n  paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n  margin?: SpaceType;\n  marginTop?: SpaceType;\n  marginRight?: SpaceType;\n  marginBottom?: SpaceType;\n  marginLeft?: SpaceType;\n  marginVertical?: SpaceType;\n  marginHorizontal?: SpaceType;\n  padding?: SpaceType;\n  paddingTop?: SpaceType;\n  paddingRight?: SpaceType;\n  paddingBottom?: SpaceType;\n  paddingLeft?: SpaceType;\n  paddingVertical?: SpaceType;\n  paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n  $margin?: SpaceType;\n  $marginTop?: SpaceType;\n  $marginRight?: SpaceType;\n  $marginBottom?: SpaceType;\n  $marginLeft?: SpaceType;\n  $marginVertical?: SpaceType;\n  $marginHorizontal?: SpaceType;\n  $padding?: SpaceType;\n  $paddingTop?: SpaceType;\n  $paddingRight?: SpaceType;\n  $paddingBottom?: SpaceType;\n  $paddingLeft?: SpaceType;\n  $paddingVertical?: SpaceType;\n  $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n  $margin?: SpaceType;\n  $marginTop?: SpaceType;\n  $marginRight?: SpaceType;\n  $marginBottom?: SpaceType;\n  $marginLeft?: SpaceType;\n  $marginVertical?: SpaceType;\n  $marginHorizontal?: SpaceType;\n  $padding?: SpaceType;\n  $paddingTop?: SpaceType;\n  $paddingRight?: SpaceType;\n  $paddingBottom?: SpaceType;\n  $paddingLeft?: SpaceType;\n  $paddingVertical?: SpaceType;\n  $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n  props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n  const internalProps = {\n    ...props,\n    margin: undefined,\n    marginTop: undefined,\n    marginRight: undefined,\n    marginBottom: undefined,\n    marginLeft: undefined,\n    marginVertical: undefined,\n    marginHorizontal: undefined,\n    padding: undefined,\n    paddingTop: undefined,\n    paddingRight: undefined,\n    paddingBottom: undefined,\n    paddingLeft: undefined,\n    paddingVertical: undefined,\n    paddingHorizontal: undefined,\n    $margin: props.margin,\n    $marginTop: props.marginTop,\n    $marginRight: props.marginRight,\n    $marginBottom: props.marginBottom,\n    $marginLeft: props.marginLeft,\n    $marginVertical: props.marginVertical,\n    $marginHorizontal: props.marginHorizontal,\n    $padding: props.padding,\n    $paddingTop: props.paddingTop,\n    $paddingRight: props.paddingRight,\n    $paddingBottom: props.paddingBottom,\n    $paddingLeft: props.paddingLeft,\n    $paddingVertical: props.paddingVertical,\n    $paddingHorizontal: props.paddingHorizontal,\n  };\n  return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal) {\n  const {\n    $margin,\n    $marginHorizontal,\n    $marginVertical,\n    $marginTop,\n    $marginRight,\n    $marginBottom,\n    $marginLeft,\n    $padding,\n    $paddingHorizontal,\n    $paddingVertical,\n    $paddingTop,\n    $paddingRight,\n    $paddingBottom,\n    $paddingLeft,\n  } = props;\n\n  const ma = $margin ? `var(--spacing-${$margin})` : null;\n  const mv = $marginVertical ? `var(--spacing-${$marginVertical})` : null;\n  const mh = $marginHorizontal ? `var(--spacing-${$marginHorizontal})` : null;\n  const mt = $marginTop ? `var(--spacing-${$marginTop})` : null;\n  const mr = $marginRight ? `var(--spacing-${$marginRight})` : null;\n  const mb = $marginBottom ? `var(--spacing-${$marginBottom})` : null;\n  const ml = $marginLeft ? `var(--spacing-${$marginLeft})` : null;\n\n  const maString = ma ? `margin: ${ma} !important;` : \"\";\n  const mtString = mt\n    ? `margin-top: ${mt} !important;`\n    : mv\n      ? `margin-top: ${mv} !important;`\n      : \"\";\n  const mrString = mr\n    ? `margin-right: ${mr} !important;`\n    : mh\n      ? `margin-right: ${mh} !important;`\n      : \"\";\n  const mbString = mb\n    ? `margin-bottom: ${mb} !important;`\n    : mv\n      ? `margin-bottom: ${mv} !important;`\n      : \"\";\n  const mlString = ml\n    ? `margin-left: ${ml} !important;`\n    : mh\n      ? `margin-left: ${mh} !important;`\n      : \"\";\n\n  const pa = $padding ? `var(--spacing-${$padding})` : null;\n  const pv = $paddingVertical ? `var(--spacing-${$paddingVertical})` : null;\n  const ph = $paddingHorizontal ? `var(--spacing-${$paddingHorizontal})` : null;\n  const pt = $paddingTop ? `var(--spacing-${$paddingTop})` : null;\n  const pr = $paddingRight ? `var(--spacing-${$paddingRight})` : null;\n  const pb = $paddingBottom ? `var(--spacing-${$paddingBottom})` : null;\n  const pl = $paddingLeft ? `var(--spacing-${$paddingLeft})` : null;\n\n  const paString = pa ? `padding: ${pa} !important;` : \"\";\n  const ptString = pt\n    ? `padding-top: ${pt} !important;`\n    : pv\n      ? `padding-top: ${pv} !important;`\n      : \"\";\n  const prString = pr\n    ? `padding-right: ${pr} !important;`\n    : ph\n      ? `padding-right: ${ph} !important;`\n      : \"\";\n  const pbString = pb\n    ? `padding-bottom: ${pb} !important;`\n    : pv\n      ? `padding-bottom: ${pv} !important;`\n      : \"\";\n  const plString = pl\n    ? `padding-left: ${pl} !important;`\n    : ph\n      ? `padding-left: ${ph} !important;`\n      : \"\";\n\n  return `\n    ${maString}\n    ${mtString}\n    ${mrString}\n    ${mbString}\n    ${mlString}\n    ${paString}\n    ${ptString}\n    ${prString}\n    ${pbString}\n    ${plString}\n  `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","ma","concat","mv","mh","mt","mr","mb","ml","maString","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,CAEM,SAAUe,EAAQ/B,GAEpB,IAAAiB,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAAKkB,WAVPC,EAUEnB,EAAKmB,aATPC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAAKwB,SANPM,EAME9B,EAAK8B,mBALPD,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEgC,EAAKf,EAAU,iBAAAgB,OAAiBhB,EAAO,KAAM,KAC7CiB,EAAKZ,EAAkB,iBAAAW,OAAiBX,EAAe,KAAM,KAC7Da,EAAKZ,EAAoB,iBAAAU,OAAiBV,EAAiB,KAAM,KACjEa,EAAKlB,EAAa,iBAAAe,OAAiBf,EAAU,KAAM,KACnDmB,EAAKlB,EAAe,iBAAAc,OAAiBd,EAAY,KAAM,KACvDmB,EAAKlB,EAAgB,iBAAAa,OAAiBb,EAAa,KAAM,KACzDmB,EAAKlB,EAAc,iBAAAY,OAAiBZ,EAAW,KAAM,KAErDmB,EAAWR,EAAK,WAAAC,OAAWD,EAAE,gBAAiB,GAC9CS,EAAWL,EACb,eAAAH,OAAeG,EAAE,gBACjBF,EACE,eAAAD,OAAeC,EAAE,gBACjB,GACAQ,EAAWL,EACb,iBAAAJ,OAAiBI,EAAE,gBACnBF,EACE,iBAAAF,OAAiBE,EAAE,gBACnB,GACAQ,EAAWL,EACb,kBAAAL,OAAkBK,EAAE,gBACpBJ,EACE,kBAAAD,OAAkBC,EAAE,gBACpB,GACAU,EAAWL,EACb,gBAAAN,OAAgBM,EAAE,gBAClBJ,EACE,gBAAAF,OAAgBE,EAAE,gBAClB,GAEAU,EAAKrB,EAAW,iBAAAS,OAAiBT,EAAQ,KAAM,KAC/CsB,EAAKjB,EAAmB,iBAAAI,OAAiBJ,EAAgB,KAAM,KAC/DkB,EAAKjB,EAAqB,iBAAAG,OAAiBH,EAAkB,KAAM,KACnEkB,EAAKvB,EAAc,iBAAAQ,OAAiBR,EAAW,KAAM,KACrDwB,EAAKvB,EAAgB,iBAAAO,OAAiBP,EAAa,KAAM,KACzDwB,EAAKvB,EAAiB,iBAAAM,OAAiBN,EAAc,KAAM,KAC3DwB,EAAKvB,EAAe,iBAAAK,OAAiBL,EAAY,KAAM,KAEvDwB,EAAWP,EAAK,YAAAZ,OAAYY,EAAE,gBAAiB,GAC/CQ,EAAWL,EACb,gBAAAf,OAAgBe,EAAE,gBAClBF,EACE,gBAAAb,OAAgBa,EAAE,gBAClB,GACAQ,EAAWL,EACb,kBAAAhB,OAAkBgB,EAAE,gBACpBF,EACE,kBAAAd,OAAkBc,EAAE,gBACpB,GACAQ,EAAWL,EACb,mBAAAjB,OAAmBiB,EAAE,gBACrBJ,EACE,mBAAAb,OAAmBa,EAAE,gBACrB,GACAU,EAAWL,EACb,iBAAAlB,OAAiBkB,EAAE,gBACnBJ,EACE,iBAAAd,OAAiBc,EAAE,gBACnB,GAEN,MAAO,SAAAd,OACHO,EAAQ,UAAAP,OACRQ,mBACAC,EAAQ,UAAAT,OACRU,EAAQ,UAAAV,OACRW,mBACAQ,EAAQ,UAAAnB,OACRoB,EAAQ,UAAApB,OACRqB,mBACAC,EAAQ,UAAAtB,OACRuB,EAAQ,OAEd"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as n}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as s,StepTick as c}from"./styles.js";function i(i){var u=i.steps,p=void 0===u?[]:u,d=i.current,f=void 0===d?1:d,y=i.children,E=r(),v=e(e({},o),E),h=Array.isArray(p)?Object.keys(p).length:0;return t.createElement(n,{theme:v},t.createElement(l,null,t.createElement(m,{$total:h},Array.isArray(p)&&p.map(function(e,r){var n="step".concat(r);return t.createElement(a,{key:n,$active:r+1===f,$done:r+1<f},t.createElement(s,null,r+1<f&&t.createElement(c,null)),e)})),y))}export{i as Step,i as default};
+import e from"react";import{StepWrapper as t,StepList as r,StepItem as n,StepBar as a,StepTick as l}from"./styles.js";function c(c){var o=c.steps,i=void 0===o?[]:o,m=c.current,s=void 0===m?1:m,u=c.children,y=Array.isArray(i)?Object.keys(i).length:0;return e.createElement(t,null,e.createElement(r,{$total:y},Array.isArray(i)&&i.map(function(t,r){var c="step".concat(r);return e.createElement(n,{key:c,$active:r+1===s,$done:r+1<s},e.createElement(a,null,r+1<s&&e.createElement(l,null)),t)})),u)}export{c as Step,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StepWrapper>\n        <StepList $total={totalSteps}>\n          {Array.isArray(steps) &&\n            steps.map((step, i) => {\n              const key = `step${i}`;\n              return (\n                <StepItem\n                  key={key}\n                  $active={i + 1 === current}\n                  $done={i + 1 < current}\n                >\n                  <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n                  {step}\n                </StepItem>\n              );\n            })}\n        </StepList>\n        {children}\n      </StepWrapper>\n    </ThemeProvider>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","foundTheme","useTheme","theme","__assign","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"2SAsBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KAAIE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQX,GACrCY,OAAOC,KAAKb,GAAOc,OACnB,EAEJ,OACEC,EAAAC,cAACC,EAAa,CAACX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAAAC,cAACG,UAAiBV,GACfC,MAAMC,QAAQX,IACbA,EAAMoB,IAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAAC,OAAOF,GACnB,OACEP,EAAAC,cAACS,GACCF,IAAKA,EAAGG,QACCJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAAAC,cAACY,EAAO,KAAEN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,IAEHlB,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n\n  return (\n    <StepWrapper>\n      <StepList $total={totalSteps}>\n        {Array.isArray(steps) &&\n          steps.map((step, i) => {\n            const key = `step${i}`;\n            return (\n              <StepItem\n                key={key}\n                $active={i + 1 === current}\n                $done={i + 1 < current}\n              >\n                <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n                {step}\n              </StepItem>\n            );\n          })}\n      </StepList>\n      {children}\n    </StepWrapper>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","totalSteps","Array","isArray","Object","keys","length","React","StepWrapper","createElement","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"sHAmBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KAAIE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAqBC,MAAMC,QAAQN,GACrCO,OAAOC,KAAKR,GAAOS,OACnB,EAEJ,OACEC,gBAACC,EAAW,KACVD,EAAAE,cAACC,UAAiBT,GACfC,MAAMC,QAAQN,IACbA,EAAMc,IAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAAC,OAAOF,GACnB,OACEN,EAAAE,cAACO,GACCF,IAAKA,EAAGG,QACCJ,EAAI,IAAMd,EAAOmB,MACnBL,EAAI,EAAId,GAEfQ,EAAAE,cAACU,EAAO,KAAEN,EAAI,EAAId,GAAWQ,EAAAE,cAACW,EAAQ,OACrCR,EAGP,IAEHZ,EAGP"}

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

@@ -1,16 +1,10 @@
-import { type ThemeType } from "../../types";
 export declare const StepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StepList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     $total: number;
 }>> & string;
-export declare const StepBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const StepTick: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const StepBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StepTick: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StepItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     $active: boolean;
     $done: boolean;
-    theme: ThemeType;
 }>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as t}from"styled-components";var r,e,i,a,l,d,s,c,p=o.div(r||(r=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n"]))),b=o.ul(i||(i=n(["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ","\n"],["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ","\n"])),function(o){var r=o.$total;return r&&t(e||(e=n(["\n      li {\n        width: ","%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    "],["\n      li {\n        width: ","%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    "])),100/r)}),x=o.span(a||(a=n(["\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: ",";\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid ",';\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: "";\n    background-color: transparent;\n    border-bottom: 2px solid ',";\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n"],["\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: ",";\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid ",';\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: "";\n    background-color: transparent;\n    border-bottom: 2px solid ',";\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n"])),function(n){return n.theme.colors.stepBackground},function(n){return n.theme.colors.stepBorder},function(n){return n.theme.colors.stepBorder}),f=o.span(l||(l=n(["\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: ",";\n  border-right: ",";\n  margin-top: 4px;\n  margin-left: 8px;\n"],["\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: ",";\n  border-right: ",";\n  margin-top: 4px;\n  margin-left: 8px;\n"])),function(n){var o=n.theme.colors.textLight;return"2px solid ".concat(o)},function(n){var o=n.theme.colors.textLight;return"2px solid ".concat(o)}),g=o.li(c||(c=n(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: ",";\n\n  ","\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: ",";\n\n  ","\n  ","\n"])),function(n){return n.theme.typography.fontFamilyBase},function(o){var r=o.theme;return o.$active&&t(d||(d=n(["\n      "," {\n        border-color: ",";\n        background-color: ",";\n      }\n    "],["\n      "," {\n        border-color: ",";\n        background-color: ",";\n      }\n    "])),x,r.colors.tertiary,r.colors.tertiary)},function(o){var r=o.$done,e=o.theme;return r&&t(s||(s=n(["\n      "," {\n        border: none;\n        background-color: ",";\n        &:after {\n          border-bottom: 2px solid ",";\n        }\n      }\n    "],["\n      "," {\n        border: none;\n        background-color: ",";\n        &:after {\n          border-bottom: 2px solid ",";\n        }\n      }\n    "])),x,e.colors.tertiary,e.colors.tertiary)});export{x as StepBar,g as StepItem,b as StepList,f as StepTick,p as StepWrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r,{css as e}from"styled-components";var t,o,i,a,l,d,p,c,s=r.div(t||(t=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n"]))),b=r.ul(i||(i=n(["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ","\n"],["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ","\n"])),function(r){var t=r.$total;return t&&e(o||(o=n(["\n      li {\n        width: ","%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    "],["\n      li {\n        width: ","%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    "])),100/t)}),f=r.span(a||(a=n(['\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: var(--clr-step-background, #fff);\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid var(--clr-step-border, #e6e6e6);\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: "";\n    background-color: transparent;\n    border-bottom: 2px solid var(--clr-step-border, #e6e6e6);\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n'],['\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: var(--clr-step-background, #fff);\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid var(--clr-step-border, #e6e6e6);\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: "";\n    background-color: transparent;\n    border-bottom: 2px solid var(--clr-step-border, #e6e6e6);\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n']))),x=r.span(l||(l=n(["\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: 2px solid var(--clr-text-light, #fff);\n  border-right: 2px solid var(--clr-text-light, #fff);\n  margin-top: 4px;\n  margin-left: 8px;\n"],["\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: 2px solid var(--clr-text-light, #fff);\n  border-right: 2px solid var(--clr-text-light, #fff);\n  margin-top: 4px;\n  margin-left: 8px;\n"]))),g=r.li(c||(c=n(['\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  ',"\n  ","\n"],['\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  ',"\n  ","\n"])),function(r){return r.$active&&e(d||(d=n(["\n      "," {\n        border-color: var(--clr-tertiary, #009cee);\n        background-color: var(--clr-tertiary, #009cee);\n      }\n    "],["\n      "," {\n        border-color: var(--clr-tertiary, #009cee);\n        background-color: var(--clr-tertiary, #009cee);\n      }\n    "])),f)},function(r){return r.$done&&e(p||(p=n(["\n      "," {\n        border: none;\n        background-color: var(--clr-tertiary, #009cee);\n        &:after {\n          border-bottom: 2px solid var(--clr-tertiary, #009cee);\n        }\n      }\n    "],["\n      "," {\n        border: none;\n        background-color: var(--clr-tertiary, #009cee);\n        &:after {\n          border-bottom: 2px solid var(--clr-tertiary, #009cee);\n        }\n      }\n    "])),f)});export{f as StepBar,g as StepItem,b as StepList,x as StepTick,s as StepWrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n  $total: number;\n}>`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${({ $total }) =>\n    $total &&\n    css`\n      li {\n        width: ${100 / $total}%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    `}\n`;\n\nexport const StepBar = styled.span<{\n  theme: ThemeType;\n}>`\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: ${({ theme }) => theme.colors.stepBackground};\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: \"\";\n    background-color: transparent;\n    border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n`;\n\nexport const StepTick = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: ${({\n    theme: {\n      colors: { textLight },\n    },\n  }) => `2px solid ${textLight}`};\n  border-right: ${({\n    theme: {\n      colors: { textLight },\n    },\n  }) => `2px solid ${textLight}`};\n  margin-top: 4px;\n  margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n  $active: boolean;\n  $done: boolean;\n  theme: ThemeType;\n}>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  ${({ theme, $active }) =>\n    $active &&\n    css`\n      ${StepBar} {\n        border-color: ${theme.colors.tertiary};\n        background-color: ${theme.colors.tertiary};\n      }\n    `}\n  ${({ $done, theme }) =>\n    $done &&\n    css`\n      ${StepBar} {\n        border: none;\n        background-color: ${theme.colors.tertiary};\n        &:after {\n          border-bottom: 2px solid ${theme.colors.tertiary};\n        }\n      }\n    `}\n`;\n"],"names":["StepWrapper","styled","div","templateObject_1","__makeTemplateObject","StepList","ul","templateObject_3","_a","$total","css","templateObject_2","StepBar","span","templateObject_4","theme","colors","stepBackground","stepBorder","StepTick","templateObject_5","textLight","concat","StepItem","li","templateObject_8","typography","fontFamilyBase","$active","templateObject_6","tertiary","$done","templateObject_7"],"mappings":"2HAGO,oBAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,QATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,GAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAEhC,kHAK8D,2EAGJ,kNAUS,sEAb/C,SAACI,GAAc,OAAPA,EAAAO,MAAaC,OAAOC,cAAb,EAGf,SAACT,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,EAUN,SAACV,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,GAOjCC,EAAWlB,EAAOY,KAAIO,IAAAA,EAAAhB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAEjC,0IAU8B,sBAKA,kDATb,SAACI,GAEJ,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,EACU,SAACb,GAEH,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,GAKKE,EAAWtB,EAAOuB,GAAEC,IAAAA,EAAArB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAI/B,wFAI6D,UAS1D,OAWA,QApBY,SAACI,GAAc,OAAPA,EAAAO,MAAaW,WAAWC,cAAjB,EAE5B,SAACnB,OAAEO,EAAKP,EAAAO,MACR,OADiBP,EAAAoB,SAEjBlB,EAAGmB,IAAAA,EAAAzB,EAAA,CAAA,WAAA,6BAAA,gCAAA,oBAAA,CAAA,WACQ,6BAC8B,gCACI,sBAFzCQ,EACgBG,EAAMC,OAAOc,SACTf,EAAMC,OAAOc,SAJrC,EAOA,SAACtB,OAAEuB,EAAKvB,EAAAuB,MAAEhB,EAAKP,EAAAO,MACf,OAAAgB,GACArB,EAAGsB,IAAAA,EAAA5B,EAAA,CAAA,WAAA,wDAAA,4DAAA,+BAAA,CAAA,WACQ,wDAEkC,4DAES,iCAJlDQ,EAEoBG,EAAMC,OAAOc,SAEJf,EAAMC,OAAOc,SAN9C"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StepWrapper = styled.div`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  text-align: center;\n  text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n  $total: number;\n}>`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${({ $total }) =>\n    $total &&\n    css`\n      li {\n        width: ${100 / $total}%;\n      }\n      li:last-child span:after {\n        display: none;\n      }\n    `}\n`;\n\nexport const StepBar = styled.span`\n  border-radius: 50%;\n  background-clip: padding-box;\n  width: 24px;\n  height: 24px;\n  background-color: var(--clr-step-background, #fff);\n  display: block;\n  margin: 0 auto 0.5em auto;\n  border: 2px solid var(--clr-step-border, #e6e6e6);\n  text-indent: -999px;\n\n  &:after {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    content: \"\";\n    background-color: transparent;\n    border-bottom: 2px solid var(--clr-step-border, #e6e6e6);\n    left: 50%;\n    top: 11px;\n    margin-left: 12px;\n  }\n`;\n\nexport const StepTick = styled.span`\n  display: block;\n  transform: rotate(45deg);\n  transform-origin: center center;\n  height: 14px;\n  width: 8px;\n  border-bottom: 2px solid var(--clr-text-light, #fff);\n  border-right: 2px solid var(--clr-text-light, #fff);\n  margin-top: 4px;\n  margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n  $active: boolean;\n  $done: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n\n  ${({ $active }) =>\n    $active &&\n    css`\n      ${StepBar} {\n        border-color: var(--clr-tertiary, #009cee);\n        background-color: var(--clr-tertiary, #009cee);\n      }\n    `}\n  ${({ $done }) =>\n    $done &&\n    css`\n      ${StepBar} {\n        border: none;\n        background-color: var(--clr-tertiary, #009cee);\n        &:after {\n          border-bottom: 2px solid var(--clr-tertiary, #009cee);\n        }\n      }\n    `}\n`;\n"],"names":["StepWrapper","styled","div","templateObject_1","__makeTemplateObject","StepList","ul","templateObject_3","_a","$total","css","templateObject_2","StepBar","span","templateObject_4","StepTick","templateObject_5","StepItem","li","templateObject_8","$active","templateObject_6","$done","templateObject_7"],"mappings":"2HAEO,oBAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,QATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,GAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,wiBAAA,CAAA,2iBAyBrBW,EAAWd,EAAOY,KAAIG,IAAAA,EAAAZ,EAAA,CAAA,oRAAA,CAAA,uRAYtBa,EAAWhB,EAAOiB,GAAEC,IAAAA,EAAAf,EAAA,CAAA,wJAAA,OAAA,MAAA,CAG/B,wJAaG,OAWA,QAlBD,SAACI,GACD,OADUA,EAAAY,SAEVV,EAAGW,IAAAA,EAAAjB,EAAA,CAAA,WAAA,mIAAA,CAAA,WACQ,qIAAPQ,EAFJ,EAOA,SAACJ,GACD,OADQA,EAAAc,OAERZ,EAAGa,IAAAA,EAAAnB,EAAA,CAAA,WAAA,qMAAA,CAAA,WACQ,uMAAPQ,EAFJ"}

package/lib/src/components/Text/index.d.ts

@@ -1,12 +1,12 @@
 import React, { type HTMLAttributes, type Ref, type ElementType } from "react";
 import { type SpacingProps } from "../Spacing";
-import { type WordBreakType, type FontSizeType, type OverflowWrapType } from "../../types";
+import { type WordBreakType, type FontSizeType, type OverflowWrapType, type colours } from "../../types";
 /**
  * Text is to be used as the main paragraph component (or span using as="span"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.
  */
 export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** text colour  */
-    textColor?: string;
+    textColor?: (typeof colours)[number] | string;
     /** text horizontal alignment  */
     textAlign?: "left" | "right" | "center" | "justify";
     /** font size FontSizeType t-shirt sizes  */

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

@@ -1,2 +1,2 @@
-import{__assign as t,__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as o}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=o(),n=t(t({},i),a),f=x.textColor,s=x.textAlign,p=x.textSize,d=x.textWeight,g=x.textFontFamily,$=x.wordBreak,c=x.overflowWrap,w=x.ref,F=e(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),W=m(F);return r.createElement(l,t({$textColor:f,$textAlign:s,$textSize:p,$textWeight:d,$textFontFamily:g,$wordBreak:$,$overflowWrap:c},W,{theme:n,ref:w}))};export{x as Text,x as default};
+import{__rest as t,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{themeColorOrString as o}from"../../utils/themeUtils.js";import{spacingPropsToSpacingPropsInternal as i}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=x.textColor,m=x.textAlign,f=x.textSize,n=x.textWeight,s=x.textFontFamily,p=x.wordBreak,d=x.overflowWrap,g=x.ref,$=t(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),v=i($),w=a?o(a):void 0;return r.createElement(l,e({$textColor:w,$textAlign:m,$textSize:f,$textWeight:n,$textFontFamily:s,$wordBreak:p,$overflowWrap:d},v,{ref:g}))};export{x as Text,x as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } 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 {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** text colour  */\n    textColor?: string;\n    /** text horizontal alignment  */\n    textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n    textWeight?: number | string;\n    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n    textFontFamily?: string;\n    /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n    as?: ElementType;\n    /** word-break behaviour */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behaviour */\n    overflowWrap?: OverflowWrapType;\n    /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n    ref?: Ref<HTMLElement>;\n  };\n\nexport const Text = (props: TextProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ref,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <TextStyled\n      $textColor={textColor}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      theme={theme}\n      ref={ref as Ref<HTMLParagraphElement>}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","props","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qTA4CO,IAAMA,EAAO,SAACC,GACnB,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGHK,EASEN,EAAKM,UARPC,EAQEP,EAAKO,UAPPC,EAOER,WANFS,EAMET,EAAKS,WALPC,EAKEV,iBAJFW,EAIEX,EAAKW,UAHPC,EAGEZ,EAAKY,aAFPC,EAEEb,MADCc,IACDd,EAVE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAYAe,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPU,IAAKA,IAGX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } from \"react\";\n\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport { TextStyled } from \"./styles\";\n\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n  type colours,\n} from \"../../types\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** text colour  */\n    textColor?: (typeof colours)[number] | string;\n    /** text horizontal alignment  */\n    textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n    textWeight?: number | string;\n    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n    textFontFamily?: string;\n    /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n    as?: ElementType;\n    /** word-break behaviour */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behaviour */\n    overflowWrap?: OverflowWrapType;\n    /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n    ref?: Ref<HTMLElement>;\n  };\n\nexport const Text = (props: TextProps) => {\n  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ref,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  const textColorFound = textColor ? themeColorOrString(textColor) : undefined;\n\n  return (\n    <TextStyled\n      $textColor={textColorFound}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      ref={ref as Ref<HTMLParagraphElement>}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","props","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","textColorFound","themeColorOrString","undefined","React","createElement","TextStyled","__assign","$textColor","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"sRA8CO,IAAMA,EAAO,SAACC,GAEjB,IAAAC,EASED,EAAKC,UARPC,EAQEF,EAAKE,UAPPC,EAOEH,WANFI,EAMEJ,EAAKI,WALPC,EAKEL,iBAJFM,EAIEN,EAAKM,UAHPC,EAGEP,EAAKO,aAFPC,EAEER,MADCS,IACDT,EAVE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAYAU,EAA2BC,EAAmCF,GAE9DG,EAAiBX,EAAYY,EAAmBZ,QAAaa,EAEnE,OACEC,EAAAC,cAACC,EAAUC,EAAA,CAAAC,WACGP,aACAV,EAASkB,UACVjB,EAAQkB,YACNjB,EAAUkB,gBACNjB,EAAckB,WACnBjB,EAASkB,cACNjB,GACXG,EAAwB,CAC5BF,IAAKA,IAGX"}

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

@@ -1,6 +1,6 @@
 import { type ElementType } from "react";
 import { type SpacingPropsInternal } from "../Spacing";
-import { type WordBreakType, type FontSizeType, type ThemeType, type OverflowWrapType } from "../../types";
+import { type WordBreakType, type FontSizeType, type OverflowWrapType } from "../../types";
 export type TextStyledProps = SpacingPropsInternal & {
     $textColor?: string;
     $textAlign?: "left" | "right" | "center" | "justify";
@@ -10,6 +10,5 @@ export type TextStyledProps = SpacingPropsInternal & {
     $wordBreak?: WordBreakType;
     $overflowWrap?: OverflowWrapType;
     $textFontFamily?: string;
-    theme: ThemeType;
 };
 export declare const TextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextStyledProps>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{spacing as o}from"../Spacing/index.js";var e,r=t.p(e||(e=n(["\n  font-family: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  text-align: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  padding: 0;\n  margin: 0;\n  margin-bottom: ",";\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"],["\n  font-family: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  text-align: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  padding: 0;\n  margin: 0;\n  margin-bottom: ",";\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"])),function(n){var t=n.$textFontFamily,o=n.theme;return t||o.typography.fontFamilyBase},function(n){return n.$wordBreak||"normal"},function(n){return n.$overflowWrap||"break-word"},function(n){var t=n.theme.colors,o=n.$textColor;return o&&void 0!==t[o]?t[o]:o||t.textDark},function(n){return n.$textAlign||"left"},function(n){var t=n.theme,o=t.fontSizes,e=t.fontSizes.m,r=n.$textSize;return r?o[r]:e},function(n){return n.theme.typography.lineHeight},function(n){var t=n.$textWeight,o=n.theme;return t||o.typography.fontWeightBase},function(n){var t=n.as,o=n.theme.spacing.xs;return void 0===t||"p"===t?"".concat(o):0},function(n){return o(n,n.theme)});export{r as TextStyled};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{spacing as r}from"../Spacing/index.js";var o,e=t.p(o||(o=n(["\n  font-family: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  text-align: ",";\n  font-size: ",";\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: ",";\n  padding: 0;\n  margin: 0;\n  margin-bottom: ",";\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"],["\n  font-family: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  text-align: ",";\n  font-size: ",";\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: ",";\n  padding: 0;\n  margin: 0;\n  margin-bottom: ",";\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ","\n"])),function(n){return n.$textFontFamily||"var(--typ-font-family-base, 'Poppins', Arial, sans-serif)"},function(n){return n.$wordBreak||"normal"},function(n){return n.$overflowWrap||"break-word"},function(n){return n.$textColor},function(n){return n.$textAlign||"left"},function(n){var t=n.$textSize;return t?"var(--font-size-".concat(t,", 1rem)"):"var(--font-size-m, 1rem)"},function(n){return n.$textWeight||"var(--typ-font-weight-base, 300)"},function(n){var t=n.as;return void 0===t||"p"===t?"var(--spacing-xs, 1rem)":0},function(n){return r(n)});export{e as TextStyled};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n  type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n  $textColor?: string;\n  $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n  $textSize?: FontSizeType;\n  $textWeight?: number | string;\n  as?: ElementType;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n  $textFontFamily?: string;\n  theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n  font-family: ${({ $textFontFamily, theme }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n  overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n  color: ${({ theme: { colors }, $textColor }) =>\n    $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? colors[$textColor as ColorKeyType]\n      : $textColor || colors.textDark};\n  text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-weight: ${({ $textWeight, theme }) =>\n    $textWeight || theme.typography.fontWeightBase};\n  padding: 0;\n  margin: 0;\n  margin-bottom: ${({\n    as,\n    theme: {\n      spacing: { xs },\n    },\n  }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","templateObject_1","__makeTemplateObject","_a","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","_b","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","xs","spacing","props"],"mappings":"+JAwBO,MAAMA,EAAaC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,oBAAA,uBAAA,eAAA,oBAAA,mBAAA,qBAAA,qBAAA,oDAAA,0DAAA,MAAA,CAAiB,oBAEG,oBACI,uBACa,eAIlC,oBACmB,mBAOV,qBACa,qBAET,oDAQa,0DAMR,QAhCtC,SAACC,OAAEC,EAAeD,EAAAC,gBAAEC,EAAKF,EAAAE,MACtC,OAAAD,GAAmBC,EAAMC,WAAWC,cAApC,EACY,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,QAAd,EACjB,SAACL,GAAsB,OAAPA,EAAAM,eAAwB,YAAjB,EAC/B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAAUR,EAAAQ,WACvC,OAAAA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE,QAFzB,EAGY,SAACT,GAAmB,OAAPA,EAAAU,YAAqB,MAAd,EACrB,SAACV,OACZW,EAAAX,EAAAE,MACEU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASd,EAAAc,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,EACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,EACf,SAACf,OAAEgB,EAAWhB,EAAAgB,YAAEd,EAAKF,EAAAE,MAClC,OAAAc,GAAed,EAAMC,WAAWc,cAAhC,EAGe,SAACjB,OAChBkB,EAAElB,EAAAkB,GAEWC,EAAEnB,EAAAE,MAAAkB,QAAAD,GAEX,YAAe,IAAPD,GAA6B,MAAPA,EAAa,UAAGC,GAAO,CAArD,EAMJ,SAACE,GAAU,OAAAD,EAAQC,EAAOA,EAAMnB,MAArB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n  $textColor?: string;\n  $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n  $textSize?: FontSizeType;\n  $textWeight?: number | string;\n  as?: ElementType;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n  $textFontFamily?: string;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n  font-family: ${({ $textFontFamily }) =>\n    $textFontFamily ||\n    \"var(--typ-font-family-base, 'Poppins', Arial, sans-serif)\"};\n  word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n  overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n  color: ${({ $textColor }) => $textColor};\n  text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n  font-size: ${({ $textSize }) =>\n    $textSize\n      ? `var(--font-size-${$textSize}, 1rem)`\n      : `var(--font-size-m, 1rem)`};\n  line-height: var(--typ-line-height, 1.5em);\n  font-weight: ${({ $textWeight }) =>\n    $textWeight || \"var(--typ-font-weight-base, 300)\"};\n  padding: 0;\n  margin: 0;\n  margin-bottom: ${({ as }) =>\n    typeof as === \"undefined\" || as === \"p\" ? `var(--spacing-xs, 1rem)` : 0};\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ${(props) => spacing(props)}\n`;\n"],"names":["TextStyled","styled","p","templateObject_1","__makeTemplateObject","_a","$textFontFamily","$wordBreak","$overflowWrap","$textColor","$textAlign","$textSize","concat","$textWeight","as","props","spacing"],"mappings":"+JAqBO,MAAMA,EAAaC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,oBAAA,uBAAA,eAAA,oBAAA,mBAAA,oEAAA,oDAAA,0DAAA,MAAA,CAAiB,oBAGY,oBACL,uBACa,eAC9B,oBACe,mBAItB,oEAGmB,oDAIsB,0DAM9C,QAvBZ,SAACC,GACd,OAD+BA,EAAAC,iBAE/B,2DADA,EAEY,SAACD,GAAmB,OAAPA,EAAAE,YAAqB,QAAd,EACjB,SAACF,GAAsB,OAAPA,EAAAG,eAAwB,YAAjB,EAC/B,SAACH,GAAmB,OAAPA,EAAAI,UAAO,EACf,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,MAAd,EACrB,SAACL,GAAE,IAAAM,EAASN,EAAAM,UACvB,OAAAA,EACI,mBAAAC,OAAmBD,EAAS,WAC5B,0BAFJ,EAIa,SAACN,GACd,OAD2BA,EAAAQ,aACZ,kCAAf,EAGe,SAACR,GAAE,IAAAS,EAAET,EAAAS,GACpB,YAAc,IAAPA,GAA6B,MAAPA,EAAa,0BAA4B,CAAtE,EAMA,SAACC,GAAU,OAAAC,EAAQD,EAAR"}

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import n from"./styles.js";var m=function(m){var d=m.errorMessage,l=m.hasError,p=m.hintText,c=m.label,f=m.resize,u=void 0===f?"vertical":f,h=m.lineCount,x=void 0===h?3:h,b=m.ref,v=r(m,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]),E=t(),j=e(e({},o),E);return i.createElement(a,{label:c,hintText:p,required:v.required||!1},i.createElement(n,e({},v,{"aria-invalid":l||!!d||!1,"aria-describedby":v.id&&d?"".concat(v.id,"-error"):void 0,$hasError:l||!!d||!1,$resize:u,$lineCount:x,theme:j,ref:b,"data-hj-suppress":!0})),!!d&&i.createElement(s,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},d))};export{m as TextAreaField,m as default};
+import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{ErrorText as t}from"../ErrorText/index.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import{StyledTextArea as a}from"./styles.js";var s=function(s){var n=s.errorMessage,d=s.hasError,l=s.hintText,m=s.label,c=s.resize,p=void 0===c?"vertical":c,f=s.lineCount,u=void 0===f?3:f,x=s.ref,b=r(s,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]);return i.createElement(o,{label:m,hintText:l,required:b.required||!1},i.createElement(a,e({},b,{"aria-invalid":d||!!n||!1,"aria-describedby":b.id&&n?"".concat(b.id,"-error"):void 0,$hasError:d||!!n||!1,$resize:p,$lineCount:u,ref:x,"data-hj-suppress":!0})),!!n&&i.createElement(t,{marginTop:"xxs",id:b.id?"".concat(b.id,"-error"):void 0},n))};export{s as TextAreaField,s as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n  errorMessage,\n  hasError,\n  hintText,\n  label,\n  resize = \"vertical\",\n  lineCount = 3,\n  ref,\n  ...props\n}: TextAreaFieldProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n    >\n      <StyledTextArea\n        {...props}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n        $resize={resize}\n        $lineCount={lineCount}\n        theme={theme}\n        ref={ref}\n        data-hj-suppress\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","undefined","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wUAiCO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAP,EAAAQ,UAAAA,aAAY,EAACD,EACbE,EAAGT,EAAAS,IACAC,EAAKC,EAAAX,EARoB,2EAUtBY,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,EAAAC,cAACC,GACCf,MAAOA,EACPD,SAAUA,EACViB,SAAUV,EAAMU,WAAY,GAE5BH,EAAAC,cAACG,EAAcN,EAAA,CAAA,EACTL,EAAK,CAAA,eACKR,KAAcD,IAAgB,EAAK,mBAE7CS,EAAMY,IAAQrB,EAAe,GAAAsB,OAAGb,EAAMY,GAAE,eAAWE,YAE5CtB,KAAcD,IAAgB,EAAKwB,QACrCnB,EAAMoB,WACHlB,EACZM,MAAOA,EACPL,IAAKA,EAAG,oBAAA,OAGPR,GACDgB,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIZ,EAAMY,GAAK,GAAAC,OAAGb,EAAMY,kBAAaE,GAEpCvB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n  errorMessage,\n  hasError,\n  hintText,\n  label,\n  resize = \"vertical\",\n  lineCount = 3,\n  ref,\n  ...props\n}: TextAreaFieldProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n    >\n      <StyledTextArea\n        {...props}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n        $resize={resize}\n        $lineCount={lineCount}\n        ref={ref}\n        data-hj-suppress\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","ref","props","__rest","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$hasError","$resize","$lineCount","ErrorText","marginTop","concat"],"mappings":"4PA+BO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAP,EAAAQ,UAAAA,aAAY,EAACD,EACbE,EAAGT,EAAAS,IACAC,EAAKC,EAAAX,EARoB,2EAU5B,OACEY,EAAAC,cAACC,GACCV,MAAOA,EACPD,SAAUA,EACVY,SAAUL,EAAMK,WAAY,GAE5BH,EAAAC,cAACG,OACKN,EAAK,CAAA,eACKR,KAAcD,IAAgB,qBAExCS,EAAMO,IAAQhB,EAAe,UAAGS,EAAMO,GAAE,eAAWC,EAASC,UAErDjB,KAAcD,IAAgB,EAAKmB,QACrCd,EAAMe,WACHb,EACZC,IAAKA,EAAG,oBAAA,OAGPR,GACDW,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIP,EAAMO,GAAK,GAAAO,OAAGd,EAAMO,kBAAaC,GAEpCjB,GAKX"}

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

@@ -1,10 +1,7 @@
-import { type ThemeType } from "../../types";
 type StyledTextareaProps = {
     $hasError: boolean;
     $lineCount: number;
     $resize: "both" | "vertical" | "horizontal" | "none";
-    theme: ThemeType;
 };
-declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
-export default StyledTextArea;
-export { StyledTextArea };
+export declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
+export {};

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,i=o.textarea(t||(t=n(["\n  resize: ",";\n  background-color: ",";\n  background-image: none;\n  border: ",";\n  color: ",";\n  display: block;\n  font-family: ",";\n  font-size: ",";\n  padding: 6px 8px;\n  width: 100%;\n  height: ",";\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  resize: ",";\n  background-color: ",";\n  background-image: none;\n  border: ",";\n  color: ",";\n  display: block;\n  font-family: ",";\n  font-size: ",";\n  padding: 6px 8px;\n  width: 100%;\n  height: ",";\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.$resize},function(n){return n.theme.colors.backgroundLight},function(n){var o=n.theme,r=n.$hasError;return"solid ".concat(o.utilities.inputBorderWidth,"\n    ").concat(r?o.colors.textError:o.colors.textInputBorder)},function(n){return n.theme.colors.textDark},function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.fontSizes.m},function(n){var o=n.$lineCount,r=n.theme;return"calc(".concat(r.typography.lineHeight," * ").concat(o,")")},function(n){return n.theme.colors.secondary},function(n){return n.theme.colors.disabled},function(n){return n.theme.colors.disabled},function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "],["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "])),t.colors.tertiary)},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml});export{i as StyledTextArea,i as default};
+import{__makeTemplateObject as r}from"../../../node_modules/tslib/tslib.es6.js";import n from"styled-components";var e,o=n.textarea(e||(e=r(["\n  resize: ",";\n  background-color: var(--clr-background-light, #ffffff);\n  background-image: none;\n  border: ",';\n  color: var(--clr-text-dark, #000000);\n  display: block;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-size: var(--font-size-m, 1rem);\n  padding: 6px 8px;\n  width: 100%;\n  height: ',";\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"],["\n  resize: ",";\n  background-color: var(--clr-background-light, #ffffff);\n  background-image: none;\n  border: ",';\n  color: var(--clr-text-dark, #000000);\n  display: block;\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  font-size: var(--font-size-m, 1rem);\n  padding: 6px 8px;\n  width: 100%;\n  height: ',";\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"])),function(r){return r.$resize},function(r){var n=r.$hasError;return"solid var(--size-border-width, 1px)\n    ".concat(n?"var(--clr-text-error, #ff0000)":"var(--clr-text-input-border, #2e2d2c)")},function(r){var n=r.$lineCount;return"calc(var(--typ-line-height, 1.5em) * ".concat(n,")")});export{o as StyledTextArea};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n  $hasError: boolean;\n  $lineCount: number;\n  $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n  resize: ${({ $resize }) => $resize};\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  background-image: none;\n  border: ${({ theme, $hasError }) => `solid ${theme.utilities.inputBorderWidth}\n    ${$hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n  color: ${({ theme }) => theme.colors.textDark};\n  display: block;\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  padding: 6px 8px;\n  width: 100%;\n  height: ${({ $lineCount, theme }) =>\n    `calc(${theme.typography.lineHeight} * ${$lineCount})`};\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.secondary};\n  }\n  &:disabled {\n    border-color: ${({ theme }) => theme.colors.disabled};\n    color: ${({ theme }) => theme.colors.disabled};\n  }\n\n  ${({ theme }) =>\n    !theme.utilities.useDefaultFocusRect\n      ? css`\n          &:focus {\n            outline: 0;\n            border-color: ${theme.colors.tertiary};\n          }\n        `\n      : null};\n\n  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","templateObject_2","__makeTemplateObject","_a","$resize","theme","colors","backgroundLight","$hasError","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","templateObject_1","tertiary","breakpoint","desktopLarge","ml"],"mappings":"2HAUA,QAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,0BAAA,2CAAA,eAAA,wCAAA,mBAAA,qDAAA,iFAAA,6CAAA,iBAAA,eAAA,kEAAA,uBAAA,YAAA,CAAqB,eACvB,0BAC6B,2CAGQ,eAC1B,wCAEgB,mBAChB,qDAIW,iFAID,6CAGD,iBACP,eAWrC,kEAGuD,uBACjB,cAnCtC,SAACC,GAAgB,OAAPA,EAAAC,OAAO,EACP,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,EAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAASL,EAAAK,UAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBAAgB,UAAAF,OACzED,EAAYH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,EAE3B,SAACV,GAAc,OAAPA,EAAAE,MAAaC,OAAOQ,QAAb,EAET,SAACX,GAAc,OAAPA,EAAAE,MAAaU,WAAWC,cAAjB,EACjB,SAACb,GAAc,OAAPA,EAAAE,MAAaY,UAAUC,CAAhB,EAGlB,SAACf,OAAEgB,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MAC5B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAU,IAAnD,EAIgB,SAAChB,GAAc,OAAPA,EAAAE,MAAaC,OAAOe,SAAb,EAGf,SAAClB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,EACtB,SAACnB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,EAGxB,SAACnB,GAAE,IAAAE,EAAKF,EAAAE,MACR,OAACA,EAAMK,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAvB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBG,EAAMC,OAAOoB,SAJrC,EAUmB,SAACvB,GAAc,OAAPA,EAAAE,MAAasB,WAAWC,YAAjB,EACrB,SAACzB,GAAc,OAAPA,EAAAE,MAAaY,UAAUY,EAAhB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\ntype StyledTextareaProps = {\n  $hasError: boolean;\n  $lineCount: number;\n  $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n};\n\nexport const StyledTextArea = styled.textarea<StyledTextareaProps>`\n  resize: ${({ $resize }) => $resize};\n  background-color: var(--clr-background-light, #ffffff);\n  background-image: none;\n  border: ${({ $hasError }) => `solid var(--size-border-width, 1px)\n    ${$hasError ? \"var(--clr-text-error, #ff0000)\" : \"var(--clr-text-input-border, #2e2d2c)\"}`};\n  color: var(--clr-text-dark, #000000);\n  display: block;\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n  font-size: var(--font-size-m, 1rem);\n  padding: 6px 8px;\n  width: 100%;\n  height: ${({ $lineCount }) =>\n    `calc(var(--typ-line-height, 1.5em) * ${$lineCount})`};\n\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: var(--clr-secondary, #e60079);\n  }\n  &:disabled {\n    border-color: var(--clr-disabled, #e6e6e6);\n    color: var(--clr-disabled, #e6e6e6);\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n"],"names":["StyledTextArea","styled","textarea","templateObject_1","__makeTemplateObject","_a","$resize","$hasError","concat","$lineCount"],"mappings":"iHAQO,MAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,sGAAA,oOAAA,kWAAA,CAAqB,eAC9B,sGAI0D,oOAQrC,oWAZ7C,SAACC,GAAgB,OAAPA,EAAAC,OAAO,EAGjB,SAACD,GAAE,IAAAE,EAASF,EAAAE,UAAO,MAAA,4CAAAC,OACzBD,EAAY,iCAAmC,wCADtB,EAQnB,SAACF,GAAE,IAAAI,EAAUJ,EAAAI,WACrB,MAAA,wCAAAD,OAAwCC,EAAU,IAAlD"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as i}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{LabelWrapper as s}from"../LabelWrapper/index.js";import{ExtraLeft as o,StyledInputWrapper as d,StyledInput as n,ExtraRight as m,Extra as c,ExtraWrapper as h}from"./styles.js";var b=function(b){var x=b.errorMessage,p=b.extraBottom,V=b.extraLeft,E=b.extraRight,f=b.extraTop,u=b.hasError,v=b.hintText,I=b.isValid,$=b.isValidVisible,T=b.isInvalidVisible,g=b.label,j=b.hideRequiredIndicationInLabel,L=b.ref,q=e(b,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref"]),R=t(),y=i(i({},a),R),B=r.createElement(r.Fragment,null,!!V&&r.createElement(o,{theme:y},V),r.createElement(d,{$hasError:u||!!x||!1,$isValid:void 0!==I?I:!u&&!x,"aria-invalid":u||!!x||!1,$isValidVisible:$||!1,$isInvalidVisible:T||!1,theme:y},r.createElement(n,i({$hasError:u||!!x||!1,$isValid:void 0!==I?I:!u&&!x,"aria-invalid":u||!!x||!1,"aria-describedby":q.id&&x?"".concat(q.id,"-error"):void 0,$isValidVisible:$||!1,$isInvalidVisible:T||!1},q,{theme:y,"data-hj-suppress":!0,ref:L}))),!!E&&r.createElement(m,{theme:y},E));return r.createElement(s,{label:g,hintText:v,required:q.required||!1,hideRequiredIndicationInLabel:j},!!f&&r.createElement(c,{theme:y},f),E||V?r.createElement(h,null,B):B,!!p&&r.createElement(c,{theme:y},p),!!x&&r.createElement(l,{marginTop:"xxs",id:q.id?"".concat(q.id,"-error"):void 0},x))};export{b as TextField,b as default};
+import{__rest as e,__assign as i}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as t}from"../LabelWrapper/index.js";import{ExtraLeft as l,StyledInputWrapper as n,StyledInput as s,ExtraRight as d,Extra as o,ExtraWrapper as m}from"./styles.js";var c=function(c){var b=c.errorMessage,x=c.extraBottom,u=c.extraLeft,V=c.extraRight,E=c.extraTop,h=c.hasError,p=c.hintText,f=c.isValid,v=c.isValidVisible,I=c.isInvalidVisible,$=c.label,T=c.hideRequiredIndicationInLabel,g=c.ref,L=e(c,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref"]),j=r.createElement(r.Fragment,null,!!u&&r.createElement(l,null,u),r.createElement(n,{$hasError:h||!!b||!1,$isValid:void 0!==f?f:!h&&!b,"aria-invalid":h||!!b||!1,$isValidVisible:v||!1,$isInvalidVisible:I||!1},r.createElement(s,i({$hasError:h||!!b||!1,$isValid:void 0!==f?f:!h&&!b,"aria-invalid":h||!!b||!1,"aria-describedby":L.id&&b?"".concat(L.id,"-error"):void 0,$isValidVisible:v||!1,$isInvalidVisible:I||!1},L,{"data-hj-suppress":!0,ref:g}))),!!V&&r.createElement(d,null,V));return r.createElement(t,{label:$,hintText:p,required:L.required||!1,hideRequiredIndicationInLabel:T},!!E&&r.createElement(o,null,E),V||u?r.createElement(m,null,j):j,!!x&&r.createElement(o,null,x),!!b&&r.createElement(a,{marginTop:"xxs",id:L.id?"".concat(L.id,"-error"):void 0},b))};export{c as TextField,c as default};
 //# sourceMappingURL=index.js.map