@cruk/cruk-react-components 5.0.7 → 6.0.0

package/lib/{components → src/components}/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type SelectHTMLAttributes, type Ref, type LegacyRef } from "react";
+import React, { type ReactNode, type SelectHTMLAttributes, type Ref } from "react";
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** error message text */
     errorMessage?: string;
@@ -11,11 +11,11 @@ export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
     hideRequiredInLabel?: boolean;
     /** react DOM reference of object used scrolling to it with errors etc */
-    ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;
+    ref?: Ref<HTMLSelectElement>;
 };
 /**
  * Select components are used for collecting user provided information from a list of options.
  *
  */
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
 export default Select;

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,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{LabelWrapper as d}from"../LabelWrapper/index.js";import{ErrorText as s}from"../ErrorText/index.js";import m from"./styles.js";var n=t((function(t,n){var l=t.errorMessage,c=t.hasError,p=t.required,u=t.label,b=t.hintText,f=t.hideRequiredInLabel,h=r(t,["errorMessage","hasError","required","label","hintText","hideRequiredInLabel"]),x=o(),E=e(e({},a),x);return i.createElement(d,{label:u,hintText:b,required:!f&&p||!1},i.createElement(m,e({},h,{ref:n,theme:E,required:p,"aria-invalid":c||!!l||!1,"aria-describedby":h.id&&l?"".concat(h.id,"-error"):void 0,$hasError:c||!!l||!1})),!!l&&i.createElement(s,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},l))}));export{n as Select,n as default};
+import r from"react";import{useTheme as e}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{LabelWrapper as t}from"../LabelWrapper/index.js";import{ErrorText as o}from"../ErrorText/index.js";import a from"./styles.js";const d=({errorMessage:d,hasError:m,required:s,label:n,hintText:l,hideRequiredInLabel:p,ref:c,...f})=>{const x=e(),h={...i,...x};return r.createElement(t,{label:n,hintText:l,required:!p&&s||!1},r.createElement(a,{...f,ref:c,theme:h,required:s,"aria-invalid":m||!!d||!1,"aria-describedby":f.id&&d?`${f.id}-error`:void 0,$hasError:m||!!d||!1}),!!d&&r.createElement(o,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},d))};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  forwardRef,\n  type LegacyRef,\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 (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = forwardRef(\n  (\n    {\n      errorMessage,\n      hasError,\n      required,\n      label,\n      hintText,\n      hideRequiredInLabel,\n      ...props\n    }: SelectProps,\n    ref?: Ref<HTMLSelectElement>,\n  ) => {\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={(!hideRequiredInLabel && 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);\n\nexport default Select;\n"],"names":["Select","forwardRef","_a","ref","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"6VAkCaA,EAASC,GACpB,SACEC,EASAC,GARE,IAAAC,iBACAC,aACAC,aACAC,UACAC,aACAC,wBACGC,EAPLC,EAAAT,EAAA,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,wBAWMU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXX,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDW,EAACE,cAAAC,EACKL,EAAA,CAAA,EAAAL,EACJ,CAAAP,IAAKA,EACLW,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CM,EAAMW,IAAQjB,EAAe,GAAGkB,OAAAZ,EAAMW,kBAAaE,EAE5CC,UAAAnB,KAAcD,IAAgB,OAExCA,GACDa,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAGC,OAAAZ,EAAMW,kBAAaE,GAEpCnB,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\";\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 (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: 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  hideRequiredInLabel,\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={(!hideRequiredInLabel && 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","errorMessage","hasError","required","label","hintText","hideRequiredInLabel","ref","props","foundTheme","useTheme","theme","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","undefined","$hasError","ErrorText","marginTop"],"mappings":"wPAgCa,MAAAA,EAAS,EACpBC,eACAC,WACAC,WACAC,QACAC,WACAC,sBACAC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,gBAACC,EAAY,CACXV,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAuBH,IAAa,GAEhDU,EAACE,cAAAC,EACK,IAAAR,EACJD,IAAKA,EACLI,MAAOA,EACPR,SAAUA,EACI,eAAAD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMS,IAAQhB,EAAe,GAAGO,EAAMS,gBAAaC,EAE5CC,UAAAjB,KAAcD,IAAgB,MAExCA,GACDY,gBAACO,EAAS,CACRC,UAAU,MACVJ,GAAIT,EAAMS,GAAK,GAAGT,EAAMS,gBAAaC,GAEpCjB,GAGQ"}

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

@@ -1,2 +1,42 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,c="3rem",i=o.select(t||(t=n(["\n  appearance: none;\n  background: 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  appearance: none;\n  background: 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"])),(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,r=n.$hasError,e=n.$errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(r||e?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: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)}));export{i as StyledSelect,i as default};
+import e,{css as o}from"styled-components";const r="3rem",t=e.select`
+  appearance: none;
+  background: linear-gradient(
+      45deg,
+      ${({theme:e})=>e.colors.backgroundLight} 50%,
+      ${({theme:e})=>e.colors.selectBackground} 50%
+    ),
+    linear-gradient(
+      135deg,
+      ${({theme:e})=>e.colors.selectBackground} 50%,
+      ${({theme:e})=>e.colors.backgroundLight} 50%
+    );
+  background-color: ${({theme:e})=>e.colors.backgroundLight};
+  background-position:
+    calc(100% - 16px) 50%,
+    calc(100% - 10px) 50%;
+  background-size: 6px 6px;
+  background-repeat: no-repeat;
+  border: ${({theme:e,$hasError:o,$errorMessage:r})=>`solid ${e.utilities.inputBorderWidth} ${o||r?e.colors.textError:e.colors.textInputBorder}`};
+  color: ${({theme:e})=>e.colors.textDark};
+  display: block;
+  font-size: ${({theme:e})=>e.fontSizes.m};
+  min-height: ${r};
+  padding: ${({theme:e})=>`calc( (${r} - ( ${e.utilities.inputBorderWidth} * 2) - ${e.typography.lineHeight} ) / 2) ${e.spacing.m} calc( (${r} - ( ${e.utilities.inputBorderWidth} * 2) - ${e.typography.lineHeight} ) / 2) ${e.spacing.xs}`};
+  width: 100%;
+  transition: border-color 150ms linear;
+  &:hover {
+    border-color: ${({theme:e})=>e.colors.secondary};
+  }
+  &:disabled {
+    border-color: ${({theme:e})=>e.colors.disabled};
+    color: ${({theme:e})=>e.colors.disabled};
+  }
+
+  ${({theme:e})=>e.utilities.useDefaultFocusRect?null:o`
+          &:focus {
+            outline: 0;
+            border-color: ${e.colors.tertiary};
+          }
+        `};
+`;export{t as StyledSelect,t as default};
 //# 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: 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\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","_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","__makeTemplateObject","tertiary"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,2oBAAyB,8EAIF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,UA5CJ,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IAIf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IACf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAED,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IAMzB,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,IAKO,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,IAEX,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,GACdlB,GACH,SAACI,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUL,EAAa,SAAAW,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,EAAY,YAAAP,OAAAX,kBAAqBK,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,WAAqB,YAAAT,OAAAN,EAAMgB,QAAQC,GAA9P,IAIgB,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,IAGf,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IACtB,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,IAGxB,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBvB,EAAMC,OAAOuB,SAJrC"}
+{"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: 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\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","tertiary"],"mappings":"2CAIA,MAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,MAAyB;;;;QAI7C,EAAGC,WAAYA,EAAMC,OAAOC;QAC5B,EAAGF,WAAYA,EAAMC,OAAOE;;;;QAI5B,EAAGH,WAAYA,EAAMC,OAAOE;QAC5B,EAAGH,WAAYA,EAAMC,OAAOC;;sBAEd,EAAGF,WAAYA,EAAMC,OAAOC;;;;;;YAMtC,EAAGF,QAAOI,YAAWC,mBAC7B,SAASL,EAAMM,UAAUC,oBACvBH,GAAaC,EACTL,EAAMC,OAAOO,UACbR,EAAMC,OAAOQ;WAEZ,EAAGT,WAAYA,EAAMC,OAAOS;;eAExB,EAAGV,WAAYA,EAAMW,UAAUC;gBAC9BhB;aACH,EAAGI,WACZ,UAAUJ,SAAqBI,EAAMM,UAAUC,2BAA2BP,EAAMa,WAAWC,qBAAqBd,EAAMe,QAAQH,YAAYhB,SAAqBI,EAAMM,UAAUC,2BAA2BP,EAAMa,WAAWC,qBAAqBd,EAAMe,QAAQC;;;;oBAI9O,EAAGhB,WAAYA,EAAMC,OAAOgB;;;oBAG5B,EAAGjB,WAAYA,EAAMC,OAAOiB;aACnC,EAAGlB,WAAYA,EAAMC,OAAOiB;;;IAGrC,EAAGlB,WACFA,EAAMM,UAAUa,oBAOb,KANAC,CAAG;;;4BAGiBpB,EAAMC,OAAOoB;;;"}

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};
+function i(i){return{...i,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:i.margin,$marginTop:i.marginTop,$marginRight:i.marginRight,$marginBottom:i.marginBottom,$marginLeft:i.marginLeft,$marginVertical:i.marginVertical,$marginHorizontal:i.marginHorizontal,$padding:i.padding,$paddingTop:i.paddingTop,$paddingRight:i.paddingRight,$paddingBottom:i.paddingBottom,$paddingLeft:i.paddingLeft,$paddingVertical:i.paddingVertical,$paddingHorizontal:i.paddingHorizontal}}function n(i,n){const{$margin:a,$marginHorizontal:t,$marginVertical:g,$marginTop:d,$marginRight:o,$marginBottom:p,$marginLeft:r,$padding:m,$paddingHorizontal:$,$paddingVertical:l,$paddingTop:c,$paddingRight:e,$paddingBottom:u,$paddingLeft:s}=i,f=a?n.spacing[a]:null,v=g?n.spacing[g]:null,h=t?n.spacing[t]:null,z=d?n.spacing[d]:null,B=o?n.spacing[o]:null,H=p?n.spacing[p]:null,L=r?n.spacing[r]:null,R=f?`margin: ${f} !important;`:"",T=z?`margin-top: ${z} !important;`:v?`margin-top: ${v} !important;`:"",V=B?`margin-right: ${B} !important;`:h?`margin-right: ${h} !important;`:"",b=H?`margin-bottom: ${H} !important;`:v?`margin-bottom: ${v} !important;`:"",x=L?`margin-left: ${L} !important;`:h?`margin-left: ${h} !important;`:"",j=m?n.spacing[m]:null,k=l?n.spacing[l]:null,q=$?n.spacing[$]:null,w=c?n.spacing[c]:null,y=e?n.spacing[e]:null,A=u?n.spacing[u]:null,C=s?n.spacing[s]:null;return`\n    ${R}\n    ${T}\n    ${V}\n    ${b}\n    ${x}\n    ${j?`padding: ${j} !important;`:""}\n    ${w?`padding-top: ${w} !important;`:k?`padding-top: ${k} !important;`:""}\n    ${y?`padding-right: ${y} !important;`:q?`padding-right: ${q} !important;`:""}\n    ${A?`padding-bottom: ${A} !important;`:k?`padding-bottom: ${k} !important;`:""}\n    ${C?`padding-left: ${C} !important;`:q?`padding-left: ${q} !important;`:""}\n  `}export{n as default,n as spacing,i 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,CAEgB,SAAAe,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAXQkB,WACVC,EAUEnB,EAVUmB,aACZC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAPMwB,SACRM,EAME9B,EANgB8B,mBAClBD,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,WAAWQ,OAAAR,EAAgB,gBAAG,GAC9CS,EAAWN,EACb,eAAeK,OAAAL,EAAgB,gBAC/BF,EACE,eAAeO,OAAAP,EAAgB,gBAC/B,GACAS,EAAWN,EACb,iBAAiBI,OAAAJ,EAAgB,gBACjCF,EACE,iBAAiBM,OAAAN,EAAgB,gBACjC,GACAS,EAAWN,EACb,kBAAkBG,OAAAH,EAAgB,gBAClCJ,EACE,kBAAkBO,OAAAP,EAAgB,gBAClC,GACAW,EAAWN,EACb,gBAAgBE,OAAAF,EAAgB,gBAChCJ,EACE,gBAAgBM,OAAAN,EAAgB,gBAChC,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,YAAYL,OAAAK,EAAgB,gBAAG,GAC/CQ,EAAWL,EACb,gBAAgBR,OAAAQ,EAAgB,gBAChCF,EACE,gBAAgBN,OAAAM,EAAgB,gBAChC,GACAQ,EAAWL,EACb,kBAAkBT,OAAAS,EAAgB,gBAClCF,EACE,kBAAkBP,OAAAO,EAAgB,gBAClC,GACAQ,EAAWL,EACb,mBAAmBV,OAAAU,EAAgB,gBACnCJ,EACE,mBAAmBN,OAAAM,EAAgB,gBACnC,GACAU,EAAWL,EACb,iBAAiBX,OAAAW,EAAgB,gBACjCJ,EACE,iBAAiBP,OAAAO,EAAgB,gBACjC,GAEN,MAAO,SAAAP,OACHD,EACA,UAAAC,OAAAC,mBACAC,EAAQ,UAAAF,OACRG,EACA,UAAAH,OAAAI,mBACAQ,EAAQ,UAAAZ,OACRa,EACA,UAAAb,OAAAc,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}
+{"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","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","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl"],"mappings":"AAsEM,SAAUA,EACdC,GAiCA,MA/BsB,IACjBA,EACHC,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,QAAShB,EAAMC,OACfgB,WAAYjB,EAAMG,UAClBe,aAAclB,EAAMI,YACpBe,cAAenB,EAAMK,aACrBe,YAAapB,EAAMM,WACnBe,gBAAiBrB,EAAMO,eACvBe,kBAAmBtB,EAAMQ,iBACzBe,SAAUvB,EAAMS,QAChBe,YAAaxB,EAAMU,WACnBe,cAAezB,EAAMW,aACrBe,eAAgB1B,EAAMY,cACtBe,aAAc3B,EAAMa,YACpBe,iBAAkB5B,EAAMc,gBACxBe,mBAAoB7B,EAAMe,kBAG9B,CAEgB,SAAAe,EAAQ9B,EAA6B+B,GACnD,MAAMf,QACJA,EAAOM,kBACPA,EAAiBD,gBACjBA,EAAeJ,WACfA,EAAUC,aACVA,EAAYC,cACZA,EAAaC,YACbA,EAAWG,SACXA,EAAQM,mBACRA,EAAkBD,iBAClBA,EAAgBJ,YAChBA,EAAWC,cACXA,EAAaC,eACbA,EAAcC,aACdA,GACE3B,EAEEgC,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,WAAWA,gBAAmB,GAC9CQ,EAAWL,EACb,eAAeA,gBACfF,EACE,eAAeA,gBACf,GACAQ,EAAWL,EACb,iBAAiBA,gBACjBF,EACE,iBAAiBA,gBACjB,GACAQ,EAAWL,EACb,kBAAkBA,gBAClBJ,EACE,kBAAkBA,gBAClB,GACAU,EAAWL,EACb,gBAAgBA,gBAChBJ,EACE,gBAAgBA,gBAChB,GAEAU,EAAKrB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CsB,EAAKjB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DkB,EAAKjB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DkB,EAAKvB,EAAcO,EAAMD,QAAQN,GAAe,KAChDwB,EAAKvB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDwB,EAAKvB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDwB,EAAKvB,EAAeI,EAAMD,QAAQH,GAAgB,KAwBxD,MAAO,SACHY,UACAC,UACAC,UACAC,UACAC,UA3BaC,EAAK,YAAYA,gBAAmB,WACpCG,EACb,gBAAgBA,gBAChBF,EACE,gBAAgBA,gBAChB,WACWG,EACb,kBAAkBA,gBAClBF,EACE,kBAAkBA,gBAClB,WACWG,EACb,mBAAmBA,gBACnBJ,EACE,mBAAmBA,gBACnB,WACWK,EACb,iBAAiBA,gBACjBJ,EACE,iBAAiBA,gBACjB,QAcR"}

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

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

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{useTheme as t,ThemeProvider as r}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as c,StepTick as o}from"./styles.js";function s({steps:s=[],current:i=1,children:p}){const u=t(),y={...n,...u},f=Array.isArray(s)?Object.keys(s).length:0;return e.createElement(r,{theme:y},e.createElement(l,null,e.createElement(m,{$total:f},Array.isArray(s)&&s.map(((t,r)=>{const n=`step${r}`;return e.createElement(a,{key:n,$active:r+1===i,$done:r+1<i},e.createElement(c,null,r+1<i&&e.createElement(o,null)),t)}))),p))}export{s as Step,s 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,OAAQ,IAAAD,EAAA,KAAIE,EAAAH,EAAAI,QAAAA,OAAU,IAAAD,EAAA,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQX,GACrCY,OAAOC,KAAKb,GAAOc,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,UAAiBV,GACfC,MAAMC,QAAQX,IACbA,EAAMoB,KAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAOC,OAAAF,GACnB,OACEP,EAACC,cAAAS,GACCF,IAAKA,EACIG,QAAAJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAACC,cAAAY,EAAS,KAAAN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,KAEHlB,GAIT"}
+{"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","steps","current","children","foundTheme","useTheme","theme","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","StepItem","$active","$done","StepBar","StepTick"],"mappings":"uOAsBgB,SAAAA,GAAKC,MAAEA,EAAQ,GAAEC,QAAEA,EAAU,EAACC,SAAEA,IAC9C,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAqBC,MAAMC,QAAQT,GACrCU,OAAOC,KAAKX,GAAOY,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAV,MAAOA,GACpBQ,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,UAAiBV,GACfC,MAAMC,QAAQT,IACbA,EAAMkB,KAAI,CAACC,EAAMC,KACf,MAAMC,EAAM,OAAOD,IACnB,OACEP,EAACC,cAAAQ,GACCD,IAAKA,EACIE,QAAAH,EAAI,IAAMnB,EAAOuB,MACnBJ,EAAI,EAAInB,GAEfY,EAACC,cAAAW,EAAS,KAAAL,EAAI,EAAInB,GAAWY,EAAAC,cAACY,EAAQ,OACrCP,EACQ,KAIlBjB,GAIT"}

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

