@ornikar/kitt-universal 1.1.0 → 2.2.0

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

@@ -558,7 +558,7 @@ var getColorFromState = function (state) {
       return 'danger';
 
     default:
-      return 'grey';
+      return 'black-light';
   }
 };
 
@@ -1136,51 +1136,37 @@ var PressableIconButton = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n\n      &:hover,\n      .kitt-hover & {\n        @media (hover: none) and (pointer: coarse) {\n          transform: scale(").concat(scale.base.hover, ");\n        }\n\n        @media(").concat(theme.breakpoints.min.mediumBreakpoint, ") {\n          transform: scale(").concat(scale.medium.hover, ");\n        }\n      }\n\n      &:active,\n      .kitt-active & {\n        transform: scale(").concat(scale.base.active, ");\n      }\n\n      &:hover,\n      .kitt-hover &,\n      &:focus,\n      .kitt-focus &,\n      &:active,\n      .kitt-active & {\n        background-color: ").concat(color === 'white' ? iconButton.white.pressedBackgroundColor : iconButton["default"].pressedBackgroundColor, ";\n      }\n    ");
 });
 
-function WebAnimatedContainer(_ref) {
-  var children = _ref.children,
-      color = _ref.color,
-      disabled = _ref.disabled,
-      onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(PressableIconButton, {
-    accessibilityRole: "button",
-    color: color,
-    disabled: disabled,
-    onPress: onPress
-  }, children);
-}
-
 var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
   componentId: "kitt-universal__sc-xl9ll5-0"
-})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref2) {
-  var theme = _ref2.theme,
-      color = _ref2.color,
-      disabled = _ref2.disabled;
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], 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 = /*#__PURE__*/styled(Animated$1.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedViewContainer",
   componentId: "kitt-universal__sc-xl9ll5-1"
 })(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
-
-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 = /*#__PURE__*/useTheme();
   var pressed = useSharedValue(false);
   var opacityStyles = useAnimatedStyle(function () {
@@ -1196,7 +1182,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);
@@ -1230,7 +1216,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);
@@ -1263,8 +1249,6 @@ function NativeAnimatedContainer(_ref6) {
   }), children));
 }
 
-var PressableAnimatedContainer = Platform.OS === 'web' ? WebAnimatedContainer : NativeAnimatedContainer;
-
 var IconButtonContentBorder = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
@@ -1371,9 +1355,9 @@ function ListItemSideContent(_ref5) {
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
@@ -1580,9 +1564,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 = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
@@ -2061,26 +2045,63 @@ var StoryGrid = {
 var Container = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], 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));
 }
 
@@ -2102,7 +2123,9 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
-  transparent: 'transparent'
+  transparent: 'transparent',
+  moonPurple: '#DBD6F9',
+  moonPurpleLight1: '#EDEBFC'
 };
 
 var avatarLateOceanTheme = {
@@ -2133,9 +2156,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: {
@@ -2180,6 +2203,7 @@ var cardLateOceanTheme = {
 
 var colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
   accentLight: lateOceanColorPalette.warmEmbraceLight1,
   success: lateOceanColorPalette.viride,
@@ -2335,15 +2359,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
+    }
   }
 };
 
@@ -2368,8 +2417,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,
@@ -2382,8 +2429,7 @@ var typographyLateOceanTheme = {
     headers: {
       fontFamily: {
         regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        italic: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2403,18 +2449,15 @@ var typographyLateOceanTheme = {
     bodies: {
       fontFamily: {
         regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold',
-        italic: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Italic'
+        bold: Platform.OS === 'web' ? 'Noto Sans' : '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),
@@ -2450,7 +2493,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,