@gataca/design-system 0.3.89 → 0.3.91

package/dist/components/native/TextField/TextField/textField_types.native.d.ts

@@ -5,6 +5,7 @@ export type TextFieldSize = 'medium' | 'large';
 export type TextFieldState = 'enable' | 'disable' | 'hover' | 'active' | 'complete' | 'success' | 'error';
 export type TextFieldAutoComplete = 'additional-name' | 'address-line1' | 'address-line2' | 'birthdate-day' | 'birthdate-full' | 'birthdate-month' | 'birthdate-year' | 'cc-csc' | 'cc-exp' | 'cc-exp-day' | 'cc-exp-month' | 'cc-exp-year' | 'cc-number' | 'country' | 'current-password' | 'email' | 'family-name' | 'gender' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'name' | 'name-family' | 'name-given' | 'name-middle' | 'name-middle-initial' | 'name-prefix' | 'name-suffix' | 'new-password' | 'nickname' | 'one-time-code' | 'organization' | 'organization-title' | 'password' | 'password-new' | 'postal-address' | 'postal-address-country' | 'postal-address-extended' | 'postal-address-extended-postal-code' | 'postal-address-locality' | 'postal-address-region' | 'postal-code' | 'street-address' | 'sms-otp' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-device' | 'url' | 'username' | 'username-new' | 'off';
 export interface TextFieldProps {
+    id?: string;
     state: TextFieldState;
     textFieldSize: TextFieldSize;
     label: {
@@ -18,6 +19,7 @@ export interface TextFieldProps {
     placeholder?: string;
     keyboardType?: KeyboardTypeOptions;
     leadingIcon?: {
+        id?: string;
         Icon: React.FC<{
             size: IconSize;
             color: string;
@@ -29,6 +31,7 @@ export interface TextFieldProps {
         onPress?: (x?: any) => void;
     };
     trailingIcon?: {
+        id?: string;
         Icon: React.FC<{
             size: IconSize;
             color: string;

package/dist/components/native/Tooltips/Tooltip/tooltip_types.native.d.ts

@@ -2,6 +2,7 @@ import { ReactNode, RefObject } from 'react';
 import { View, ViewProps } from 'react-native';
 export type PopableAction = 'press' | 'longpress' | 'hover';
 export type PopableProps = {
+    id?: string;
     action?: PopableAction;
     animated?: PopoverProps['animated'];
     backgroundColor?: PopoverProps['backgroundColor'];
@@ -48,6 +49,7 @@ export type CaretProps = {
     style?: ViewProps['style'];
 };
 export type ParentComponentTooltipProps = {
+    id?: string;
     action?: PopableAction;
     caretPosition?: PopoverProps['caretPosition'];
     textAlign?: PopoverProps['textAlign'];

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

@@ -6,6 +6,7 @@ export type TopAppBarSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
 export type TopAppBarType = 'quantity' | 'status';
 export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search';
 export interface TopAppBarProps {
+    id?: string;
     configuration: TopAppBarConfiguration;
     bg?: boolean;
     showBackIcon?: boolean;

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

@@ -1,6 +1,7 @@
 import { BellIconStyle, IconSize, IconStyle } from '../../Icons/icon_types';
 export type TopDrawerBarConfiguration = 'main' | 'sub-sheet';
 export interface TopDrawerBarProps {
+    id?: string;
     configuration: TopDrawerBarConfiguration;
     bg?: boolean;
     divider?: boolean;

package/dist/components/web/Action/ActionItems/actionItems_types.web.d.ts

@@ -5,6 +5,8 @@ export type ActionItemsLeading = 'icon' | 'image';
 export type ActionItemsLeadingAlign = 'left' | 'right';
 export type ActionItemsLeadingSize = '24' | '16';
 export interface ActionItemsProps {
+    id?: string;
+    className?: string;
     color?: ActionItemsColor;
     headingContainer: HeadingContainerProps;
     leading?: ActionItemsLeading;

package/dist/components/web/Alerts/Alert/Alert_config.web.d.ts

@@ -1,18 +1,26 @@
 import { ColorsType } from '../../../../styles';
 export declare const iconsByState: {
     alert: (props: {
+        id?: string;
+        className?: string;
         size: import("../../Icons/icon_types").IconSize;
         color?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     warning: (props: {
+        id?: string;
+        className?: string;
         size: import("../../Icons/icon_types").IconSize;
         color?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     info: (props: {
+        id?: string;
+        className?: string;
         size: import("../../Icons/icon_types").IconSize;
         color?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     success: (props: {
+        id?: string;
+        className?: string;
         size: import("../../Icons/icon_types").IconSize;
         color?: string;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/web/Alerts/Alert/Alert_types.web.d.ts

@@ -4,6 +4,8 @@ export type AlertState = 'alert' | 'warning' | 'info' | 'success';
 export type AlertAlign = 'left' | 'right';
 export type AlertOrientation = 'vertical' | 'horizontal';
 export interface AlertProps {
+    id?: string;
+    className?: string;
     state: AlertState;
     title?: string;
     subTitle?: string;

package/dist/components/web/Avatars/Avatar/Avatar.types.web.d.ts

@@ -7,6 +7,8 @@ export type AvatarType = 'image' | 'initials';
 export type AvatarSize = '2xl' | 'large' | 'medium' | 'small';
 export type AvatarColor = 'gray' | 'teal' | 'pink' | 'purple' | 'black';
 export interface AvatarProps {
+    id?: string;
+    className?: string;
     type: AvatarType;
     image?: string;
     text?: string;
@@ -14,12 +16,16 @@ export interface AvatarProps {
     color?: AvatarColor;
     showIndicator?: boolean;
     indicator?: {
+        id?: string;
+        className?: string;
         color?: IndicatorColor;
         type?: IndicatorType;
         quantity?: number;
     };
     showButtonIcon?: boolean;
     buttonIcon?: {
+        id?: string;
+        className?: string;
         color?: ButtonIconColor;
         state?: ButtonIconState;
         Icon?: React.FC<{

package/dist/components/web/Avatars/AvatarGroup/avatarGroup.types.web.d.ts

@@ -3,6 +3,8 @@ import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingCo
 import { AvatarProps } from '../Avatar/Avatar.types.web';
 export type AvatarGroupAlign = 'horizontal' | 'vertical';
 export interface AvatarGroupProps {
+    id?: string;
+    className?: string;
     avatar?: AvatarProps;
     headingContainer?: HeadingContainerProps;
     actionItem?: ActionItemsProps;

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

@@ -2,6 +2,8 @@ export type BrandButtonColor = 'white' | 'black';
 export type BrandButtonSize = 'app' | 'web';
 export type Brand = 'apple' | 'google';
 export interface BrandButtonProps {
+    id?: string;
+    className?: string;
     brand?: Brand;
     color?: BrandButtonColor;
     size?: BrandButtonSize;

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

@@ -5,6 +5,8 @@ export type ButtonStyle = 'fill' | 'elevated' | 'outline' | 'text';
 export type TextSize = 'large' | 'medium' | 'small';
 export type LeadingIcon = 'check' | 'alert' | 'checkCircle' | 'close' | 'gatacaLogo' | 'home';
 export interface ButtonProps {
+    id?: string;
+    className?: string;
     loading?: boolean;
     text: string;
     color?: ButtonColor;

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

@@ -6,6 +6,8 @@ export type ButtonIconStyle = 'square' | 'round';
 export type Size = '2xlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | '2xsmall' | '3xsmall';
 export type ButtonIconForm = 'square' | 'round';
 export interface ButtonIconProps {
+    id?: string;
+    className?: string;
     color?: ButtonIconColor;
     state?: ButtonIconState;
     style?: ButtonIconStyle;
@@ -17,6 +19,8 @@ export interface ButtonIconProps {
     }>;
     showIndicator?: boolean;
     indicator?: {
+        id?: string;
+        className?: string;
         quantity?: number;
         color?: IndicatorColor;
     };

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

@@ -6,6 +6,8 @@ export type Size = 'small' | 'xsmall';
 export type LeadingIcon = 'check' | 'alert' | 'warning' | 'slash' | 'plus';
 export type TrailingIcon = 'close' | 'chevronDown' | 'info';
 export interface RoundedButtonProps {
+    id?: string;
+    className?: string;
     text: string;
     color?: RoundedButtonColor;
     state?: RoundedButtonState;

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

@@ -5,6 +5,8 @@ export interface SegmentedButtonItem {
     text: string;
 }
 export interface SegmentedButtonProps<D = any> {
+    id?: string;
+    className?: string;
     items: SegmentedButtonItem[];
     selectedId: string;
     size: Size;

package/dist/components/web/Cards/Consent/consentCard_types.web.d.ts

@@ -2,6 +2,8 @@ import { ButtonProps } from '../../Buttons/Button/Button.types.web';
 import { ListProps } from '../../Lists/List/list_types.web';
 import { ListItemProps } from '../../Lists/ListItem/listItem_types.web';
 export type ConsentCardProps = {
+    id?: string;
+    className?: string;
     leadingListItem: ListItemProps;
     button?: ButtonProps;
     contentListItem?: ListItemProps;

package/dist/components/web/Cards/Credential/credential_types.web.d.ts

@@ -13,6 +13,8 @@ export declare const verifiedIconMap: {
     }>;
 };
 export type CredentialCardProps = {
+    id?: string;
+    className?: string;
     state: CredentialCardStates;
     issuer: {
         image?: string;
@@ -20,6 +22,8 @@ export type CredentialCardProps = {
         failToLoadImageText?: string;
     };
     chip?: {
+        id?: string;
+        className?: string;
         text: string;
         containerStyle?: any;
         tooltip?: ParentComponentTooltipProps;
@@ -29,22 +33,32 @@ export type CredentialCardProps = {
         tooltip?: ParentComponentTooltipProps;
     };
     headingCredential1: {
+        id?: string;
+        className?: string;
         typeText: string;
         valueText?: string;
         imageSlot?: string;
     };
     headingCredential2: {
+        id?: string;
+        className?: string;
         typeText: string;
     };
     headingCredential3: {
+        id?: string;
+        className?: string;
         typeText: string;
         valueText: string;
     };
     headingCredential4: {
+        id?: string;
+        className?: string;
         typeText: string;
         valueText: string;
     };
     headingCredential5: {
+        id?: string;
+        className?: string;
         typeText: string;
         valueText?: string;
         chip?: {

package/dist/components/web/Cards/HeadingAvatars/headingAvatarsCard_types.web.d.ts

@@ -1,6 +1,8 @@
 import { AvatarGroupProps } from '../../Avatars/AvatarGroup/avatarGroup.types.web';
 import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingContainer_types.web';
 export type HeadingAvatarsCardProps = {
+    id?: string;
+    className?: string;
     headingContainer: HeadingContainerProps;
     leftAvatarGroup: AvatarGroupProps;
     rightAvatarGroup: AvatarGroupProps;

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

@@ -10,6 +10,8 @@ export declare const verifiedIconMap: {
     }>;
 };
 export type MiniCredentialCardProps = {
+    id?: string;
+    className?: string;
     issuer: {
         image?: string;
         name: string;

package/dist/components/web/Checkbox/Checkbox/checkbox_types.web.d.ts

@@ -4,6 +4,8 @@ export type CheckboxState = 'active' | 'default' | 'hover' | 'disable' | 'error'
 export type CheckboxAlign = 'left' | 'right';
 export type CheckboxTextColor = 'black' | 'white';
 export interface CheckboxProps {
+    id?: string;
+    className?: string;
     state: CheckboxState;
     leadingText?: string;
     size?: CheckboxSize;

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

@@ -7,6 +7,8 @@ export type ChipSize = 'large' | 'medium' | 'small';
 export type LeadingIcon = 'check' | 'alert' | 'warning' | 'slash';
 export type TrailingIcon = 'close' | 'chevronDown' | 'info';
 export interface ChipProps {
+    id?: string;
+    className?: string;
     text: string;
     color?: ChipColor;
     state?: ChipState;

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

@@ -7,6 +7,8 @@ export interface ChipProps {
     text: string;
 }
 export interface HeadingContainerProps {
+    id?: string;
+    className?: string;
     size: HeadingContainerSize;
     contentTextColor: HeadingContainercontentTextColor;
     align?: HeadingContainerAlign;

package/dist/components/web/Headings/HeadingCredential/HeadingCredential_types.web.d.ts

@@ -15,6 +15,8 @@ export interface ChipProps {
     tooltip?: ParentComponentTooltipProps;
 }
 export interface HeadingCredentialProps {
+    id?: string;
+    className?: string;
     type?: HeadingCredentialType;
     align?: HeadingCredentialAlign;
     typeText?: string;

package/dist/components/web/Icons/IconGroup/iconGroup_types.web.d.ts

@@ -1,6 +1,8 @@
 import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 import { IconSize, IconStyle } from '../icon_types';
 export interface IconGroupProps {
+    id?: string;
+    className?: string;
     iconList: {
         Icon: React.FC<{
             size: IconSize;

package/dist/components/web/Icons/icons/access.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type AccessIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/accountManagement.d.ts

@@ -1,7 +1,9 @@
 import { IconSize } from '../icon_types';
 type AccountManagementIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };
-export declare const AccountManagementIcon: ({ size, color, }: AccountManagementIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountManagementIcon: ({ id, className, size, color, }: AccountManagementIconProps) => import("react/jsx-runtime").JSX.Element;
 export default AccountManagementIcon;

package/dist/components/web/Icons/icons/activity.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ActivityIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/activityCircle.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ActivityCircleIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/alert.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type AlertIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/arrowDown.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ArrowDownIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/arrowLeft.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ArrowLeftIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/arrowRight.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ArrowRightIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/arrowUp.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ArrowUpIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/at.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type AtIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/bank.d.ts

@@ -1,7 +1,9 @@
 import { IconSize } from '../icon_types';
 type BankIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };
-declare const BankIcon: ({ size, color }: BankIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const BankIcon: ({ id, className, size, color }: BankIconProps) => import("react/jsx-runtime").JSX.Element;
 export default BankIcon;

package/dist/components/web/Icons/icons/barChart.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type BarChartIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/bellOff.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type BellOffIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/bookOpen.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type BookOpenIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/bookmark.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type BookmarkIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/brand/gatacaLogo.d.ts

@@ -1,5 +1,7 @@
 import { GatacaLogoIconSize, IconSize } from '../../icon_types';
 type GatacaLogoIconProps = {
+    id?: string;
+    className?: string;
     size: GatacaLogoIconSize | IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/brand/gatacaLogoHor.d.ts

@@ -1,5 +1,7 @@
 import { GatacaLogoHorSize, IconSize } from '../../icon_types';
 type GatacaLogoHorIconProps = {
+    id?: string;
+    className?: string;
     size: GatacaLogoHorSize | IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/calendar.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type CalendarIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/calendarEvent.d.ts

@@ -1,7 +1,9 @@
 import { IconSize } from '../icon_types';
 type CalendarEventIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };
-declare const CalendarEventIcon: ({ size, color }: CalendarEventIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarEventIcon: ({ id, className, size, color, }: CalendarEventIconProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarEventIcon;

package/dist/components/web/Icons/icons/camera.d.ts

@@ -1,5 +1,7 @@
 import { IconExtendedSize, IconSize } from '../icon_types';
 type CameraIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize | IconExtendedSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/check.d.ts

@@ -1,5 +1,7 @@
 import { IconExtendedSize, IconSize } from '../icon_types';
 type CheckIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize | IconExtendedSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/checkCircle.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type CheckCircleIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/checkbox.d.ts

@@ -1,6 +1,8 @@
 import { ColorsType } from '../../../../styles';
 import { CheckboxSize, CheckboxState } from '../../Checkbox/Checkbox/checkbox_types.web';
 type ChekboxIconProps = {
+    id?: string;
+    className?: string;
     size: CheckboxSize;
     colors: ColorsType;
     state: CheckboxState;

package/dist/components/web/Icons/icons/chevronDown.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ChevronDownIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/chevronLeft.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ChevronLeftIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/chevronRight.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ChevronRightIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/chevronUp.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ChevronUpIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/chip.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ChipIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/cibersecurity.d.ts

@@ -1,7 +1,9 @@
 import { IconSize } from '../icon_types';
 type CibersecurityIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };
-declare const CibersecurityIcon: ({ size, color }: CibersecurityIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const CibersecurityIcon: ({ id, className, size, color, }: CibersecurityIconProps) => import("react/jsx-runtime").JSX.Element;
 export default CibersecurityIcon;

package/dist/components/web/Icons/icons/circle.d.ts

@@ -1,6 +1,8 @@
 type CircleIconProps = {
+    id?: string;
+    className?: string;
     size: '8' | '10' | '12' | '16' | '24' | '32';
     color?: string;
 };
-declare const CircleIcon: ({ size, color }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const CircleIcon: ({ id, className, size, color }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
 export default CircleIcon;

package/dist/components/web/Icons/icons/clock.d.ts

@@ -1,5 +1,7 @@
 import { IconSize } from '../icon_types';
 type ClockIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize;
     color?: string;
 };

package/dist/components/web/Icons/icons/close.d.ts

@@ -1,5 +1,7 @@
 import { IconExtendedSize, IconSize } from '../icon_types';
 type CloseIconProps = {
+    id?: string;
+    className?: string;
     size: IconSize | IconExtendedSize;
     color?: string;
 };