@transferwise/components 46.64.0 → 46.66.0

package/build/flowNavigation/animatedLabel/AnimatedLabel.js

@@ -1,27 +1,101 @@
 'use strict';
 
 var clsx = require('clsx');
-require('react');
-var Body = require('../../body/Body.js');
+var React = require('react');
+var BottomSheet = require('../../common/bottomSheet/BottomSheet.js');
+var Option = require('../../common/Option/Option.js');
+var icons = require('@transferwise/icons');
+var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
+var List = require('../../listItem/List.js');
+require('../../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
-var typography = require('../../common/propsValues/typography.js');
 
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  steps
 }) => {
-  return /*#__PURE__*/jsxRuntime.jsx(Body, {
-    type: typography.Typography.BODY_LARGE_BOLD,
-    className: clsx.clsx('np-animated-label', className),
-    children: labels.map((label, index) => {
-      const nextLabel = index - 1;
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: clsx.clsx('text-xs-center', {
-          'np-animated-label--in text-ellipsis': index === activeLabel
-        }),
-        children: label
-      }, nextLabel);
+  const labelId = React.useId();
+  const [showSteps, setShowSteps] = React.useState(false);
+  function handleStepAction(onClick) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayIdProvider.OverlayIdProvider, {
+    open: showSteps,
+    children: /*#__PURE__*/jsxRuntime.jsx(OverlayIdProvider.OverlayIdContext.Consumer, {
+      children: overlayId => {
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            id: labelId,
+            "aria-haspopup": "menu",
+            "aria-controls": overlayId,
+            "aria-expanded": showSteps,
+            className: clsx.clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
+            onClick: () => setShowSteps(true),
+            children: steps.map(({
+              label
+            }, index) => {
+              const isCurrentStep = activeLabel === index;
+              const previousIndex = index - 1;
+              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                "aria-hidden": !isCurrentStep,
+                className: clsx.clsx('text-xs-center', 'd-inline-flex', {
+                  'np-animated-label--active text-ellipsis': isCurrentStep
+                }),
+                children: [label, " ", /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+                  className: "m-l-1",
+                  size: 24
+                })]
+              }, previousIndex);
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(BottomSheet, {
+            role: "menu",
+            "aria-labelledby": labelId,
+            open: showSteps,
+            onClose: () => setShowSteps(false),
+            children: /*#__PURE__*/jsxRuntime.jsx(List.List, {
+              className: "m-b-0 p-a-1",
+              children: steps.map((step, index) => {
+                const isCurrentStep = activeLabel === index;
+                const isDisabled = activeLabel < index;
+                const itemId = `step-${index}`;
+                return /*#__PURE__*/jsxRuntime.jsx(Option, {
+                  id: itemId,
+                  as: "li",
+                  role: "menuitem",
+                  decision: false,
+                  className: clsx.clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
+                    clickable: !isDisabled
+                  }),
+                  title: step.label,
+                  content: step.hoverLabel,
+                  button: isCurrentStep ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+                    size: 24
+                  }) : null,
+                  "aria-current": isCurrentStep ? 'step' : false,
+                  "aria-disabled": isDisabled,
+                  disabled: isDisabled,
+                  isContainerAligned: true,
+                  ...(!isDisabled && {
+                    tabIndex: 0,
+                    onClick: handleStepAction(step.onClick),
+                    onKeyDown: event => {
+                      event.preventDefault();
+                      if (event.code === 'Enter' || event.code === 'Space') {
+                        handleStepAction(step.onClick)();
+                      }
+                    }
+                  })
+                }, itemId);
+              })
+            })
+          })]
+        });
+      }
     })
   });
 };