@@ -1,2 +1,80 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o}from"styled-components";var r,e,i,a,l,d,p,s,c=t.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=t.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(t){var r=t.$total;return r&&o(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=t.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=t.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 t=n.theme.colors.textLight;return"2px solid ".concat(t)}),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)})),g=t.li(s||(s=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(t){var r=t.theme;return t.$active&&o(d||(d=n(["\n      "," {\n        border-color: ",";\n      }\n    "],["\n      "," {\n        border-color: ",";\n      }\n    "])),x,r.colors.tertiary)}),(function(t){var r=t.$done,e=t.theme;return r&&o(p||(p=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,c as StepWrapper};
+import o,{css as t}from"styled-components";const e=o.div`
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+  text-align: center;
+  text-transform: capitalize;
+`,r=o.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  ${({$total:o})=>o&&t`
+      li {
+        width: ${100/o}%;
+      }
+      li:last-child span:after {
+        display: none;
+      }
+    `}
+`,i=o.span`
+  border-radius: 50%;
+  background-clip: padding-box;
+  width: 24px;
+  height: 24px;
+  background-color: ${({theme:o})=>o.colors.stepBackground};
+  display: block;
+  margin: 0 auto 0.5em auto;
+  border: 2px solid ${({theme:o})=>o.colors.stepBorder};
+  text-indent: -999px;
+
+  &:after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    content: "";
+    background-color: transparent;
+    border-bottom: 2px solid ${({theme:o})=>o.colors.stepBorder};
+    left: 50%;
+    top: 11px;
+    margin-left: 12px;
+  }
+`,a=o.span`
+  display: block;
+  transform: rotate(45deg);
+  transform-origin: center center;
+  height: 14px;
+  width: 8px;
+  border-bottom: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
+  border-right: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
+  margin-top: 4px;
+  margin-left: 8px;
+`,l=o.li`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: ${({theme:o})=>o.typography.fontFamilyBase};
+
+  ${({theme:o,$active:e})=>e&&t`
+      ${i} {
+        border-color: ${o.colors.tertiary};
+      }
+    `}
+  ${({$done:o,theme:e})=>o&&t`
+      ${i} {
+        border: none;
+        background-color: ${e.colors.tertiary};
+        &:after {
+          border-bottom: 2px solid ${e.colors.tertiary};
+        }
+      }
+    `}
+`;export{i as StepBar,l as StepItem,r as StepList,a as StepTick,e 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      }\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":"2HAGa,oBAAAA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,SATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,IAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAEhC,kHAK8D,2EAGJ,kNAUS,uEAb/C,SAACI,GAAc,OAAPA,EAAAO,MAAaC,OAAOC,cAAb,IAGf,SAACT,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAUN,SAACV,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAOjCC,EAAWlB,EAAOY,KAE7BO,IAAAA,EAAAhB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAAA,0IAU8B,sBAKA,mDATb,SAACI,GAEJ,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IACU,SAACb,GAEH,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IAKKE,EAAWtB,EAAOuB,GAAEC,IAAAA,EAAArB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAI/B,wFAI6D,UAQ1D,OAWA,SAnBY,SAACI,GAAc,OAAPA,EAAAO,MAAaW,WAAWC,cAAjB,IAE5B,SAACnB,OAAEO,EAAKP,EAAAO,MACR,OADiBP,EAAAoB,SAEjBlB,EAAGmB,IAAAA,EAAAzB,EAAA,CAAA,WAAA,6BAAA,oBAAA,CAAA,WACQ,6BAC8B,sBADrCQ,EACgBG,EAAMC,OAAOc,SAHjC,IAMA,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\";\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      }\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","StepList","ul","$total","css","StepBar","span","theme","colors","stepBackground","stepBorder","StepTick","textLight","StepItem","li","typography","fontFamilyBase","$active","tertiary","$done"],"mappings":"2CAGa,MAAAA,EAAcC,EAAOC,GAAG;;;;;;;;;EAWxBC,EAAWF,EAAOG,EAE7B;;;;;;;;IAQE,EAAGC,YACHA,GACAC,CAAG;;iBAEU,IAAMD;;;;;;EAQVE,EAAUN,EAAOO,IAE5B;;;;;sBAKoB,EAAGC,WAAYA,EAAMC,OAAOC;;;sBAG5B,EAAGF,WAAYA,EAAMC,OAAOE;;;;;;;;;;+BAUnB,EAAGH,WAAYA,EAAMC,OAAOE;;;;;EAO9CC,EAAWZ,EAAOO,IAE7B;;;;;;mBAMiB,EACfC,OACEC,QAAUI,iBAER,aAAaA;kBACH,EACdL,OACEC,QAAUI,iBAER,aAAaA;;;EAKRC,EAAWd,EAAOe,EAI7B;;;;iBAIe,EAAGP,WAAYA,EAAMQ,WAAWC;;IAE7C,EAAGT,QAAOU,aACVA,GACAb,CAAG;QACCC;wBACgBE,EAAMC,OAAOU;;;IAGjC,EAAGC,QAAOZ,WACVY,GACAf,CAAG;QACCC;;4BAEoBE,EAAMC,OAAOU;;qCAEJX,EAAMC,OAAOU;;;;"}

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Text from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: (props: import(".").TextProps) => React.JSX.Element;
     args: {
         children: string;
         textColor: string;

package/lib/{components → src/components}/Text/index.d.ts

@@ -24,5 +24,5 @@ export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** react reference to the DOM element sometime used to scroll to or set focus after an error */
     ref?: Ref<HTMLElement>;
 };
-export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Text: (props: TextProps) => React.JSX.Element;
 export default Text;

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 o,{forwardRef as r}from"react";import{useTheme as i}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as l}from"../Spacing/index.js";import{TextStyled as x}from"./styles.js";var a=r((function(r,a){var n=i(),s=t(t({},m),n),f=r.textColor,p=r.textAlign,d=r.textSize,g=r.textWeight,$=r.textFontFamily,c=r.wordBreak,w=r.overflowWrap,F=e(r,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap"]),W=l(F);return o.createElement(x,t({$textColor:f,$textAlign:p,$textSize:d,$textWeight:g,$textFontFamily:$,$wordBreak:c,$overflowWrap:w},W,{theme:s,ref:a}))}));export{a as Text,a as default};
+import t from"react";import{useTheme as e}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as o}from"../Spacing/index.js";import{TextStyled as m}from"./styles.js";const i=i=>{const l=e(),n={...r,...l},{textColor:x,textAlign:a,textSize:s,textWeight:f,textFontFamily:p,wordBreak:c,overflowWrap:$,ref:d,...g}=i,h=o(g);return t.createElement(m,{$textColor:x,$textAlign:a,$textSize:s,$textWeight:f,$textFontFamily:p,$wordBreak:c,$overflowWrap:$,...h,theme:n,ref:d})};export{i as Text,i 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, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ElementType,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport {\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 = forwardRef((props: TextProps, ref?: Ref<HTMLElement>) => {\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    ...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 LegacyRef<HTMLParagraphElement>}\n    />\n  );\n});\n\nexport default Text;\n"],"names":["Text","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","rest","__rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"0UAkDaA,EAAOC,GAAW,SAACC,EAAkBC,GAChD,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EAQEP,YAPFQ,EAOER,EAAKQ,UANPC,EAMET,EAAKS,SALPC,EAKEV,EALQU,WACVC,EAIEX,EAJYW,eACdC,EAGEZ,YAFFa,EAEEb,EAAKa,aADJC,EAAIC,EACLf,EATE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,iBAWAgB,EAA2BC,EAAmCH,GAEpE,OACEI,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPH,IAAKA,IAGX"}
+{"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","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qOA4Ca,MAAAA,EAAQC,IACnB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,UACJA,EAASC,UACTA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,UACdA,EAASC,aACTA,EAAYC,IACZA,KACGC,GACDb,EAEEc,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAU,CAAAC,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,KACXG,EACJX,MAAOA,EACPS,IAAKA,GACL"}

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

@@ -1,2 +1,20 @@
-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 t from"styled-components";import{spacing as e}from"../Spacing/index.js";const o=t.p`
+  font-family: ${({$textFontFamily:t,theme:e})=>t||e.typography.fontFamilyBase};
+  word-break: ${({$wordBreak:t})=>t||"normal"};
+  overflow-wrap: ${({$overflowWrap:t})=>t||"break-word"};
+  color: ${({theme:{colors:t},$textColor:e})=>e&&void 0!==t[e]?t[e]:e||t.textDark};
+  text-align: ${({$textAlign:t})=>t||"left"};
+  font-size: ${({theme:{fontSizes:t,fontSizes:{m:e}},$textSize:o})=>o?t[o]:e};
+  line-height: ${({theme:t})=>t.typography.lineHeight};
+  font-weight: ${({$textWeight:t,theme:e})=>t||e.typography.fontWeightBase};
+  padding: 0;
+  margin: 0;
+  margin-bottom: ${({as:t,theme:{spacing:{xs:e}}})=>void 0===t||"p"===t?`${e}`:0};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${t=>e(t,t.theme)}
+`;export{o 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,SAhCtC,SAACC,OAAEC,EAAeD,EAAAC,gBAAEC,EAAKF,EAAAE,MACtC,OAAAD,GAAmBC,EAAMC,WAAWC,cAApC,IACY,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,QAAd,IACjB,SAACL,GAAsB,OAAPA,EAAAM,eAAwB,YAAjB,IAC/B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAAUR,EAAAQ,WACvC,OAAAA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE,QAFzB,IAGY,SAACT,GAAmB,OAAPA,EAAAU,YAAqB,MAAd,IACrB,SAACV,OACZW,EAGCX,EAAAE,MAFCU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASd,EAAAc,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,IACf,SAACf,OAAEgB,EAAWhB,EAAAgB,YAAEd,EAAKF,EAAAE,MAClC,OAAAc,GAAed,EAAMC,WAAWc,cAAhC,IAGe,SAACjB,OAChBkB,EAAElB,EAAAkB,GAEWC,EAAEnB,EAAAE,MAAAkB,QAAAD,GAEX,YAAe,IAAPD,GAA6B,MAAPA,EAAa,UAAGC,GAAO,CAArD,IAMJ,SAACE,GAAU,OAAAD,EAAQC,EAAOA,EAAMnB,MAAmB"}
+{"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","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","spacing","xs","props"],"mappings":"+EAwBa,MAAAA,EAAaC,EAAOC,CAAkB;iBAClC,EAAGC,kBAAiBC,WACjCD,GAAmBC,EAAMC,WAAWC;gBACxB,EAAGC,gBAAiBA,GAAc;mBAC/B,EAAGC,mBAAoBA,GAAiB;WAChD,EAAGJ,OAASK,UAAUC,gBAC7BA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE;gBACb,EAAGC,gBAAiBA,GAAc;eACnC,EACXR,OACES,YACAA,WAAaC,MAEfC,eACKA,EAAYF,EAAUE,GAAaD;iBAC3B,EAAGV,WAAYA,EAAMC,WAAWW;iBAChC,EAAGC,cAAab,WAC7Ba,GAAeb,EAAMC,WAAWa;;;mBAGjB,EACfC,KACAf,OACEgB,SAAWC,eAEM,IAAPF,GAA6B,MAAPA,EAAa,GAAGE,IAAO;;;;;;IAMxDC,GAAUF,EAAQE,EAAOA,EAAMlB;"}

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import TextAreaField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+    component: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: import(".").TextAreaFieldProps) => React.JSX.Element;
     args: {
         defaultValue: string;
         disabled: boolean;

package/lib/{components → src/components}/TextAreaField/index.d.ts

@@ -18,5 +18,5 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 /**
  * TextAreaField lets users enter and edit multiline text.
  */
-export declare const TextAreaField: React.ForwardRefExoticComponent<Omit<TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaField: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: TextAreaFieldProps) => React.JSX.Element;
 export default TextAreaField;

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,{forwardRef as t}from"react";import{useTheme as o}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as n}from"../LabelWrapper/index.js";import m from"./styles.js";var d=t((function(t,d){var l=t.errorMessage,p=t.hasError,c=t.hintText,u=t.label,f=t.resize,h=void 0===f?"vertical":f,x=t.lineCount,b=void 0===x?3:x,v=r(t,["errorMessage","hasError","hintText","label","resize","lineCount"]),E=o(),j=e(e({},s),E);return i.createElement(n,{label:u,hintText:c,required:v.required||!1},i.createElement(m,e({},v,{"aria-invalid":p||!!l||!1,"aria-describedby":v.id&&l?"".concat(v.id,"-error"):void 0,$hasError:p||!!l||!1,$resize:h,$lineCount:b,theme:j,ref:d,"data-hj-suppress":!0})),!!l&&i.createElement(a,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},l))}));export{d as TextAreaField,d as default};
+import r from"react";import{useTheme as e}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import s from"./styles.js";const a=({errorMessage:a,hasError:m,hintText:n,label:d,resize:l="vertical",lineCount:p=3,ref:c,...f})=>{const u=e(),x={...t,...u};return r.createElement(o,{label:d,hintText:n,required:f.required||!1},r.createElement(s,{...f,"aria-invalid":m||!!a||!1,"aria-describedby":f.id&&a?`${f.id}-error`:void 0,$hasError:m||!!a||!1,$resize:l,$lineCount:p,theme:x,ref:c,"data-hj-suppress":!0}),!!a&&r.createElement(i,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},a))};export{a as TextAreaField,a 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  forwardRef,\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 = forwardRef(\n  (\n    {\n      errorMessage,\n      hasError,\n      hintText,\n      label,\n      resize = \"vertical\",\n      lineCount = 3,\n      ...props\n    }: TextAreaFieldProps,\n    ref?: Ref<HTMLTextAreaElement>,\n  ) => {\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);\n\nexport default TextAreaField;\n"],"names":["TextAreaField","forwardRef","_a","ref","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","undefined","$resize","$lineCount","ErrorText","marginTop"],"mappings":"6VAkCaA,EAAgBC,GAC3B,SACEC,EASAC,GARE,IAAAC,EAAYF,EAAAE,aACZC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAKL,EAAAK,MACLC,EAAmBN,EAAAO,OAAnBA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,EAACA,EACVE,EAAKC,EAAAX,EAPV,qEAWMY,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,GACCd,MAAOA,EACPD,SAAUA,EACVgB,SAAUV,EAAMU,WAAY,GAE5BH,EAACC,cAAAG,EACKN,EAAA,CAAA,EAAAL,EACU,CAAA,eAAAP,KAAcD,IAAgB,EAAK,mBAE7CQ,EAAMY,IAAQpB,EAAe,GAAGqB,OAAAb,EAAMY,GAAE,eAAWE,YAE5CrB,KAAcD,IAAgB,EAChCuB,QAAAlB,EACGmB,WAAAjB,EACZK,MAAOA,EACPb,IAAKA,EAEL,oBAAA,OACCC,GACDe,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIZ,EAAMY,GAAK,GAAGC,OAAAb,EAAMY,kBAAaE,GAEpCtB,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\";\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","errorMessage","hasError","hintText","label","resize","lineCount","ref","props","foundTheme","useTheme","theme","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wPAiCO,MAAMA,EAAgB,EAC3BC,eACAC,WACAC,WACAC,QACAC,SAAS,WACTC,YAAY,EACZC,SACGC,MAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,EAACC,cAAAC,GACCX,MAAOA,EACPD,SAAUA,EACVa,SAAUR,EAAMQ,WAAY,GAE5BH,EAACC,cAAAG,EACK,IAAAT,EACU,eAAAN,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMU,IAAQjB,EAAe,GAAGO,EAAMU,gBAAaC,YAE5CjB,KAAcD,IAAgB,EAChCmB,QAAAf,EACGgB,WAAAf,EACZK,MAAOA,EACPJ,IAAKA,EAEL,oBAAA,MACCN,GACDY,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIV,EAAMU,GAAK,GAAGV,EAAMU,gBAAaC,GAEpClB,GAGQ"}

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

@@ -1,2 +1,30 @@
-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  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"])),(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)}));export{i as StyledTextArea,i as default};
+import o,{css as e}from"styled-components";const r=o.textarea`
+  resize: ${({$resize:o})=>o};
+  background-color: ${({theme:o})=>o.colors.backgroundLight};
+  background-image: none;
+  border: ${({theme:o,$hasError:e})=>`solid ${o.utilities.inputBorderWidth}\n    ${e?o.colors.textError:o.colors.textInputBorder}`};
+  color: ${({theme:o})=>o.colors.textDark};
+  display: block;
+  font-family: ${({theme:o})=>o.typography.fontFamilyBase};
+  font-size: ${({theme:o})=>o.fontSizes.m};
+  padding: 6px 8px;
+  width: 100%;
+  height: ${({$lineCount:o,theme:e})=>`calc(${e.typography.lineHeight} * ${o})`};
+
+  transition: border-color 150ms linear;
+  &:hover {
+    border-color: ${({theme:o})=>o.colors.secondary};
+  }
+  &:disabled {
+    border-color: ${({theme:o})=>o.colors.disabled};
+    color: ${({theme:o})=>o.colors.disabled};
+  }
+
+  ${({theme:o})=>o.utilities.useDefaultFocusRect?null:e`
+          &:focus {
+            outline: 0;
+            border-color: ${o.colors.tertiary};
+          }
+        `};
+`;export{r as StyledTextArea,r as default};
 //# 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\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"],"mappings":"2HAUA,QAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,0BAAA,2CAAA,eAAA,wCAAA,mBAAA,qDAAA,iFAAA,6CAAA,iBAAA,eAAA,OAAA,CAAqB,eACvB,0BAC6B,2CAGQ,eAC1B,wCAEgB,mBAChB,qDAIW,iFAID,6CAGD,iBACP,eAWrC,UA/BA,SAACC,GAAgB,OAAPA,EAAAC,OAAO,IACP,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,IAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAASL,EAAAK,UAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBACzD,UAAAF,OAAAD,EAAYH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,IAE3B,SAACV,GAAc,OAAPA,EAAAE,MAAaC,OAAOQ,QAAb,IAET,SAACX,GAAc,OAAPA,EAAAE,MAAaU,WAAWC,cAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAE,MAAaY,UAAUC,CAAhB,IAGlB,SAACf,OAAEgB,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MAC5B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAa,IAAtD,IAIgB,SAAChB,GAAc,OAAPA,EAAAE,MAAaC,OAAOe,SAAb,IAGf,SAAClB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IACtB,SAACnB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IAGxB,SAACnB,GAAE,IAAAE,EAAKF,EAAAE,MACR,OAACA,EAAMK,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAvB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBG,EAAMC,OAAOoB,SAJrC"}
+{"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\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","$resize","theme","colors","backgroundLight","$hasError","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","tertiary"],"mappings":"2CAUA,MAAMA,EAAiBC,EAAOC,QAA6B;YAC/C,EAAGC,aAAcA;sBACP,EAAGC,WAAYA,EAAMC,OAAOC;;YAEtC,EAAGF,QAAOG,eAAgB,SAASH,EAAMI,UAAUC,yBACzDF,EAAYH,EAAMC,OAAOK,UAAYN,EAAMC,OAAOM;WAC7C,EAAGP,WAAYA,EAAMC,OAAOO;;iBAEtB,EAAGR,WAAYA,EAAMS,WAAWC;eAClC,EAAGV,WAAYA,EAAMW,UAAUC;;;YAGlC,EAAGC,aAAYb,WACvB,QAAQA,EAAMS,WAAWK,gBAAgBD;;;;oBAIzB,EAAGb,WAAYA,EAAMC,OAAOc;;;oBAG5B,EAAGf,WAAYA,EAAMC,OAAOe;aACnC,EAAGhB,WAAYA,EAAMC,OAAOe;;;IAGrC,EAAGhB,WACFA,EAAMI,UAAUa,oBAOb,KANAC,CAAG;;;4BAGiBlB,EAAMC,OAAOkB;;;"}

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import TextField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredInLabel, ref, ...props }: import(".").TextFieldProps) => React.JSX.Element;
     args: {
         value: undefined;
         disabled: boolean;