@telefonica/mistica 10.13.0 → 10.14.0

package/dist/index.js.flow

@@ -162,7 +162,7 @@ declare export { palette as o2ClassicPalette } from "./skins/o2-classic";
 declare export { palette as telefonicaPalette } from "./skins/telefonica";
 declare export { palette as blauPalette } from "./skins/blau";
 export type { Locale } from "./utils/locale";
-export type { TrackingEvent } from "./utils/types";
+export type { TrackingEvent, IconProps } from "./utils/types";
 export type { RegionCode } from "./utils/region-code";
 declare export { default as IconPoundFilled } from "./generated/mistica-icons/icon-pound-symbol-circle-filled";
 declare export { default as IconPoundLight } from "./generated/mistica-icons/icon-pound-symbol-circle-light";
@@ -179,6 +179,9 @@ declare export { default as IconMoneyRegular } from "./generated/mistica-icons/i
 declare export { default as IconDolarSymbolFilled } from "./generated/mistica-icons/icon-dollar-symbol-filled";
 declare export { default as IconDolarSymbolLight } from "./generated/mistica-icons/icon-dollar-symbol-light";
 declare export { default as IconDolarSymbolRegular } from "./generated/mistica-icons/icon-dollar-symbol-regular";
+declare export { default as IconFileFilled } from "./generated/mistica-icons/icon-file-illustrator-filled";
+declare export { default as IconFileIlustratorLight } from "./generated/mistica-icons/icon-file-illustrator-light";
+declare export { default as IconFileIlustratorRegular } from "./generated/mistica-icons/icon-file-illustrator-regular";
 declare export { default as IconAcademicFilled } from "./generated/mistica-icons/icon-academic-filled";
 declare export { default as IconAcademicLight } from "./generated/mistica-icons/icon-academic-light";
 declare export { default as IconAcademicRegular } from "./generated/mistica-icons/icon-academic-regular";
@@ -311,6 +314,9 @@ declare export { default as IconBellRegular } from "./generated/mistica-icons/ic
 declare export { default as IconBicycleBikeFilled } from "./generated/mistica-icons/icon-bicycle-bike-filled";
 declare export { default as IconBicycleBikeLight } from "./generated/mistica-icons/icon-bicycle-bike-light";
 declare export { default as IconBicycleBikeRegular } from "./generated/mistica-icons/icon-bicycle-bike-regular";
+declare export { default as IconBillInvoicePoundFilled } from "./generated/mistica-icons/icon-bill-invoice-pound-filled";
+declare export { default as IconBillInvoicePoundLight } from "./generated/mistica-icons/icon-bill-invoice-pound-light";
+declare export { default as IconBillInvoicePoundRegular } from "./generated/mistica-icons/icon-bill-invoice-pound-regular";
 declare export { default as IconBlogFilled } from "./generated/mistica-icons/icon-blog-filled";
 declare export { default as IconBlogLight } from "./generated/mistica-icons/icon-blog-light";
 declare export { default as IconBlogRegular } from "./generated/mistica-icons/icon-blog-regular";
@@ -325,6 +331,9 @@ declare export { default as IconBookmarkRegular } from "./generated/mistica-icon
 declare export { default as IconBookRegular } from "./generated/mistica-icons/icon-book-regular";
 declare export { default as IconBoxFilled } from "./generated/mistica-icons/icon-box-filled";
 declare export { default as IconBoxLight } from "./generated/mistica-icons/icon-box-light";
+declare export { default as IconBoxLocationFilled } from "./generated/mistica-icons/icon-box-location-filled";
+declare export { default as IconBoxLocationLight } from "./generated/mistica-icons/icon-box-location-light";
+declare export { default as IconBoxLocationRegular } from "./generated/mistica-icons/icon-box-location-regular";
 declare export { default as IconBoxRegular } from "./generated/mistica-icons/icon-box-regular";
 declare export { default as IconBrainFilled } from "./generated/mistica-icons/icon-brain-filled";
 declare export { default as IconBrainLight } from "./generated/mistica-icons/icon-brain-light";
@@ -358,6 +367,9 @@ declare export { default as IconCafeLight } from "./generated/mistica-icons/icon
 declare export { default as IconCafeRegular } from "./generated/mistica-icons/icon-cafe-regular";
 declare export { default as IconCalendarFilled } from "./generated/mistica-icons/icon-calendar-filled";
 declare export { default as IconCalendarLight } from "./generated/mistica-icons/icon-calendar-light";
