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

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)
@@ -4886,6 +4885,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 +4930,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 +7158,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 +9715,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 +9760,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 +10915,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,