@gataca/design-system 0.3.90 → 0.3.91

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;
 };

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

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

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

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

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

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

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

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

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

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

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

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