@gataca/design-system 0.4.16 → 0.4.17

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

@@ -7,6 +7,7 @@ export { default as HeadingAvatarsCard } from './native/Cards/HeadingAvatars/ind
 export { default as ConsentCard } from './native/Cards/Consent/index.native';
 export { default as HeadingCredential } from './native/Headings/HeadingCredential/index.native';
 export { default as HeadingContainer } from './native/Headings/HeadingContainer/index.native';
+export { default as StatusHeadingContainer } from './native/Headings/StatusHeadingContainer/index.native';
 export { default as Button } from './native/Buttons/Button/index.native';
 export { default as RoundedButton } from './native/Buttons/RoundedButton/index.native';
 export { default as ButtonIcon } from './native/Buttons/ButtonIcon/index.native';
@@ -133,6 +134,7 @@ export { default as MinusIcon } from './native/Icons/icons/minus';
 export { default as MoneyIcon } from './native/Icons/icons/money';
 export { default as MonitorIcon } from './native/Icons/icons/monitor';
 export { default as MoreVerticalIcon } from './native/Icons/icons/moreVertical';
+export { default as MoreHorizontalIcon } from './native/Icons/icons/moreHorizontal';
 export { default as PencilIcon } from './native/Icons/icons/pencil';
 export { default as PlayCircleIcon } from './native/Icons/icons/playCircle';
 export { default as PlusSquaresIcon } from './native/Icons/icons/plusSquares';

package/dist/components/index.web.d.ts

@@ -6,6 +6,7 @@ export { default as HeadingAvatarsCard } from './web/Cards/HeadingAvatars/index.
 export { default as ConsentCard } from './web/Cards/Consent/index.web';
 export { default as HeadingCredential } from './web/Headings/HeadingCredential/index.web';
 export { default as HeadingContainer } from './web/Headings/HeadingContainer/index.web';
+export { default as StatusHeadingContainer } from './web/Headings/StatusHeadingContainer/index.web';
 export { default as Button } from './web/Buttons/Button/index.web';
 export { default as RoundedButton } from './web/Buttons/RoundedButton/index.web';
 export { default as ButtonIcon } from './web/Buttons/ButtonIcon/index.web';
@@ -127,6 +128,7 @@ export { default as MinusIcon } from './web/Icons/icons/minus';
 export { default as MoneyIcon } from './web/Icons/icons/money';
 export { default as MonitorIcon } from './web/Icons/icons/monitor';
 export { default as MoreVerticalIcon } from './web/Icons/icons/moreVertical';
+export { default as MoreHorizontalIcon } from './web/Icons/icons/moreHorizontal';
 export { default as PencilIcon } from './web/Icons/icons/pencil';
 export { default as PlayCircleIcon } from './web/Icons/icons/playCircle';
 export { default as PlusSquaresIcon } from './web/Icons/icons/plusSquares';

package/dist/components/native/Cards/MiniCredential/miniCredential_styles.native.d.ts

@@ -1,6 +1,6 @@
 import { ColorsType } from '../../../../styles/Colors';
 import { StyleType } from '../../../../styles';
