@transferwise/components 46.165.4 → 46.166.0

package/build/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n  [Typography.TITLE_SCREEN]: 'h1',\n  [Typography.TITLE_SECTION]: 'h2',\n  [Typography.TITLE_SUBSECTION]: 'h3',\n  [Typography.TITLE_BODY]: 'h4',\n  [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n  LiHTMLAttributes<HTMLLIElement> & {\n    /**\n     * Default value will based one `type` prop\n     */\n    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n    /**\n     * Default value: {@link DEFAULT_TYPE}\n     */\n    type?: TitleTypes;\n  };\n\nconst Title = React.forwardRef<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n  TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n  const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n  const isTypeSupported = mapping !== undefined;\n  if (isTypeSupported) {\n    const HeaderTag = as ?? mapping;\n    return (\n      <HeaderTag\n        ref={ref as React.Ref<any>}\n        {...props}\n        className={clsx(`np-text-${type}`, className)}\n      />\n    );\n  }\n  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n  return (\n    <HeaderTag\n      ref={ref as React.Ref<any>}\n      {...props}\n      className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,qBAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,qBAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,qBAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,qBAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,qBAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,sBAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,cAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAC9C;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,cAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWrB,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CACtD;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Title.js","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n  [Typography.TITLE_SCREEN]: 'h1',\n  [Typography.TITLE_SECTION]: 'h2',\n  [Typography.TITLE_SUBSECTION]: 'h3',\n  [Typography.TITLE_BODY]: 'h4',\n  [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n  LiHTMLAttributes<HTMLLIElement> & {\n    /**\n     * Default value will based one `type` prop\n     */\n    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n    /**\n     * Default value: {@link DEFAULT_TYPE}\n     */\n    type?: TitleTypes;\n  };\n\nconst Title = React.forwardRef<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n  TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n  const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n  const isTypeSupported = mapping !== undefined;\n  if (isTypeSupported) {\n    const HeaderTag = as ?? mapping;\n    return (\n      <HeaderTag\n        ref={ref as React.Ref<any>}\n        {...props}\n        className={clsx(`np-text-${type}`, `wds-text-${type}`, className)}\n      />\n    );\n  }\n  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n  return (\n    <HeaderTag\n      ref={ref as React.Ref<any>}\n      {...props}\n      className={clsx(`np-text-${DEFAULT_TYPE}`, `wds-text-${DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,qBAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,qBAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,qBAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,qBAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,qBAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,sBAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,cAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;MACTD,SAAS,EAAEQ,SAAI,CAAC,CAAA,QAAA,EAAWT,IAAI,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYA,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAClE;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,cAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;IACTD,SAAS,EAAEQ,SAAI,CAAC,CAAA,QAAA,EAAWrB,YAAY,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYA,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CAClF;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;"}

package/build/Title/Title.mjs

@@ -46,14 +46,14 @@ const Title = /*#__PURE__*/React__default.forwardRef(({
     return /*#__PURE__*/jsx(HeaderTag, {
       ref: ref,
       ...props,
-      className: clsx(`np-text-${type}`, className)
+      className: clsx(`np-text-${type}`, `wds-text-${type}`, className)
     });
   }
   const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
   return /*#__PURE__*/jsx(HeaderTag, {
     ref: ref,
     ...props,
-    className: clsx(`np-text-${DEFAULT_TYPE}`, className)
+    className: clsx(`np-text-${DEFAULT_TYPE}`, `wds-text-${DEFAULT_TYPE}`, className)
   });
 });
 Title.displayName = 'Title';

package/build/Title/Title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.mjs","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n  [Typography.TITLE_SCREEN]: 'h1',\n  [Typography.TITLE_SECTION]: 'h2',\n  [Typography.TITLE_SUBSECTION]: 'h3',\n  [Typography.TITLE_BODY]: 'h4',\n  [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n  LiHTMLAttributes<HTMLLIElement> & {\n    /**\n     * Default value will based one `type` prop\n     */\n    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n    /**\n     * Default value: {@link DEFAULT_TYPE}\n     */\n    type?: TitleTypes;\n  };\n\nconst Title = React.forwardRef<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n  TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n  const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n  const isTypeSupported = mapping !== undefined;\n  if (isTypeSupported) {\n    const HeaderTag = as ?? mapping;\n    return (\n      <HeaderTag\n        ref={ref as React.Ref<any>}\n        {...props}\n        className={clsx(`np-text-${type}`, className)}\n      />\n    );\n  }\n  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n  return (\n    <HeaderTag\n      ref={ref as React.Ref<any>}\n      {...props}\n      className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,UAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,UAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,UAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,UAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,UAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,GAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAC9C;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,GAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWrB,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CACtD;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Title.mjs","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n  [Typography.TITLE_SCREEN]: 'h1',\n  [Typography.TITLE_SECTION]: 'h2',\n  [Typography.TITLE_SUBSECTION]: 'h3',\n  [Typography.TITLE_BODY]: 'h4',\n  [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n  LiHTMLAttributes<HTMLLIElement> & {\n    /**\n     * Default value will based one `type` prop\n     */\n    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n    /**\n     * Default value: {@link DEFAULT_TYPE}\n     */\n    type?: TitleTypes;\n  };\n\nconst Title = React.forwardRef<\n  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n  TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n  const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n  const isTypeSupported = mapping !== undefined;\n  if (isTypeSupported) {\n    const HeaderTag = as ?? mapping;\n    return (\n      <HeaderTag\n        ref={ref as React.Ref<any>}\n        {...props}\n        className={clsx(`np-text-${type}`, `wds-text-${type}`, className)}\n      />\n    );\n  }\n  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n  return (\n    <HeaderTag\n      ref={ref as React.Ref<any>}\n      {...props}\n      className={clsx(`np-text-${DEFAULT_TYPE}`, `wds-text-${DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,UAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,UAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,UAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,UAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,UAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,GAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;MACTD,SAAS,EAAEQ,IAAI,CAAC,CAAA,QAAA,EAAWT,IAAI,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYA,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAClE;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,GAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;IACTD,SAAS,EAAEQ,IAAI,CAAC,CAAA,QAAA,EAAWrB,YAAY,CAAA,CAAE,EAAE,CAAA,SAAA,EAAYA,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CAClF;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;"}

package/build/Typeahead/TypeaheadInput/TypeaheadInput.js

@@ -62,10 +62,8 @@ class TypeaheadInput extends React.Component {
     }
   }
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10)
     });
   };
   renderInput = isRTL => {
@@ -129,7 +127,9 @@ class TypeaheadInput extends React.Component {
       children: direction$1 => {
         const isRTL = direction$1 === direction.Direction.RTL;
         return multiple ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "form-control typeahead__input-container",
+          className: clsx.clsx('form-control typeahead__input-container', {
+            'typeahead__input-container--scrollable': maxHeight != null
+          }),
           style: {
             maxHeight
           },

package/build/Typeahead/TypeaheadInput/TypeaheadInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.js","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className=\"form-control typeahead__input-container\"\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}
+{"version":3,"file":"TypeaheadInput.js","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    this.setState({\n      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className={clsx('form-control typeahead__input-container', {\n                'typeahead__input-container--scrollable': maxHeight != null,\n              })}\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}

package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs

@@ -58,10 +58,8 @@ class TypeaheadInput extends Component {
     }
   }
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10)
     });
   };
   renderInput = isRTL => {
@@ -125,7 +123,9 @@ class TypeaheadInput extends Component {
       children: direction => {
         const isRTL = direction === Direction.RTL;
         return multiple ? /*#__PURE__*/jsxs("div", {
-          className: "form-control typeahead__input-container",
+          className: clsx('form-control typeahead__input-container', {
+            'typeahead__input-container--scrollable': maxHeight != null
+          }),
           style: {
             maxHeight
           },

package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className=\"form-control typeahead__input-container\"\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}
+{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    this.setState({\n      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className={clsx('form-control typeahead__input-container', {\n                'typeahead__input-container--scrollable': maxHeight != null,\n              })}\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}

package/build/Typeahead/TypeaheadOption/TypeaheadOption.js

@@ -39,10 +39,10 @@ const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: label,
         query: query
       }), note && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "np-text-body-default m-l-1",
+        className: "np-text-body-default wds-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsxRuntime.jsx(highlight.default, {
-        className: "np-text-body-default text-ellipsis",
+        className: "np-text-body-default wds-text-body-default text-ellipsis",
         value: secondary,
         query: query
       })]

package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadOption.js","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  onMouseEnter?: React.MouseEventHandler;\n  query?: string;\n  id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      ref={ref}\n      role=\"option\"\n      aria-selected={selected ? 'true' : 'false'}\n      id={`option-${id}`}\n      className={clsx('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n      onMouseEnter={onMouseEnter}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <Highlight value={label} query={query} />\n        {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <Highlight\n            className=\"np-text-body-default text-ellipsis\"\n            value={secondary}\n            query={query}\n          />\n        )}\n      </a>\n    </li>\n  );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;;;;;AAeA,MAAMA,MAAM,gBAAGC,gBAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,cAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,SAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,cAAA,CAACQ,iBAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,cAAA,CAACQ,iBAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
+{"version":3,"file":"TypeaheadOption.js","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  onMouseEnter?: React.MouseEventHandler;\n  query?: string;\n  id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      ref={ref}\n      role=\"option\"\n      aria-selected={selected ? 'true' : 'false'}\n      id={`option-${id}`}\n      className={clsx('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n      onMouseEnter={onMouseEnter}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <Highlight value={label} query={query} />\n        {note && <span className=\"np-text-body-default wds-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <Highlight\n            className=\"np-text-body-default wds-text-body-default text-ellipsis\"\n            value={secondary}\n            query={query}\n          />\n        )}\n      </a>\n    </li>\n  );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;;;;;AAeA,MAAMA,MAAM,gBAAGC,gBAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,cAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,SAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,cAAA,CAACQ,iBAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,kDAAkD;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACxFC,SAAS,iBACRC,cAAA,CAACQ,iBAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,0DAA0D;AACpEO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}

package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs

@@ -35,10 +35,10 @@ const Option = /*#__PURE__*/forwardRef((props, ref) => {
         value: label,
         query: query
       }), note && /*#__PURE__*/jsx("span", {
-        className: "np-text-body-default m-l-1",
+        className: "np-text-body-default wds-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsx(Highlight, {
-        className: "np-text-body-default text-ellipsis",
+        className: "np-text-body-default wds-text-body-default text-ellipsis",
         value: secondary,
         query: query
       })]

package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  onMouseEnter?: React.MouseEventHandler;\n  query?: string;\n  id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      ref={ref}\n      role=\"option\"\n      aria-selected={selected ? 'true' : 'false'}\n      id={`option-${id}`}\n      className={clsx('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n      onMouseEnter={onMouseEnter}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <Highlight value={label} query={query} />\n        {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <Highlight\n            className=\"np-text-body-default text-ellipsis\"\n            value={secondary}\n            query={query}\n          />\n        )}\n      </a>\n    </li>\n  );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;AAeA,MAAMA,MAAM,gBAAGC,UAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,GAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,IAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,GAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
+{"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  onMouseEnter?: React.MouseEventHandler;\n  query?: string;\n  id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      ref={ref}\n      role=\"option\"\n      aria-selected={selected ? 'true' : 'false'}\n      id={`option-${id}`}\n      className={clsx('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n      onMouseEnter={onMouseEnter}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <Highlight value={label} query={query} />\n        {note && <span className=\"np-text-body-default wds-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <Highlight\n            className=\"np-text-body-default wds-text-body-default text-ellipsis\"\n            value={secondary}\n            query={query}\n          />\n        )}\n      </a>\n    </li>\n  );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;AAeA,MAAMA,MAAM,gBAAGC,UAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,GAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,IAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,GAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,kDAAkD;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACxFC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,0DAA0D;AACpEO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}

package/build/Upload/Steps/UploadImageStep/UploadImageStep.js

@@ -103,10 +103,10 @@ class UploadImageStep extends React.PureComponent {
           className: "m-b-3",
           children: this.getImage()
         }), usLabel && /*#__PURE__*/jsxRuntime.jsx("h4", {
-          className: "np-text-title-body m-b-1",
+          className: "np-text-title-body wds-text-title-body m-b-1",
           children: usLabel
         }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "np-text-body-large m-b-3",
+          className: "np-text-body-large wds-text-body-large m-b-3",
           children: String(usPlaceholder)
         }), /*#__PURE__*/jsxRuntime.jsxs("label", {
           className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,

package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImageStep.js","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n  errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.uploadInputRef.current?.click();\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const {\n      errorMessage,\n      isComplete,\n      errorIconLabel,\n      usAccept,\n      usButtonText,\n      usDisabled,\n      usLabel,\n      usPlaceholder,\n    } = this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n            onKeyDown={this.onKeyDown}\n          >\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlinePrompt\n                  sentiment={Sentiment.NEGATIVE}\n                  mediaLabel={errorIconLabel}\n                  width=\"full\"\n                >\n                  {errorMessage}\n                </InlinePrompt>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}
+{"version":3,"file":"UploadImageStep.js","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n  errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.uploadInputRef.current?.click();\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const {\n      errorMessage,\n      isComplete,\n      errorIconLabel,\n      usAccept,\n      usButtonText,\n      usDisabled,\n      usLabel,\n      usPlaceholder,\n    } = this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body wds-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && (\n            <p className=\"np-text-body-large wds-text-body-large m-b-3\">{String(usPlaceholder)}</p>\n          )}\n          <label\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n            onKeyDown={this.onKeyDown}\n          >\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlinePrompt\n                  sentiment={Sentiment.NEGATIVE}\n                  mediaLabel={errorIconLabel}\n                  width=\"full\"\n                >\n                  {errorMessage}\n                </InlinePrompt>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}

package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs

@@ -99,10 +99,10 @@ class UploadImageStep extends PureComponent {
           className: "m-b-3",
           children: this.getImage()
         }), usLabel && /*#__PURE__*/jsx("h4", {
-          className: "np-text-title-body m-b-1",
+          className: "np-text-title-body wds-text-title-body m-b-1",
           children: usLabel
         }), usPlaceholder && /*#__PURE__*/jsx("p", {
-          className: "np-text-body-large m-b-3",
+          className: "np-text-body-large wds-text-body-large m-b-3",
           children: String(usPlaceholder)
         }), /*#__PURE__*/jsxs("label", {
           className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,

package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImageStep.mjs","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n  errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.uploadInputRef.current?.click();\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const {\n      errorMessage,\n      isComplete,\n      errorIconLabel,\n      usAccept,\n      usButtonText,\n      usDisabled,\n      usLabel,\n      usPlaceholder,\n    } = this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n            onKeyDown={this.onKeyDown}\n          >\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlinePrompt\n                  sentiment={Sentiment.NEGATIVE}\n                  mediaLabel={errorIconLabel}\n                  width=\"full\"\n                >\n                  {errorMessage}\n                </InlinePrompt>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}
+{"version":3,"file":"UploadImageStep.mjs","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n  errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.uploadInputRef.current?.click();\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const {\n      errorMessage,\n      isComplete,\n      errorIconLabel,\n      usAccept,\n      usButtonText,\n      usDisabled,\n      usLabel,\n      usPlaceholder,\n    } = this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body wds-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && (\n            <p className=\"np-text-body-large wds-text-body-large m-b-3\">{String(usPlaceholder)}</p>\n          )}\n          <label\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n            onKeyDown={this.onKeyDown}\n          >\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlinePrompt\n                  sentiment={Sentiment.NEGATIVE}\n                  mediaLabel={errorIconLabel}\n                  width=\"full\"\n                >\n                  {errorMessage}\n                </InlinePrompt>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}

package/build/_deprecated/ActionButton/ActionButton.js

@@ -40,7 +40,7 @@ const ActionButton = /*#__PURE__*/React.forwardRef(({
 }, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
   ref: reference,
   type: "button",
-  className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  className: clsx.clsx('np-action-btn', 'np-text-body-default-bold wds-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
   disabled: disabled,
   onClick: onClick,
   ...rest,

package/build/_deprecated/ActionButton/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n  /** @default Priority.PRIMARY */\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated Use `children` instead.\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n  /** @default Priority.PRIMARY */\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated Use `children` instead.\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold wds-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,sDAAsD,EACtDV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}

package/build/_deprecated/ActionButton/ActionButton.mjs

@@ -36,7 +36,7 @@ const ActionButton = /*#__PURE__*/forwardRef(({
 }, reference) => /*#__PURE__*/jsx("button", {
   ref: reference,
   type: "button",
-  className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  className: clsx('np-action-btn', 'np-text-body-default-bold wds-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
   disabled: disabled,
   onClick: onClick,
   ...rest,

package/build/_deprecated/ActionButton/ActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.mjs","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n  /** @default Priority.PRIMARY */\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated Use `children` instead.\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
+{"version":3,"file":"ActionButton.mjs","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n  /** @default Priority.PRIMARY */\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated Use `children` instead.\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold wds-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,sDAAsD,EACtDV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}

package/build/_deprecated/Avatar/Avatar.js

@@ -62,7 +62,7 @@ const Avatar = ({
     className: clsx.clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-      'np-text-title-body': type === 'initials'
+      'np-text-title-body wds-text-title-body': type === 'initials'
     }),
     "aria-label": ariaLabel,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/_deprecated/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body wds-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,wCAAwC,EAAEF,IAAI,KAAK;AACpD,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}

package/build/_deprecated/Avatar/Avatar.mjs

@@ -58,7 +58,7 @@ const Avatar = ({
     className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-      'np-text-title-body': type === 'initials'
+      'np-text-title-body wds-text-title-body': type === 'initials'
     }),
     "aria-label": ariaLabel,
     children: /*#__PURE__*/jsx("div", {

package/build/_deprecated/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body wds-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,wCAAwC,EAAEF,IAAI,KAAK;AACpD,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}

package/build/_deprecated/Select/Select.js

@@ -364,7 +364,7 @@ function Select({
   }) {
     return /*#__PURE__*/jsxRuntime.jsx("li", {
       // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-      className: clsx.clsx(s('np-dropdown-header'), s('np-text-title-group')),
+      className: clsx.clsx(s('np-dropdown-header'), s('np-text-title-group'), s('wds-text-title-group')),
       onClick: documentIosClick.stopPropagation,
       onKeyPress: documentIosClick.stopPropagation,
       children: children
@@ -445,7 +445,7 @@ function Select({
       block: block,
       size: size,
       htmlType: "button",
-      className: clsx.clsx(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
+      className: clsx.clsx(s('np-dropdown-toggle'), s('np-text-body-large'), s('wds-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
       // reset Button's styles
       ,
       type: null,