+declare export { default as IconCalendarPoundFilled } from "./generated/mistica-icons/icon-calendar-pound-filled";
+declare export { default as IconCalendarPoundLight } from "./generated/mistica-icons/icon-calendar-pound-light";
+declare export { default as IconCalendarPoundRegular } from "./generated/mistica-icons/icon-calendar-pound-regular";
 declare export { default as IconCalendarRegular } from "./generated/mistica-icons/icon-calendar-regular";
 declare export { default as IconCallCenterUserSupportFilled } from "./generated/mistica-icons/icon-call-center-user-support-filled";
 declare export { default as IconCallCenterUserSupportLight } from "./generated/mistica-icons/icon-call-center-user-support-light";
@@ -457,6 +469,9 @@ declare export { default as IconCocktailRegular } from "./generated/mistica-icon
 declare export { default as IconCodeFilled } from "./generated/mistica-icons/icon-code-filled";
 declare export { default as IconCodeLight } from "./generated/mistica-icons/icon-code-light";
 declare export { default as IconCodeRegular } from "./generated/mistica-icons/icon-code-regular";
+declare export { default as IconCommentFilled } from "./generated/mistica-icons/icon-comment-filled";
+declare export { default as IconCommentLight } from "./generated/mistica-icons/icon-comment-light";
+declare export { default as IconCommentRegular } from "./generated/mistica-icons/icon-comment-regular";
 declare export { default as IconComputerFilled } from "./generated/mistica-icons/icon-computer-filled";
 declare export { default as IconComputerLight } from "./generated/mistica-icons/icon-computer-light";
 declare export { default as IconComputerRegular } from "./generated/mistica-icons/icon-computer-regular";
@@ -512,6 +527,9 @@ declare export { default as IconDataAlertRegular } from "./generated/mistica-ico
 declare export { default as IconDatabaseFilled } from "./generated/mistica-icons/icon-database-filled";
 declare export { default as IconDatabaseLight } from "./generated/mistica-icons/icon-database-light";
 declare export { default as IconDatabaseRegular } from "./generated/mistica-icons/icon-database-regular";
+declare export { default as IconDataBonusFilled } from "./generated/mistica-icons/icon-data-bonus-filled";
+declare export { default as IconDataBonusLight } from "./generated/mistica-icons/icon-data-bonus-light";
+declare export { default as IconDataBonusRegular } from "./generated/mistica-icons/icon-data-bonus-regular";
 declare export { default as IconDataCheckedFilled } from "./generated/mistica-icons/icon-data-checked-filled";
 declare export { default as IconDataCheckedLight } from "./generated/mistica-icons/icon-data-checked-light";
 declare export { default as IconDataCheckedRegular } from "./generated/mistica-icons/icon-data-checked-regular";
@@ -539,6 +557,9 @@ declare export { default as IconDataVirusRegular } from "./generated/mistica-ico
 declare export { default as IconDeliveryVanMovingFilled } from "./generated/mistica-icons/icon-delivery-van-moving-filled";
 declare export { default as IconDeliveryVanMovingLight } from "./generated/mistica-icons/icon-delivery-van-moving-light";
 declare export { default as IconDeliveryVanMovingRegular } from "./generated/mistica-icons/icon-delivery-van-moving-regular";
+declare export { default as IconDeviceSignalFilled } from "./generated/mistica-icons/icon-device-signal-filled";
+declare export { default as IconDeviceSignalLight } from "./generated/mistica-icons/icon-device-signal-light";
+declare export { default as IconDeviceSignalRegular } from "./generated/mistica-icons/icon-device-signal-regular";
 declare export { default as IconDiamondFilled } from "./generated/mistica-icons/icon-diamond-filled";
 declare export { default as IconDiamondLight } from "./generated/mistica-icons/icon-diamond-light";
 declare export { default as IconDiamondRegular } from "./generated/mistica-icons/icon-diamond-regular";
@@ -651,12 +672,12 @@ declare export { default as IconFileEnexRegular } from "./generated/mistica-icon
 declare export { default as IconFileErrorFilled } from "./generated/mistica-icons/icon-file-error-filled";
 declare export { default as IconFileErrorLight } from "./generated/mistica-icons/icon-file-error-light";
 declare export { default as IconFileErrorRegular } from "./generated/mistica-icons/icon-file-error-regular";
-declare export { default as IconFileFilled } from "./generated/mistica-icons/icon-file-filled";
 declare export { default as IconFileHtmlFilled } from "./generated/mistica-icons/icon-file-html-filled";
 declare export { default as IconFileHtmlLight } from "./generated/mistica-icons/icon-file-html-light";
 declare export { default as IconFileHtmlRegular } from "./generated/mistica-icons/icon-file-html-regular";
