@ornikar/kitt-universal 11.0.0 → 11.2.0

package/dist/index-browser-all.es.js

@@ -170,6 +170,140 @@ var actionCard = {
       translateY: 3
     }
   },
+  'primary-border-soft': {
+    "default": {
+      backgroundColor: colors.uiBackgroundLight,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    hovered: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    disabled: {
+      backgroundColor: lateOceanColorPalette.white,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 0
+    },
+    focused: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.moonPurple,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    pressed: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.moonPurple,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 3
+    }
+  },
+  'primary-border-hard': {
+    "default": {
+      backgroundColor: colors.uiBackgroundLight,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    hovered: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    disabled: {
+      backgroundColor: lateOceanColorPalette.white,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 0
+    },
+    focused: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: lateOceanColorPalette.lateOcean,
+        offsetX: 0,
+        offsetY: 4,
+        opacity: 1,
+        radius: 0
+      },
+      translateY: 0
+    },
+    pressed: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderColor: lateOceanColorPalette.lateOcean,
+      borderWidth: 1,
+      shadow: {
+        color: '',
+        offsetX: 0,
+        offsetY: 0,
+        opacity: 0,
+        radius: 0
+      },
+      translateY: 3
+    }
+  },
   secondary: {
     "default": {
       backgroundColor: lateOceanColorPalette.black50,
@@ -1297,20 +1431,36 @@ var getStateKey = function (isHovered, isPressed, isFocused) {
   return 'default';
 };
 
+var getThemeName = function (variant, borderVariant) {
+  if (borderVariant === 'soft') {
+    return 'primary-border-soft';
+  }
+  if (borderVariant === 'hard') {
+    return 'primary-border-hard';
+  }
+  return variant;
+};
+
 function ActionCardContentWrapper(_ref) {
   var isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
     variant = _ref.variant,
+    _ref$borderVariant = _ref.borderVariant,
+    borderVariant = _ref$borderVariant === void 0 ? 'none' : _ref$borderVariant,
     children = _ref.children;
   var theme = useTheme();
   var state = getStateKey(isHovered, isPressed, isFocused);
+  if ((process.env.NODE_ENV !== "production") && borderVariant !== 'none' && variant !== 'primary') {
+    throw new Error("borderVariant=".concat(borderVariant, " is only allowed with variant=primary"));
+  }
   var translateY = theme.kitt.actionCard[variant][state].translateY;
   var sharedTransform = translateY ? {
     transform: [{
       translateY: translateY
     }]
   } : {};
+  var themeName = getThemeName(variant, borderVariant);
   return /*#__PURE__*/jsx(View, {
     _ios: {
       style: sharedTransform
@@ -1322,11 +1472,11 @@ function ActionCardContentWrapper(_ref) {
       style: sharedTransform
     },
     width: "100%",
-    backgroundColor: "kitt.actionCard.".concat(variant, ".").concat(state, ".backgroundColor"),
+    backgroundColor: "kitt.actionCard.".concat(themeName, ".").concat(state, ".backgroundColor"),
     borderRadius: "kitt.actionCard.borderRadius",
-    borderColor: "kitt.actionCard.".concat(variant, ".").concat(state, ".borderColor"),
-    borderWidth: "kitt.actionCard.".concat(variant, ".").concat(state, ".borderWidth"),
-    shadow: "kitt.actionCard.".concat(variant, ".").concat(state, ".shadow"),
+    borderColor: "kitt.actionCard.".concat(themeName, ".").concat(state, ".borderColor"),
+    borderWidth: "kitt.actionCard.".concat(themeName, ".").concat(state, ".borderWidth"),
+    shadow: "kitt.actionCard.".concat(themeName, ".").concat(state, ".shadow"),
     children: children
   });
 }
@@ -1348,6 +1498,8 @@ function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
+    _ref$borderVariant = _ref.borderVariant,
+    borderVariant = _ref$borderVariant === void 0 ? 'none' : _ref$borderVariant,
     disabled = _ref.disabled,
     testID = _ref.testID,
     isHovered = _ref.isHovered,
@@ -1360,6 +1512,7 @@ function ActionCard(_ref) {
       children: children
     }) : /*#__PURE__*/jsx(ActionCardContentWrapper, {
       variant: variant,
+      borderVariant: borderVariant,
       isHovered: isHovered,
       isFocused: isFocused,
       isPressed: isPressed,
@@ -1371,6 +1524,8 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'secondary' : _ref2$variant,
+    _ref2$borderVariant = _ref2.borderVariant,
+    borderVariant = _ref2$borderVariant === void 0 ? 'none' : _ref2$borderVariant,
     disabled = _ref2.disabled,
     testID = _ref2.testID,
     href = _ref2.href,
@@ -1396,6 +1551,7 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         isFocused = _ref3.isFocused;
       return /*#__PURE__*/jsx(ActionCard, {
         variant: variant,
+        borderVariant: borderVariant,
         disabled: disabled,
         isHovered: isHovered || isHoveredInternal,
         isFocused: isFocused || isFocusedInternal,
@@ -1529,6 +1685,34 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
+var typographyColors = ['black', 'black-anthracite', 'black-disabled', 'black-light', 'white', 'white-light', 'primary', 'primary-light', 'accent', 'success', 'danger', 'warning'];
+
+function getNBThemeColorFromColorProps(colorName) {
+  return "kitt.typography.".concat(colorName);
+}
+
+function isColorTypographyColor(colorName) {
+  if (!colorName || typeof colorName !== 'string') return false;
+  return typographyColors.includes(colorName);
+}
+function getTypographyColorValue(colorName) {
+  if (!colorName) return undefined;
+  if (isColorTypographyColor(colorName)) {
+    return getNBThemeColorFromColorProps(colorName);
+  }
+  return colorName;
+}
+
+var isTypeHeader = function (type) {
+  return type.startsWith('header');
+};
+
+var isTypographyHeader = function (type, isHeaderTypographyInContext) {
+  if (type) return isTypeHeader(type);
+  if (isHeaderTypographyInContext != null) return isHeaderTypographyInContext;
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+
 var _excluded$E = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -1539,25 +1723,9 @@ var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
 }
-
-/** @deprecated use native-base instead for SSR compatibility */
-var getTypographyTypeConfigKey = function (theme) {
-  var isMediumOrAbove = theme.responsive.matchWindowSize({
-    minWidth: KittBreakpoints.MEDIUM
-  });
-  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
-};
 function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === 'base' || breakpointName === 'small' ? 'baseAndSmall' : 'mediumAndWide';
 }
-var isTypeHeader = function (type) {
-  return type.startsWith('header');
-};
-var isTypographyHeader = function (type, isHeaderTypographyInContext) {
-  if (type) return isTypeHeader(type);
-  if (isHeaderTypographyInContext != null) return isHeaderTypographyInContext;
-  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
-};
 
 // TODO[native-base@>=3.4.19] this currently does not work. Retest when updating native-base.
 // & {
@@ -1577,9 +1745,6 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
-function getNBThemeColorFromColorProps(colorName) {
-  return colorName ? "kitt.typography.".concat(colorName) : undefined;
-}
 function Typography(_ref) {
   var _type$base;
   var accessibilityRole = _ref.accessibilityRole,
@@ -1599,6 +1764,7 @@ function Typography(_ref) {
     variant = _ref.variant,
     color = _ref.color,
     otherProps = _objectWithoutProperties(_ref, _excluded$E);
+  var sx = useSx();
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -1608,6 +1774,11 @@ function Typography(_ref) {
   var fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
   }));
+  var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+  var colorStyles = sx({
+    color: getTypographyColorValue(currentColor),
+    textDecorationColor: getTypographyColorValue(currentColor)
+  });
   if (process.env.NODE_ENV !== 'production') {
     Object.entries(type).forEach(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
@@ -1618,16 +1789,13 @@ function Typography(_ref) {
       }
     });
   }
-  var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
-  var text = /*#__PURE__*/jsx(Text, _objectSpread({
+  var text = /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
-    fontFamily: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
-    color: getNBThemeColorFromColorProps(currentColor),
-    textDecorationColor: getNBThemeColorFromColorProps(currentColor)
-  }, otherProps));
+    fontFamily: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant)
+  }, colorStyles), otherProps));
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
     children: text
