@gataca/design-system 4.0.1 → 4.1.0

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential_styles.native.d.ts

@@ -9,6 +9,7 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         marginLeft: "auto";
         marginRight: "auto";
         overflow: "hidden";
+        minHeight: number;
         shadowColor: string;
         shadowOffset: {
             width: number;
@@ -17,6 +18,7 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         shadowOpacity: number;
         shadowRadius: number;
         elevation: number;
+        backgroundColor: string;
     } | {
         borderWidth: number;
         borderColor: string;
@@ -33,6 +35,8 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         marginLeft: "auto";
         marginRight: "auto";
         overflow: "hidden";
+        minHeight: number;
+        backgroundColor: string;
     } | {
         borderWidth: number;
         borderColor: string;
@@ -49,26 +53,17 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         marginLeft: "auto";
         marginRight: "auto";
         overflow: "hidden";
+        minHeight: number;
+        backgroundColor: string;
     };
     imageBg: {
         flex: number;
         resizeMode: "cover";
         justifyContent: "center";
         padding: number;
-    };
-    borderGradient: {
-        padding: number;
-        overflow: "hidden";
         borderRadius: number;
-        position: "absolute";
-        left: number;
-        right: number;
-        bottom: number;
-    };
-    imageStroke: {
-        flex: number;
-        resizeMode: "stretch";
-        justifyContent: "center";
+        minHeight: number;
+        backgroundColor: string;
     };
     containerDefault: {
         width: "100%";
@@ -99,45 +94,6 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         position: "relative";
         backgroundColor: string;
     };