-declare export { default as IconFileIlustratorLight } from "./generated/mistica-icons/icon-file-ilustrator-light";
-declare export { default as IconFileIlustratorRegular } from "./generated/mistica-icons/icon-file-ilustrator-regular";
+declare export { default as IconFileIllustratorFilled } from "./generated/mistica-icons/icon-file-illustrator-filled";
+declare export { default as IconFileIllustratorLight } from "./generated/mistica-icons/icon-file-illustrator-light";
+declare export { default as IconFileIllustratorRegular } from "./generated/mistica-icons/icon-file-illustrator-regular";
 declare export { default as IconFileImageFilled } from "./generated/mistica-icons/icon-file-image-filled";
 declare export { default as IconFileImageLight } from "./generated/mistica-icons/icon-file-image-light";
 declare export { default as IconFileImageRegular } from "./generated/mistica-icons/icon-file-image-regular";
@@ -727,6 +748,9 @@ declare export { default as IconFragranceLight } from "./generated/mistica-icons
 declare export { default as IconFragranceRegular } from "./generated/mistica-icons/icon-fragrance-regular";
 declare export { default as IconFullscreenLight } from "./generated/mistica-icons/icon-fullscreen-light";
 declare export { default as IconFullscreenRegular } from "./generated/mistica-icons/icon-fullscreen-regular";
+declare export { default as IconFunnelFilled } from "./generated/mistica-icons/icon-funnel-filled";
+declare export { default as IconFunnelLight } from "./generated/mistica-icons/icon-funnel-light";
+declare export { default as IconFunnelRegular } from "./generated/mistica-icons/icon-funnel-regular";
 declare export { default as IconGarajeFilled } from "./generated/mistica-icons/icon-garaje-filled";
 declare export { default as IconGarajeLight } from "./generated/mistica-icons/icon-garaje-light";
 declare export { default as IconGarajeRegular } from "./generated/mistica-icons/icon-garaje-regular";
@@ -792,6 +816,9 @@ declare export { default as IconInformationRegular } from "./generated/mistica-i
 declare export { default as IconInformationUserFilled } from "./generated/mistica-icons/icon-information-user-filled";
 declare export { default as IconInformationUserLight } from "./generated/mistica-icons/icon-information-user-light";
 declare export { default as IconInformationUserRegular } from "./generated/mistica-icons/icon-information-user-regular";
+declare export { default as IconInternetDeviceFilled } from "./generated/mistica-icons/icon-internet-device-filled";
+declare export { default as IconInternetDeviceLight } from "./generated/mistica-icons/icon-internet-device-light";
+declare export { default as IconInternetDeviceRegular } from "./generated/mistica-icons/icon-internet-device-regular";
 declare export { default as IconInternetFilled } from "./generated/mistica-icons/icon-internet-filled";
 declare export { default as IconInternetLight } from "./generated/mistica-icons/icon-internet-light";
 declare export { default as IconInternetPendriveFilled } from "./generated/mistica-icons/icon-internet-pendrive-filled";
@@ -853,6 +880,9 @@ declare export { default as IconLockClosedRegular } from "./generated/mistica-ic
 declare export { default as IconLockDeDataFilled } from "./generated/mistica-icons/icon-lock-de-data-filled";
 declare export { default as IconLockDeDataLight } from "./generated/mistica-icons/icon-lock-de-data-light";
 declare export { default as IconLockDeDataRegular } from "./generated/mistica-icons/icon-lock-de-data-regular";
+declare export { default as IconLockEyeClosedFilled } from "./generated/mistica-icons/icon-lock-eye-closed-filled";
+declare export { default as IconLockEyeClosedLight } from "./generated/mistica-icons/icon-lock-eye-closed-light";
+declare export { default as IconLockEyeClosedRegular } from "./generated/mistica-icons/icon-lock-eye-closed-regular";
 declare export { default as IconLockOpenFilled } from "./generated/mistica-icons/icon-lock-open-filled";
 declare export { default as IconLockOpenLight } from "./generated/mistica-icons/icon-lock-open-light";
 declare export { default as IconLockOpenRegular } from "./generated/mistica-icons/icon-lock-open-regular";
@@ -919,9 +949,15 @@ declare export { default as IconMuseumRegular } from "./generated/mistica-icons/
 declare export { default as IconMusicFilled } from "./generated/mistica-icons/icon-music-filled";
 declare export { default as IconMusicLight } from "./generated/mistica-icons/icon-music-light";
 declare export { default as IconMusicRegular } from "./generated/mistica-icons/icon-music-regular";
+declare export { default as IconNetworkHotspotFilled } from "./generated/mistica-icons/icon-network-hotspot-filled";
+declare export { default as IconNetworkHotspotLight } from "./generated/mistica-icons/icon-network-hotspot-light";
+declare export { default as IconNetworkHotspotRegular } from "./generated/mistica-icons/icon-network-hotspot-regular";
 declare export { default as IconNeuralNetworkFilled } from "./generated/mistica-icons/icon-neural-network-filled";
 declare export { default as IconNeuralNetworkLight } from "./generated/mistica-icons/icon-neural-network-light";
 declare export { default as IconNeuralNetworkRegular } from "./generated/mistica-icons/icon-neural-network-regular";
