sapo-components-ui-rn 1.0.46 → 1.0.48

package/dist/components/Spacer/index.d.ts

@@ -4,6 +4,7 @@ interface SpacerProps {
     width?: number;
     height?: number;
     style?: StyleProp<ViewStyle>;
+    backgroundColor?: string;
 }
-declare const Spacer: ({ style, width, height, }: SpacerProps) => React.JSX.Element;
+declare const Spacer: ({ style, width, height, backgroundColor, }: SpacerProps) => React.JSX.Element;
 export default Spacer;

package/dist/components/TextInput/TextInput.d.ts

@@ -14,11 +14,11 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     /**
      * The text or component to use for the floating label.
      */
-    label: TextInputLabelProp;
+    label?: TextInputLabelProp;
     /**
      * Placeholder for the input.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Whether to style the TextInput with error style.
      */

package/dist/index.esm.js

@@ -258,8 +258,8 @@ var ref = {
                 surfaceBrandDisabled: ink.INK10,
                 surfaceBrandHover: blue.BLUE80,
                 surfaceBrandInverseDefault: blue.BLUE5,
-                surfaceBrandInverseHover: blue.BLUE20,
-                surfaceBrandInversePressed: blue.BLUE40,
+                surfaceBrandInverseHover: blue.BLUE10,
+                surfaceBrandInversePressed: blue.BLUE20,
                 surfaceBrandPressed: blue.BLUE120,
                 surfaceCriticalDefault: red.RED100,
                 surfaceCriticalDisabled: ink.INK10,
@@ -296,9 +296,9 @@ var ref = {
                 surfaceSuccessDefault: green.GREEN100,
                 surfaceSuccessDisabled: ink.INK10,
                 surfaceSuccessHover: green.GREEN80,
-                surfaceSuccessInverseDefault: green.GREEN10,
-                surfaceSuccessInverseHover: green.GREEN20,
-                surfaceSuccessInversePressed: green.GREEN40,
+                surfaceSuccessInverseDefault: green.GREEN5,
+                surfaceSuccessInverseHover: green.GREEN10,
+                surfaceSuccessInversePressed: green.GREEN20,
                 surfaceSuccessPressed: green.GREEN_STATUS,
                 surfaceWarningDefault: yellow.YELLOW100,
                 surfaceWarningDisabled: ink.INK10,
@@ -308,19 +308,19 @@ var ref = {
                 surfaceWarningInversePressed: yellow.YELLOW40,
                 surfaceWarningPressed: yellow.YELLOW120,
                 textDefault: ink.INK100,
-                textDisabled: ink.INK20,
+                textDisabled: ink.INK40,
                 textPlaceholder: ink.INK40,
                 textSecondary: ink.INK60,
                 textBrandDefault: blue.BLUE100,
-                textBrandDisabled: ink.INK20,
+                textBrandDisabled: ink.INK40,
                 textBrandHovered: blue.BLUE80,
                 textBrandPressed: blue.BLUE120,
                 textCriticalDefault: red.RED100,
-                textCriticalDisabled: ink.INK20,
+                textCriticalDisabled: ink.INK40,
                 textCriticalHovered: red.RED80,
                 textCriticalPressed: red.RED_STATUS,
                 textErrorDefault: red.RED100,
-                textErrorDisabled: ink.INK20,
+                textErrorDisabled: ink.INK40,
                 textErrorHovered: red.RED80,
                 textErrorPressed: red.RED_STATUS,
                 textInfoDefault: blue.BLUE100,
@@ -328,7 +328,7 @@ var ref = {
                 textInfoHovered: blue.BLUE80,
                 textInfoPressed: blue.BLUE120,
                 textLinkDefault: blue.BLUE100,
-                textLinkDisabled: ink.INK20,
+                textLinkDisabled: ink.INK40,
                 textLinkHovered: blue.BLUE80,
                 textLinkPressed: blue.BLUE120,
                 textLinkVisitedDefault: purple.PURPLE100,
@@ -340,11 +340,11 @@ var ref = {
                 textOnFillHovered: white.WHITE80,
                 textOnFillPressed: white.WHITE80,
                 textSuccessDefault: green.GREEN100,
-                textSuccessDisabled: ink.INK20,
+                textSuccessDisabled: ink.INK40,
                 textSuccessHovered: green.GREEN80,
                 textSuccessPressed: green.GREEN_STATUS,
                 textWarningDefault: yellow.YELLOW100,
-                textWarningDisabled: ink.INK20,
+                textWarningDisabled: ink.INK40,
                 textWarningHovered: yellow.YELLOW80,
                 textWarningPressed: yellow.YELLOW_STATUS,
                 selectBackgroundDisabled: white.WHITE40,
@@ -356,6 +356,8 @@ var ref = {
                 borderPrimaryFocused: blue.BLUE100,
                 borderWarningInverseDefault: yellow.YELLOW40,
                 borderSuccessInverseDefault: green.GREEN40,
+                toggleBackgroundDefault: ink.INK10,
+                toggleBackgroundActive: green.GREEN80,
             },
         },
         light: {
@@ -400,8 +402,8 @@ var ref = {
                 surfaceBrandDisabled: ink.INK10,
                 surfaceBrandHover: blue.BLUE80,
                 surfaceBrandInverseDefault: blue.BLUE5,
-                surfaceBrandInverseHover: blue.BLUE20,
-                surfaceBrandInversePressed: blue.BLUE40,
+                surfaceBrandInverseHover: blue.BLUE10,
+                surfaceBrandInversePressed: blue.BLUE20,
                 surfaceBrandPressed: blue.BLUE120,
                 surfaceCriticalDefault: red.RED100,
                 surfaceCriticalDisabled: ink.INK10,
@@ -438,9 +440,9 @@ var ref = {
                 surfaceSuccessDefault: green.GREEN100,
                 surfaceSuccessDisabled: ink.INK10,
                 surfaceSuccessHover: green.GREEN80,
-                surfaceSuccessInverseDefault: green.GREEN10,
-                surfaceSuccessInverseHover: green.GREEN20,
-                surfaceSuccessInversePressed: green.GREEN40,
+                surfaceSuccessInverseDefault: green.GREEN5,
+                surfaceSuccessInverseHover: green.GREEN10,
+                surfaceSuccessInversePressed: green.GREEN20,
                 surfaceSuccessPressed: green.GREEN_STATUS,
                 surfaceWarningDefault: yellow.YELLOW100,
                 surfaceWarningDisabled: ink.INK10,
@@ -450,19 +452,19 @@ var ref = {
                 surfaceWarningInversePressed: yellow.YELLOW40,
                 surfaceWarningPressed: yellow.YELLOW120,
                 textDefault: ink.INK100,
-                textDisabled: ink.INK20,
+                textDisabled: ink.INK40,
                 textPlaceholder: ink.INK40,
                 textSecondary: ink.INK60,
                 textBrandDefault: blue.BLUE100,
-                textBrandDisabled: ink.INK20,
+                textBrandDisabled: ink.INK40,
                 textBrandHovered: blue.BLUE80,
                 textBrandPressed: blue.BLUE120,
                 textCriticalDefault: red.RED100,
-                textCriticalDisabled: ink.INK20,
+                textCriticalDisabled: ink.INK40,
                 textCriticalHovered: red.RED80,
                 textCriticalPressed: red.RED_STATUS,
                 textErrorDefault: red.RED100,
-                textErrorDisabled: ink.INK20,
+                textErrorDisabled: ink.INK40,
                 textErrorHovered: red.RED80,
                 textErrorPressed: red.RED_STATUS,
                 textInfoDefault: blue.BLUE100,
@@ -470,7 +472,7 @@ var ref = {
                 textInfoHovered: blue.BLUE80,
                 textInfoPressed: blue.BLUE120,
                 textLinkDefault: blue.BLUE100,
-                textLinkDisabled: ink.INK20,
+                textLinkDisabled: ink.INK40,
                 textLinkHovered: blue.BLUE80,
                 textLinkPressed: blue.BLUE120,
                 textLinkVisitedDefault: purple.PURPLE100,
@@ -482,11 +484,11 @@ var ref = {
                 textOnFillHovered: white.WHITE80,
                 textOnFillPressed: white.WHITE80,
                 textSuccessDefault: green.GREEN100,
-                textSuccessDisabled: ink.INK20,
+                textSuccessDisabled: ink.INK40,
                 textSuccessHovered: green.GREEN80,
                 textSuccessPressed: green.GREEN_STATUS,
                 textWarningDefault: yellow.YELLOW100,
-                textWarningDisabled: ink.INK20,
+                textWarningDisabled: ink.INK40,
                 textWarningHovered: yellow.YELLOW80,
                 textWarningPressed: yellow.YELLOW_STATUS,
                 selectBackgroundDisabled: white.WHITE40,
@@ -498,6 +500,8 @@ var ref = {
                 borderPrimaryFocused: blue.BLUE100,
                 borderWarningInverseDefault: yellow.YELLOW40,
                 borderSuccessInverseDefault: green.GREEN40,
+                toggleBackgroundDefault: ink.INK10,
+                toggleBackgroundActive: green.GREEN80,
             },
         },
     },
@@ -1167,8 +1171,8 @@ var LightTheme = {
         surfaceBrandDisabled: ink.INK10,
         surfaceBrandHover: blue.BLUE80,
         surfaceBrandInverseDefault: blue.BLUE5,
-        surfaceBrandInverseHover: blue.BLUE20,
-        surfaceBrandInversePressed: blue.BLUE40,
+        surfaceBrandInverseHover: blue.BLUE10,
+        surfaceBrandInversePressed: blue.BLUE20,
         surfaceBrandPressed: blue.BLUE120,
         surfaceCriticalDefault: red.RED100,
         surfaceCriticalDisabled: ink.INK10,
@@ -1205,9 +1209,9 @@ var LightTheme = {
         surfaceSuccessDefault: green.GREEN100,
         surfaceSuccessDisabled: ink.INK10,
         surfaceSuccessHover: green.GREEN80,
-        surfaceSuccessInverseDefault: green.GREEN10,
-        surfaceSuccessInverseHover: green.GREEN20,
-        surfaceSuccessInversePressed: green.GREEN40,
+        surfaceSuccessInverseDefault: green.GREEN5,
+        surfaceSuccessInverseHover: green.GREEN10,
+        surfaceSuccessInversePressed: green.GREEN20,
         surfaceSuccessPressed: green.GREEN_STATUS,
         surfaceWarningDefault: yellow.YELLOW100,
         surfaceWarningDisabled: ink.INK10,
@@ -1217,19 +1221,19 @@ var LightTheme = {
         surfaceWarningInversePressed: yellow.YELLOW40,
         surfaceWarningPressed: yellow.YELLOW120,
         textDefault: ink.INK100,
-        textDisabled: ink.INK20,
+        textDisabled: ink.INK40,
         textPlaceholder: ink.INK40,
         textSecondary: ink.INK60,
         textBrandDefault: blue.BLUE100,
-        textBrandDisabled: ink.INK20,
+        textBrandDisabled: ink.INK40,
         textBrandHovered: blue.BLUE80,
         textBrandPressed: blue.BLUE120,
         textCriticalDefault: red.RED100,
-        textCriticalDisabled: ink.INK20,
+        textCriticalDisabled: ink.INK40,
         textCriticalHovered: red.RED80,
         textCriticalPressed: red.RED_STATUS,
         textErrorDefault: red.RED100,
-        textErrorDisabled: ink.INK20,
+        textErrorDisabled: ink.INK40,
         textErrorHovered: red.RED80,
         textErrorPressed: red.RED_STATUS,
         textInfoDefault: blue.BLUE100,
@@ -1237,7 +1241,7 @@ var LightTheme = {
         textInfoHovered: blue.BLUE80,
         textInfoPressed: blue.BLUE120,
         textLinkDefault: blue.BLUE100,
-        textLinkDisabled: ink.INK20,
+        textLinkDisabled: ink.INK40,
         textLinkHovered: blue.BLUE80,
         textLinkPressed: blue.BLUE120,
         textLinkVisitedDefault: purple.PURPLE100,
@@ -1249,11 +1253,11 @@ var LightTheme = {
         textOnFillHovered: white.WHITE80,
         textOnFillPressed: white.WHITE80,
         textSuccessDefault: green.GREEN100,
-        textSuccessDisabled: ink.INK20,
+        textSuccessDisabled: ink.INK40,
         textSuccessHovered: green.GREEN80,
         textSuccessPressed: green.GREEN_STATUS,
         textWarningDefault: yellow.YELLOW100,
-        textWarningDisabled: ink.INK20,
+        textWarningDisabled: ink.INK40,
         textWarningHovered: yellow.YELLOW80,
         textWarningPressed: yellow.YELLOW_STATUS,
         selectBackgroundDisabled: white.WHITE40,
@@ -1265,6 +1269,8 @@ var LightTheme = {
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
     },
     fonts: configureFonts(),
     animation: {
@@ -1313,8 +1319,8 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         surfaceBrandDisabled: ink.INK10,
         surfaceBrandHover: blue.BLUE80,
         surfaceBrandInverseDefault: blue.BLUE5,
-        surfaceBrandInverseHover: blue.BLUE20,
-        surfaceBrandInversePressed: blue.BLUE40,
+        surfaceBrandInverseHover: blue.BLUE10,
+        surfaceBrandInversePressed: blue.BLUE20,
         surfaceBrandPressed: blue.BLUE120,
         surfaceCriticalDefault: red.RED100,
         surfaceCriticalDisabled: ink.INK10,
@@ -1351,9 +1357,9 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         surfaceSuccessDefault: green.GREEN100,
         surfaceSuccessDisabled: ink.INK10,
         surfaceSuccessHover: green.GREEN80,
-        surfaceSuccessInverseDefault: green.GREEN10,
-        surfaceSuccessInverseHover: green.GREEN20,
-        surfaceSuccessInversePressed: green.GREEN40,
+        surfaceSuccessInverseDefault: green.GREEN5,
+        surfaceSuccessInverseHover: green.GREEN10,
+        surfaceSuccessInversePressed: green.GREEN20,
         surfaceSuccessPressed: green.GREEN_STATUS,
         surfaceWarningDefault: yellow.YELLOW100,
         surfaceWarningDisabled: ink.INK10,
@@ -1363,19 +1369,19 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         surfaceWarningInversePressed: yellow.YELLOW40,
         surfaceWarningPressed: yellow.YELLOW120,
         textDefault: ink.INK100,
-        textDisabled: ink.INK20,
+        textDisabled: ink.INK40,
         textPlaceholder: ink.INK40,
         textSecondary: ink.INK60,
         textBrandDefault: blue.BLUE100,
-        textBrandDisabled: ink.INK20,
+        textBrandDisabled: ink.INK40,
         textBrandHovered: blue.BLUE80,
         textBrandPressed: blue.BLUE120,
         textCriticalDefault: red.RED100,
-        textCriticalDisabled: ink.INK20,
+        textCriticalDisabled: ink.INK40,
         textCriticalHovered: red.RED80,
         textCriticalPressed: red.RED_STATUS,
         textErrorDefault: red.RED100,
-        textErrorDisabled: ink.INK20,
+        textErrorDisabled: ink.INK40,
         textErrorHovered: red.RED80,
         textErrorPressed: red.RED_STATUS,
         textInfoDefault: blue.BLUE100,
@@ -1383,7 +1389,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         textInfoHovered: blue.BLUE80,
         textInfoPressed: blue.BLUE120,
         textLinkDefault: blue.BLUE100,
-        textLinkDisabled: ink.INK20,
+        textLinkDisabled: ink.INK40,
         textLinkHovered: blue.BLUE80,
         textLinkPressed: blue.BLUE120,
         textLinkVisitedDefault: purple.PURPLE100,
@@ -1395,11 +1401,11 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         textOnFillHovered: white.WHITE80,
         textOnFillPressed: white.WHITE80,
         textSuccessDefault: green.GREEN100,
-        textSuccessDisabled: ink.INK20,
+        textSuccessDisabled: ink.INK40,
         textSuccessHovered: green.GREEN80,
         textSuccessPressed: green.GREEN_STATUS,
         textWarningDefault: yellow.YELLOW100,
-        textWarningDisabled: ink.INK20,
+        textWarningDisabled: ink.INK40,
         textWarningHovered: yellow.YELLOW80,
         textWarningPressed: yellow.YELLOW_STATUS,
         selectBackgroundDisabled: white.WHITE40,
@@ -1411,6 +1417,8 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
     } });
 
 var DefaultTheme = LightTheme;
@@ -2027,7 +2035,7 @@ var getCheckedColor = function (_a) {
     if (color) {
         return color;
     }
-    return theme.colors.surfaceBrandDefault;
+    return theme.colors.toggleBackgroundActive;
 };
 var getThumbTintColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
@@ -2037,17 +2045,17 @@ var getThumbTintColor = function (_a) {
     }
     if (disabled) {
         if (theme.dark) {
-            return theme.colors.backgroundPrimary;
+            return theme.colors.toggleBackgroundDefault;
         }
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
     if (value) {
         return checkedColor;
     }
     if (theme.dark) {
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
 };
 var getOnTintColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
@@ -2057,17 +2065,17 @@ var getOnTintColor = function (_a) {
     }
     if (disabled) {
         if (theme.dark) {
-            return theme.colors.backgroundPrimary;
+            return theme.colors.toggleBackgroundDefault;
         }
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
     if (value) {
         return checkedColor;
     }
     if (theme.dark) {
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
 };
 var getSwitchColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, color = _a.color;
@@ -2109,25 +2117,19 @@ var Switch = function (_a) {
         disabled: disabled,
         value: value,
         color: color,
-    }), checkedColor = _b.checkedColor, onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
+    }), onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
     var props = version && version.major === 0 && version.minor <= 56
         ? {
             onTintColor: onTintColor,
             thumbTintColor: thumbTintColor,
         }
-        : Platform.OS === "web"
-            ? {
-                activeTrackColor: onTintColor,
-                thumbColor: thumbTintColor,
-                activeThumbColor: checkedColor,
-            }
-            : {
-                thumbColor: thumbTintColor,
-                trackColor: {
-                    true: onTintColor,
-                    false: onTintColor,
-                },
-            };
+        : {
+            thumbColor: thumbTintColor,
+            trackColor: {
+                true: onTintColor,
+                false: onTintColor,
+            },
+        };
     return (React$3.createElement(View, { row: true },
         React$3.createElement(Switch$1, __assign({ value: value, disabled: disabled, onValueChange: disabled ? undefined : onValueChange }, props, rest))));
 };
@@ -2712,8 +2714,8 @@ var styles$d = StyleSheet.create({
 });
 
 var Spacer = function (_a) {
-    var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c;
-    return React__default.createElement(View, { width: width, height: height, style: [style] });
+    var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c, backgroundColor = _a.backgroundColor;
+    return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
 };
 
 Dimensions.get("window").height;
@@ -6680,7 +6682,7 @@ var Checkbox = function (_a) {
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
                     styles$4.text14,
                     disabled && {
-                        color: colors.textSecondary,
+                        color: colors.textDisabled,
                     },
                     textStyle,
                 ] }, content))));