@ornikar/kitt-universal 2.1.1 → 2.2.0

package/dist/definitions/Button/Button.d.ts

@@ -10,7 +10,7 @@ export interface ButtonProps {
     iconSpin?: boolean;
     stretch?: boolean;
     testID?: string;
-    onPress: () => void;
+    onPress?: () => void;
 }
 export declare function Button({ children, type, icon, iconPosition, iconSpin, stretch, disabled, onPress, testID, }: ButtonProps): ReactElement;
 export {};

package/dist/definitions/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,oBAAY,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE5E,aAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAkB,EAClB,IAAI,EACJ,YAAqB,EACrB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,WAAW,GAAG,YAAY,CA2B5B"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,oBAAY,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE5E,aAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAkB,EAClB,IAAI,EACJ,YAAqB,EACrB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,WAAW,GAAG,YAAY,CA2B5B"}

package/dist/definitions/Tag/Tag.d.ts

@@ -1,9 +1,12 @@
 import type { ReactElement, ReactNode } from 'react';
-declare type TagType = 'primary' | 'default' | 'danger';
+import type { TypographyColor } from '../typography/Typography';
+export declare type TagType = 'primary' | 'default' | 'danger';
+export declare type TagVariant = 'outline' | 'fill';
 export interface TagProps {
     label: ReactNode;
     type?: TagType;
+    variant?: TagVariant;
 }
-export declare function Tag({ label, type }: TagProps): ReactElement;
-export {};
+export declare const getLabelColor: (type: TagType, variant: TagVariant) => TypographyColor;
+export declare function Tag({ label, type, variant }: TagProps): ReactElement;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/definitions/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,aAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAYD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAgB,EAAE,EAAE,QAAQ,GAAG,YAAY,CAQvE"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE,oBAAY,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,oBAAY,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAgBD,eAAO,MAAM,aAAa,SAAU,OAAO,WAAW,UAAU,KAAG,eAelE,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAgB,EAAE,OAAgB,EAAE,EAAE,QAAQ,GAAG,YAAY,CAQzF"}

package/dist/definitions/themes/default.d.ts

@@ -236,13 +236,40 @@ export declare const theme: {
         borderRadius: string;
         padding: string;
         primary: {
-            backgroundColor: string;
+            fill: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
+            outline: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
         };
         default: {
-            backgroundColor: string;
+            fill: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
+            outline: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
         };
         danger: {
-            backgroundColor: string;
+            fill: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
+            outline: {
+                backgroundColor: string;
+                borderWidth: string;
+                borderColor: string;
+            };
         };
     };
     shadows: {

package/dist/definitions/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/themes/default.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAenF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;CAoBvB,CAAC;AAIF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAejB,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,IAAI,EAAE,OAAO,KAAK,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,WAAW,EAAE,OAAO,WAAW,CAAC;CACjC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/themes/default.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAenF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;CAoBvB,CAAC;AAIF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAejB,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,IAAI,EAAE,OAAO,KAAK,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,WAAW,EAAE,OAAO,WAAW,CAAC;CACjC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/definitions/themes/late-ocean/tagLateOceanTheme.d.ts

@@ -2,13 +2,40 @@ export declare const tagLateOceanTheme: {
     borderRadius: string;
     padding: string;
     primary: {
-        backgroundColor: string;
+        fill: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
+        outline: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
     };
     default: {
-        backgroundColor: string;
+        fill: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
+        outline: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
     };
     danger: {
-        backgroundColor: string;
+        fill: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
+        outline: {
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+        };
     };
 };
 //# sourceMappingURL=tagLateOceanTheme.d.ts.map

package/dist/definitions/themes/late-ocean/tagLateOceanTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagLateOceanTheme.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/tagLateOceanTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC"}
+{"version":3,"file":"tagLateOceanTheme.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/tagLateOceanTheme.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC7B,CAAC"}

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

@@ -1885,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));
 }
 
@@ -1959,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: {
@@ -2162,13 +2199,40 @@ var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    backgroundColor: lateOceanColorPalette.moonPurpleLight1
+    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
+    }
   }
 };