+declare export { default as IconNewsletterFilled } from "./generated/mistica-icons/icon-newsletter-filled";
+declare export { default as IconNewsletterLight } from "./generated/mistica-icons/icon-newsletter-light";
+declare export { default as IconNewsletterRegular } from "./generated/mistica-icons/icon-newsletter-regular";
 declare export { default as IconNotConexionFilled } from "./generated/mistica-icons/icon-not-conexion-filled";
 declare export { default as IconNotConexionLight } from "./generated/mistica-icons/icon-not-conexion-light";
 declare export { default as IconNotConexionRegular } from "./generated/mistica-icons/icon-not-conexion-regular";
@@ -974,6 +1010,9 @@ declare export { default as IconPauseLight } from "./generated/mistica-icons/ico
 declare export { default as IconPauseRegular } from "./generated/mistica-icons/icon-pause-regular";
 declare export { default as IconPayInvoiceFilled } from "./generated/mistica-icons/icon-pay-invoice-filled";
 declare export { default as IconPayInvoiceLight } from "./generated/mistica-icons/icon-pay-invoice-light";
+declare export { default as IconPayInvoicePoundFilled } from "./generated/mistica-icons/icon-pay-invoice-pound-filled";
+declare export { default as IconPayInvoicePoundLight } from "./generated/mistica-icons/icon-pay-invoice-pound-light";
+declare export { default as IconPayInvoicePoundRegular } from "./generated/mistica-icons/icon-pay-invoice-pound-regular";
 declare export { default as IconPayInvoiceRegular } from "./generated/mistica-icons/icon-pay-invoice-regular";
 declare export { default as IconPendriveFilled } from "./generated/mistica-icons/icon-pendrive-filled";
 declare export { default as IconPendriveLight } from "./generated/mistica-icons/icon-pendrive-light";
@@ -1062,6 +1101,9 @@ declare export { default as IconReloadRegular } from "./generated/mistica-icons/
 declare export { default as IconRenovateDeviceChangeMobileFilled } from "./generated/mistica-icons/icon-renovate-device-change-mobile-filled";
 declare export { default as IconRenovateDeviceChangeMobileLight } from "./generated/mistica-icons/icon-renovate-device-change-mobile-light";
 declare export { default as IconRenovateDeviceChangeMobileRegular } from "./generated/mistica-icons/icon-renovate-device-change-mobile-regular";
+declare export { default as IconRepeatFilled } from "./generated/mistica-icons/icon-repeat-filled";
+declare export { default as IconRepeatLight } from "./generated/mistica-icons/icon-repeat-light";
+declare export { default as IconRepeatRegular } from "./generated/mistica-icons/icon-repeat-regular";
 declare export { default as IconRestaurantFilled } from "./generated/mistica-icons/icon-restaurant-filled";
 declare export { default as IconRestaurantLight } from "./generated/mistica-icons/icon-restaurant-light";
 declare export { default as IconRestaurantRegular } from "./generated/mistica-icons/icon-restaurant-regular";
@@ -1256,6 +1298,9 @@ declare export { default as IconTongueRegular } from "./generated/mistica-icons/
 declare export { default as IconToothFilled } from "./generated/mistica-icons/icon-tooth-filled";
 declare export { default as IconToothLight } from "./generated/mistica-icons/icon-tooth-light";
 declare export { default as IconToothRegular } from "./generated/mistica-icons/icon-tooth-regular";
+declare export { default as IconTopUpFilled } from "./generated/mistica-icons/icon-top-up-filled";
+declare export { default as IconTopUpLight } from "./generated/mistica-icons/icon-top-up-light";
+declare export { default as IconTopUpRegular } from "./generated/mistica-icons/icon-top-up-regular";
 declare export { default as IconTowTruckFilled } from "./generated/mistica-icons/icon-tow-truck-filled";
 declare export { default as IconTowTruckLight } from "./generated/mistica-icons/icon-tow-truck-light";
 declare export { default as IconTowTruckRegular } from "./generated/mistica-icons/icon-tow-truck-regular";
@@ -1313,6 +1358,9 @@ declare export { default as IconVirusRegular } from "./generated/mistica-icons/i
 declare export { default as IconVirusScanFilled } from "./generated/mistica-icons/icon-virus-scan-filled";
 declare export { default as IconVirusScanLight } from "./generated/mistica-icons/icon-virus-scan-light";
 declare export { default as IconVirusScanRegular } from "./generated/mistica-icons/icon-virus-scan-regular";
