@transferwise/components 46.165.5 → 46.166.0

package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs

@@ -12,7 +12,7 @@ function SelectInputOptionContent({
 }) {
   const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxs("div", {
-    className: clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large', className),
+    className: clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large wds-text-body-large', className),
     children: [icon ? /*#__PURE__*/jsx("div", {
       className: clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
@@ -24,11 +24,11 @@ function SelectInputOptionContent({
           className: "d-inline np-select-input-option-content-title",
           children: title
         }), note ? /*#__PURE__*/jsx("span", {
-          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          className: "np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default",
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsx("div", {
-        className: clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
+        className: clsx('np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
         children: description
       }) : null]
     })]

package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputOptionContent.mjs","sources":["../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';\n\nexport interface SelectInputOptionContentProps {\n  title: React.ReactNode;\n  note?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Component for rendering structured content within a SelectInput option.\n * Supports title, optional note, description, and icon with different styling\n * based on whether it's rendered within the trigger button or the dropdown.\n */\nexport function SelectInputOptionContent({\n  title,\n  note,\n  description,\n  icon,\n  className,\n}: SelectInputOptionContentProps) {\n  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);\n\n  return (\n    <div\n      className={clsx(\n        'np-select-input-option-content-container',\n        (note || description) && 'np-text-body-large',\n        className,\n      )}\n    >\n      {icon ? (\n        <div\n          className={clsx(\n            'np-select-input-option-content-icon',\n            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n\n      <div className=\"np-select-input-option-content-text\">\n        <div\n          className={clsx(\n            'np-select-input-option-content-text-line-1',\n            withinTrigger && 'np-select-input-option-content-text-within-trigger',\n          )}\n        >\n          <div className=\"d-inline np-select-input-option-content-title\">{title}</div>\n          {note ? (\n            <span className=\"np-select-input-option-content-text-secondary np-text-body-default\">\n              {note}\n            </span>\n          ) : null}\n        </div>\n\n        {description ? (\n          <div\n            className={clsx(\n              'np-select-input-option-content-text-secondary np-text-body-default',\n              withinTrigger &&\n                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',\n            )}\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectInputOptionContent","title","note","description","icon","className","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","clsx","children","_jsx"],"mappings":";;;;;AAiBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;EACXC,IAAI;AACJC,EAAAA;AAAS,CACqB,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,4CAA4C,CAAC;AAE9E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,oBAAoB,EAC7CE,SAAS,CACT;IAAAM,QAAA,EAAA,CAEDP,IAAI,gBACHQ,GAAA,CAAA,KAAA,EAAA;MACEP,SAAS,EAAEK,IAAI,CACb,qCAAqC,EACrC,CAACJ,aAAa,IAAI,yDAAyD,CAC3E;AAAAK,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERK,IAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,qCAAqC;AAAAM,MAAAA,QAAA,gBAClDF,IAAA,CAAA,KAAA,EAAA;QACEJ,SAAS,EAAEK,IAAI,CACb,4CAA4C,EAC5CJ,aAAa,IAAI,oDAAoD,CACrE;AAAAK,QAAAA,QAAA,gBAEFC,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,+CAA+C;AAAAM,UAAAA,QAAA,EAAEV;AAAK,SAAM,CAC3E,EAACC,IAAI,gBACHU,GAAA,CAAA,MAAA,EAAA;AAAMP,UAAAA,SAAS,EAAC,oEAAoE;AAAAM,UAAAA,QAAA,EACjFT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,GAAA,CAAA,KAAA,EAAA;QACEP,SAAS,EAAEK,IAAI,CACb,oEAAoE,EACpEJ,aAAa,IACX,kGAAkG,CACpG;AAAAK,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;"}
+{"version":3,"file":"SelectInputOptionContent.mjs","sources":["../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';\n\nexport interface SelectInputOptionContentProps {\n  title: React.ReactNode;\n  note?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Component for rendering structured content within a SelectInput option.\n * Supports title, optional note, description, and icon with different styling\n * based on whether it's rendered within the trigger button or the dropdown.\n */\nexport function SelectInputOptionContent({\n  title,\n  note,\n  description,\n  icon,\n  className,\n}: SelectInputOptionContentProps) {\n  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);\n\n  return (\n    <div\n      className={clsx(\n        'np-select-input-option-content-container',\n        (note || description) && 'np-text-body-large wds-text-body-large',\n        className,\n      )}\n    >\n      {icon ? (\n        <div\n          className={clsx(\n            'np-select-input-option-content-icon',\n            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n\n      <div className=\"np-select-input-option-content-text\">\n        <div\n          className={clsx(\n            'np-select-input-option-content-text-line-1',\n            withinTrigger && 'np-select-input-option-content-text-within-trigger',\n          )}\n        >\n          <div className=\"d-inline np-select-input-option-content-title\">{title}</div>\n          {note ? (\n            <span className=\"np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default\">\n              {note}\n            </span>\n          ) : null}\n        </div>\n\n        {description ? (\n          <div\n            className={clsx(\n              'np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default',\n              withinTrigger &&\n                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',\n            )}\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectInputOptionContent","title","note","description","icon","className","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","clsx","children","_jsx"],"mappings":";;;;;AAiBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;EACXC,IAAI;AACJC,EAAAA;AAAS,CACqB,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,4CAA4C,CAAC;AAE9E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,wCAAwC,EACjEE,SAAS,CACT;IAAAM,QAAA,EAAA,CAEDP,IAAI,gBACHQ,GAAA,CAAA,KAAA,EAAA;MACEP,SAAS,EAAEK,IAAI,CACb,qCAAqC,EACrC,CAACJ,aAAa,IAAI,yDAAyD,CAC3E;AAAAK,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERK,IAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,qCAAqC;AAAAM,MAAAA,QAAA,gBAClDF,IAAA,CAAA,KAAA,EAAA;QACEJ,SAAS,EAAEK,IAAI,CACb,4CAA4C,EAC5CJ,aAAa,IAAI,oDAAoD,CACrE;AAAAK,QAAAA,QAAA,gBAEFC,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,+CAA+C;AAAAM,UAAAA,QAAA,EAAEV;AAAK,SAAM,CAC3E,EAACC,IAAI,gBACHU,GAAA,CAAA,MAAA,EAAA;AAAMP,UAAAA,SAAS,EAAC,0FAA0F;AAAAM,UAAAA,QAAA,EACvGT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,GAAA,CAAA,KAAA,EAAA;QACEP,SAAS,EAAEK,IAAI,CACb,0FAA0F,EAC1FJ,aAAa,IACX,kGAAkG,CACpG;AAAAK,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;"}

package/build/Inputs/SelectInput/Popover/SelectInputPopover.js

@@ -95,10 +95,10 @@ function SelectInputPopover({
                     'np-popover-v2--padding-md': padding === 'md'
                   }),
                   children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                    className: "np-popover-v2-title np-text-title-body",
+                    className: "np-popover-v2-title np-text-title-body wds-text-title-body",
                     children: title
                   }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "np-popover-v2-content np-text-body-default",
+                    className: "np-popover-v2-content np-text-body-default wds-text-body-default",
                     children: children
                   })]
                 })

package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputPopover.js","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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"}
+{"version":3,"file":"SelectInputPopover.js","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 wds-text-title-body\">\n                        {title}\n                      </h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default wds-text-body-default\">\n                      {children}\n                    </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/Inputs/SelectInput/Popover/SelectInputPopover.mjs

@@ -93,10 +93,10 @@ function SelectInputPopover({
                     'np-popover-v2--padding-md': padding === 'md'
                   }),
                   children: [title ? /*#__PURE__*/jsx("h2", {
-                    className: "np-popover-v2-title np-text-title-body",
+                    className: "np-popover-v2-title np-text-title-body wds-text-title-body",
                     children: title
                   }) : null, /*#__PURE__*/jsx("div", {
-                    className: "np-popover-v2-content np-text-body-default",
+                    className: "np-popover-v2-content np-text-body-default wds-text-body-default",
                     children: children
                   })]
                 })

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

@@ -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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"}
+{"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 wds-text-title-body\">\n                        {title}\n                      </h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default wds-text-body-default\">\n                      {children}\n                    </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

@@ -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 np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.js.map

@@ -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;;"}
+{"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 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,qGAAqG,EACrGN,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

@@ -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 np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.mjs.map

@@ -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;;"}
+{"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 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,qGAAqG,EACrGN,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

@@ -73,7 +73,8 @@ const Stepper = ({
       type: "button",
       className: "btn-unstyled tw-stepper__step-label",
       onClick: () => clickable && step.onClick?.(),
-      children: /*#__PURE__*/jsxRuntime.jsx("small", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "wds-text-body-default",
         children: step.label
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -81,7 +82,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 ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default 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

@@ -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;;"}
+{"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        <span className=\"wds-text-body-default\">{step.label}</span>\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\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default 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

@@ -69,7 +69,8 @@ const Stepper = ({
       type: "button",
       className: "btn-unstyled tw-stepper__step-label",
       onClick: () => clickable && step.onClick?.(),
-      children: /*#__PURE__*/jsx("small", {
+      children: /*#__PURE__*/jsx("span", {
+        className: "wds-text-body-default",
         children: step.label
       })
     }) : /*#__PURE__*/jsx("span", {
@@ -77,7 +78,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 ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default 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

@@ -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":"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"}
+{"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        <span className=\"wds-text-body-default\">{step.label}</span>\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\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default 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

@@ -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 np-text-body-default-bold wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

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

@@ -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        &nbsp;\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;;"}
+{"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 wds-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\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,8EAA8E;AACxF,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

@@ -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 np-text-body-default-bold wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

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

@@ -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        &nbsp;\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;;"}
+{"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 wds-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\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,8EAA8E;AACxF,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

@@ -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 ? 'np-text-body-large-bold wds-text-body-large-bold' : 'np-text-body-large wds-text-body-large', {
       'tabs__tab--selected': selected,
       clickable: !disabled,
       disabled

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

@@ -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;;"}
+{"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(\n        'tabs__tab',\n        selected\n          ? 'np-text-body-large-bold wds-text-body-large-bold'\n          : 'np-text-body-large wds-text-body-large',\n        {\n          'tabs__tab--selected': selected,\n          clickable: !disabled,\n          disabled,\n        },\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,CACb,WAAW,EACXhB,QAAQ,GACJ,kDAAkD,GAClD,wCAAwC,EAC5C;AACE,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CACD;AACFoB,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

@@ -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 ? 'np-text-body-large-bold wds-text-body-large-bold' : 'np-text-body-large wds-text-body-large', {
       'tabs__tab--selected': selected,
       clickable: !disabled,
       disabled

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

@@ -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;;"}
+{"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(\n        'tabs__tab',\n        selected\n          ? 'np-text-body-large-bold wds-text-body-large-bold'\n          : 'np-text-body-large wds-text-body-large',\n        {\n          'tabs__tab--selected': selected,\n          clickable: !disabled,\n          disabled,\n        },\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,CACb,WAAW,EACXhB,QAAQ,GACJ,kDAAkD,GAClD,wCAAwC,EAC5C;AACE,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CACD;AACFoB,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

@@ -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}`, 'np-text-body-default-bold wds-text-body-default-bold', className),
       children: label
     })
   });

package/build/Tag/Tag.js.map

@@ -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;;"}
+{"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 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,sDAAsD,EACtDI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}

package/build/Tag/Tag.mjs

@@ -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}`, 'np-text-body-default-bold wds-text-body-default-bold', className),
       children: label
     })
   });

package/build/Tag/Tag.mjs.map

@@ -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;;"}
+{"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 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,sDAAsD,EACtDI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}

package/build/Title/Title.js

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