-    headerContainer: {
-        height: number;
-        flexDirection: "column";
-        gap: number;
-        paddingVertical: number;
-        position: "relative";
-    };
-    headerPaddingDefault: {
-        paddingHorizontal: number;
-    };
-    headerPaddingSmall: {
-        paddingHorizontal: number;
-    };
-    headerGradient: {
-        position: "absolute";
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        justifyContent: "center";
-        paddingHorizontal: number;
-    };
-    headerTextContainer: {
-        width: number;
-        gap: number;
-    };
-    headerText: {
-        flexWrap: "wrap";
-        fontFamily?: string;
-        fontSize?: number;
-        lineHeight?: number;
-        color?: string;
-        textDecoration?: string;
-        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-        opacity?: number;
-        fontStyle?: "normal" | "italic";
-    };
     dataContainer: {
         flexDirection: "column";
         gap: number;
@@ -154,15 +110,11 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
     dataContainerPaddingSmall: {
         padding: number;
     };
-    fieldSection: {
-        width: number;
-        gap: number;
-    };
-    fieldSectionFlex: {
-        flex: number;
-        flexDirection: "column";
+    bottomDataContainer: {
+        flexDirection: "row";
+        alignItems: "flex-end";
+        justifyContent: "flex-start";
         gap: number;
-        justifyContent: "center";
         minHeight: number;
         minWidth: number;
     };
@@ -187,216 +139,6 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         opacity?: number;
         fontStyle?: "normal" | "italic";
     };
-    bottomDataContainer: {
-        flexDirection: "row";
-        alignItems: "flex-end";
-        justifyContent: "flex-start";
-        gap: number;
-        minHeight: number;
-        minWidth: number;
-    };
-    starButton: {
-        borderRadius: number;
-        padding: number;
-        justifyContent: "center";
-        alignItems: "center";
-        flexShrink: number;
-    };
-    starIconContainer: {
-        width: number;
-        height: number;
-        overflow: "hidden";
-        justifyContent: "center";
-        alignItems: "center";
-    };
-    starIcon: {
-        width: number;
-        height: number;
-    };
-    starIconPlaceholder: {
-        fontSize: number;
-        color: string;
-        textAlign: "center";
-    };
-    badgeDefault: {
-        left: number;
-    };
-    badgeSmall: {
-        left: number;
-    };
-    badge: {
-        position: "absolute";
-        top: number;
-        width: number;
-        height: number;
-        flexDirection: "column";
-        alignItems: "center";
-        justifyContent: "flex-start";
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    } | {
-        shadowColor: string;
-        shadowOpacity: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowRadius: number;
-        elevation: number;
-        position: "absolute";
-        top: number;
-        width: number;
-        height: number;
-        flexDirection: "column";
-        alignItems: "center";
-        justifyContent: "flex-start";
-    } | {
-        elevation: number;
-        shadowColor: string;
-        shadowOpacity: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowRadius: number;
-        position: "absolute";
-        top: number;
-        width: number;
-        height: number;
-        flexDirection: "column";
-        alignItems: "center";
-        justifyContent: "flex-start";
-    };
-    badgeFullImage: {
-        width: number;
-        height: number;
-    };
-    badgeContainer: {
-        width: number;
-        height: number;
-        justifyContent: "center";
-        alignItems: "center";
-        zIndex: number;
-    };
-    badgeBg: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        justifyContent: "center";
-        alignItems: "center";
-        position: "relative";
-    };
-    badgeCenter: {
-        width: number;
-        height: number;
-        justifyContent: "center";
-        alignItems: "center";
-        borderRadius: number;
-        backgroundColor: string;
-        borderWidth: number;
-        borderColor: string;
-    };
-    badgeIconImage: {
-        width: number;
-        height: number;
-    };
-    badgeIconPlaceholder: {
-        fontSize: number;
-        color: string;
-        fontWeight: "bold";
-        textAlign: "center";
-    };
-    ribbon: {
-        width: number;
-        height: number;
-        marginTop: number;
-        zIndex: number;
-    };
-    ribbonImage: {
-        width: number;
-        height: number;
-    };
-    ribbonFallback: {
-        width: number;
-        height: number;
-        borderBottomLeftRadius: number;
-        borderBottomRightRadius: number;
-    };
-    borderOverlay: {
-        position: "absolute";
-        left: number;
-        top: number;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
-    };
-    badgeDiplomaDefault: {
-        position: "absolute";
-        right: number;
-        top: number;
-        width: number;
-        height: number;
-        zIndex: number;
-    };
-    badgeDiplomaSmall: {
-        position: "absolute";
-        left: "50%";
-        marginLeft: number;
-        width: number;
-        height: number;
-        zIndex: number;
-    };
-    completeBadgeImage: {
-        width: number;
-        height: number;
-    };
-    medalRibbon: {
-        position: "absolute";
-        top: number;
-        left: "50%";
-        width: number;
-        height: number;
-        transform: {
-            translateX: number;
-        }[];
-    } | {
-        shadowColor: string;
-        shadowOpacity: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowRadius: number;
-        elevation?: undefined;
-        position: "absolute";
-        top: number;
-        left: "50%";
-        width: number;
-        height: number;
-        transform: {
-            translateX: number;
-        }[];
-    } | {
-        elevation: number;
-        shadowColor?: undefined;
-        shadowOpacity?: undefined;
-        shadowOffset?: undefined;
-        shadowRadius?: undefined;
-        position: "absolute";
-        top: number;
-        left: "50%";
-        width: number;
-        height: number;
-        transform: {
-            translateX: number;
-        }[];
-    };
     badgeMedalContainer: {
         position: "absolute";
         top: number;
@@ -414,15 +156,14 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         width: number;
         height: number;
         justifyContent: "center";
-        left: number;
         alignItems: "center";
         position: "absolute";
+        left: number;
     };
     circularTextContainer: {
         position: "absolute";
         width: "100%";
         height: "100%";
-        display: "flex";
         justifyContent: "center";
         alignItems: "center";
         zIndex: number;
@@ -438,7 +179,6 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         position: "absolute";
         width: "100%";
         height: "100%";
-        display: "flex";
         justifyContent: "center";
         alignItems: "center";
         zIndex: number;
@@ -451,53 +191,18 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         position: "absolute";
         width: "100%";
         height: "100%";
-        display: "flex";
-        justifyContent: "center";
-        alignItems: "center";
-        zIndex: number;
-    };
-    innerCircleContainer: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        justifyContent: "center";
-        alignItems: "center";
-        overflow: "hidden";
-        position: "relative";
-        borderWidth: number;
-        zIndex: number;
-    };
-    innerCircleSvg: {
-        width: number;
-        height: number;
-    };
-    innerHexContainer: {
-        width: number;
-        height: number;
-        display: "flex";
         justifyContent: "center";
         alignItems: "center";
-        position: "relative";
         zIndex: number;
-        overflow: "hidden";
     };
     innerHexSvg: {
         position: "absolute";
         top: number;
         left: number;
-        justifyContent: "center";
-        alignItems: "center";
         width: number;
         height: number;
-    };
-    borderRing: {
-        position: "absolute";
-        top: number;
-        left: number;
-        width: number;
-        height: number;
-        borderRadius: number;
-        zIndex: number;
+        justifyContent: "center";
+        alignItems: "center";
     };
     emblemContainer: {
         width: number;
@@ -513,46 +218,11 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         width: number;
         height: number;
     };