+declare export { default as IconWaitClockFilled } from "./generated/mistica-icons/icon-wait-clock-filled";
+declare export { default as IconWaitClockLight } from "./generated/mistica-icons/icon-wait-clock-light";
+declare export { default as IconWaitClockRegular } from "./generated/mistica-icons/icon-wait-clock-regular";
 declare export { default as IconWalletFilled } from "./generated/mistica-icons/icon-wallet-filled";
 declare export { default as IconWalletLight } from "./generated/mistica-icons/icon-wallet-light";
 declare export { default as IconWalletRegular } from "./generated/mistica-icons/icon-wallet-regular";
@@ -1322,6 +1370,7 @@ declare export { default as IconWarningRegular } from "./generated/mistica-icons
 declare export { default as IconWaterDropFilled } from "./generated/mistica-icons/icon-water-drop-filled";
 declare export { default as IconWaterDropLight } from "./generated/mistica-icons/icon-water-drop-light";
 declare export { default as IconWaterDropRegular } from "./generated/mistica-icons/icon-water-drop-regular";
+declare export { default as IconWearableRegular } from "./generated/mistica-icons/icon-wearable-regular";
 declare export { default as IconWebFilled } from "./generated/mistica-icons/icon-web-filled";
 declare export { default as IconWebLight } from "./generated/mistica-icons/icon-web-light";
 declare export { default as IconWebRegular } from "./generated/mistica-icons/icon-web-regular";
@@ -1330,6 +1379,9 @@ declare export { default as IconWifiLight } from "./generated/mistica-icons/icon
 declare export { default as IconWifiRegular } from "./generated/mistica-icons/icon-wifi-regular";
 declare export { default as IconWinnerFilled } from "./generated/mistica-icons/icon-winner-filled";
 declare export { default as IconWinnerLight } from "./generated/mistica-icons/icon-winner-light";
+declare export { default as IconWinnerPoundFilled } from "./generated/mistica-icons/icon-winner-pound-filled";
+declare export { default as IconWinnerPoundLight } from "./generated/mistica-icons/icon-winner-pound-light";
+declare export { default as IconWinnerPoundRegular } from "./generated/mistica-icons/icon-winner-pound-regular";
 declare export { default as IconWinnerRegular } from "./generated/mistica-icons/icon-winner-regular";
 declare export { default as IconWomanFilled } from "./generated/mistica-icons/icon-woman-filled";
 declare export { default as IconWomanLight } from "./generated/mistica-icons/icon-woman-light";

package/dist/list.d.ts

