@codecademy/gamut 67.6.4-alpha.1643c9.0 → 67.6.4-alpha.1d4469.0

package/dist/ConnectedForm/ConnectedFormGroup.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { FormGroupProps, InfoTipProps } from '..';
+import { FormGroupProps } from '..';
+import { InfoTipPropsWithoutAria } from '../Tip/InfoTip/utils';
 import { ConnectedField, FieldProps, SubmitContextProps } from './types';
 export interface ConnectedFormGroupBaseProps extends Omit<FormGroupProps, 'label' | 'disabled' | 'description' | 'htmlFor'> {
     customError?: string;
@@ -9,11 +10,11 @@ export interface ConnectedFormGroupBaseProps extends Omit<FormGroupProps, 'label
     label: React.ReactNode;
     required?: boolean;
     /**
-     * InfoTip to display next to the field label. String labels automatically
-     * label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
-     * set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
+     * InfoTip to display next to the field label. The InfoTip button is
+     * automatically labelled by the field label. To override this behavior,
+     * provide `ariaLabel` or `ariaLabelledby`.
      */
-    infotip?: InfoTipProps;
+    infotip?: InfoTipPropsWithoutAria;
 }
 export interface ConnectedFormGroupProps<T extends ConnectedField> extends SubmitContextProps, ConnectedFormGroupBaseProps {
     /**

package/dist/ConnectedForm/ConnectedFormGroup.js

@@ -13,7 +13,7 @@ const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
   label: "ErrorAnchor"
 })(css({
   color: 'feedback-error'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JvQiIsImZpbGUiOiIuLi8uLi9zcmMvQ29ubmVjdGVkRm9ybS9Db25uZWN0ZWRGb3JtR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgRm9ybUVycm9yLFxuICBGb3JtR3JvdXAsXG4gIEZvcm1Hcm91cExhYmVsLFxuICBGb3JtR3JvdXBQcm9wcyxcbiAgSW5mb1RpcFByb3BzLFxufSBmcm9tICcuLic7XG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgSGlkZGVuVGV4dCB9IGZyb20gJy4uL0hpZGRlblRleHQnO1xuaW1wb3J0IHsgTWFya2Rvd24gfSBmcm9tICcuLi9NYXJrZG93bic7XG5pbXBvcnQgeyBDb25uZWN0ZWRGaWVsZCwgRmllbGRQcm9wcywgU3VibWl0Q29udGV4dFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRFcnJvck1lc3NhZ2UsIHVzZUZpZWxkIH0gZnJvbSAnLi91dGlscyc7XG5cbmNvbnN0IEVycm9yQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wc1xuICBleHRlbmRzIE9taXQ8XG4gICAgRm9ybUdyb3VwUHJvcHMsXG4gICAgJ2xhYmVsJyB8ICdkaXNhYmxlZCcgfCAnZGVzY3JpcHRpb24nIHwgJ2h0bWxGb3InXG4gID4ge1xuICBjdXN0b21FcnJvcj86IHN0cmluZztcbiAgZXJyb3JUeXBlPzogJ2luaXRpYWwnIHwgJ2Fic29sdXRlJztcbiAgaGlkZUxhYmVsPzogYm9vbGVhbjtcbiAgbmFtZTogc3RyaW5nO1xuICBsYWJlbDogUmVhY3QuUmVhY3ROb2RlO1xuICByZXF1aXJlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJbmZvVGlwIHRvIGRpc3BsYXkgbmV4dCB0byB0aGUgZmllbGQgbGFiZWwuIFN0cmluZyBsYWJlbHMgYXV0b21hdGljYWxseVxuICAgKiBsYWJlbCB0aGUgSW5mb1RpcCBidXR0b24uIEZvciBSZWFjdE5vZGUgbGFiZWxzLCBwcm92aWRlIGBhcmlhTGFiZWxgIG9yXG4gICAqIHNldCBgbGFiZWxsZWRCeUZpZWxkTGFiZWw6IHRydWVgIHRvIGVuc3VyZSB0aGUgSW5mb1RpcCBpcyBhY2Nlc3NpYmxlLlxuICAgKi9cbiAgaW5mb3RpcD86IEluZm9UaXBQcm9wcztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBDb25uZWN0ZWRGb3JtR3JvdXBQcm9wczxUIGV4dGVuZHMgQ29ubmVjdGVkRmllbGQ+XG4gIGV4dGVuZHMgU3VibWl0Q29udGV4dFByb3BzLFxuICAgIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wcyB7XG4gIC8qKlxuICAgKiBBbiBvYmplY3QgY29uc2lzdGluZyBvZiBhIGBjb21wb25lbnRgIGtleSB0byBzcGVjaWZ5IHdoYXQgQ29ubmVjdGVkRm9ybUlucHV0IHRvIHJlbmRlciAtIHRoZSByZW1haW5pbmcga2V5L3ZhbHVlIHBhaXJzIGFyZSB0aGF0IGNvbXBvbmVudHMgZGVzaXJlZCBwcm9wcy5cbiAgICovXG4gIGZpZWxkOiBPbWl0PFJlYWN0LkNvbXBvbmVudFByb3BzPFQ+LCAnbmFtZScgfCAnZGlzYWJsZWQnPiAmIEZpZWxkUHJvcHM8VD47XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBDb25uZWN0ZWRGb3JtR3JvdXA8VCBleHRlbmRzIENvbm5lY3RlZEZpZWxkPih7XG4gIGN1c3RvbUVycm9yLFxuICBjaGlsZHJlbixcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgZXJyb3JUeXBlID0gJ2Fic29sdXRlJyxcbiAgZmllbGQsXG4gIGhpZGVMYWJlbCxcbiAgaWQsXG4gIGxhYmVsLFxuICBuYW1lLFxuICBsYWJlbFNpemUsXG4gIHNwYWNpbmcgPSAnZml0JyxcbiAgaXNTb2xvRmllbGQsXG4gIGluZm90aXAsXG59OiBDb25uZWN0ZWRGb3JtR3JvdXBQcm9wczxUPikge1xuICBjb25zdCB7IGVycm9yLCBpc0ZpcnN0RXJyb3IsIGlzRGlzYWJsZWQsIHNldEVycm9yLCB2YWxpZGF0aW9uIH0gPSB1c2VGaWVsZCh7XG4gICAgbmFtZSxcbiAgICBkaXNhYmxlZCxcbiAgfSk7XG4gIGNvbnN0IHsgY29tcG9uZW50OiBDb21wb25lbnQsIC4uLnJlc3QgfSA9IGZpZWxkO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGN1c3RvbUVycm9yKSB7XG4gICAgICBzZXRFcnJvcihuYW1lLCB7XG4gICAgICAgIHR5cGU6ICdtYW51YWwnLFxuICAgICAgICBtZXNzYWdlOiBjdXN0b21FcnJvcixcbiAgICAgIH0pO1xuICAgIH1cbiAgfSwgW2N1c3RvbUVycm9yLCBuYW1lLCBzZXRFcnJvcl0pO1xuXG4gIGNvbnN0IHJlbmRlcmVkTGFiZWwgPSAoXG4gICAgPEZvcm1Hcm91cExhYmVsXG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIGh0bWxGb3I9e2lkIHx8IG5hbWV9XG4gICAgICBpbmZvdGlwPXtpbmZvdGlwfVxuICAgICAgaXNTb2xvRmllbGQ9e2lzU29sb0ZpZWxkfVxuICAgICAgcmVxdWlyZWQ9eyEhdmFsaWRhdGlvbj8ucmVxdWlyZWR9XG4gICAgICBzaXplPXtsYWJlbFNpemV9XG4gICAgPlxuICAgICAge2xhYmVsfVxuICAgIDwvRm9ybUdyb3VwTGFiZWw+XG4gICk7XG5cbiAgY29uc3QgdGV4dEVycm9yID0gY3VzdG9tRXJyb3IgfHwgZ2V0RXJyb3JNZXNzYWdlKGVycm9yKTtcbiAgY29uc3Qgc2hvd0Vycm9yID0gISEodGV4dEVycm9yICYmICFoaWRlTGFiZWwpO1xuICBjb25zdCBlcnJvcklkID0gc2hvd0Vycm9yID8gYCR7aWQgfHwgbmFtZX1fZXJyb3JgIDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1Hcm91cCBzcGFjaW5nPXtoaWRlTGFiZWwgPyAndGlnaHQnIDogc3BhY2luZ30+XG4gICAgICB7aGlkZUxhYmVsID8gPEhpZGRlblRleHQ+e3JlbmRlcmVkTGFiZWx9PC9IaWRkZW5UZXh0PiA6IHJlbmRlcmVkTGFiZWx9XG4gICAgICA8Q29tcG9uZW50XG4gICAgICAgIHsuLi4ocmVzdCBhcyBhbnkpfVxuICAgICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtlcnJvcklkfVxuICAgICAgICBhcmlhLWludmFsaWQ9e3Nob3dFcnJvcn1cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgLz5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtzaG93RXJyb3IgJiYgKFxuICAgICAgICA8Rm9ybUVycm9yXG4gICAgICAgICAgYXJpYS1saXZlPXtpc0ZpcnN0RXJyb3IgPyAnYXNzZXJ0aXZlJyA6ICdvZmYnfVxuICAgICAgICAgIGlkPXtlcnJvcklkfVxuICAgICAgICAgIHJvbGU9e2lzRmlyc3RFcnJvciA/ICdhbGVydCcgOiAnc3RhdHVzJ31cbiAgICAgICAgICB2YXJpYW50PXtlcnJvclR5cGV9XG4gICAgICAgID5cbiAgICAgICAgICA8TWFya2Rvd25cbiAgICAgICAgICAgIGlubGluZVxuICAgICAgICAgICAgb3ZlcnJpZGVzPXt7XG4gICAgICAgICAgICAgIGE6IHtcbiAgICAgICAgICAgICAgICBhbGxvd2VkQXR0cmlidXRlczogWydocmVmJywgJ3RhcmdldCddLFxuICAgICAgICAgICAgICAgIGNvbXBvbmVudDogRXJyb3JBbmNob3IsXG4gICAgICAgICAgICAgICAgcHJvY2Vzc05vZGU6IChcbiAgICAgICAgICAgICAgICAgIG5vZGU6IHVua25vd24sXG4gICAgICAgICAgICAgICAgICBwcm9wczogeyBvbkNsaWNrPzogKCkgPT4gdm9pZCB9XG4gICAgICAgICAgICAgICAgKSA9PiA8RXJyb3JBbmNob3Igey4uLnByb3BzfSAvPixcbiAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICBza2lwRGVmYXVsdE92ZXJyaWRlcz17eyBhOiB0cnVlIH19XG4gICAgICAgICAgICBzcGFjaW5nPVwibm9uZVwiXG4gICAgICAgICAgICB0ZXh0PXt0ZXh0RXJyb3J9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Gb3JtRXJyb3I+XG4gICAgICApfVxuICAgIDwvRm9ybUdyb3VwPlxuICApO1xufVxuIl19 */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYW9CIiwiZmlsZSI6Ii4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBGb3JtRXJyb3IsIEZvcm1Hcm91cCwgRm9ybUdyb3VwTGFiZWwsIEZvcm1Hcm91cFByb3BzIH0gZnJvbSAnLi4nO1xuaW1wb3J0IHsgQW5jaG9yIH0gZnJvbSAnLi4vQW5jaG9yJztcbmltcG9ydCB7IEhpZGRlblRleHQgfSBmcm9tICcuLi9IaWRkZW5UZXh0JztcbmltcG9ydCB7IE1hcmtkb3duIH0gZnJvbSAnLi4vTWFya2Rvd24nO1xuaW1wb3J0IHsgSW5mb1RpcFByb3BzV2l0aG91dEFyaWEgfSBmcm9tICcuLi9UaXAvSW5mb1RpcC91dGlscyc7XG5pbXBvcnQgeyBDb25uZWN0ZWRGaWVsZCwgRmllbGRQcm9wcywgU3VibWl0Q29udGV4dFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRFcnJvck1lc3NhZ2UsIHVzZUZpZWxkIH0gZnJvbSAnLi91dGlscyc7XG5cbmNvbnN0IEVycm9yQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wc1xuICBleHRlbmRzIE9taXQ8XG4gICAgRm9ybUdyb3VwUHJvcHMsXG4gICAgJ2xhYmVsJyB8ICdkaXNhYmxlZCcgfCAnZGVzY3JpcHRpb24nIHwgJ2h0bWxGb3InXG4gID4ge1xuICBjdXN0b21FcnJvcj86IHN0cmluZztcbiAgZXJyb3JUeXBlPzogJ2luaXRpYWwnIHwgJ2Fic29sdXRlJztcbiAgaGlkZUxhYmVsPzogYm9vbGVhbjtcbiAgbmFtZTogc3RyaW5nO1xuICBsYWJlbDogUmVhY3QuUmVhY3ROb2RlO1xuICByZXF1aXJlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJbmZvVGlwIHRvIGRpc3BsYXkgbmV4dCB0byB0aGUgZmllbGQgbGFiZWwuIFRoZSBJbmZvVGlwIGJ1dHRvbiBpc1xuICAgKiBhdXRvbWF0aWNhbGx5IGxhYmVsbGVkIGJ5IHRoZSBmaWVsZCBsYWJlbC4gVG8gb3ZlcnJpZGUgdGhpcyBiZWhhdmlvcixcbiAgICogcHJvdmlkZSBgYXJpYUxhYmVsYCBvciBgYXJpYUxhYmVsbGVkYnlgLlxuICAgKi9cbiAgaW5mb3RpcD86IEluZm9UaXBQcm9wc1dpdGhvdXRBcmlhO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQgZXh0ZW5kcyBDb25uZWN0ZWRGaWVsZD5cbiAgZXh0ZW5kcyBTdWJtaXRDb250ZXh0UHJvcHMsXG4gICAgQ29ubmVjdGVkRm9ybUdyb3VwQmFzZVByb3BzIHtcbiAgLyoqXG4gICAqIEFuIG9iamVjdCBjb25zaXN0aW5nIG9mIGEgYGNvbXBvbmVudGAga2V5IHRvIHNwZWNpZnkgd2hhdCBDb25uZWN0ZWRGb3JtSW5wdXQgdG8gcmVuZGVyIC0gdGhlIHJlbWFpbmluZyBrZXkvdmFsdWUgcGFpcnMgYXJlIHRoYXQgY29tcG9uZW50cyBkZXNpcmVkIHByb3BzLlxuICAgKi9cbiAgZmllbGQ6IE9taXQ8UmVhY3QuQ29tcG9uZW50UHJvcHM8VD4sICduYW1lJyB8ICdkaXNhYmxlZCc+ICYgRmllbGRQcm9wczxUPjtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIENvbm5lY3RlZEZvcm1Hcm91cDxUIGV4dGVuZHMgQ29ubmVjdGVkRmllbGQ+KHtcbiAgY3VzdG9tRXJyb3IsXG4gIGNoaWxkcmVuLFxuICBkaXNhYmxlZCA9IGZhbHNlLFxuICBlcnJvclR5cGUgPSAnYWJzb2x1dGUnLFxuICBmaWVsZCxcbiAgaGlkZUxhYmVsLFxuICBpZCxcbiAgbGFiZWwsXG4gIG5hbWUsXG4gIGxhYmVsU2l6ZSxcbiAgc3BhY2luZyA9ICdmaXQnLFxuICBpc1NvbG9GaWVsZCxcbiAgaW5mb3RpcCxcbn06IENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQ+KSB7XG4gIGNvbnN0IHsgZXJyb3IsIGlzRmlyc3RFcnJvciwgaXNEaXNhYmxlZCwgc2V0RXJyb3IsIHZhbGlkYXRpb24gfSA9IHVzZUZpZWxkKHtcbiAgICBuYW1lLFxuICAgIGRpc2FibGVkLFxuICB9KTtcbiAgY29uc3QgeyBjb21wb25lbnQ6IENvbXBvbmVudCwgLi4ucmVzdCB9ID0gZmllbGQ7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoY3VzdG9tRXJyb3IpIHtcbiAgICAgIHNldEVycm9yKG5hbWUsIHtcbiAgICAgICAgdHlwZTogJ21hbnVhbCcsXG4gICAgICAgIG1lc3NhZ2U6IGN1c3RvbUVycm9yLFxuICAgICAgfSk7XG4gICAgfVxuICB9LCBbY3VzdG9tRXJyb3IsIG5hbWUsIHNldEVycm9yXSk7XG5cbiAgY29uc3QgcmVuZGVyZWRMYWJlbCA9IChcbiAgICA8Rm9ybUdyb3VwTGFiZWxcbiAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgaHRtbEZvcj17aWQgfHwgbmFtZX1cbiAgICAgIGluZm90aXA9e2luZm90aXB9XG4gICAgICBpc1NvbG9GaWVsZD17aXNTb2xvRmllbGR9XG4gICAgICByZXF1aXJlZD17ISF2YWxpZGF0aW9uPy5yZXF1aXJlZH1cbiAgICAgIHNpemU9e2xhYmVsU2l6ZX1cbiAgICA+XG4gICAgICB7bGFiZWx9XG4gICAgPC9Gb3JtR3JvdXBMYWJlbD5cbiAgKTtcblxuICBjb25zdCB0ZXh0RXJyb3IgPSBjdXN0b21FcnJvciB8fCBnZXRFcnJvck1lc3NhZ2UoZXJyb3IpO1xuICBjb25zdCBzaG93RXJyb3IgPSAhISh0ZXh0RXJyb3IgJiYgIWhpZGVMYWJlbCk7XG4gIGNvbnN0IGVycm9ySWQgPSBzaG93RXJyb3IgPyBgJHtpZCB8fCBuYW1lfV9lcnJvcmAgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybUdyb3VwIHNwYWNpbmc9e2hpZGVMYWJlbCA/ICd0aWdodCcgOiBzcGFjaW5nfT5cbiAgICAgIHtoaWRlTGFiZWwgPyA8SGlkZGVuVGV4dD57cmVuZGVyZWRMYWJlbH08L0hpZGRlblRleHQ+IDogcmVuZGVyZWRMYWJlbH1cbiAgICAgIDxDb21wb25lbnRcbiAgICAgICAgey4uLihyZXN0IGFzIGFueSl9XG4gICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Vycm9ySWR9XG4gICAgICAgIGFyaWEtaW52YWxpZD17c2hvd0Vycm9yfVxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAvPlxuICAgICAge2NoaWxkcmVufVxuICAgICAge3Nob3dFcnJvciAmJiAoXG4gICAgICAgIDxGb3JtRXJyb3JcbiAgICAgICAgICBhcmlhLWxpdmU9e2lzRmlyc3RFcnJvciA/ICdhc3NlcnRpdmUnIDogJ29mZid9XG4gICAgICAgICAgaWQ9e2Vycm9ySWR9XG4gICAgICAgICAgcm9sZT17aXNGaXJzdEVycm9yID8gJ2FsZXJ0JyA6ICdzdGF0dXMnfVxuICAgICAgICAgIHZhcmlhbnQ9e2Vycm9yVHlwZX1cbiAgICAgICAgPlxuICAgICAgICAgIDxNYXJrZG93blxuICAgICAgICAgICAgaW5saW5lXG4gICAgICAgICAgICBvdmVycmlkZXM9e3tcbiAgICAgICAgICAgICAgYToge1xuICAgICAgICAgICAgICAgIGFsbG93ZWRBdHRyaWJ1dGVzOiBbJ2hyZWYnLCAndGFyZ2V0J10sXG4gICAgICAgICAgICAgICAgY29tcG9uZW50OiBFcnJvckFuY2hvcixcbiAgICAgICAgICAgICAgICBwcm9jZXNzTm9kZTogKFxuICAgICAgICAgICAgICAgICAgbm9kZTogdW5rbm93bixcbiAgICAgICAgICAgICAgICAgIHByb3BzOiB7IG9uQ2xpY2s/OiAoKSA9PiB2b2lkIH1cbiAgICAgICAgICAgICAgICApID0+IDxFcnJvckFuY2hvciB7Li4ucHJvcHN9IC8+LFxuICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIHNraXBEZWZhdWx0T3ZlcnJpZGVzPXt7IGE6IHRydWUgfX1cbiAgICAgICAgICAgIHNwYWNpbmc9XCJub25lXCJcbiAgICAgICAgICAgIHRleHQ9e3RleHRFcnJvcn1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0Zvcm1FcnJvcj5cbiAgICAgICl9XG4gICAgPC9Gb3JtR3JvdXA+XG4gICk7XG59XG4iXX0= */");
 export function ConnectedFormGroup({
   customError,
   children,

package/dist/Form/elements/FormGroupLabel.d.ts

@@ -1,7 +1,7 @@
 import { StyleProps } from '@codecademy/variance';
 import { HTMLAttributes } from 'react';
 import * as React from 'react';
-import { InfoTipProps } from '../../Tip/InfoTip';
+import { InfoTipPropsWithoutAria } from '../../Tip/InfoTip/utils';
 import { BaseInputProps } from '../types';
 declare const labelSizeVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"size", false | "small" | "large"> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -15,7 +15,7 @@ export type FormGroupLabelProps = HTMLAttributes<HTMLDivElement> & HTMLAttribute
     /**
      * [The for/id string of a label or labelable form-related element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor). The outer FormGroup or FormLabel should have an identical string as the inner FormElement for accessibility purposes.
      */
-    infotip?: InfoTipProps;
+    infotip?: InfoTipPropsWithoutAria;
     size?: 'small' | 'large';
     /**
      * Solo fields should always be required and have no optional/required text

package/dist/Form/elements/FormGroupLabel.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import * as React from 'react';
 import { FlexBox } from '../..';
 import { InfoTip } from '../../Tip/InfoTip';
+import { createInfoTipProps } from '../../Tip/InfoTip/utils';
 import { Text } from '../../Typography/Text';
 import { formBaseStyles, formFieldTextDisabledStyles } from '../styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const labelStates = states({
 const Label = /*#__PURE__*/_styled("label", {
   target: "e1t0n89n0",
   label: "Label"
-})(labelSizeVariants, labelStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm1Hcm91cExhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRGMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0Zvcm0vZWxlbWVudHMvRm9ybUdyb3VwTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3RhdGVzLCB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBIVE1MQXR0cmlidXRlcywgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLic7XG5pbXBvcnQgeyBJbmZvVGlwLCBJbmZvVGlwUHJvcHMgfSBmcm9tICcuLi8uLi9UaXAvSW5mb1RpcCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IGZvcm1CYXNlU3R5bGVzLCBmb3JtRmllbGRUZXh0RGlzYWJsZWRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgQmFzZUlucHV0UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGxhYmVsU2l6ZVZhcmlhbnRzID0gdmFyaWFudCh7XG4gIGRlZmF1bHRWYXJpYW50OiAnc21hbGwnLFxuICBwcm9wOiAnc2l6ZScsXG4gIGJhc2U6IHsgZGlzcGxheTogJ2Jsb2NrJywgLi4uZm9ybUJhc2VTdHlsZXMgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzbWFsbDoge1xuICAgICAgbGluZUhlaWdodDogJ2Jhc2UnLFxuICAgIH0sXG4gICAgbGFyZ2U6IHtcbiAgICAgIGZvbnRTaXplOiAyMixcbiAgICAgIGxpbmVIZWlnaHQ6ICdiYXNlJyxcbiAgICAgIGZvbnRXZWlnaHQ6ICd0aXRsZScsXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5jb25zdCBsYWJlbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGRpc2FibGVkOiBmb3JtRmllbGRUZXh0RGlzYWJsZWRTdHlsZXMsXG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBMYWJlbFZhcmlhbnRzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgbGFiZWxTaXplVmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGxhYmVsU3RhdGVzPiB7fVxuXG5leHBvcnQgdHlwZSBGb3JtR3JvdXBMYWJlbFByb3BzID0gSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+ICZcbiAgSFRNTEF0dHJpYnV0ZXM8SFRNTExhYmVsRWxlbWVudD4gJlxuICBMYWJlbFZhcmlhbnRzICZcbiAgUGljazxCYXNlSW5wdXRQcm9wcywgJ2h0bWxGb3InIHwgJ3JlcXVpcmVkJz4gJiB7XG4gICAgLyoqXG4gICAgICogW1RoZSBmb3IvaWQgc3RyaW5nIG9mIGEgbGFiZWwgb3IgbGFiZWxhYmxlIGZvcm0tcmVsYXRlZCBlbGVtZW50XShodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9BUEkvSFRNTExhYmVsRWxlbWVudC9odG1sRm9yKS4gVGhlIG91dGVyIEZvcm1Hcm91cCBvciBGb3JtTGFiZWwgc2hvdWxkIGhhdmUgYW4gaWRlbnRpY2FsIHN0cmluZyBhcyB0aGUgaW5uZXIgRm9ybUVsZW1lbnQgZm9yIGFjY2Vzc2liaWxpdHkgcHVycG9zZXMuXG4gICAgICovXG4gICAgaW5mb3RpcD86IEluZm9UaXBQcm9wcztcbiAgICBzaXplPzogJ3NtYWxsJyB8ICdsYXJnZSc7XG4gICAgLyoqXG4gICAgICogU29sbyBmaWVsZHMgc2hvdWxkIGFsd2F5cyBiZSByZXF1aXJlZCBhbmQgaGF2ZSBubyBvcHRpb25hbC9yZXF1aXJlZCB0ZXh0XG4gICAgICovXG4gICAgaXNTb2xvRmllbGQ/OiBib29sZWFuO1xuICB9O1xuXG5jb25zdCBMYWJlbCA9IHN0eWxlZC5sYWJlbDxGb3JtR3JvdXBMYWJlbFByb3BzPihsYWJlbFNpemVWYXJpYW50cywgbGFiZWxTdGF0ZXMpO1xuXG5leHBvcnQgY29uc3QgRm9ybUdyb3VwTGFiZWw6IFJlYWN0LkZDPEZvcm1Hcm91cExhYmVsUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbiAgZGlzYWJsZWQsXG4gIGh0bWxGb3IsXG4gIGluZm90aXAsXG4gIGlzU29sb0ZpZWxkLFxuICByZXF1aXJlZCxcbiAgc2l6ZSxcbiAgLi4ucmVzdFxufSkgPT4ge1xuICBjb25zdCBsYWJlbElkID0gdXNlSWQoKTtcbiAgY29uc3QgaXNTdHJpbmdMYWJlbCA9IHR5cGVvZiBjaGlsZHJlbiA9PT0gJ3N0cmluZyc7XG4gIGNvbnN0IHNob3VsZExhYmVsSW5mb1RpcCA9XG4gICAgKGlzU3RyaW5nTGFiZWwgfHwgaW5mb3RpcD8ubGFiZWxsZWRCeUZpZWxkTGFiZWwpICYmXG4gICAgIWluZm90aXA/LmFyaWFMYWJlbCAmJlxuICAgICFpbmZvdGlwPy5hcmlhTGFiZWxsZWRieTtcblxuICByZXR1cm4gKFxuICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIG1iPXs0fT5cbiAgICAgIDxMYWJlbFxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgYXM9e2h0bWxGb3IgPyAnbGFiZWwnIDogJ2Rpdid9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGlkPXtpbmZvdGlwICYmIHNob3VsZExhYmVsSW5mb1RpcCA/IGxhYmVsSWQgOiB1bmRlZmluZWR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgeyFpc1NvbG9GaWVsZCAmJlxuICAgICAgICAgIChyZXF1aXJlZCA/IChcbiAgICAgICAgICAgIDxUZXh0IGFyaWEtaGlkZGVuIGFzPVwic3BhblwiPlxuICAgICAgICAgICAgICAqXG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICdcXHUwMEEwKG9wdGlvbmFsKSdcbiAgICAgICAgICApKX1cbiAgICAgIDwvTGFiZWw+XG4gICAgICB7aW5mb3RpcCAmJiAoXG4gICAgICAgIDxJbmZvVGlwXG4gICAgICAgICAgey4uLmluZm90aXB9XG4gICAgICAgICAgYXJpYUxhYmVsbGVkYnk9e3Nob3VsZExhYmVsSW5mb1RpcCA/IGxhYmVsSWQgOiBpbmZvdGlwLmFyaWFMYWJlbGxlZGJ5fVxuICAgICAgICAvPlxuICAgICAgKX1cbiAgICA8L0ZsZXhCb3g+XG4gICk7XG59O1xuIl19 */");
+})(labelSizeVariants, labelStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm1Hcm91cExhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RGMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0Zvcm0vZWxlbWVudHMvRm9ybUdyb3VwTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3RhdGVzLCB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBIVE1MQXR0cmlidXRlcywgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLic7XG5pbXBvcnQgeyBJbmZvVGlwLCBJbmZvVGlwUHJvcHMgfSBmcm9tICcuLi8uLi9UaXAvSW5mb1RpcCc7XG5pbXBvcnQge1xuICBjcmVhdGVJbmZvVGlwUHJvcHMsXG4gIEluZm9UaXBQcm9wc1dpdGhvdXRBcmlhLFxufSBmcm9tICcuLi8uLi9UaXAvSW5mb1RpcC91dGlscyc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IGZvcm1CYXNlU3R5bGVzLCBmb3JtRmllbGRUZXh0RGlzYWJsZWRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgQmFzZUlucHV0UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGxhYmVsU2l6ZVZhcmlhbnRzID0gdmFyaWFudCh7XG4gIGRlZmF1bHRWYXJpYW50OiAnc21hbGwnLFxuICBwcm9wOiAnc2l6ZScsXG4gIGJhc2U6IHsgZGlzcGxheTogJ2Jsb2NrJywgLi4uZm9ybUJhc2VTdHlsZXMgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzbWFsbDoge1xuICAgICAgbGluZUhlaWdodDogJ2Jhc2UnLFxuICAgIH0sXG4gICAgbGFyZ2U6IHtcbiAgICAgIGZvbnRTaXplOiAyMixcbiAgICAgIGxpbmVIZWlnaHQ6ICdiYXNlJyxcbiAgICAgIGZvbnRXZWlnaHQ6ICd0aXRsZScsXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5jb25zdCBsYWJlbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGRpc2FibGVkOiBmb3JtRmllbGRUZXh0RGlzYWJsZWRTdHlsZXMsXG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBMYWJlbFZhcmlhbnRzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgbGFiZWxTaXplVmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGxhYmVsU3RhdGVzPiB7fVxuXG5leHBvcnQgdHlwZSBGb3JtR3JvdXBMYWJlbFByb3BzID0gSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+ICZcbiAgSFRNTEF0dHJpYnV0ZXM8SFRNTExhYmVsRWxlbWVudD4gJlxuICBMYWJlbFZhcmlhbnRzICZcbiAgUGljazxCYXNlSW5wdXRQcm9wcywgJ2h0bWxGb3InIHwgJ3JlcXVpcmVkJz4gJiB7XG4gICAgLyoqXG4gICAgICogW1RoZSBmb3IvaWQgc3RyaW5nIG9mIGEgbGFiZWwgb3IgbGFiZWxhYmxlIGZvcm0tcmVsYXRlZCBlbGVtZW50XShodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9BUEkvSFRNTExhYmVsRWxlbWVudC9odG1sRm9yKS4gVGhlIG91dGVyIEZvcm1Hcm91cCBvciBGb3JtTGFiZWwgc2hvdWxkIGhhdmUgYW4gaWRlbnRpY2FsIHN0cmluZyBhcyB0aGUgaW5uZXIgRm9ybUVsZW1lbnQgZm9yIGFjY2Vzc2liaWxpdHkgcHVycG9zZXMuXG4gICAgICovXG4gICAgaW5mb3RpcD86IEluZm9UaXBQcm9wc1dpdGhvdXRBcmlhO1xuICAgIHNpemU/OiAnc21hbGwnIHwgJ2xhcmdlJztcbiAgICAvKipcbiAgICAgKiBTb2xvIGZpZWxkcyBzaG91bGQgYWx3YXlzIGJlIHJlcXVpcmVkIGFuZCBoYXZlIG5vIG9wdGlvbmFsL3JlcXVpcmVkIHRleHRcbiAgICAgKi9cbiAgICBpc1NvbG9GaWVsZD86IGJvb2xlYW47XG4gIH07XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsPEZvcm1Hcm91cExhYmVsUHJvcHM+KGxhYmVsU2l6ZVZhcmlhbnRzLCBsYWJlbFN0YXRlcyk7XG5cbmV4cG9ydCBjb25zdCBGb3JtR3JvdXBMYWJlbDogUmVhY3QuRkM8Rm9ybUdyb3VwTGFiZWxQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBkaXNhYmxlZCxcbiAgaHRtbEZvcixcbiAgaW5mb3RpcCxcbiAgaXNTb2xvRmllbGQsXG4gIHJlcXVpcmVkLFxuICBzaXplLFxuICAuLi5yZXN0XG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsSWQgPSB1c2VJZCgpO1xuICBjb25zdCB7IGluZm90aXBQcm9wcywgc2hvdWxkTGFiZWxJbmZvVGlwIH0gPSBpbmZvdGlwXG4gICAgPyBjcmVhdGVJbmZvVGlwUHJvcHMoaW5mb3RpcCwgbGFiZWxJZClcbiAgICA6IHtcbiAgICAgICAgaW5mb3RpcFByb3BzOiB1bmRlZmluZWQgYXMgSW5mb1RpcFByb3BzIHwgdW5kZWZpbmVkLFxuICAgICAgICBzaG91bGRMYWJlbEluZm9UaXA6IGZhbHNlLFxuICAgICAgfTtcblxuICByZXR1cm4gKFxuICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIG1iPXs0fT5cbiAgICAgIDxMYWJlbFxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgYXM9e2h0bWxGb3IgPyAnbGFiZWwnIDogJ2Rpdid9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGlkPXtpbmZvdGlwICYmIHNob3VsZExhYmVsSW5mb1RpcCA/IGxhYmVsSWQgOiB1bmRlZmluZWR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgeyFpc1NvbG9GaWVsZCAmJlxuICAgICAgICAgIChyZXF1aXJlZCA/IChcbiAgICAgICAgICAgIDxUZXh0IGFyaWEtaGlkZGVuIGFzPVwic3BhblwiPlxuICAgICAgICAgICAgICAqXG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICdcXHUwMEEwKG9wdGlvbmFsKSdcbiAgICAgICAgICApKX1cbiAgICAgIDwvTGFiZWw+XG4gICAgICB7aW5mb3RpcFByb3BzICYmIDxJbmZvVGlwIHsuLi5pbmZvdGlwUHJvcHN9IC8+fVxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG4iXX0= */");
 export const FormGroupLabel = ({
   children,
   className,
@@ -44,8 +45,13 @@ export const FormGroupLabel = ({
   ...rest
 }) => {
   const labelId = useId();
-  const isStringLabel = typeof children === 'string';
-  const shouldLabelInfoTip = (isStringLabel || infotip?.labelledByFieldLabel) && !infotip?.ariaLabel && !infotip?.ariaLabelledby;
+  const {
+    infotipProps,
+    shouldLabelInfoTip
+  } = infotip ? createInfoTipProps(infotip, labelId) : {
+    infotipProps: undefined,
+    shouldLabelInfoTip: false
+  };
   return /*#__PURE__*/_jsxs(FlexBox, {
     justifyContent: "space-between",
     mb: 4,
@@ -62,9 +68,8 @@ export const FormGroupLabel = ({
         as: "span",
         children: "*"
       }) : '\u00A0(optional)')]
-    }), infotip && /*#__PURE__*/_jsx(InfoTip, {
-      ...infotip,
-      ariaLabelledby: shouldLabelInfoTip ? labelId : infotip.ariaLabelledby
+    }), infotipProps && /*#__PURE__*/_jsx(InfoTip, {
+      ...infotipProps
     })]
   });
 };