-    emblemPlaceholder: {
-        fontSize: number;
-        color: string;
-        fontWeight: "bold";
-        textAlign: "center";
-        textShadowColor: string;
-        textShadowOffset: {
-            width: number;
-            height: number;
-        };
-        textShadowRadius: number;
-    };
-    shadow: {
-        borderRadius: number;
-        shadowOpacity: number;
-        shadowRadius: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        elevation: number;
-    };
-    clip: {
-        borderRadius: number;
-        overflow: "hidden";
-        backgroundColor: string;
-    };
-    content: {
-        justifyContent: "center";
-        paddingHorizontal: number;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    };
-    title: {
-        color: string;
-        fontSize: number;
-        fontWeight: "800";
+    ribbon: {
+        width: number;
+        height: number;
+        marginTop: number;
+        zIndex: number;
     };
     innerBorder: {};
 };

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential_types.native.d.ts

@@ -10,5 +10,6 @@ export interface LegalageCredentialProps {
     onStarPress?: () => void;
     isFavorite?: boolean;
     certificateText?: string;
+    hasBadge?: boolean;
     containerStyle?: any;
 }

package/dist/components/native/Credentials/PersonalIdCredential/personalIdCredential_styles.native.d.ts

@@ -1,6 +1,6 @@
 import { ColorsType } from '../../../../styles/Colors';
 import { StyleType } from '../../../../styles/Fonts';