package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  labels: readonly React.ReactNode[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {\n  return (\n    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>\n      {labels.map((label, index) => {\n        const nextLabel = index - 1;\n        return (\n          <div\n            key={nextLabel}\n            className={clsx('text-xs-center', {\n              'np-animated-label--in text-ellipsis': index === activeLabel,\n            })}\n          >\n            {label}\n          </div>\n        );\n      })}\n    </Body>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","labels","_jsx","Body","type","Typography","BODY_LARGE_BOLD","clsx","children","map","label","index","nextLabel"],"mappings":";;;;;;;;AAYMA,MAAAA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA,MAAAA;AAA4B,CAAA,KAAI;EAC/E,oBACEC,cAAA,CAACC,IAAI,EAAA;IAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAAC,mBAAmB,EAAEP,SAAS,CAAE;IAAAQ,QAAA,EACrFP,MAAM,CAACQ,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAI;AAC3B,MAAA,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAAC,CAAA;AAC3B,MAAA,oBACET,cAAA,CAAA,KAAA,EAAA;AAEEF,QAAAA,SAAS,EAAEO,SAAI,CAAC,gBAAgB,EAAE;UAChC,qCAAqC,EAAEI,KAAK,KAAKZ,WAAAA;AAClD,SAAA,CAAE;AAAAS,QAAAA,QAAA,EAEFE,KAAAA;AAAK,OAAA,EALDE,SAMF,CAAC,CAAA;KAET,CAAA;AAAC,GACE,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../listItem';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown className=\"m-l-1\" size={24} />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","size","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs

@@ -1,25 +1,99 @@
 import { clsx } from 'clsx';
-import 'react';
-import Body from '../../body/Body.mjs';
-import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../../common/propsValues/typography.mjs';
+import { useId, useState } from 'react';
+import BottomSheet from '../../common/bottomSheet/BottomSheet.mjs';
+import Option from '../../common/Option/Option.mjs';
+import { ChevronDown, Check } from '@transferwise/icons';
+import { OverlayIdProvider, OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
+import { List } from '../../listItem/List.mjs';
+import '../../body/Body.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  steps
 }) => {
-  return /*#__PURE__*/jsx(Body, {
-    type: Typography.BODY_LARGE_BOLD,
-    className: clsx('np-animated-label', className),
-    children: labels.map((label, index) => {
-      const nextLabel = index - 1;
-      return /*#__PURE__*/jsx("div", {
-        className: clsx('text-xs-center', {
-          'np-animated-label--in text-ellipsis': index === activeLabel
-        }),
-        children: label
-      }, nextLabel);
+  const labelId = useId();
+  const [showSteps, setShowSteps] = useState(false);
+  function handleStepAction(onClick) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
+  return /*#__PURE__*/jsx(OverlayIdProvider, {
+    open: showSteps,
+    children: /*#__PURE__*/jsx(OverlayIdContext.Consumer, {
+      children: overlayId => {
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("button", {
+            type: "button",
+            id: labelId,
+            "aria-haspopup": "menu",
+            "aria-controls": overlayId,
+            "aria-expanded": showSteps,
+            className: clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
+            onClick: () => setShowSteps(true),
+            children: steps.map(({
+              label
+            }, index) => {
+              const isCurrentStep = activeLabel === index;
+              const previousIndex = index - 1;
+              return /*#__PURE__*/jsxs("div", {
+                "aria-hidden": !isCurrentStep,
+                className: clsx('text-xs-center', 'd-inline-flex', {
+                  'np-animated-label--active text-ellipsis': isCurrentStep
+                }),
+                children: [label, " ", /*#__PURE__*/jsx(ChevronDown, {
+                  className: "m-l-1",
+                  size: 24
+                })]
+              }, previousIndex);
+            })
+          }), /*#__PURE__*/jsx(BottomSheet, {
+            role: "menu",
+            "aria-labelledby": labelId,
+            open: showSteps,
+            onClose: () => setShowSteps(false),
+            children: /*#__PURE__*/jsx(List, {
+              className: "m-b-0 p-a-1",
+              children: steps.map((step, index) => {
+                const isCurrentStep = activeLabel === index;
+                const isDisabled = activeLabel < index;
+                const itemId = `step-${index}`;
+                return /*#__PURE__*/jsx(Option, {
+                  id: itemId,
+                  as: "li",
+                  role: "menuitem",
+                  decision: false,
+                  className: clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
+                    clickable: !isDisabled
+                  }),
+                  title: step.label,
+                  content: step.hoverLabel,
+                  button: isCurrentStep ? /*#__PURE__*/jsx(Check, {
+                    size: 24
+                  }) : null,
+                  "aria-current": isCurrentStep ? 'step' : false,
+                  "aria-disabled": isDisabled,
+                  disabled: isDisabled,
+                  isContainerAligned: true,
+                  ...(!isDisabled && {
+                    tabIndex: 0,
+                    onClick: handleStepAction(step.onClick),
+                    onKeyDown: event => {
+                      event.preventDefault();
+                      if (event.code === 'Enter' || event.code === 'Space') {
+                        handleStepAction(step.onClick)();
+                      }
+                    }
+                  })
+                }, itemId);
+              })
+            })
+          })]
+        });
+      }
     })
   });
 };

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  labels: readonly React.ReactNode[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {\n  return (\n    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>\n      {labels.map((label, index) => {\n        const nextLabel = index - 1;\n        return (\n          <div\n            key={nextLabel}\n            className={clsx('text-xs-center', {\n              'np-animated-label--in text-ellipsis': index === activeLabel,\n            })}\n          >\n            {label}\n          </div>\n        );\n      })}\n    </Body>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","labels","_jsx","Body","type","Typography","BODY_LARGE_BOLD","clsx","children","map","label","index","nextLabel"],"mappings":";;;;;;AAYMA,MAAAA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA,MAAAA;AAA4B,CAAA,KAAI;EAC/E,oBACEC,GAAA,CAACC,IAAI,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAAC,mBAAmB,EAAEP,SAAS,CAAE;IAAAQ,QAAA,EACrFP,MAAM,CAACQ,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAI;AAC3B,MAAA,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAAC,CAAA;AAC3B,MAAA,oBACET,GAAA,CAAA,KAAA,EAAA;AAEEF,QAAAA,SAAS,EAAEO,IAAI,CAAC,gBAAgB,EAAE;UAChC,qCAAqC,EAAEI,KAAK,KAAKZ,WAAAA;AAClD,SAAA,CAAE;AAAAS,QAAAA,QAAA,EAEFE,KAAAA;AAAK,OAAA,EALDE,SAMF,CAAC,CAAA;KAET,CAAA;AAAC,GACE,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../listItem';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown className=\"m-l-1\" size={24} />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","size","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/main.css

@@ -2098,7 +2098,7 @@ button.np-option {
   transform: translateX(-8px);
   transition: all 0.15s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -2106,6 +2106,15 @@ button.np-option {
   transform: translateX(0);
   transition: all 0.15s ease-in 0.15s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-back-button {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -11,7 +11,7 @@
   transform: translateX(-8px);
   transition: all 0.3s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -19,3 +19,12 @@
   transform: translateX(0);
   transition: all 0.3s ease-in 0.3s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}

package/build/styles/main.css

@@ -2098,7 +2098,7 @@ button.np-option {
   transform: translateX(-8px);
   transition: all 0.15s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -2106,6 +2106,15 @@ button.np-option {
   transform: translateX(0);
   transition: all 0.15s ease-in 0.15s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-back-button {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/build/switch/Switch.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var icons = require('@transferwise/icons');
-var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var contexts = require('../inputs/contexts.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,9 +8,6 @@ const Switch = props => {
   const inputAttributes = contexts.useInputAttributes({
     nonLabelable: true
   });
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const {
     checked,
     className,
@@ -28,27 +23,6 @@ const Switch = props => {
       onClick();
     }
   };
-  const returnIcon = () => {
-    if (isModern) {
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "np-switch--thumb"
-      });
-    }
-    if (checked) {
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "np-switch--thumb",
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
-          size: 24
-        })
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "np-switch--thumb",
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
-        size: 24
-      })
-    });
-  };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: clsx.clsx('np-switch', {
@@ -66,7 +40,9 @@ const Switch = props => {
     "aria-disabled": disabled,
     onClick: !disabled ? onClick : undefined,
     onKeyDown: !disabled ? handleKeyDown : undefined,
-    children: [returnIcon(), /*#__PURE__*/jsxRuntime.jsx("input", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "np-switch--thumb"
+    }), /*#__PURE__*/jsxRuntime.jsx("input", {
       type: "checkbox",
       checked: checked,
       readOnly: true

package/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const { isModern } = useTheme();\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const returnIcon = () => {\n    if (isModern) {\n      return <span className=\"np-switch--thumb\" />;\n    }\n\n    if (checked) {\n      return (\n        <span className=\"np-switch--thumb\">\n          <CheckCircleFill size={24} />\n        </span>\n      );\n    }\n    return (\n      <span className=\"np-switch--thumb\">\n        <CrossCircleFill size={24} />\n      </span>\n    );\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      {returnIcon()}\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","isModern","useTheme","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","returnIcon","_jsx","children","CheckCircleFill","size","CrossCircleFill","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","type","readOnly"],"mappings":";;;;;;;;AAyBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;EAC/B,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGP,eAAe,CAACO,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGZ,KAAK,CAAA;EAET,MAAMa,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;EAED,MAAMM,UAAU,GAAGA,MAAK;AACtB,IAAA,IAAIb,QAAQ,EAAE;AACZ,MAAA,oBAAOc,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAA;AAAkB,QAAG,CAAA;AAC9C,KAAA;AAEA,IAAA,IAAID,OAAO,EAAE;AACX,MAAA,oBACEY,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAkB;QAAAY,QAAA,eAChCD,cAAA,CAACE,qBAAe,EAAA;AAACC,UAAAA,IAAI,EAAE,EAAA;SACzB,CAAA;AAAA,OAAM,CAAC,CAAA;AAEX,KAAA;AACA,IAAA,oBACEH,cAAA,CAAA,MAAA,EAAA;AAAMX,MAAAA,SAAS,EAAC,kBAAkB;MAAAY,QAAA,eAChCD,cAAA,CAACI,qBAAe,EAAA;AAACD,QAAAA,IAAI,EAAE,EAAA;OACzB,CAAA;AAAA,KAAM,CAAC,CAAA;GAEV,CAAA;AAED,EAAA,MAAME,cAAc,GAClB,CAACd,SAAS,GAAGe,SAAS,GAAGd,kBAAkB,KAAKT,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEwB,eAAA,CAAA,MAAA,EAAA;AACElB,IAAAA,SAAS,EAAEmB,SAAI,CACb,WAAW,EAEX;MACE,sBAAsB,EAAE,CAACpB,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFoB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAActB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBR,eAAe;AACnB,IAAA,iBAAA,EAAiBsB,cAAe;AAChCf,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGa,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACjB,QAAQ,GAAGC,aAAa,GAAGW,SAAU;AAAAL,IAAAA,QAAA,EAEhDF,CAAAA,UAAU,EAAE,eACbC,cAAA,CAAA,OAAA,EAAA;AAAOY,MAAAA,IAAI,EAAC,UAAU;AAACxB,MAAAA,OAAO,EAAEA,OAAQ;MAACyB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/switch/Switch.mjs

@@ -1,5 +1,3 @@
-import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -8,9 +6,6 @@ const Switch = props => {
   const inputAttributes = useInputAttributes({
     nonLabelable: true
   });
-  const {
-    isModern
-  } = useTheme();
   const {
     checked,
     className,
@@ -26,27 +21,6 @@ const Switch = props => {
       onClick();
     }
   };
-  const returnIcon = () => {
-    if (isModern) {
-      return /*#__PURE__*/jsx("span", {
-        className: "np-switch--thumb"
-      });
-    }
-    if (checked) {
-      return /*#__PURE__*/jsx("span", {
-        className: "np-switch--thumb",
-        children: /*#__PURE__*/jsx(CheckCircleFill, {
-          size: 24
-        })
-      });
-    }
-    return /*#__PURE__*/jsx("span", {
-      className: "np-switch--thumb",
-      children: /*#__PURE__*/jsx(CrossCircleFill, {
-        size: 24
-      })
-    });
-  };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
   return /*#__PURE__*/jsxs("span", {
     className: clsx('np-switch', {
@@ -64,7 +38,9 @@ const Switch = props => {
     "aria-disabled": disabled,
     onClick: !disabled ? onClick : undefined,
     onKeyDown: !disabled ? handleKeyDown : undefined,
-    children: [returnIcon(), /*#__PURE__*/jsx("input", {
+    children: [/*#__PURE__*/jsx("span", {
+      className: "np-switch--thumb"
+    }), /*#__PURE__*/jsx("input", {
       type: "checkbox",
       checked: checked,
       readOnly: true

package/build/switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const { isModern } = useTheme();\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const returnIcon = () => {\n    if (isModern) {\n      return <span className=\"np-switch--thumb\" />;\n    }\n\n    if (checked) {\n      return (\n        <span className=\"np-switch--thumb\">\n          <CheckCircleFill size={24} />\n        </span>\n      );\n    }\n    return (\n      <span className=\"np-switch--thumb\">\n        <CrossCircleFill size={24} />\n      </span>\n    );\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      {returnIcon()}\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","isModern","useTheme","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","returnIcon","_jsx","children","CheckCircleFill","size","CrossCircleFill","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","type","readOnly"],"mappings":";;;;;;AAyBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGP,eAAe,CAACO,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGZ,KAAK,CAAA;EAET,MAAMa,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;EAED,MAAMM,UAAU,GAAGA,MAAK;AACtB,IAAA,IAAIb,QAAQ,EAAE;AACZ,MAAA,oBAAOc,GAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAA;AAAkB,QAAG,CAAA;AAC9C,KAAA;AAEA,IAAA,IAAID,OAAO,EAAE;AACX,MAAA,oBACEY,GAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAkB;QAAAY,QAAA,eAChCD,GAAA,CAACE,eAAe,EAAA;AAACC,UAAAA,IAAI,EAAE,EAAA;SACzB,CAAA;AAAA,OAAM,CAAC,CAAA;AAEX,KAAA;AACA,IAAA,oBACEH,GAAA,CAAA,MAAA,EAAA;AAAMX,MAAAA,SAAS,EAAC,kBAAkB;MAAAY,QAAA,eAChCD,GAAA,CAACI,eAAe,EAAA;AAACD,QAAAA,IAAI,EAAE,EAAA;OACzB,CAAA;AAAA,KAAM,CAAC,CAAA;GAEV,CAAA;AAED,EAAA,MAAME,cAAc,GAClB,CAACd,SAAS,GAAGe,SAAS,GAAGd,kBAAkB,KAAKT,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEwB,IAAA,CAAA,MAAA,EAAA;AACElB,IAAAA,SAAS,EAAEmB,IAAI,CACb,WAAW,EAEX;MACE,sBAAsB,EAAE,CAACpB,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFoB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAActB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBR,eAAe;AACnB,IAAA,iBAAA,EAAiBsB,cAAe;AAChCf,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGa,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACjB,QAAQ,GAAGC,aAAa,GAAGW,SAAU;AAAAL,IAAAA,QAAA,EAEhDF,CAAAA,UAAU,EAAE,eACbC,GAAA,CAAA,OAAA,EAAA;AAAOY,MAAAA,IAAI,EAAC,UAAU;AAACxB,MAAAA,OAAO,EAAEA,OAAQ;MAACyB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/tile/Tile.js

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
 function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -26,6 +27,7 @@ function Tile({
     }, disabled && 'disabled'),
     href: href,
     target: target,
+    "aria-label": ariaLabel,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : ({
       key

package/build/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;;;AAsBc,SAAUA,IAAIA,CAAC;EAC3BC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,eAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,SAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,cAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,cAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,SAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,cAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Tile.js","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  'aria-label': ariaLabel,\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      aria-label={ariaLabel}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","ariaLabel","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;;;AAwBwB,SAAAA,IAAIA,CAAC;AAC3B,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,eAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,SAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACf,IAAA,YAAA,EAAYL,SAAU;AACtBO,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,cAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,cAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,SAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,cAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}

package/build/tile/Tile.mjs

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../common/propsValues/typography.mjs';
 
 function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -24,6 +25,7 @@ function Tile({
     }, disabled && 'disabled'),
     href: href,
     target: target,
+    "aria-label": ariaLabel,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : ({
       key

package/build/tile/Tile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.mjs","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;AAsBc,SAAUA,IAAIA,CAAC;EAC3BC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,IAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,IAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,GAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,GAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,IAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,GAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,UAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Tile.mjs","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  'aria-label': ariaLabel,\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      aria-label={ariaLabel}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","ariaLabel","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;AAwBwB,SAAAA,IAAIA,CAAC;AAC3B,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,IAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,IAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACf,IAAA,YAAA,EAAYL,SAAU;AACtBO,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,GAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,GAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,IAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,GAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,UAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}

package/build/types/common/bottomSheet/BottomSheet.d.ts

@@ -1,15 +1,15 @@
-import { PropsWithChildren, SyntheticEvent } from 'react';
+import { HTMLAttributes, PropsWithChildren, SyntheticEvent } from 'react';
 import { CommonProps } from '../commonProps';
 export type BottomSheetProps = PropsWithChildren<{
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
-} & CommonProps>;
+} & CommonProps & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>>;
 /**
  * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
  *
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-declare const BottomSheet: (props: BottomSheetProps) => import("react").JSX.Element;
+declare const BottomSheet: ({ role, ...props }: BottomSheetProps) => import("react").JSX.Element;
 export default BottomSheet;
 //# sourceMappingURL=BottomSheet.d.ts.map