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

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)
@@ -4837,6 +4836,7 @@ const Emphasis = ({
   }) : null;
 };
 
+const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
 function InlineAlert({
   id,
   type = 'neutral',
@@ -4847,7 +4847,7 @@ function InlineAlert({
     role: "alert",
     id: id,
     className: classNames('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
-    children: [type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && /*#__PURE__*/jsx(StatusIcon, {
+    children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
       sentiment: type,
       size: Size.SMALL
     }), /*#__PURE__*/jsx("div", {
@@ -4857,6 +4857,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 +4902,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 +7130,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 +9687,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 +9732,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 +10887,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,