@transferwise/components 0.0.0-experimental-d391f4a → 0.0.0-experimental-dbf97a7

package/build/index.mjs

@@ -2239,10 +2239,9 @@ const InputInvalidProvider = InputInvalidContext.Provider;
 function useInputAttributes({
   nonLabelable
 } = {}) {
-  const id = useContext(InputIdContext);
   const labelId = useContext(FieldLabelIdContext);
   return {
-    id: !nonLabelable ? id : undefined,
+    id: useContext(InputIdContext),
     'aria-labelledby': nonLabelable ? labelId : undefined,
     'aria-describedby': useContext(InputDescribedByContext),
     'aria-invalid': useContext(InputInvalidContext)
@@ -4857,6 +4856,20 @@ function InlineAlert({
   });
 }
 
+const Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
 const Field = ({
   id,
   label,
@@ -4888,12 +4901,11 @@ const Field = ({
               'has-error': hasError,
               'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
-            children: [label ? /*#__PURE__*/jsx("label", {
+            children: [label != null ? /*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
-              className: "control-label",
-              children: label
-            }) : null, children, message && /*#__PURE__*/jsx(InlineAlert, {
+              children: [label, children]
+            }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
               id: descriptionId,
               children: message
@@ -7117,20 +7129,6 @@ function Instruction({
   });
 }
 
-const Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
 const ListItem = ({
   media,
   action,
@@ -9688,9 +9686,6 @@ const SegmentedControl = ({
   segments,
   onChange
 }) => {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
   const [animate, setAnimate] = useState(false);
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
@@ -9736,8 +9731,7 @@ const SegmentedControl = ({
       className: classNames('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);
@@ -10892,19 +10886,18 @@ Tab.propTypes = {
   focusTab: PropTypes.func
 };
 
-function TabList({
+const TabList = ({
   children
-}) {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
+}) => {
   return /*#__PURE__*/jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
-    ...inputAttributes,
     children: children
   });
-}
+};
+TabList.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+};
 
 const TabPanel = ({
   children,