-export declare const styles: (colors: ColorsType, fontStyles: StyleType, background_color?: string) => {
+export declare const styles: (credIsWhite: boolean, colors: ColorsType, fontStyles: StyleType, background_color?: string, hasIndicator?: boolean, size?: string) => {
     credCardContainer: {
         display: "flex";
         flexDirection: "column";
@@ -9,6 +9,10 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
         alignSelf: "stretch";
         width: number;
         height: number;
+        justifyContent: "flex-start" | "flex-end";
+        marginRight: number;
+        marginTop: number;
+        position: "relative";
     };
     linearGradientOverlay: {
         paddingVertical: number;
@@ -16,6 +20,7 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
         display: "flex";
         flexDirection: "column";
         borderRadius: number;
+        justifyContent: "flex-start" | "flex-end";
         width: "100%";
         height: "100%";
         alignSelf: "stretch";
@@ -63,6 +68,41 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
         height: number;
         resizeMode: "contain";
     };
+    credCardVerifiedIcon: {
+        marginLeft: "auto";
+        display: "flex";
+        alignItems: "flex-start";
+        justifyContent: "flex-end";
+    };
+    credCardIndicator: {
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    smallCredLines: {
+        display: "flex";
+        gap: number;
+        flexDirection: "column";
+        width: "100%";
+        alignSelf: "stretch";
+        marginTop: "auto";
+    };
+    smallCredLinesTop: {
+        backgroundColor: string;
+        height: number;
+        width: number;
+        gap: number;
+        borderRadius: number;
+        opacity: number;
+    };
+    smallCredLinesBottom: {
+        backgroundColor: string;
+        height: number;
+        width: number;
+        gap: number;
+        borderRadius: number;
+        opacity: number;
+    };
 };
 export declare const credentialCardShadows: (colors: ColorsType) => {
     elevation: number;

package/dist/components/native/Cards/MiniCredential/miniCredential_types.native.d.ts

@@ -1,5 +1,7 @@
 import { IconSize, IconStyle, ShieldIconSize } from '../../Icons/icon_types';
+import { IndicatorProps } from '../../Indicator/Indicator/indicator_types.native';
 export type VerifiedIcons = 'error' | 'check';
+export type MiniCredSize = 'medium' | 'small';
 export declare const verifiedIconMap: {
     [key in VerifiedIcons]: React.FC<{
         size: IconSize | ShieldIconSize;
@@ -11,11 +13,13 @@ export declare const verifiedIconMap: {
 };
 export type MiniCredentialCardProps = {
     id?: string;
+    size?: MiniCredSize;
     issuer: {
         image?: string;
         name: string;
         failToLoadImageText?: string;
     };
+    indicator?: IndicatorProps;
     chip?: {
         text: string;
         color?: string;

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

@@ -320,6 +320,40 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
         };
     };
+    lightPink: {
+        filled: {
+            enable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            active: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            disable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+        };
+        outline: {
+            enable: {
+                textColor: string;
+            };
+            hover: {
+                textColor: string;
+            };
+            active: {
+                textColor: string;
+            };
+            disable: {
+                textColor: string;
+            };
+        };
+    };
     grey: {
         filled: {
             enable: {

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

@@ -1,5 +1,5 @@
 import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
-export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
+export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'lightPink' | 'black';
 export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
 export type ChipStyle = 'outline' | 'filled';
 export type ChipForm = 'square' | 'round';

package/dist/components/native/Dialog/Dialog/dialog_types.native.d.ts

@@ -9,7 +9,7 @@ export interface DialogProps {
     type: DialogType;
     use: DialogUse;
     title: string;
-    contentText?: string;
+    contentText?: string | React.Component | any;
     alert?: AlertProps;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;

package/dist/components/native/Drawer/BottomDrawer/bottomDrawer_styles.native.d.ts

@@ -17,20 +17,6 @@ declare const _default: {
         overflow: "hidden";
         flex: number;
     };
-    topSeparator: {
-        width: "100%";
-        paddingTop: number;
-        display: "flex";
-        justifyContent: "center";
-        flexDirection: "row";
-    };
-    topSeparatorLine: {
-        width: number;
-        paddingTop: number;
-        borderRadius: number;
-        backgroundColor: string;
-        margin: "auto";
-    };
     topContainer: {
         display: "flex";
         flexDirection: "row";

package/dist/components/native/Headings/HeadingContainer/HeadingContainer_types.native.d.ts

@@ -15,7 +15,7 @@ export interface HeadingContainerProps {
     sectionName?: string;
     titleText?: string;
     titleTooltip?: ParentComponentTooltipProps;
-    contentText?: string;
+    contentText?: string | React.Component | any;
     chip?: ChipProps;
     containerStyle?: any;
 }

package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer.native.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusHeadingContainerProps } from './StatusHeadingContainer_types.native';
+declare const StatusHeadingContainer: (props: React.PropsWithChildren<StatusHeadingContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export default StatusHeadingContainer;

package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer_styles.native.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    statusHeadingContainer: {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        width: "100%";
+        justifyContent: "flex-start";
+        alignItems: "center";
+    };
+    bottomImageContainer: {
+        display: "flex";
+        flexDirection: "row";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+    };
+    bottomImage: {
+        flex: number;
+    };
+};
+export default _default;

package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer_types.native.d.ts

@@ -0,0 +1,22 @@
+import { IllustrationProps } from '../../Illustrations/illustrations_types';
+import { HeadingContainerProps } from '../HeadingContainer/HeadingContainer_types.native';
+export interface StatusHeadingContainerProps {
+    id?: string;
+    swapIllustration: IllustrationProps;
+    headingContainer: HeadingContainerProps;
+    bottomImage?: {
+        source: {
+            uri: string;
+            width?: number;
+            height?: number;
+        };
+        id?: string;
+        width?: number | string;
+        height?: number | string;
+        containerStyle?: any;
+        resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | undefined;
+        resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
+        parentContainerStyle?: any;
+    };
+    containerStyle?: any;
+}

package/dist/components/native/Headings/StatusHeadingContainer/index.native.d.ts

@@ -0,0 +1,2 @@
+import StatusHeadingContainer from './StatusHeadingContainer.native';
+export default StatusHeadingContainer;

package/dist/components/native/Icons/icons/moreHorizontal.d.ts

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

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

@@ -97,6 +97,7 @@ export { default as MinusIcon } from './icons/minus';
 export { default as MoneyIcon } from './icons/money';
 export { default as MonitorIcon } from './icons/monitor';
 export { default as MoreVerticalIcon } from './icons/moreVertical';
+export { default as MoreHorizontalIcon } from './icons/moreHorizontal';
 export { default as PencilIcon } from './icons/pencil';
 export { default as PlayCircleIcon } from './icons/playCircle';
 export { default as PlusSquaresIcon } from './icons/plusSquares';

package/dist/components/native/Illustrations/illustrations_types.d.ts

@@ -28,6 +28,7 @@ export declare const IllustrationsMap: {
     logout: any;
     heartbreak: any;
     time: any;
+    update: any;
     search: any;
     credentialPrimary: any;
     credentialSecondary: any;

package/dist/components/native/Lists/List/list_types.native.d.ts

@@ -1,9 +1,12 @@
+import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingContainer_types.native';
 import { ListItemProps } from '../ListItem/listItem_types.native';
 export type ListBg = 'grey' | 'white';
 export interface ListProps {
     id?: string;
     list: ListItemProps[];
     bgColor?: ListBg;
+    spacing?: boolean;
+    headingContainer?: HeadingContainerProps;
     containerStyle?: any;
     contentContainerStyle?: any;
     nestedScrollEnabled?: boolean;

package/dist/components/native/Lists/ListItem/listItem.config.native.d.ts

@@ -0,0 +1,74 @@
+import { ColorsType } from '../../../../utils/theming';
+import { ListItemColor, ListItemState, ListItemType } from './listItem_types.native';
+export declare const createColorMap: (Colors: ColorsType) => {
+    white: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    grey: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    none: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+};
+export declare const getContainerStyles: (colors: ColorsType, color?: ListItemColor, type?: ListItemType, state?: ListItemState) => {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderWidth: number;
+    borderColor: string;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderWidth: number;
+    borderColor: string;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderTopWidth: number;
+    borderTopColor: string;
+    borderWidth?: undefined;
+    borderColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderTopWidth: number;
+    borderTopColor: string;
+    borderWidth?: undefined;
+    borderColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderWidth: number;
+    borderColor?: undefined;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderWidth: number;
+    borderColor?: undefined;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+};

package/dist/components/native/Lists/ListItem/listItem_styles.native.d.ts

@@ -12,7 +12,6 @@ declare const _default: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "space-between";
-        alignItems: "center";
         gap: number;
         flexWrap: "wrap";
         alignSelf: "stretch";
@@ -24,17 +23,8 @@ declare const _default: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "flex-start";
-        alignItems: "center";
         gap: number;
         flex: number;
     };
-    notificationContainer: {
-        display: "flex";
-        flexDirection: "column";
-        justifyContent: "center";
-        alignItems: "center";
-        cursor: "pointer";
-        marginLeft: "auto";
-    };
 };
 export default _default;

package/dist/components/native/Lists/ListItem/listItem_types.native.d.ts

@@ -11,26 +11,20 @@ import { IconSize } from '../../Icons/icon_types';
 import { IconGroupProps } from '../../Icons/IconGroup/iconGroup_types.native';
 import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.native';
 import { SwitchProps } from '../../Switch/Switch/switch_types.native';
-import { ListMetaContainerColor } from '../ListMetaContainer/listMetaContainer_types.native';
-export type ListItemType = 'filled' | 'ghost' | 'outline' | 'divider';
-export type ListItemState = 'enable' | 'active';
-export type ListItemCondition = 'all' | 'title' | 'titleExtraInfo';
-export type ListItemSize = 'medium' | 'small';
-export type ListItemColor = 'black' | 'gray' | 'white' | 'red';
-export type ListItemAlign = 'left' | 'right';
+import { ListMetaContainerProps } from '../ListMetaContainer/listMetaContainer_types.native';
+export type ListItemType = 'filled' | 'outline' | 'divider' | 'select';
+export type ListItemState = 'enable' | 'hover' | 'active';
+export type ListItemColor = 'white' | 'grey' | 'none';
+export type ListItemAlign = 'center' | 'top';
 export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'chip' | 'indicator' | 'buttonIcon' | 'chipGroup';
-export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button' | 'chip' | 'iconGroup';
+export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'icon' | 'segmentedButton' | 'listMetaContainer' | 'action' | 'button' | 'chip' | 'iconGroup';
 export interface ListItemProps {
     id?: string;
+    color?: ListItemColor;
     type?: ListItemType;
     state?: ListItemState;
-    condition?: ListItemCondition;
-    title?: string;
-    content?: string;
-    extraInfo?: string;
-    mainTextColor?: ListMetaContainerColor;
-    mainTextInfoColor?: ListMetaContainerColor;
-    mainActionItem?: ActionItemsProps;
+    align?: ListItemAlign;
+    listMetaContainer?: ListMetaContainerProps;
     leading: ListItemLeading;
     trailing: ListItemTrailing;
     helperText?: string;
@@ -55,16 +49,12 @@ export interface ListItemProps {
         }>;
         color?: string;
     };
+    typeSelectRadioButton?: RadioButtonProps;
     segmentedButton?: SegmentedButtonProps;
-    trailingValue?: string;
+    trailingListMetaContainer?: ListMetaContainerProps;
     hasHoverStyle?: boolean;
     containerStyle?: any;
     actionItem?: ActionItemsProps;
-    notification?: {
-        id?: string;
-        text: string;
-        onPress: (x?: any) => void;
-    };
     button?: ButtonProps;
     leadingChip?: ChipProps;
     chip?: ChipProps;

package/dist/components/native/Lists/ListMetaContainer/listMetaContainer_types.native.d.ts

@@ -1,22 +1,41 @@
 import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.native';
+import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.native';
 import { ChipProps } from '../../Chips/Chip/Chip.types.native';
+import { IconSize, IconStyle } from '../../Icons/icon_types';
 import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
+export type ListMetaContainerType = 'main' | 'notification';
+export type ListMetaContainerMainColor = 'white' | 'black';
 export type ListMetaContainerSize = 'medium' | 'small';
-export type ListMetaContainerColor = 'black' | 'gray' | 'red' | 'white';
+export type ListMetaContainerColor = 'black' | 'gray' | 'purple' | 'white';
 export type ListMetaContainerAlign = 'left' | 'right';
 export interface ListMetaContainerProps {
     id?: string;
     condition: ListMetaContainerCondition;
+    type?: ListMetaContainerType;
     size?: ListMetaContainerSize;
-    color?: ListMetaContainerColor;
-    infoColor?: ListMetaContainerColor;
+    mainColor?: ListMetaContainerMainColor;
+    titleColor?: ListMetaContainerColor;
+    contentColor?: ListMetaContainerColor;
     align?: ListMetaContainerAlign;
     tooltip?: ParentComponentTooltipProps;
     chip?: ChipProps;
     actionItem?: ActionItemsProps;
     title?: string;
     content?: string;
-    extraInfo?: string;
+    extraInfo?: string | React.Component | any;
+    icon16px?: {
+        id?: string;
+        color?: string;
+        style?: IconStyle;
+        Icon?: React.FC<{
+            id?: string;
+            size: IconSize;
+            style?: IconStyle;
+            color: string;
+        }>;
+        onPress: (x?: any) => void;
+    };
+    roundedButton?: RoundedButtonProps;
     containerStyle?: any;
 }

package/dist/components/native/TopAppBar/TopAppBar/topAppBar_types.native.d.ts

@@ -1,17 +1,25 @@
 import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.native';
 import { RoundedButtonState, TrailingIcon } from '../../Buttons/RoundedButton/RoundedButton.types.native';
 import { BellIconStyle, IconSize, IconStyle } from '../../Icons/icon_types';
-export type TopAppBarConfiguration = 'main-screen' | 'sub-screen' | 'sheet-screen';
+export type TopAppBarConfiguration = 'main-screen' | 'sub-screen' | 'sheet-screen' | 'action-screen';
 export type TopAppBarSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
 export type TopAppBarType = 'quantity' | 'status';
-export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search';
+export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search' | 'settings';
 export interface TopAppBarProps {
     id?: string;
     configuration: TopAppBarConfiguration;
     bg?: boolean;
     showBackIcon?: boolean;
     backButtonAction?: (x?: any) => void;
-    text?: string;
+    centerText?: string;
+    leftTextWithAction?: {
+        text: string;
+        action: (x?: any) => void;
+    };
+    rightTextWithAction?: {
+        text: string;
+        action: (x?: any) => void;
+    };
     trailingContainer?: {
         leadingIcon?: {
             icon: TopAppBarTrailingContainerIcon;

package/dist/components/native/TopAppBar/TopDrawerBar/topDrawerBar_styles.native.d.ts

@@ -4,8 +4,8 @@ declare const _default: {
         right: number;
         left: number;
         position: "absolute";
-        minHeight: number;
         top: number;
+        minHeight: number;
         zIndex: number;
     };
     topDrawerBarContainer: {
@@ -29,5 +29,20 @@ declare const _default: {
         justifyContent: "flex-start";
         flexDirection: "row";
     };
+    notchContainer: {
+        width: "100%";
+        paddingTop: number;
+        paddingBottom: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    notch: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
 };
 export default _default;

package/dist/components/native/TopAppBar/TopDrawerBar/topDrawerBar_types.native.d.ts

@@ -5,6 +5,7 @@ export interface TopDrawerBarProps {
     configuration: TopDrawerBarConfiguration;
     bg?: boolean;
     divider?: boolean;
+    notch?: boolean;
     leadingIcon?: {
         Icon: React.FC<{
             size: IconSize;

package/dist/components/web/Buttons/RoundedButton/RoundedButton.config.web.d.ts

@@ -349,8 +349,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
 };
 export declare const getRoundedButtonGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, size: string) => {
     minHeight: number;
-    paddingVertical: number;
-    paddingHorizontal: number;
+    padding: string;
     backgroundColor: any;
     borderColor: any;
     borderWidth: number;
@@ -358,8 +357,7 @@ export declare const getRoundedButtonGeneralStyles: (colors: ColorsType, color:
     cursor: string;
 };
 export declare const getRoundedButtonPaddings: (size: string, style: string) => {
-    paddingVertical: number;
-    paddingHorizontal: number;
+    padding: string;
 };
 export declare const getRoundedButtonMinHeight: (size: string) => 40 | 32;
 export declare const getRoundedButtonContentStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, size: string) => {

package/dist/components/web/Cards/MiniCredential/miniCredential_styles.web.d.ts

@@ -1,6 +1,6 @@
 import { ColorsType } from '../../../../styles/Colors';
 import { StyleType } from '../../../../styles';
-export declare const styles: (colors: ColorsType, fontStyles: StyleType, background_color?: string, verifiedIcon?: boolean, hasGradient?: boolean) => {
+export declare const styles: (credIsWhite: boolean, colors: ColorsType, fontStyles: StyleType, background_color?: string, verifiedIcon?: boolean, hasGradient?: boolean, hasIndicator?: boolean, size?: string) => {
     credCardContainer: React.CSSProperties;
     linearGradientOverlay: React.CSSProperties;
     credCardMainContent: React.CSSProperties;
@@ -9,4 +9,8 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
     credIssuerImageError: React.CSSProperties;
     credCardIssuerImage: React.CSSProperties;
     credCardVerifiedIcon: React.CSSProperties;
+    credCardIndicator: React.CSSProperties;
+    smallCredLines: React.CSSProperties;
+    smallCredLinesTop: React.CSSProperties;
+    smallCredLinesBottom: React.CSSProperties;
 };

package/dist/components/web/Cards/MiniCredential/miniCredential_types.web.d.ts

@@ -1,5 +1,7 @@
 import { IconSize, IconStyle, ShieldIconSize } from '../../Icons/icon_types';
+import { IndicatorProps } from '../../Indicator/Indicator/indicator_types.web';
 export type VerifiedIcons = 'error' | 'check';
+export type MiniCredSize = 'medium' | 'small';
 export declare const verifiedIconMap: {
     [key in VerifiedIcons]: React.FC<{
         size: IconSize | ShieldIconSize;
@@ -11,7 +13,9 @@ export declare const verifiedIconMap: {
 };
 export type MiniCredentialCardProps = {
     id?: string;
+    size?: MiniCredSize;
     className?: string;
+    indicator?: IndicatorProps;
     issuer: {
         image?: string;
         name: string;