@@ -29,6 +29,7 @@ interface BasicRowContentProps extends CommonProps {
     switch?: undefined;
     radioValue?: undefined;
     newTab?: undefined;
+    fullPageOnWebView?: undefined;
     right?: React.ReactNode;
 }
 interface SwitchRowContentProps extends CommonProps {
@@ -39,6 +40,7 @@ interface SwitchRowContentProps extends CommonProps {
     checkbox?: undefined;
     radioValue?: undefined;
     newTab?: undefined;
+    fullPageOnWebView?: undefined;
     switch: ControlProps;
 }
 interface CheckboxRowContentProps extends CommonProps {
@@ -49,6 +51,7 @@ interface CheckboxRowContentProps extends CommonProps {
     switch?: undefined;
     radioValue?: undefined;
     newTab?: undefined;
+    fullPageOnWebView?: undefined;
     checkbox: ControlProps;
 }
 interface RadioRowContentProps extends CommonProps {
@@ -59,12 +62,14 @@ interface RadioRowContentProps extends CommonProps {
     switch?: undefined;
     checkbox?: undefined;
     newTab?: undefined;
+    fullPageOnWebView?: undefined;
     radioValue: string;
 }
 interface HrefRowContentProps extends CommonProps {
     checkbox?: undefined;
     switch?: undefined;
     radioValue?: undefined;
+    fullPageOnWebView?: undefined;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     href: string;
     newTab?: boolean;
@@ -89,6 +94,7 @@ interface OnPressRowContentProps extends CommonProps {
     checkbox?: undefined;
     switch?: undefined;
     radioValue?: undefined;
+    fullPageOnWebView?: undefined;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     onPress: () => void;
     href?: undefined;
@@ -96,7 +102,7 @@ interface OnPressRowContentProps extends CommonProps {
     right?: React.ReactNode;
 }
 declare type RowContentProps = BasicRowContentProps | SwitchRowContentProps | RadioRowContentProps | CheckboxRowContentProps | HrefRowContentProps | ToRowContentProps | OnPressRowContentProps;
-export declare const Row: React.FC<RowContentProps>;
+export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
 declare type RowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;
@@ -122,7 +128,7 @@ interface ToBoxedRowProps extends ToRowContentProps, CommonBoxedRowProps {
 interface OnPressBoxedRowProps extends OnPressRowContentProps, CommonBoxedRowProps {
 }
 declare type BoxedRowProps = BasicBoxedRowProps | SwitchBoxedRowProps | RadioBoxedRowProps | CheckboxBoxedRowProps | HrefBoxedRowProps | ToBoxedRowProps | OnPressBoxedRowProps;
-export declare const BoxedRow: React.FC<BoxedRowProps>;
+export declare const BoxedRow: React.ForwardRefExoticComponent<BoxedRowProps & React.RefAttributes<HTMLDivElement>>;
 declare type BoxedRowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;

package/dist/list.js

@@ -289,15 +289,15 @@ var useControlState = function useControlState(param) {
         toggle
     ];
 };
-var RowContent = function RowContent(props) {
+var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = (0, _hooks).useAriaId();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
     });
     var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
-    var ref4 = _slicedToArray(useControlState(props.switch || props.checkbox || {
-    }), 2), isChecked = ref4[0], toggle = ref4[1];
+    var ref1 = _slicedToArray(useControlState(props.switch || props.checkbox || {
+    }), 2), isChecked = ref1[0], toggle = ref1[1];
     var renderContent = function renderContent(param) {
         var type = param.type, right = param.right, labelId = param.labelId;
         /*#__PURE__*/ return(/*#__PURE__*/ React.createElement(Content, {
@@ -325,7 +325,8 @@ var RowContent = function RowContent(props) {
             type = 'custom';
         }
         return(/*#__PURE__*/ React.createElement(_box.default, {
-            paddingX: 16
+            paddingX: 16,
+            ref: ref5
         }, renderContent({
             type: type,
             right: props.right
@@ -333,6 +334,7 @@ var RowContent = function RowContent(props) {
     };
     if (props.onPress && props.switch === undefined && props.radioValue === undefined && props.checkbox === undefined) {
         return(/*#__PURE__*/ React.createElement(_touchable.default, {
+            ref: ref5,
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             trackingEvent: props.trackingEvent,
             onPress: props.onPress,
@@ -361,9 +363,9 @@ var RowContent = function RowContent(props) {
         }, renderTouchableContent(props)));
     }
     var renderRowWithControl = function renderRowWithControl(Control) {
-        var ref, ref1;
-        var ref2, ref3;
-        var name = (ref3 = (ref2 = (ref = props.switch) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : (ref1 = props.checkbox) === null || ref1 === void 0 ? void 0 : ref1.name) !== null && ref3 !== void 0 ? ref3 : titleId;
+        var ref, ref2;
+        var ref3, ref4;
+        var name = (ref4 = (ref3 = (ref = props.switch) === null || ref === void 0 ? void 0 : ref.name) !== null && ref3 !== void 0 ? ref3 : (ref2 = props.checkbox) === null || ref2 === void 0 ? void 0 : ref2.name) !== null && ref4 !== void 0 ? ref4 : titleId;
         return props.onPress ? /*#__PURE__*/ React.createElement("div", {
             className: classes.dualActionContainer
         }, /*#__PURE__*/ React.createElement(_touchable.default, {
@@ -380,7 +382,10 @@ var RowContent = function RowContent(props) {
         }, /*#__PURE__*/ React.createElement(Control, {
             name: name,
             checked: isChecked,
-            "aria-labelledby": titleId
+            "aria-labelledby": titleId,
+            render: function render(check) {
+                return check;
+            }
         }))) : /*#__PURE__*/ React.createElement("div", {
             className: (0, _classnames).default(classes.rowContent, classes.hover)
         }, /*#__PURE__*/ React.createElement(Control, {
@@ -411,7 +416,8 @@ var RowContent = function RowContent(props) {
     if (props.radioValue) {
         return(/*#__PURE__*/ React.createElement("div", {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
-            role: role
+            role: role,
+            ref: ref5
         }, /*#__PURE__*/ React.createElement(_radioButton.default, {
             dataAttributes: dataAttributes,
             value: props.radioValue,
@@ -438,11 +444,13 @@ var RowContent = function RowContent(props) {
     }) : renderContent({
         type: 'basic'
     })));
-};
-var Row = function Row(props) {
+});
+var Row = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     /*#__PURE__*/ return(/*#__PURE__*/ React.createElement(RowContent, _extends({
-    }, props)));
-};
+    }, props, {
+        ref: ref
+    })));
+});
 exports.Row = Row;
 var RowList = function RowList(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;
@@ -458,12 +466,13 @@ var RowList = function RowList(param) {
     })));
 };
 exports.RowList = RowList;
-var BoxedRow = function BoxedRow(props) {
+var BoxedRow = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     /*#__PURE__*/ return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
-        isInverse: props.isInverse
+        isInverse: props.isInverse,
+        ref: ref
     }, /*#__PURE__*/ React.createElement(RowContent, _extends({
     }, props))));
-};
+});
 exports.BoxedRow = BoxedRow;
 var BoxedRowList = function BoxedRowList(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;

package/dist/list.js.flow

@@ -69,7 +69,10 @@ declare type RowContentProps =
   | HrefRowContentProps
   | ToRowContentProps
   | OnPressRowContentProps;
-declare export var Row: React.ComponentType<RowContentProps>;
+declare export var Row: React.ComponentType<{
+  ...RowContentProps,
+  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
+}>;
 declare type RowListProps = {
   children: React.Node,
   ariaLabelledby?: string,
@@ -116,7 +119,10 @@ declare type BoxedRowProps =
   | HrefBoxedRowProps
   | ToBoxedRowProps
   | OnPressBoxedRowProps;
-declare export var BoxedRow: React.ComponentType<BoxedRowProps>;
+declare export var BoxedRow: React.ComponentType<{
+  ...BoxedRowProps,
+  ref?: React.Ref<HTMLDivElement>,
+}>;
 declare type BoxedRowListProps = {
   children: React.Node,
   ariaLabelledby?: string,

package/dist/radio-button.js

@@ -246,9 +246,16 @@ var RadioButton = function RadioButton(_param) {
         onKeyDown: disabled ? undefined : handleKeyDown,
         className: classes.radioButton
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes)), rest.render ? rest.render(radio, disabled) : /*#__PURE__*/ React.createElement(_inline.default, {
-        space: 16,
-        alignItems: "center"
-    }, radio, /*#__PURE__*/ React.createElement(_text.Text3, {
+        space: 16
+    }, /*#__PURE__*/ React.createElement(_text.Text3, {
+        regular: true,
+        as: "div"
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            top: -2
+        }
+    }, radio)), /*#__PURE__*/ React.createElement(_text.Text3, {
         regular: true,
         as: "div"
     }, rest.children))));

package/dist/text-field-base.js.flow

@@ -97,7 +97,7 @@ declare type TextFieldBaseProps = {
   min?: string,
   max?: string,
 };
-declare var TextFieldBase: React.Component<{
+declare var TextFieldBase: React.ComponentType<{
   ...TextFieldBaseProps,
   ...{},
 }>;

package/dist/touchable.d.ts

@@ -6,6 +6,7 @@ interface CommonProps {
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    /** @deprecated use ref */
     elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>;
     style?: React.CSSProperties;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
@@ -65,5 +66,5 @@ export interface PropsMaybeOnPress extends CommonProps {
     formId?: string;
 }
 export declare type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
-declare const Touchable: React.FC<Props>;
+declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
 export default Touchable;

package/dist/touchable.js

@@ -127,8 +127,8 @@ var useStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var Touchable = function Touchable(props) {
-    var ref = (0, _hooks).useTheme(), texts = ref.texts, analytics = ref.analytics, platformOverrides = ref.platformOverrides, Link = ref.Link;
+var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -222,15 +222,17 @@ var Touchable = function Touchable(props) {
             onKeyDown: handleKeyDown,
             href: props.disabled ? '' : getHref(),
             target: openNewTab ? '_blank' : undefined,
-            rel: openNewTab ? 'noopener noreferrer' : undefined
+            rel: openNewTab ? 'noopener noreferrer' : undefined,
+            ref: ref
         }), children, openNewTab && /*#__PURE__*/ React.createElement(_screenReaderOnly.default, null, /*#__PURE__*/ React.createElement("span", null, texts.linkOpensInNewTab))));
     }
     if (props.to) {
+        var ref2;
         return(/*#__PURE__*/ React.createElement(Link, _extends({
         }, commonProps, {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
-            innerRef: props.elementRef,
+            innerRef: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
             to: props.disabled ? '' : props.to,
             replace: props.replace,
             onClick: trackEvent,
@@ -238,6 +240,7 @@ var Touchable = function Touchable(props) {
         }), children));
     }
     if (props.onPress) {
+        var ref2;
         return(/*#__PURE__*/ React.createElement("button", _extends({
         }, commonProps, {
             // this "form" attribute is useful when the form's submit button
@@ -248,15 +251,16 @@ var Touchable = function Touchable(props) {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
             type: type,
-            ref: props.elementRef,
+            ref: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
             onClick: handleButtonClick
         }), children));
     }
+    var ref2;
     return(/*#__PURE__*/ React.createElement("div", _extends({
     }, commonProps, {
-        ref: props.elementRef,
+        ref: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
         className: (0, _classnames).default(commonProps.className, classes.notTouchable)
     }), children));
-};
+});
 var _default = Touchable;
 exports.default = _default;

package/dist/touchable.js.flow

@@ -8,6 +8,10 @@ declare type CommonProps = {
   children: React.Node,
   className?: string,
   disabled?: boolean,
+
+  /**
+   * @deprecated use ref
+   */
   elementRef?: React.Ref<"button" | "a" | "div">,
   style?: CssStyle,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
@@ -70,7 +74,10 @@ export type Props =
   | PropsMaybeHref
   | PropsMaybeTo
   | PropsMaybeOnPress;
-declare var Touchable: React.ComponentType<Props>;
+declare var Touchable: React.ComponentType<{
+  ...Props,
+  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
+}>;
 declare export default typeof Touchable;
 
 import { type CssStyle } from "./__types__.js.flow";

package/dist/utils/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TrackingEvent = {
     readonly [key: string]: unknown;
     readonly category: string;
@@ -12,7 +13,5 @@ export declare type IconProps = {
     color?: string;
     size?: string | number;
     className?: string;
-    style?: {
-        [key: string]: string | number | boolean | undefined;
-    };
+    style?: React.CSSProperties;
 };

package/dist/utils/types.js.flow

@@ -14,7 +14,7 @@ export type IconProps = {
   color?: string,
   size?: string | number,
   className?: string,
-  style?: {
-    [key: string]: string | number | boolean | void,
-  },
+  style?: CssStyle,
 };
+
+import { type CssStyle } from "../__types__.js.flow";

package/dist-es/box.js

@@ -28,7 +28,7 @@ var useStyles = createUseStyles(function() {
         }
     };
 });
-var Box = function(param) {
+var Box = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var className = param.className, children = param.children, width = param.width, _padding = param.padding, padding = _padding === void 0 ? 0 : _padding, _paddingX = param.paddingX, paddingX = _paddingX === void 0 ? padding : _paddingX, _paddingY = param.paddingY, paddingY = _paddingY === void 0 ? padding : _paddingY, _paddingTop = param.paddingTop, paddingTop = _paddingTop === void 0 ? paddingY : _paddingTop, _paddingBottom = param.paddingBottom, paddingBottom = _paddingBottom === void 0 ? paddingY : _paddingBottom, _paddingLeft = param.paddingLeft, paddingLeft = _paddingLeft === void 0 ? paddingX : _paddingLeft, _paddingRight = param.paddingRight, paddingRight = _paddingRight === void 0 ? paddingX : _paddingRight, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var classes = useStyles({
         padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
@@ -38,7 +38,8 @@ var Box = function(param) {
     }, getPrefixedDataAttributes(dataAttributes), {
         className: classnames(className, classes.box),
         role: role,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        ref: ref
     }), children));
-};
+});
 export default Box;