@@ -1705,10 +1873,11 @@ var _excluded$D = ["color"],
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     props = _objectWithoutProperties(_ref, _excluded$D);
-  var theme = useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
-    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
-  }));
+  var sx = useSx();
+  var colorStyle = sx({
+    color: getTypographyColorValue(color)
+  });
+  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), colorStyle));
 }
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
@@ -6659,6 +6828,50 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               borderColor: theme.actionCard.primary.pressed.borderColor
             }
           },
+          'primary-border-soft': {
+            "default": {
+              backgroundColor: theme.actionCard['primary-border-soft']["default"].backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft']["default"].borderColor
+            },
+            disabled: {
+              backgroundColor: theme.actionCard['primary-border-soft'].disabled.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].disabled.borderColor
+            },
+            hovered: {
+              backgroundColor: theme.actionCard['primary-border-soft'].hovered.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].hovered.borderColor
+            },
+            focused: {
+              backgroundColor: theme.actionCard['primary-border-soft'].focused.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].focused.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.actionCard['primary-border-soft'].pressed.backgroundColor,
+              borderColor: theme.actionCard['primary-border-soft'].pressed.borderColor
+            }
+          },
+          'primary-border-hard': {
+            "default": {
+              backgroundColor: theme.actionCard['primary-border-hard']["default"].backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard']["default"].borderColor
+            },
+            disabled: {
+              backgroundColor: theme.actionCard['primary-border-hard'].disabled.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].disabled.borderColor
+            },
+            hovered: {
+              backgroundColor: theme.actionCard['primary-border-hard'].hovered.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].hovered.borderColor
+            },
+            focused: {
+              backgroundColor: theme.actionCard['primary-border-hard'].focused.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].focused.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.actionCard['primary-border-hard'].pressed.backgroundColor,
+              borderColor: theme.actionCard['primary-border-hard'].pressed.borderColor
+            }
+          },
           highlight: {
             "default": {
               backgroundColor: theme.actionCard.highlight["default"].backgroundColor,
@@ -6938,6 +7151,40 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               borderWidth: theme.actionCard.primary.pressed.borderWidth
             }
           },