package/dist/GridForm/GridFormInputGroup/GridFormRadioGroupInput/index.js

@@ -1,7 +1,8 @@
 import isString from 'lodash/isString';
+import { useId, createElement as _createElement } from 'react';
 import * as React from 'react';
 import { Radio, RadioGroup } from '../../../Form';
-import { createElement as _createElement } from "react";
+import { createInfoTipProps } from '../../../Tip/InfoTip/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridFormRadioGroupInput = ({
   className,
@@ -13,6 +14,7 @@ export const GridFormRadioGroupInput = ({
   error
 }) => {
   const ariaLabel = field.ariaLabel ?? (isString(field.label) ? field.label : undefined);
+  const defaultLabelId = useId();
   return /*#__PURE__*/_jsx(RadioGroup, {
     "aria-invalid": error,
     "aria-label": ariaLabel,
@@ -31,16 +33,22 @@ export const GridFormRadioGroupInput = ({
     children: field.options.map(({
       label,
       value,
+      infotip,
       ...rest
-    }) => /*#__PURE__*/_createElement(Radio, {
-      ...register(field.name, field.validation),
-      disabled: disabled,
-      error: error,
-      id: field.id,
-      key: value,
-      label: label,
-      value: value,
-      ...rest
-    }))
+    }) => {
+      const optionLabelId = `${defaultLabelId}-${value}`;
+      const infotipProps = infotip ? createInfoTipProps(infotip, optionLabelId).infotipProps : undefined;
+      return /*#__PURE__*/_createElement(Radio, {
+        ...register(field.name, field.validation),
+        disabled: disabled,
+        error: error,
+        id: field.id,
+        infotip: infotipProps,
+        key: value,
+        label: label,
+        value: value,
+        ...rest
+      });
+    })
   });
 };