package/dist-es/boxed.js

@@ -40,7 +40,7 @@ var useStyles = createUseStyles(function(param) {
         }
     };
 });
-export var Boxed = function(param) {
+export var Boxed = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var children = param.children, tmp = param.isInverse, isInverseInside = tmp === void 0 ? false : tmp, className = param.className, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var isInverseOutside = useIsInverseVariant();
     var classes = useStyles({
@@ -48,6 +48,7 @@ export var Boxed = function(param) {
         isInverseInside: isInverseInside
     });
     return(/*#__PURE__*/ React.createElement("div", _extends({
+        ref: ref,
         className: classNames(className, classes.boxed),
         role: role
     }, getPrefixedDataAttributes(dataAttributes), {
@@ -55,4 +56,4 @@ export var Boxed = function(param) {
     }), /*#__PURE__*/ React.createElement(ThemeVariant, {
         isInverse: isInverseInside
     }, children)));
-};
+});

package/dist-es/button.js

@@ -449,7 +449,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
     };
 });
 var _obj1;
-export var ButtonLink = function(props) {
+export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
     var commonProps = {
@@ -465,12 +465,14 @@ export var ButtonLink = function(props) {
     };
     if (props.onPress) {
         return(/*#__PURE__*/ React.createElement(Touchable, _extends({
+            ref: ref
         }, commonProps, {
             onPress: props.onPress
         })));
     }
     if (props.to) {
         return(/*#__PURE__*/ React.createElement(Touchable, _extends({
+            ref: ref
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
@@ -478,6 +480,7 @@ export var ButtonLink = function(props) {
     }
     if (props.href) {
         return(/*#__PURE__*/ React.createElement(Touchable, _extends({
+            ref: ref
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
@@ -485,7 +488,7 @@ export var ButtonLink = function(props) {
     }
     // this cannot happen
     throw Error('Bad button props');
-};
+});
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();
     return(/*#__PURE__*/ React.createElement(Button, _extends({