npm - @transferwise/components - Versions diffs - 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3 - Mend

@transferwise/components 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1946) hide show

package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/PreventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' \| 'lg';\n padding?: 'none' \| 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputPopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n strategy: 'fixed',\n placement,\n middleware: [\n offset(8),\n flip({ padding: FLOATING_PADDING, crossAxis: false }),\n shift(),\n floatingSize({\n padding: FLOATING_PADDING,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render /}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n {/ eslint-enable react-hooks/refs /}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n {/ eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render /}\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n {/ eslint-enable react-hooks/refs */}\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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~~wCAAwC~~;AAAA5D,oBAAAA,QAAA,EAAEH;AAAK,mBAAK,CAAC,~~GACjE~~,IAAI,eACR6C,GAAA,CAAA,KAAA,EAAA;AAAKkB,oBAAAA,SAAS,EAAC,~~4CAA4C~~;AAAA5D,oBAAAA,QAAA,EAAEA;AAAQ,mBAAM,~~CAC7E~~;iBAAK;AACP,eAAA,EApBOkC,WAoBF;aACe;WACZ;SACF;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;"}
1	+ {"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/PreventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' \| 'lg';\n padding?: 'none' \| 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputPopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n strategy: 'fixed',\n placement,\n middleware: [\n offset(8),\n flip({ padding: FLOATING_PADDING, crossAxis: false }),\n shift(),\n floatingSize({\n padding: FLOATING_PADDING,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render /}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n {/ eslint-enable react-hooks/refs /}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n {/ eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render /}\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n {/ eslint-enable react-hooks/refs */}\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title wds-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content wds-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/Label/Label.js CHANGED Viewed

@@ -19,7 +19,7 @@ const Label = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     id: id,
     htmlFor: htmlFor,
-    className: clsx.clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
+    className: clsx.clsx('np-label d-flex flex-column wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/*\n Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,SAAI,CACb,~~0EAA0E~~,~~EAC1EN~~,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,cAAA,CAACM,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,sBAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,cAAA,CAACM,YAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}
1	+ {"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/*\n Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column wds-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,SAAI,CACb,2EAA2E,EAC3EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,cAAA,CAACM,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,sBAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,cAAA,CAACM,YAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}

package/build/Label/Label.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ const Label = /*#__PURE__*/forwardRef(({
     ref: ref,
     id: id,
     htmlFor: htmlFor,
-    className: clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
+    className: clsx('np-label d-flex flex-column wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.mjs","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/*\n Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,IAAI,CACb,~~0EAA0E~~,~~EAC1EN~~,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,OAAO,EAAE;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,GAAA,CAACM,IAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}
1	+ {"version":3,"file":"Label.mjs","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/*\n Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column wds-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,IAAI,CACb,2EAA2E,EAC3EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,OAAO,EAAE;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,GAAA,CAACM,IAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}

package/build/Stepper/Stepper.js CHANGED Viewed

@@ -81,7 +81,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'wds-text-body-default-bold tw-stepper__step--active' : 'wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n testId?: string;\n}\n\n/*\n This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n /\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /\n Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n /\n return `calc(${percentageCompleted 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={clsx(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAASA,KAAKA,CAACC,IAAY,EAAEC,EAAU,EAAEC,KAAa,EAAA;AACpD,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACJ,EAAE,EAAEC,KAAK,CAAC,EAAEF,IAAI,CAAC;AAC5C;AAeA;;;AAGG;AACH,MAAMM,OAAO,GAAGA,CAAC;EAAEC,KAAK;AAAEC,EAAAA,UAAU,GAAG,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAM,CAAgB,KAAI;EAC7E,MAAM;AAAEC,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAEhC,EAAA,IAAIL,KAAK,CAACM,MAAM,KAAK,CAAC,EAAE;AACtB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAMC,eAAe,GAAGf,KAAK,CAAC,CAAC,EAAEQ,KAAK,CAACM,MAAM,GAAG,CAAC,EAAEL,UAAU,CAAC;EAC9D,MAAMO,cAAc,GAAG,CAAC,IAAIR,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAC7C,MAAMG,mBAAmB,GAAGF,eAAe,IAAIP,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAEhE,MAAMI,gBAAgB,GAAGA,MAAa;IACpC,IAAID,mBAAmB,KAAK,CAAC,EAAE;AAC7B,MAAA,OAAO,IAAI;AACb,IAAA;AACA;;;;AAIG;AACH,IAAA,OAAO,CAAA,KAAA,EAAQA,mBAAmB,GAAG,GAAG,CAAA,uEAAA,CAAyE;EACnH,CAAC;AAED,EAAA,MAAME,UAAU,GAAGA,CAACC,IAAU,EAAEC,KAAa,KAAI;AAC/C,IAAA,MAAMC,MAAM,GAAGD,KAAK,KAAKN,eAAe;AACxC,IAAA,MAAMQ,SAAS,GAAGH,IAAI,CAACI,OAAO,IAAI,CAACF,MAAM;AAEzC,IAAA,MAAMG,WAAW,GAAGF,SAAS,gBAC3BG,cAAA,CAAA,QAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,QAAQ;AACbjB,MAAAA,SAAS,EAAC,qCAAqC;MAC/Cc,OAAO,EAAEA,MAAMD,SAAS,IAAIH,IAAI,CAACI,OAAO,IAAK;AAAAI,MAAAA,QAAA,eAE7CF,cAAA,CAAA,OAAA,EAAA;QAAAE,QAAA,EAAQR,IAAI,CAACS;OAAa;KACpB,CAAC,gBAETH,cAAA,CAAA,MAAA,EAAA;AAAMhB,MAAAA,SAAS,EAAC,wBAAwB;MAAAkB,QAAA,EAAER,IAAI,CAACS;AAAK,KAAO,CAC5D;AAED,IAAA,oBACEH,cAAA,CAAA,IAAA,EAAA;MAEEhB,SAAS,EAAEoB,SAAI,CACb,WAAW,EACX,kBAAkB,EAClBR,MAAM,GAAG,~~oDAAoD~~,GAAG,~~sBAAsB~~,~~EACtFC~~,SAAS,IAAI,6BAA6B,EAC1CH,IAAI,CAACW,UAAU,IAAI,+BAA+B,CAClD;AACF,MAAA,cAAA,EAAcT,MAAM,GAAG,MAAM,GAAG,KAAM;MACtCU,KAAK,EACHpB,KAAK,GACD;AAAEqB,QAAAA,KAAK,EAAE,CAAA,EAAGZ,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;AAAG,OAAE,GAC7C;AAAEkB,QAAAA,IAAI,EAAE,CAAA,EAAGb,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;OAC5C;AAAAY,MAAAA,QAAA,EAEAR,IAAI,CAACW,UAAU,IAAI,CAACI,6BAAa,EAAE,gBAClCT,cAAA,CAACU,eAAO,EAAA;QAACC,QAAQ,EAAEC,iBAAQ,CAACC,MAAO;QAACV,KAAK,EAAET,IAAI,CAACW,UAAW;AAAAH,QAAAA,QAAA,EACxDH;AAAW,OACL,CAAC,GAEVA;AACD,KAAA,EArBIJ,KAsBH,CAAC;EAET,CAAC;AAED,EAAA,oBACEmB,eAAA,CAAA,KAAA,EAAA;AAAK9B,IAAAA,SAAS,EAAEoB,SAAI,CAAC,YAAY,EAAEpB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaC,MAAO;AAAAiB,IAAAA,QAAA,gBACjEF,cAAA,CAAA,KAAA,EAAA;AAAKhB,MAAAA,SAAS,EAAC,UAAU;AAAAkB,MAAAA,QAAA,eACvBF,cAAA,CAAA,KAAA,EAAA;AACEhB,QAAAA,SAAS,EAAC,cAAc;AACxBsB,QAAAA,KAAK,EAAE;UAAES,KAAK,EAAEvB,gBAAgB;SAAK;QACrC,aAAA,EAAY;OAAc;KAEzB,CACL,eAAAQ,cAAA,CAAA,IAAA,EAAA;AAAIhB,MAAAA,SAAS,EAAC,8BAA8B;AAAAkB,MAAAA,QAAA,EAAEpB,KAAK,CAACkC,GAAG,CAACvB,UAAU;AAAC,KAAK,CAC1E;AAAA,GAAK,CAAC;AAEV;;"}
1	+ {"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n testId?: string;\n}\n\n/*\n This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n /\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /\n Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n /\n return `calc(${percentageCompleted 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={clsx(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'wds-text-body-default-bold tw-stepper__step--active' : 'wds-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Stepper/Stepper.mjs CHANGED Viewed

@@ -77,7 +77,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsx("li", {
-      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'wds-text-body-default-bold tw-stepper__step--active' : 'wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n testId?: string;\n}\n\n/*\n This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n /\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /\n Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n /\n return `calc(${percentageCompleted 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={clsx(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAASA,KAAKA,CAACC,IAAY,EAAEC,EAAU,EAAEC,KAAa,EAAA;AACpD,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACJ,EAAE,EAAEC,KAAK,CAAC,EAAEF,IAAI,CAAC;AAC5C;AAeA;;;AAGG;AACH,MAAMM,OAAO,GAAGA,CAAC;EAAEC,KAAK;AAAEC,EAAAA,UAAU,GAAG,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAM,CAAgB,KAAI;EAC7E,MAAM;AAAEC,IAAAA;GAAO,GAAGC,YAAY,EAAE;AAEhC,EAAA,IAAIL,KAAK,CAACM,MAAM,KAAK,CAAC,EAAE;AACtB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAMC,eAAe,GAAGf,KAAK,CAAC,CAAC,EAAEQ,KAAK,CAACM,MAAM,GAAG,CAAC,EAAEL,UAAU,CAAC;EAC9D,MAAMO,cAAc,GAAG,CAAC,IAAIR,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAC7C,MAAMG,mBAAmB,GAAGF,eAAe,IAAIP,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAEhE,MAAMI,gBAAgB,GAAGA,MAAa;IACpC,IAAID,mBAAmB,KAAK,CAAC,EAAE;AAC7B,MAAA,OAAO,IAAI;AACb,IAAA;AACA;;;;AAIG;AACH,IAAA,OAAO,CAAA,KAAA,EAAQA,mBAAmB,GAAG,GAAG,CAAA,uEAAA,CAAyE;EACnH,CAAC;AAED,EAAA,MAAME,UAAU,GAAGA,CAACC,IAAU,EAAEC,KAAa,KAAI;AAC/C,IAAA,MAAMC,MAAM,GAAGD,KAAK,KAAKN,eAAe;AACxC,IAAA,MAAMQ,SAAS,GAAGH,IAAI,CAACI,OAAO,IAAI,CAACF,MAAM;AAEzC,IAAA,MAAMG,WAAW,GAAGF,SAAS,gBAC3BG,GAAA,CAAA,QAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,QAAQ;AACbjB,MAAAA,SAAS,EAAC,qCAAqC;MAC/Cc,OAAO,EAAEA,MAAMD,SAAS,IAAIH,IAAI,CAACI,OAAO,IAAK;AAAAI,MAAAA,QAAA,eAE7CF,GAAA,CAAA,OAAA,EAAA;QAAAE,QAAA,EAAQR,IAAI,CAACS;OAAa;KACpB,CAAC,gBAETH,GAAA,CAAA,MAAA,EAAA;AAAMhB,MAAAA,SAAS,EAAC,wBAAwB;MAAAkB,QAAA,EAAER,IAAI,CAACS;AAAK,KAAO,CAC5D;AAED,IAAA,oBACEH,GAAA,CAAA,IAAA,EAAA;MAEEhB,SAAS,EAAEoB,IAAI,CACb,WAAW,EACX,kBAAkB,EAClBR,MAAM,GAAG,~~oDAAoD~~,GAAG,~~sBAAsB~~,~~EACtFC~~,SAAS,IAAI,6BAA6B,EAC1CH,IAAI,CAACW,UAAU,IAAI,+BAA+B,CAClD;AACF,MAAA,cAAA,EAAcT,MAAM,GAAG,MAAM,GAAG,KAAM;MACtCU,KAAK,EACHpB,KAAK,GACD;AAAEqB,QAAAA,KAAK,EAAE,CAAA,EAAGZ,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;AAAG,OAAE,GAC7C;AAAEkB,QAAAA,IAAI,EAAE,CAAA,EAAGb,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;OAC5C;AAAAY,MAAAA,QAAA,EAEAR,IAAI,CAACW,UAAU,IAAI,CAACI,aAAa,EAAE,gBAClCT,GAAA,CAACU,OAAO,EAAA;QAACC,QAAQ,EAAEC,QAAQ,CAACC,MAAO;QAACV,KAAK,EAAET,IAAI,CAACW,UAAW;AAAAH,QAAAA,QAAA,EACxDH;AAAW,OACL,CAAC,GAEVA;AACD,KAAA,EArBIJ,KAsBH,CAAC;EAET,CAAC;AAED,EAAA,oBACEmB,IAAA,CAAA,KAAA,EAAA;AAAK9B,IAAAA,SAAS,EAAEoB,IAAI,CAAC,YAAY,EAAEpB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaC,MAAO;AAAAiB,IAAAA,QAAA,gBACjEF,GAAA,CAAA,KAAA,EAAA;AAAKhB,MAAAA,SAAS,EAAC,UAAU;AAAAkB,MAAAA,QAAA,eACvBF,GAAA,CAAA,KAAA,EAAA;AACEhB,QAAAA,SAAS,EAAC,cAAc;AACxBsB,QAAAA,KAAK,EAAE;UAAES,KAAK,EAAEvB,gBAAgB;SAAK;QACrC,aAAA,EAAY;OAAc;KAEzB,CACL,eAAAQ,GAAA,CAAA,IAAA,EAAA;AAAIhB,MAAAA,SAAS,EAAC,8BAA8B;AAAAkB,MAAAA,QAAA,EAAEpB,KAAK,CAACkC,GAAG,CAACvB,UAAU;AAAC,KAAK,CAC1E;AAAA,GAAK,CAAC;AAEV;;"}
1	+ {"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n testId?: string;\n}\n\n/*\n This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n /\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /\n Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n /\n return `calc(${percentageCompleted 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={clsx(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'wds-text-body-default-bold tw-stepper__step--active' : 'wds-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Table/Header/TableHeader.js CHANGED Viewed

@@ -37,7 +37,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold",
+      className: "np-table-header-content wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

package/build/Table/Header/TableHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' \| 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n  \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,~~mDAAmD~~;~~AAC7D~~,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}
1	+ {"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' \| 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content wds-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n  \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,oDAAoD;AAC9D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}

package/build/Table/Header/TableHeader.mjs CHANGED Viewed

@@ -33,7 +33,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold",
+      className: "np-table-header-content wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

package/build/Table/Header/TableHeader.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.mjs","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' \| 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n  \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,~~mDAAmD~~;~~AAC7D~~,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}
1	+ {"version":3,"file":"TableHeader.mjs","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' \| 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content wds-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n  \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,oDAAoD;AAC9D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}

package/build/Tabs/Tab/Tab.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   }, [handleFocusTab, selected]);
   return /*#__PURE__*/jsxRuntime.jsx("li", {
     ref: reference,
-    className: clsx.clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
+    className: clsx.clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {
       'tabs__tab--selected': selected,
       clickable: !disabled,
       disabled

package/build/Tabs/Tab/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,gBAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,eAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,~~yBAAyB~~,GAAG,~~oBAAoB~~,EAAE;~~AACxF~~,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
1	+ {"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,gBAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,eAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,0BAA0B,GAAG,qBAAqB,EAAE;AAC1F,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}

package/build/Tabs/Tab/Tab.mjs CHANGED Viewed

@@ -28,7 +28,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
   }, [handleFocusTab, selected]);
   return /*#__PURE__*/jsx("li", {
     ref: reference,
-    className: clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
+    className: clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {
       'tabs__tab--selected': selected,
       clickable: !disabled,
       disabled

package/build/Tabs/Tab/Tab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.mjs","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,UAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,SAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,~~yBAAyB~~,GAAG,~~oBAAoB~~,EAAE;~~AACxF~~,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
1	+ {"version":3,"file":"Tab.mjs","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,UAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,SAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,0BAA0B,GAAG,qBAAqB,EAAE;AAC1F,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}

package/build/Tag/Tag.js CHANGED Viewed

@@ -35,7 +35,7 @@ const Tag = /*#__PURE__*/React.forwardRef(function Tag({
       emphasis: overMedia ? 'elevated' : emphasis,
       id: id,
       "data-testid": dataTestId,
-      className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
+      className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'wds-text-body-default-bold', className),
       children: label
     })
   });

package/build/Tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/*\n Tag is a small, non-interactive label that categorises or highlights a piece of content.\n \n @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n \n @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n \n @see {@link https://storybook.wise.design/?path=/docs/tag--docs\|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,~~2BAA2B~~,~~EAC3BI~~,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
1	+ {"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/*\n Tag is a small, non-interactive label that categorises or highlights a piece of content.\n \n @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n \n @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n \n @see {@link https://storybook.wise.design/?path=/docs/tag--docs\|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'wds-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,4BAA4B,EAC5BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}

package/build/Tag/Tag.mjs CHANGED Viewed

@@ -31,7 +31,7 @@ const Tag = /*#__PURE__*/forwardRef(function Tag({
       emphasis: overMedia ? 'elevated' : emphasis,
       id: id,
       "data-testid": dataTestId,
-      className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
+      className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'wds-text-body-default-bold', className),
       children: label
     })
   });

package/build/Tag/Tag.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/*\n Tag is a small, non-interactive label that categorises or highlights a piece of content.\n \n @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n \n @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n \n @see {@link https://storybook.wise.design/?path=/docs/tag--docs\|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,~~2BAA2B~~,~~EAC3BI~~,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
1	+ {"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/*\n Tag is a small, non-interactive label that categorises or highlights a piece of content.\n \n @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n \n @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n \n @see {@link https://storybook.wise.design/?path=/docs/tag--docs\|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'wds-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,4BAA4B,EAC5BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}

package/build/Typeahead/TypeaheadOption/TypeaheadOption.js CHANGED Viewed

@@ -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: "wds-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsxRuntime.jsx(highlight.default, {
-        className: "np-text-body-default text-ellipsis",
+        className: "wds-text-body-default text-ellipsis",
         value: secondary,
         query: query
       })]

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

	@@ -1 +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;;"}
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=\"wds-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"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,6BAA6B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACnEC,SAAS,iBACRC,cAAA,CAACQ,iBAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,qCAAqC;AAC/CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}

package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs CHANGED Viewed

@@ -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: "wds-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsx(Highlight, {
-        className: "np-text-body-default text-ellipsis",
+        className: "wds-text-body-default text-ellipsis",
         value: secondary,
         query: query
       })]

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

	@@ -1 +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;;"}
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=\"wds-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"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,6BAA6B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACnEC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,qCAAqC;AAC/CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}

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

@@ -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: "wds-text-title-body m-b-1",
           children: usLabel
         }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "np-text-body-large m-b-3",
+          className: "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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBc,MAAOA,eAAgB,SAAQC,mBAAmC,CAAA;EAC9EC,cAAc,gBAAGC,eAAS,EAAoB;EAE9CC,cAAc,GAAGA,MAAK;IACpB,MAAM;AAAEC,MAAAA;KAAa,GAAG,IAAI,CAACC,KAAK;IAClC,MAAMC,IAAI,GAAG,IAAI,CAACL,cAAc,CAACM,OAAO,EAAEC,KAAK,GAAG,CAAC,CAAC;IACpD,IAAIF,IAAI,IAAI,IAAI,EAAE;MAChBF,WAAW,CAACE,IAAI,CAAC;AACnB,IAAA;EACF,CAAC;EAEDG,SAAS,GAAIC,KAA4C,IAAI;IAC3D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CD,KAAK,CAACE,cAAc,EAAE;AACtB,MAAA,IAAI,CAACX,cAAc,CAACM,OAAO,EAAEM,KAAK,EAAE;AACtC,IAAA;EACF,CAAC;EAEDC,QAAQ,GAAGA,MAAK;IACd,MAAM;MAAEC,WAAW;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACX,KAAK;IAC3C,MAAM;AAAEY,MAAAA;KAAc,GAAG,IAAI,CAACZ,KAAK;AAEnC,IAAA,IAAIY,YAAY,EAAE;AAChB,MAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACG,kBAAU,EAAA;UAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;UAACC,SAAS,EAAEC,mBAAS,CAACC,QAAS;AAACC,UAAAA,SAAS,EAAE;SAAK;AAC/E,OAAK,CAAC;AAEV,IAAA;IAEA,IAAI,CAACb,WAAW,EAAE;AAChB,MAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACW,YAAU,EAAA;AAACP,UAAAA,IAAI,EAAE;SAAG;AACvB,OAAK,CAAC;AAEV,IAAA;AAEA,IAAA,IAAI,OAAOP,WAAW,KAAK,QAAQ,EAAE;AACnC,MAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAKY,QAAAA,GAAG,EAAEf,WAAY;AAACgB,QAAAA,GAAG,EAAEf,OAAQ;AAACG,QAAAA,SAAS,EAAC;AAA0B,QAAG;AACrF,IAAA;AAEA,IAAA,OAAOJ,WAAW;EACpB,CAAC;AAEDiB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJf,YAAY;MACZgB,UAAU;MACVC,cAAc;MACdC,QAAQ;MACRC,YAAY;MACZC,UAAU;MACVrB,OAAO;AACPsB,MAAAA;KACD,GAAG,IAAI,CAACjC,KAAK;AAEd,IAAA,oBACEa,cAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,wBAAwB;AAAC,MAAA,aAAA,EAAac,UAAW;AAAAb,MAAAA,QAAA,eAC9DmB,eAAA,CAAA,KAAA,EAAA;AAAKpB,QAAAA,SAAS,EAAC,wBAAwB;AAAAC,QAAAA,QAAA,gBACrCF,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAAE,IAAI,CAACN,QAAQ;AAAE,SAAM,CAC7C,EAACE,OAAO,iBAAIE,cAAA,CAAA,IAAA,EAAA;AAAIC,UAAAA,SAAS,EAAC,~~0BAA0B~~;AAAAC,UAAAA,QAAA,EAAEJ;AAAO,SAAK,CAAC,~~EAClEsB~~,aAAa,iBAAIpB,cAAA,CAAA,GAAA,EAAA;AAAGC,UAAAA,SAAS,EAAC,~~0BAA0B~~;UAAAC,QAAA,EAAEoB,MAAM,CAACF,aAAa;SAAK,CAAC,~~eACrFC~~,eAAA,CAAA,OAAA,EAAA;AACEpB,UAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BkB,UAAU,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACpEI,UAAAA,IAAI,EAAC,QAAQ;AACb,UAAA,eAAA,EAAeJ,UAAW;AAC1BK,UAAAA,QAAQ,EAAE,CAAE;UACZjC,SAAS,EAAE,IAAI,CAACA,SAAU;UAAAW,QAAA,EAAA,CAEzBgB,YAAY,gBACXlB,cAAA,CAAA,MAAA,EAAA;AAAAE,YAAAA,QAAA,EAAOgB;AAAY,WAAO,CAAC,gBAE3BlB,cAAA,CAACW,YAAU,EAAA;AAACP,YAAAA,IAAI,EAAE,EAAG;AAACH,YAAAA,SAAS,EAAC;WAAO,CACxC,eACDD,cAAA,CAAA,OAAA,EAAA;YACEyB,GAAG,EAAE,IAAI,CAAC1C,cAAe;AACzB2C,YAAAA,IAAI,EAAC,MAAM;AACXC,YAAAA,MAAM,EAAEV,QAAQ,KAAK,GAAG,GAAGW,SAAS,GAAGX,QAAS;AAChDhB,YAAAA,SAAS,EAAC,2BAA2B;AACrC4B,YAAAA,QAAQ,EAAEV,UAAW;AACrBW,YAAAA,IAAI,EAAC,aAAa;AAClBC,YAAAA,QAAQ,EAAEA,MAAM,IAAI,CAAC9C,cAAc;AAAG,WAAA,CAE1C;AAAA,SAAO,CACP,EAACc,YAAY,iBACXC,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,sBAAsB;AAAAC,UAAAA,QAAA,eACnCF,cAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,iBAAiB;YAAAC,QAAA,eAC9BF,cAAA,CAACgC,yBAAY,EAAA;cACXzB,SAAS,EAAEC,mBAAS,CAACC,QAAS;AAC9BwB,cAAAA,UAAU,EAAEjB,cAAe;AAC3BkB,cAAAA,KAAK,EAAC,MAAM;AAAAhC,cAAAA,QAAA,EAEXH;aACW;WACX;AACP,SAAK,CACN;OACE;AACP,KAAK,CAAC;AAEV,EAAA;AACD;;"}
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=\"wds-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"wds-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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"}

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

@@ -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: "wds-text-title-body m-b-1",
           children: usLabel
         }), usPlaceholder && /*#__PURE__*/jsx("p", {
-          className: "np-text-body-large m-b-3",
+          className: "wds-text-body-large m-b-3",
           children: String(usPlaceholder)
         }), /*#__PURE__*/jsxs("label", {
           className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,