@ornikar/kitt-universal 1.1.0 → 2.2.0

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

@@ -544,7 +544,7 @@ var getColorFromState = function (state) {
       return 'danger';
 
     default:
-      return 'grey';
+      return 'black-light';
   }
 };
 
@@ -1063,33 +1063,31 @@ var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_temp
 });
 
 var _templateObject$h, _templateObject2$7;
-
-var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])), function (_ref2) {
-  var theme = _ref2.theme,
-      color = _ref2.color,
-      disabled = _ref2.disabled;
+var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])), function (_ref) {
+  var theme = _ref.theme,
+      color = _ref.color,
+      disabled = _ref.disabled;
   var iconButton = theme.kitt.iconButton;
   if (disabled) return iconButton.disabled.backgroundColor;
   if (color === 'white') return iconButton.white.pressedBackgroundColor;
   return iconButton["default"].pressedBackgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.iconButton.borderRadius;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.iconButton.borderRadius;
+  return theme.kitt.iconButton.width;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref5) {
-  var theme = _ref5.theme;
   return theme.kitt.iconButton.height;
 });
 var AnimatedViewContainer = styled(Animated$1.View)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
-
-function NativeAnimatedContainer(_ref6) {
-  var disabled = _ref6.disabled,
-      _ref6$color = _ref6.color,
-      color = _ref6$color === void 0 ? 'black' : _ref6$color,
-      children = _ref6.children,
-      onPress = _ref6.onPress;
+function PressableAnimatedContainer(_ref5) {
+  var disabled = _ref5.disabled,
+      _ref5$color = _ref5.color,
+      color = _ref5$color === void 0 ? 'black' : _ref5$color,
+      children = _ref5.children,
+      onPress = _ref5.onPress;
   var theme = useTheme();
   var pressed = useSharedValue(false);
   var opacityStyles = useAnimatedStyle(function () {
@@ -1105,7 +1103,7 @@ function NativeAnimatedContainer(_ref6) {
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (64:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (55:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1139,7 +1137,7 @@ function NativeAnimatedContainer(_ref6) {
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (70:39)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (61:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1172,8 +1170,6 @@ function NativeAnimatedContainer(_ref6) {
   }), children));
 }
 
-var PressableAnimatedContainer = NativeAnimatedContainer;
-
 var _templateObject$g;
 var IconButtonContentBorder = styled(PrimitiveView)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  border: ", ";\n  border-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -1275,9 +1271,9 @@ var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPre
 
 var _templateObject$d;
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ContainerView = styled(PrimitiveView)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
   var withPadding = _ref.withPadding,
       theme = _ref.theme;
@@ -1469,9 +1465,9 @@ function Message(_ref11) {
   })) : null);
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var OverlayPressable = styled(PrimitivePressable)(function (_ref) {
   var theme = _ref.theme;
   return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
@@ -1889,26 +1885,63 @@ var StoryGrid = {
 };
 
 var _templateObject$1;
-var Container = styled(PrimitiveView)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
+var Container = styled(PrimitiveView)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
   var theme = _ref.theme,
-      type = _ref.type;
-  return theme.kitt.tag[type].backgroundColor;
+      type = _ref.type,
+      variant = _ref.variant;
+  return theme.kitt.tag[type][variant].backgroundColor;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.tag.padding;
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant;
+  return theme.kitt.tag[type][variant].borderWidth;
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      type = _ref3.type,
+      variant = _ref3.variant;
+  return theme.kitt.tag[type][variant].borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.kitt.tag.borderRadius;
 });
-function Tag(_ref4) {
-  var label = _ref4.label,
-      _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? 'default' : _ref4$type;
+var getLabelColor = function (type, variant) {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
+function Tag(_ref6) {
+  var label = _ref6.label,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
   return /*#__PURE__*/React.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -1930,7 +1963,9 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
-  transparent: 'transparent'
+  transparent: 'transparent',
+  moonPurple: '#DBD6F9',
+  moonPurpleLight1: '#EDEBFC'
 };
 
 var avatarLateOceanTheme = {
@@ -1961,9 +1996,9 @@ var buttonLateOceanTheme = {
     disabledBorderColor: lateOceanColorPalette.black100
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
     disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.black100,
+    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
     disabledBorderColor: lateOceanColorPalette.black100
   },
   subtle: {
@@ -2008,6 +2043,7 @@ var cardLateOceanTheme = {
 
 var colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
   accentLight: lateOceanColorPalette.warmEmbraceLight1,
   success: lateOceanColorPalette.viride,
@@ -2163,15 +2199,40 @@ var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    // eslint-disable-next-line unicorn/expiring-todo-comments
-    // TODO: validate Moon shadow color with design team
-    backgroundColor: '#EDEBFC'
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.lateOcean
+    }
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.black1000
+    }
   },
   danger: {
-    backgroundColor: lateOceanColorPalette.warmEmbrace
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: colorsLateOceanTheme.danger
+    }
   }
 };
 
@@ -2196,8 +2257,6 @@ var typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
     'black-light': lateOceanColorPalette.black555,
-    grey: lateOceanColorPalette.black555,
-    'grey-light': lateOceanColorPalette.black200,
     white: lateOceanColorPalette.white,
     'white-light': lateOceanColorPalette.white,
     primary: lateOceanColorPalette.lateOcean,
@@ -2210,8 +2269,7 @@ var typographyLateOceanTheme = {
     headers: {
       fontFamily: {
         regular: 'Moderat-Extended-Bold',
-        bold: 'Moderat-Extended-Bold',
-        italic: 'Moderat-Extended-Bold'
+        bold: 'Moderat-Extended-Bold'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2231,18 +2289,15 @@ var typographyLateOceanTheme = {
     bodies: {
       fontFamily: {
         regular: 'NotoSans',
-        bold: 'NotoSans-Bold',
-        italic: 'NotoSans-Italic'
+        bold: 'NotoSans-Bold'
       },
       fontWeight: {
         regular: 400,
-        bold: 700,
-        italic: 400
+        bold: 700
       },
       fontStyle: {
         regular: 'normal',
-        bold: 'normal',
-        italic: 'italic'
+        bold: 'normal'
       },
       configs: {
         'body-large': createTypographyTypeConfig(1.6, 18, 24),
@@ -2278,7 +2333,9 @@ var breakpoints = {
     largeBreakpoint: 'max-width: 1023px',
     wideBreakpoint: 'max-width: 1279px'
   }
-};
+}; // eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+
 var theme = {
   spacing: 4,
   colors: colorsLateOceanTheme,