+          'primary-border-soft': {
+            "default": {
+              borderWidth: theme.actionCard['primary-border-soft']["default"].borderWidth
+            },
+            disabled: {
+              borderWidth: theme.actionCard['primary-border-soft'].disabled.borderWidth
+            },
+            hovered: {
+              borderWidth: theme.actionCard['primary-border-soft'].hovered.borderWidth
+            },
+            focused: {
+              borderWidth: theme.actionCard['primary-border-soft'].focused.borderWidth
+            },
+            pressed: {
+              borderWidth: theme.actionCard['primary-border-soft'].pressed.borderWidth
+            }
+          },
+          'primary-border-hard': {
+            "default": {
+              borderWidth: theme.actionCard['primary-border-hard']["default"].borderWidth
+            },
+            disabled: {
+              borderWidth: theme.actionCard['primary-border-hard'].disabled.borderWidth
+            },
+            hovered: {
+              borderWidth: theme.actionCard['primary-border-hard'].hovered.borderWidth
+            },
+            focused: {
+              borderWidth: theme.actionCard['primary-border-hard'].focused.borderWidth
+            },
+            pressed: {
+              borderWidth: theme.actionCard['primary-border-hard'].pressed.borderWidth
+            }
+          },
           highlight: {
             "default": {
               borderWidth: theme.actionCard.highlight["default"].borderWidth
@@ -7394,6 +7641,98 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               }
             }
           },
+          'primary-border-soft': {
+            "default": {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft']["default"].shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft']["default"].shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft']["default"].shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft']["default"].shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft']["default"].shadow.radius
+              }
+            },
+            hovered: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].hovered.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].hovered.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].hovered.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].hovered.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].hovered.shadow.radius
+              }
+            },
+            focused: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].focused.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].focused.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].focused.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].focused.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].focused.shadow.radius
+              }
+            },
+            pressed: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-soft'].pressed.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-soft'].pressed.shadow.offsetX,
+                  height: theme.actionCard['primary-border-soft'].pressed.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-soft'].pressed.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-soft'].pressed.shadow.radius
+              }
+            }
+          },
+          'primary-border-hard': {
+            "default": {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard']["default"].shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard']["default"].shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard']["default"].shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard']["default"].shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard']["default"].shadow.radius
+              }
+            },
+            hovered: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].hovered.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].hovered.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].hovered.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].hovered.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].hovered.shadow.radius
+              }
+            },
+            focused: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].focused.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].focused.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].focused.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].focused.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].focused.shadow.radius
+              }
+            },
+            pressed: {
+              shadow: {
+                shadowColor: theme.actionCard['primary-border-hard'].pressed.shadow.color,
+                shadowOffset: {
+                  width: theme.actionCard['primary-border-hard'].pressed.shadow.offsetX,
+                  height: theme.actionCard['primary-border-hard'].pressed.shadow.offsetY
+                },
+                shadowOpacity: theme.actionCard['primary-border-hard'].pressed.shadow.opacity,
+                shadowRadius: theme.actionCard['primary-border-hard'].pressed.shadow.radius
+              }
+            }
+          },
           highlight: {
             "default": {
               shadow: {
@@ -8792,6 +9131,13 @@ function Tag(_ref6) {
   });
 }
 
+/** @deprecated use native-base instead for SSR compatibility */
+var getTypographyTypeConfigKey = function (theme) {
+  var isMediumOrAbove = theme.responsive.matchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
+};
 /** @deprecated this mixin is not SSR compatible */
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,