@transferwise/components 0.0.0-experimental-44efb60 → 0.0.0-experimental-95044f9

package/build/index.js

@@ -2268,10 +2268,9 @@ const InputInvalidProvider = InputInvalidContext.Provider;
 function useInputAttributes({
   nonLabelable
 } = {}) {
-  const id = React.useContext(InputIdContext);
   const labelId = React.useContext(FieldLabelIdContext);
   return {
-    id: !nonLabelable ? id : undefined,
+    id: React.useContext(InputIdContext),
     'aria-labelledby': nonLabelable ? labelId : undefined,
     'aria-describedby': React.useContext(InputDescribedByContext),
     'aria-invalid': React.useContext(InputInvalidContext)
@@ -4866,6 +4865,7 @@ const Emphasis = ({
   }) : null;
 };
 
+const iconTypes = new Set([exports.Sentiment.NEGATIVE, exports.Sentiment.ERROR, exports.Sentiment.POSITIVE, exports.Sentiment.SUCCESS, exports.Sentiment.WARNING]);
 function InlineAlert({
   id,
   type = 'neutral',
@@ -4876,7 +4876,7 @@ function InlineAlert({
     role: "alert",
     id: id,
     className: classNames__default.default('alert alert-detach', `alert-${type === exports.Sentiment.NEGATIVE || type === exports.Sentiment.ERROR ? 'danger' : type}`, className),
-    children: [type !== exports.Sentiment.NEUTRAL && type !== exports.Sentiment.PENDING && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+    children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
       sentiment: type,
       size: exports.Size.SMALL
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -4886,6 +4886,20 @@ function InlineAlert({
   });
 }
 
+const Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
 const Field = ({
   id,
   label,
@@ -4917,12 +4931,11 @@ const Field = ({
               'has-error': hasError,
               'has-info': sentiment === exports.Sentiment.NEUTRAL
             }, className),
-            children: [label ? /*#__PURE__*/jsxRuntime.jsx("label", {
+            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
-              className: "control-label",
-              children: label
-            }) : null, children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              children: [label, children]
+            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
               type: sentiment,
               id: descriptionId,
               children: message
@@ -7146,20 +7159,6 @@ function Instruction({
   });
 }
 
-const Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
 const ListItem = ({
   media,
   action,
@@ -9717,9 +9716,6 @@ const SegmentedControl = ({
   segments,
   onChange
 }) => {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
   const [animate, setAnimate] = React.useState(false);
   const segmentsRef = React.useRef(null);
   if (segments.length > 3) {
@@ -9765,8 +9761,7 @@ const SegmentedControl = ({
       className: classNames__default.default('segmented-control__segments', {
         'segmented-control__segments--no-animate': !animate
       }),
-      role: mode !== 'input' ? 'tablist' : 'group',
-      ...inputAttributes,
+      role: mode !== 'input' ? 'tablist' : undefined,
       children: segmentsWithRefs.map(segment => {
         const onSelect = () => {
           setAnimate(true);
@@ -10921,19 +10916,18 @@ Tab.propTypes = {
   focusTab: PropTypes__default.default.func
 };
 
-function TabList({
+const TabList = ({
   children
-}) {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
+}) => {
   return /*#__PURE__*/jsxRuntime.jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
-    ...inputAttributes,
     children: children
   });
-}
+};
+TabList.propTypes = {
+  children: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.array]).isRequired
+};
 
 const TabPanel = ({
   children,