package/dist/GridForm/types.d.ts

@@ -5,7 +5,7 @@ import { MinimalCheckboxProps } from '../ConnectedForm';
 import { CheckboxLabelUnion, TextAreaProps } from '../Form';
 import { CheckboxPaddingProps } from '../Form/types';
 import { ColumnProps } from '../Layout';
-import { InfoTipProps } from '../Tip/InfoTip';
+import { InfoTipPropsWithoutAria } from '../Tip/InfoTip/utils';
 import { Text, TextProps } from '../Typography/Text';
 export interface BaseFormInputProps {
     className?: string;
@@ -26,11 +26,11 @@ export type BaseFormField<Value> = {
      */
     id?: string;
     /**
-     * InfoTip to display next to the field label. String labels automatically
-     * label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
-     * set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
+     * InfoTip to display next to the field label. The InfoTip button is
+     * automatically labelled by the field label. To override this behavior,
+     * provide `ariaLabel` or `ariaLabelledby`.
      */
-    infotip?: InfoTipProps;
+    infotip?: InfoTipPropsWithoutAria;
     isSoloField?: boolean;
     name: string;
     onUpdate?: (value: Value) => void;

package/dist/Tip/InfoTip/index.d.ts

@@ -1,13 +1,30 @@
 /// <reference types="react" />
 import { TipBaseAlignment, TipBaseProps } from '../shared/types';
-export type InfoTipProps = TipBaseProps & {
+type InfoTipPropsWithAriaLabel = TipBaseProps & {
     alignment?: TipBaseAlignment;
     /**
-     * Accessible label for the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.
+     * Accessible label for the InfoTip button. ariaLabel or ariaLabelledby should be provided for accessibility.
      */
     ariaLabel?: string;
+    ariaLabelledby?: never;
     /**
-     * ID of an element that labels the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.
+     * Accessible role description for the InfoTip button. Useful for translation.
+     * @default "More information button"
+     */
+    ariaRoleDescription?: string;
+    emphasis?: 'low' | 'high';
+    /**
+     * Called when the info tip is clicked - the onClick function is called after the DOM updates and the tip is mounted.
+     */
+    onClick?: (arg0: {
+        isTipHidden: boolean;
+    }) => void;
+};
+type InfoTipPropsWithAriaLabelledby = TipBaseProps & {
+    alignment?: TipBaseAlignment;
+    ariaLabel?: never;
+    /**
+     * ID of an element that labels the InfoTip button.
      */
     ariaLabelledby?: string;
     /**
@@ -16,11 +33,6 @@ export type InfoTipProps = TipBaseProps & {
      */
     ariaRoleDescription?: string;
     emphasis?: 'low' | 'high';
-    /**
-     * When true, the InfoTip button will be labelled by the form field's label element.
-     * This is automatic for string labels, but can be opted into for ReactNode labels.
-     */
-    labelledByFieldLabel?: boolean;
     /**
      * Called when the info tip is clicked - the onClick function is called after the DOM updates and the tip is mounted.
      */
@@ -28,4 +40,6 @@ export type InfoTipProps = TipBaseProps & {
         isTipHidden: boolean;
     }) => void;
 };
+export type InfoTipProps = InfoTipPropsWithAriaLabel | InfoTipPropsWithAriaLabelledby;
 export declare const InfoTip: React.FC<InfoTipProps>;
+export {};

package/dist/Tip/InfoTip/index.js

@@ -3,7 +3,7 @@ import { getFocusableElements as getFocusableElementsUtil } from '../../utils/fo
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
 import { tipDefaultProps } from '../shared/types';
-import { isElementVisible } from '../shared/utils';
+import { isFloatingElementOpen } from '../shared/utils';
 import { InfoTipButton } from './InfoTipButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 const MODAL_SELECTOR = 'dialog[open],[role="dialog"]:not([aria-hidden="true"]),[role="alertdialog"]:not([aria-hidden="true"])';
@@ -78,7 +78,14 @@ export const InfoTip = ({
     const handleGlobalEscapeKey = e => {
       if (e.key !== 'Escape') return;
       const openModals = document.querySelectorAll(MODAL_SELECTOR);
-      const hasUnrelatedModal = Array.from(openModals).some(modal => isElementVisible(modal) && wrapperRef.current && !modal.contains(wrapperRef.current));
+      const hasUnrelatedModal = Array.from(openModals).some(modal => {
+        // Only consider floating elements that are actually open
+        if (!isFloatingElementOpen(modal)) {
+          return false;
+        }
+        // Check if it's unrelated to this InfoTip
+        return wrapperRef.current && !modal.contains(wrapperRef.current);
+      });
       if (hasUnrelatedModal) return;
       e.preventDefault();
       e.stopPropagation();

package/dist/Tip/InfoTip/utils.d.ts

@@ -0,0 +1,13 @@
+import type { InfoTipProps } from './index';
+/**
+ * InfoTip props that allow both ariaLabel and ariaLabelledby to be optional.
+ * Used in components that automatically provide ariaLabelledby when neither is provided.
+ */
+export type InfoTipPropsWithoutAria = Omit<InfoTipProps, 'ariaLabel' | 'ariaLabelledby'> & {
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+export declare const createInfoTipProps: (props: InfoTipPropsWithoutAria, fallbackAriaLabelledby?: string) => {
+    infotipProps: InfoTipProps;
+    shouldLabelInfoTip: boolean;
+};

package/dist/Tip/InfoTip/utils.js

@@ -0,0 +1,47 @@
+/**
+ * InfoTip props that allow both ariaLabel and ariaLabelledby to be optional.
+ * Used in components that automatically provide ariaLabelledby when neither is provided.
+ */
+
+export const createInfoTipProps = (props, fallbackAriaLabelledby) => {
+  const {
+    ariaLabel,
+    ariaLabelledby,
+    ...rest
+  } = props;
+  const hasAriaLabel = ariaLabel !== undefined;
+  const hasAriaLabelledby = ariaLabelledby !== undefined;
+  if (hasAriaLabel) {
+    return {
+      infotipProps: {
+        ...rest,
+        ariaLabel
+      },
+      shouldLabelInfoTip: false
+    };
+  }
+  if (hasAriaLabelledby) {
+    return {
+      infotipProps: {
+        ...rest,
+        ariaLabelledby
+      },
+      shouldLabelInfoTip: false
+    };
+  }
+  if (fallbackAriaLabelledby) {
+    return {
+      infotipProps: {
+        ...rest,
+        ariaLabelledby: fallbackAriaLabelledby
+      },
+      shouldLabelInfoTip: true
+    };
+  }
+  return {
+    infotipProps: {
+      ...rest
+    },
+    shouldLabelInfoTip: false
+  };
+};

package/dist/Tip/shared/utils.d.ts

@@ -6,3 +6,22 @@ export declare const escapeKeyPressHandler: (event: React.KeyboardEvent<HTMLDivE
  * Uses the modern checkVisibility API with a fallback for older browsers.
  */
 export declare const isElementVisible: (element: Element) => boolean;
+/**
+ * Check if a floating element (modal, dialog, popover, overlay, etc.) is actually open and blocking.
+ *
+ * A floating element is considered "open" and blocking if:
+ * 1. It's a <dialog> element with the open attribute (always blocking per HTML spec), OR
+ * 2. It has role="alertdialog" (always blocking per ARIA spec), OR
+ * 3. It has role="dialog" AND:
+ *    - It's not aria-hidden="true", AND
+ *    - It doesn't have aria-expanded="false" (for collapsible dialogs), AND
+ *    - It's actually visible (not just in DOM), AND
+ *    - It has aria-modal="true" (indicates blocking modal per ARIA spec)
+ *
+ * Non-blocking popovers and collapsible dialogs without aria-modal="true" are not considered
+ * blocking and should not prevent InfoTip from closing.
+ *
+ * @param element - The DOM element to check
+ * @returns `true` if the floating element is actually open and blocking, `false` otherwise
+ */
+export declare const isFloatingElementOpen: (element: Element) => boolean;

package/dist/Tip/shared/utils.js

@@ -15,4 +15,108 @@ export const escapeKeyPressHandler = event => {
 export const isElementVisible = element => {
   if (!(element instanceof HTMLElement)) return false;
   return element.checkVisibility?.() ?? true;
+};
+
+/**
+ * Check if a floating element (modal, dialog, popover, overlay, etc.) is actually open and blocking.
+ *
+ * A floating element is considered "open" and blocking if:
+ * 1. It's a <dialog> element with the open attribute (always blocking per HTML spec), OR
+ * 2. It has role="alertdialog" (always blocking per ARIA spec), OR
+ * 3. It has role="dialog" AND:
+ *    - It's not aria-hidden="true", AND
+ *    - It doesn't have aria-expanded="false" (for collapsible dialogs), AND
+ *    - It's actually visible (not just in DOM), AND
+ *    - It has aria-modal="true" (indicates blocking modal per ARIA spec)
+ *
+ * Non-blocking popovers and collapsible dialogs without aria-modal="true" are not considered
+ * blocking and should not prevent InfoTip from closing.
+ *
+ * @param element - The DOM element to check
+ * @returns `true` if the floating element is actually open and blocking, `false` otherwise
+ */
+export const isFloatingElementOpen = element => {
+  if (!isElementVisible(element)) return false;
+
+  /**
+   * Native <dialog> elements are always blocking when open.
+   * Per HTML spec, dialog elements with the open attribute are modal.
+   */
+  if (element instanceof HTMLDialogElement) {
+    return element.open === true;
+  }
+
+  /**
+   * Elements with role="dialog" or role="alertdialog".
+   * Per ARIA spec, role="alertdialog" is always modal (blocking).
+   * role="dialog" requires aria-modal="true" to be blocking.
+   */
+  const role = element.getAttribute('role');
+  if (role !== 'dialog' && role !== 'alertdialog') {
+    return false;
+  }
+
+  /**
+   * Cache attribute values to avoid multiple DOM reads.
+   * Check aria-hidden first as it's a common exclusion case.
+   */
+  const ariaHidden = element.getAttribute('aria-hidden');
+  if (ariaHidden === 'true') {
+    return false;
+  }
+
+  /**
+   * Check for collapsible dialogs (like help menus).
+   * If aria-expanded exists and is false, the dialog is closed.
+   * These dialogs stay in DOM but are collapsed when closed.
+   */
+  const ariaExpanded = element.getAttribute('aria-expanded');
+  if (ariaExpanded === 'false') {
+    return false;
+  }
+
+  /**
+   * Per ARIA spec, role="alertdialog" is always modal (blocking).
+   * At this point, we've already verified:
+   * - The element is visible (not hidden via CSS)
+   * - It's not aria-hidden="true"
+   * - It's not aria-expanded="false"
+   * So if it's an alertdialog, it's open and blocking.
+   * Handle alertdialog here to avoid expensive DOM queries for dialog elements.
+   */
+  if (role === 'alertdialog') {
+    return true;
+  }
+
+  /**
+   * For role="dialog", check if any child button with aria-expanded indicates the dialog is closed.
+   * Some dialogs use a toggle button pattern where the button's aria-expanded
+   * reflects the dialog's state.
+   * Only perform this expensive querySelector operation after all other checks pass.
+   */
+  const toggleButton = element.querySelector('button[aria-expanded], [role="button"][aria-expanded]');
+  if (toggleButton && toggleButton.getAttribute('aria-expanded') === 'false') {
+    return false;
+  }
+
+  /**
+   * For role="dialog", check aria-modal attribute.
+   * aria-modal="true" indicates a blocking modal (Modal, Dialog).
+   * aria-modal="false" or absence indicates non-blocking.
+   */
+  const ariaModal = element.getAttribute('aria-modal');
+  if (ariaModal === 'true') {
+    return true;
+  }
+  if (ariaModal === 'false') {
+    // Explicitly non-modal, should not block
+    return false;
+  }
+
+  /**
+   * Elements with role="dialog" but without aria-modal="true" are non-blocking.
+   * These include collapsible dialogs (help menus) and popovers (Popover, InfoTip, Tooltip)
+   * that use role="dialog". They should not prevent InfoTip from closing.
+   */
+  return false;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.6.4-alpha.1643c9.0",
+  "version": "67.6.4-alpha.1d4469.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.54.0",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "fa262281a0ab90b442ef247a373976e2302586d2"
+  "gitHead": "28326eabca0f7f2c94acef4126f97cb7be55b21c"
 }