-export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
+export declare const styles: (colors: ColorsType, fontStyles: StyleType, thereIsPhoto: boolean) => {
     outerContainer: {
         borderWidth: number;
         borderColor: string;
@@ -66,8 +66,7 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         flex: number;
     };
     headerContainer: {
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
+        borderRadius: number;
         paddingVertical: number;
         justifyContent: "center";
         alignItems: "flex-start";
@@ -124,12 +123,12 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
     fullNameSectionDefault: {
         gap: number;
     };
-    fullNamelabelText: {
-        marginRight: number;
-    };
     fullNameSectionSmall: {
         gap: number;
     };
+    fullNamelabelText: {
+        marginRight: number;
+    };
     labelText: {
         color: string;
         fontFamily?: string;
@@ -151,7 +150,7 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         opacity?: number;
         fontStyle?: "normal" | "italic";
     };
-    firstBottomDataContainer: {
+    bottomContainer: {
         flex: number;
         width: "100%";
         flexDirection: "row";
@@ -162,25 +161,17 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
     bottomDataContainer: {
         flex: number;
         width: "100%";
-        flexDirection: "row";
-        alignItems: "flex-end";
+        flexDirection: "column";
+        alignItems: "flex-start";
         justifyContent: "space-between";
+        alignSelf: "stretch";
         gap: number;
     };
     fieldSection: {
         flex: number;
         flexDirection: "column";
         gap: number;
-        justifyContent: "center";
-        minHeight: number;
-        minWidth: number;
-    };
-    rowFieldSection: {
-        flex: number;
-        flexDirection: "row";
-        gap: number;
-        justifyContent: "space-between";
-        alignItems: "baseline";
+        justifyContent: "flex-start";
         minHeight: number;
         minWidth: number;
     };
@@ -204,36 +195,6 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         opacity?: number;
         fontStyle?: "normal" | "italic";
     };
-    starButton: {
-        backgroundColor: string;
-        borderRadius: number;
-        padding: number;
-        justifyContent: "center";
-        alignItems: "center";
-        flexShrink: number;
-    };
-    starIconContainer: {
-        width: number;
-        height: number;
-        overflow: "hidden";
-        justifyContent: "center";
-        alignItems: "center";
-    };
-    starIcon: {
-        width: number;
-        height: number;
-    };
-    starIconPlaceholder: {
-        fontSize: number;
-        color: string;
-        textAlign: "center";
-    };
-    photoDefault: {
-        right: number;
-    };
-    photoSmall: {
-        right: number;
-    };
     photo: {
         position: "absolute";
         top: number;
@@ -280,19 +241,18 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
         borderRadius: number;
         overflow: "hidden";
     };
+    photoDefault: {
+        right: number;
+    };
+    photoSmall: {
+        right: number;
+    };
     photoImage: {
         width: "100%";
-        height: "150%";
-        position: "absolute";
-        left: number;
-        top: number;
-    };
-    borderOverlay: {
+        height: "100%";
         position: "absolute";
+        backgroundColor: string;
         left: number;
         top: number;
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
     };
 };

package/dist/components/native/Credentials/PersonalIdCredential/personalIdCredential_types.native.d.ts

@@ -6,7 +6,7 @@ export interface PersonalIdCredentialProps {
     headingCredential1: HeadingCredentialProps;
     headingCredential2: HeadingCredentialProps;
     headingCredential3: HeadingCredentialProps;
-    headingCredential4: HeadingCredentialProps;
+    headingCredential4?: HeadingCredentialProps;
     headingCredential5: HeadingCredentialProps;
     headingCredential6: HeadingCredentialProps;
     photo?: ImageSourcePropType;

package/dist/components/native/Icons/icons/withSelectedState/credentialView.d.ts

@@ -0,0 +1,9 @@
+import { IconSize, IconStyle } from '../../icon_types';
+type CredentialViewIconProps = {
+    id?: string;
+    size: IconSize;
+    color?: string;
+    style: IconStyle;
+};
+declare const CredentialViewIcon: (props: CredentialViewIconProps) => import("react/jsx-runtime").JSX.Element;
+export default CredentialViewIcon;

package/dist/components/native/Icons/icons/withSelectedState/stack.d.ts

@@ -0,0 +1,9 @@
+import { IconSize, IconStyle } from '../../icon_types';
+type StackIconProps = {
+    id?: string;
+    size: IconSize;
+    color?: string;
+    style: IconStyle;
+};
+declare const StackIcon: (props: StackIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StackIcon;

package/dist/components/native/Icons/index.native.d.ts

@@ -11,6 +11,7 @@ export { default as KeyIcon } from './icons/withSelectedState/key';
 export { default as ConnectIcon } from './icons/withSelectedState/connect';
 export { default as ServicesLinkedV4Icon } from './icons/withSelectedState/servicesLinkedV4';
 export { default as CircleWarningIcon } from './icons/withSelectedState/circleWarning';
+export { default as CredentialViewIcon } from './icons/withSelectedState/credentialView';
 export { default as FeaturesIcon } from './icons/withSelectedState/features';
 export { default as UsersV2Icon } from './icons/withSelectedState/users';
 export { default as AwardIcon } from './icons/withSelectedState/award';
@@ -27,6 +28,7 @@ export { default as PaymentMethodIcon } from './icons/withSelectedState/paymentM
 export { default as StarIcon } from './icons/withSelectedState/star';
 export { default as SubscriptionsIcon } from './icons/withSelectedState/subscriptions';
 export { default as StampIcon } from './icons/withSelectedState/stamp';
+export { default as StackIcon } from './icons/withSelectedState/stack';
 export { default as SettingsIcon } from './icons/withSelectedState/settings';
 export { default as ServicesLinkedV2Icon } from './icons/withSelectedState/servicesLinkedV2';
 export { default as ShieldCheckIcon } from './icons/withSelectedState/shieldCheck';

package/dist/components/web/Buttons/SegmentedButton/SegmentedButton.types.web.d.ts

@@ -1,8 +1,15 @@
+import { IconSize, IconStyle } from '../../Icons/icon_types';
 export type Size = 'medium' | 'small';
 export type SelectedColor = 'purple' | 'white';
 export interface SegmentedButtonItem {
     id: string;
-    text: string;
+    text?: string;
+    Icon?: React.FC<{
+        size: IconSize;
+        style: IconStyle;
+        color: string;
+    }>;
+    iconColor?: string;
 }
 export interface SegmentedButtonProps<D = any> {
     id?: string;

package/dist/components/web/Chips/Chip/Chip.config.web.d.ts

@@ -375,12 +375,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
         };
         outline: {
             enable: {
+                bordersColor: string;
                 textColor: string;
             };
             hover: {
                 textColor: string;
             };
             active: {
+                backgroundColor: string;
                 textColor: string;
                 bordersColor: string;
             };

package/dist/components/web/Chips/Chip/Chip.types.web.d.ts

@@ -20,4 +20,5 @@ export interface ChipProps {
     showText?: boolean;
     tooltip?: ParentComponentTooltipProps;
     containerStyle?: any;
+    onClick?: (x?: any) => void;
 }