@ama-pt/agora-design-system 3.5.0 → 3.5.2

package/artifacts/dist/tailwind.css

@@ -988,8 +988,8 @@ input[type]::placeholder{
   margin-bottom: 8px;
 }
 
-.-ml-32{
-  margin-left: -32px;
+.\!mt-\[0px\]{
+  margin-top: 0px !important;
 }
 
 .mb-128{
@@ -1028,6 +1028,10 @@ input[type]::placeholder{
   margin-left: 8px;
 }
 
+.ml-\[45px\]{
+  margin-left: 45px;
+}
+
 .ml-auto{
   margin-left: auto;
 }
@@ -1203,6 +1207,18 @@ input[type]::placeholder{
   height: 126px;
 }
 
+.h-\[16px\]{
+  height: 16px;
+}
+
+.h-\[24px\]{
+  height: 24px;
+}
+
+.h-\[32px\]{
+  height: 32px;
+}
+
 .h-\[350px\]{
   height: 350px;
 }
@@ -1239,10 +1255,6 @@ input[type]::placeholder{
   height: calc(100% - 128px);
 }
 
-.h-dvh{
-  height: 100dvh;
-}
-
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -1313,16 +1325,12 @@ input[type]::placeholder{
   width: 50%;
 }
 
-.w-24{
-  width: 24px;
-}
-
 .w-32{
   width: 32px;
 }
 
-.w-64{
-  width: 64px;
+.w-\[131px\]{
+  width: 131px;
 }
 
 .w-\[190px\]{
@@ -1341,12 +1349,8 @@ input[type]::placeholder{
   width: 496px;
 }
 
-.w-\[60px\]{
-  width: 60px;
-}
-
-.w-\[65px\]{
-  width: 65px;
+.w-\[82px\]{
+  width: 82px;
 }
 
 .w-\[calc\(100\%\+32px\)\]{
@@ -1795,6 +1799,12 @@ input[type]::placeholder{
   list-style-type: none;
 }
 
+.appearance-none{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .grid-flow-row{
   grid-auto-flow: row;
 }
@@ -1921,11 +1931,6 @@ input[type]::placeholder{
        column-gap: 32px;
 }
 
-.gap-x-8{
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-}
-
 .gap-y-16{
   row-gap: 16px;
 }
@@ -2333,6 +2338,10 @@ input[type]::placeholder{
   border-color: var(--color-neutral-600);
 }
 
+.border-\[var\(--color-neutral-700\)\]{
+  border-color: var(--color-neutral-700);
+}
+
 .border-\[var\(--color-primary-400\)\]{
   border-color: var(--color-primary-400);
 }
@@ -6104,6 +6113,10 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
+.\!bg-\[var\(--color-neutral-100\)\]{
+  background-color: var(--color-neutral-100) !important;
+}
+
 .\!bg-transparent{
   background-color: transparent !important;
 }
@@ -6209,6 +6222,10 @@ input[type]::placeholder{
   background-color: var(--color-warning-800);
 }
 
+.bg-\[var\(--color-white\)\]{
+  background-color: var(--color-white);
+}
+
 .bg-backdrop{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -7613,6 +7630,11 @@ input[type]::placeholder{
   padding-right: 8px;
 }
 
+.py-0{
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-16{
   padding-top: 16px;
   padding-bottom: 16px;
@@ -7945,6 +7967,10 @@ input[type]::placeholder{
   font-weight: 700;
 }
 
+.font-medium{
+  font-weight: 500;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
@@ -8487,10 +8513,6 @@ input[type]::placeholder{
   text-decoration-line: line-through;
 }
 
-.decoration-\[var\(--color-primary-600\)\]{
-  text-decoration-color: var(--color-primary-600);
-}
-
 .decoration-2{
   text-decoration-thickness: 2px;
 }
@@ -8597,6 +8619,12 @@ input[type]::placeholder{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-bottom-higher{
+  --tw-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.32);
+  --tw-shadow-colored: 0px 16px 16px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-bottom-low{
   --tw-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.08);
   --tw-shadow-colored: 0px 8px 8px 0px var(--tw-shadow-color);
@@ -21705,12 +21733,8 @@ input[type]::placeholder{
     margin-bottom: 64px;
   }
 
-  .xs\:ml-8{
-    margin-left: 8px;
-  }
-
-  .xs\:mt-16{
-    margin-top: 16px;
+  .xs\:mb-8{
+    margin-bottom: 8px;
   }
 
   .xs\:mt-32{
@@ -21748,10 +21772,6 @@ input[type]::placeholder{
     height: 16px;
   }
 
-  .xs\:h-24{
-    height: 24px;
-  }
-
   .xs\:\!w-\[191px\]{
     width: 191px !important;
   }
@@ -21760,10 +21780,6 @@ input[type]::placeholder{
     width: 89px !important;
   }
 
-  .xs\:w-\[118px\]{
-    width: 118px;
-  }
-
   .xs\:w-\[calc\(100\%\+32px\)\]{
     width: calc(100% + 32px);
   }
@@ -22124,10 +22140,6 @@ input[type]::placeholder{
     align-items: flex-start;
   }
 
-  .xs\:justify-start{
-    justify-content: flex-start;
-  }
-
   .xs\:justify-between{
     justify-content: space-between;
   }
@@ -27500,6 +27512,10 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
+  .xs\:p-0{
+    padding: 0px;
+  }
+
   .xs\:p-32{
     padding: 32px;
   }
@@ -27536,14 +27552,6 @@ input[type]::placeholder{
     padding-left: 0px;
   }
 
-  .xs\:pl-32{
-    padding-left: 32px;
-  }
-
-  .xs\:pl-\[9px\]{
-    padding-left: 9px;
-  }
-
   .xs\:pt-32{
     padding-top: 32px;
   }
@@ -28432,8 +28440,8 @@ input[type]::placeholder{
     grid-column-end: 5;
   }
 
-  .md\:col-end-8{
-    grid-column-end: 8;
+  .md\:m-64{
+    margin: 64px;
   }
 
   .md\:mx-64{
@@ -28476,14 +28484,14 @@ input[type]::placeholder{
     margin-bottom: 144px;
   }
 
-  .md\:ml-0{
-    margin-left: 0px;
-  }
-
   .md\:mr-16{
     margin-right: 16px;
   }
 
+  .md\:mr-32{
+    margin-right: 32px;
+  }
+
   .md\:mt-0{
     margin-top: 0px;
   }
@@ -28527,10 +28535,6 @@ input[type]::placeholder{
     display: none;
   }
 
-  .md\:h-40{
-    height: 40px;
-  }
-
   .md\:h-\[calc\(100\%-2px\)\]{
     height: calc(100% - 2px);
   }
@@ -28543,10 +28547,6 @@ input[type]::placeholder{
     width: 220px !important;
   }
 
-  .md\:w-\[137px\]{
-    width: 137px;
-  }
-
   .md\:w-\[50\%\]{
     width: 50%;
   }
@@ -35281,10 +35281,6 @@ input[type]::placeholder{
     grid-column-start: 8;
   }
 
-  .xl\:col-start-9{
-    grid-column-start: 9;
-  }
-
   .xl\:col-end-9{
     grid-column-end: 9;
   }
@@ -35297,6 +35293,10 @@ input[type]::placeholder{
     grid-row: span 2 / span 2;
   }
 
+  .xl\:m-112{
+    margin: 112px;
+  }
+
   .xl\:my-32{
     margin-top: 32px;
     margin-bottom: 32px;
@@ -35394,10 +35394,6 @@ input[type]::placeholder{
     width: 1120px;
   }
 
-  .xl\:w-\[175px\]{
-    width: 175px;
-  }
-
   .xl\:w-\[40\%\]{
     width: 40%;
   }
@@ -35410,10 +35406,6 @@ input[type]::placeholder{
     width: 696px;
   }
 
-  .xl\:w-\[800px\]{
-    width: 800px;
-  }
-
   .xl\:\!min-w-min{
     min-width: -moz-min-content !important;
     min-width: min-content !important;
@@ -35807,10 +35799,6 @@ input[type]::placeholder{
     align-items: center;
   }
 
-  .xl\:justify-start{
-    justify-content: flex-start;
-  }
-
   .xl\:justify-end{
     justify-content: flex-end;
   }
@@ -42069,3 +42057,7 @@ input[type]::placeholder{
 .\[\&\>fieldset\]\:flex-wrap>fieldset{
   flex-wrap: wrap;
 }
+
+.\[\&_\.switch-label\]\:border .switch-label{
+  border-width: 1px;
+}

package/artifacts/dist/types/components/avatar/avatar.d.ts

@@ -11,6 +11,18 @@ export type AvatarType = 'image' | 'icon' | 'initials' | 'empty';
  * The available badge positions. Each of them defines the location of the badge on the avatar.
  */
 export type AvatarBadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * The available badge variants. Each of them defines the color of the badge.
+ */
+export type AvatarBadgeVariant = 'primary' | 'secondary' | 'neutral' | 'informative' | 'success' | 'warning' | 'danger';
+/**
+ * The available badge appearances. Defines solid or outline style.
+ */
+export type AvatarBadgeAppearance = 'solid' | 'outline';
+/**
+ * The available badge sizes. Defines badge size.
+ */
+export type AvatarBadgeSize = 'default' | 'large';
 export interface AvatarProps extends ComponentProps<'div'> {
     /**
      *  Defines the appearance of the avatar.
@@ -45,10 +57,23 @@ export interface AvatarProps extends ComponentProps<'div'> {
      *  Defines the position of the avatar tooltip.
      */
     tooltipPosition?: TooltipPosition;
+    /**
+     * Defines the avatar badge variant. This variant will define the color of the badge.
+     */
+    badgeVariant?: AvatarBadgeVariant;
+    /**
     /**
      *  The defines the align the avatar tooltip alignment.
      */
     tooltipAlignment?: TooltipAlignment;
+    /**
+     *  Defines the avatar badge appearance.
+     */
+    badgeAppearance?: AvatarBadgeAppearance;
+    /**
+     *  Defines the avatar badge size.
+     */
+    badgeSize?: AvatarBadgeSize;
     /**
      *  Makes the avatar interactive. An interactive avatar can be focused by clicking on it, or pressing Space, Enter or NumpadEnter.
      */

package/artifacts/dist/types/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { Avatar } from './avatar';
-export type { AvatarBadgePosition, AvatarProps, AvatarType } from './avatar';
+export type { AvatarBadgeAppearance, AvatarBadgePosition, AvatarBadgeSize, AvatarBadgeVariant, AvatarProps, AvatarType } from './avatar';

package/artifacts/dist/types/components/cards/index.d.ts

@@ -18,3 +18,4 @@ export * from './card-topic';
 export * from './card-action';
 export * from './card-illustrative';
 export * from './card-general';
+export * from './status-card';

package/artifacts/dist/types/components/{status-card → cards/status-card}/status-card.d.ts

@@ -1,8 +1,9 @@
-import React, { ComponentProps, FC } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './status-card.css';
-import { BooleanProp } from '../../models';
+import { BooleanProp } from '../../../models';
+import { AnchorProps } from '../../../components/anchor/anchor';
 export type StatusCardType = 'informative' | 'success' | 'warning' | 'danger' | 'outline-informative' | 'outline-success' | 'outline-warning' | 'outline-danger';
-export interface StatusCardProps extends ComponentProps<'div'> {
+export interface StatusCardProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**
      * Defines what style to apply.
      */
@@ -22,10 +23,22 @@ export interface StatusCardProps extends ComponentProps<'div'> {
     /**
      * Status card title content
      */
-    title?: string;
+    title?: ReactNode;
     /**
      * Status card description content
      */
-    description?: string | React.ReactNode;
+    description?: ReactNode;
+    /**
+     * The flag to set whether the status card is interactive.
+     */
+    blockedLink?: boolean;
+    /**
+     * anchor props
+     */
+    anchor?: AnchorProps;
+    /**
+     * If true, the anchor will be positioned on the right side of the status card.
+     */
+    anchorOnRightSide?: boolean;
 }
 export declare const StatusCard: FC<StatusCardProps>;

package/artifacts/dist/types/components/checkbox-group/checkbox-group.d.ts

@@ -30,6 +30,18 @@ export interface CheckboxGroupProps extends Omit<HtmlHTMLAttributes<HTMLFieldSet
      *  Event triggered whenever any of the checkboxes changes is own state.
      */
     onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
+    /**
+     * Helper text displayed below checkbox.
+     */
+    helperText?: ReactNode;
+    /**
+     * The flag to set if the checkbox is in dark mode or light mode.
+     */
+    darkMode?: BooleanProp;
 }
 declare const CheckboxGroup: FC<CheckboxGroupProps>;
 export { CheckboxGroup };

package/artifacts/dist/types/components/drawer/drawer.d.ts

@@ -49,6 +49,10 @@ export interface DrawerProps extends ComponentProps<'div'> {
      * Callback to be called when the drawer is closed.
      */
     onHide?: () => void;
+    /**
+     * The flag to set Dark mode.
+     */
+    darkMode?: BooleanProp;
 }
 /**
  * Return icon default animation class drawer icon name and default position.

package/artifacts/dist/types/components/icon/assets/line/line-copy.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SVGIconProps } from '../../../../models';
+declare const _default: (props: SVGIconProps) => React.JSX.Element;
+export default _default;

package/artifacts/dist/types/components/icon/assets/solid/solid-copy.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SVGIconProps } from '../../../../models';
+declare const _default: (props: SVGIconProps) => React.JSX.Element;
+export default _default;

package/artifacts/dist/types/components/index.d.ts

@@ -47,7 +47,6 @@ export * from './scribbles';
 export * from './search-pagination';
 export * from './sidebar';
 export * from './skip-navigation';
-export * from './status-card';
 export * from './step-list';
 export * from './stepper';
 export * from './switch';

package/artifacts/dist/types/components/input-search-bar/input-search-bar.d.ts

@@ -1,6 +1,7 @@
 import { BooleanProp } from '../../models';
 import { ComponentProps, FC, Ref } from 'react';
 import './input-search-bar.css';
+import type { ReactNode } from 'react';
 export interface InputSearchBarElement extends HTMLInputElement {
     /**
      * React ref object to the search action button.
@@ -60,6 +61,14 @@ export interface InputSearchBarProps extends ComponentProps<'input'> {
      * React ref object to the input search bar.
      */
     ref?: Ref<InputSearchBarElement>;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputSearchBar: FC<InputSearchBarProps>;
 export { InputSearchBar };

package/artifacts/dist/types/components/input-time/input-time.d.ts

@@ -3,8 +3,8 @@ import './input-time.css';
 import { BooleanProp, FeedbackState, TimeFormat } from '../../models';
 export interface InputTimeProps extends ComponentProps<'input'> {
     /**
-    * Defines the time format that will be used.
-    */
+     * Defines the time format that will be used.
+     */
     format?: TimeFormat;
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.

package/artifacts/dist/types/components/input-time/utils/format-time.d.ts

@@ -1,4 +1,4 @@
-import { TimePeriod } from '../../../models';
+import { TimeFormat, TimePeriod } from '../../../models';
 export declare const FULL_TIME_TEXT_REGEX_WITH_PERIOD: RegExp;
 export declare const FULL_TIME_TEXT_REGEX_WITHOUT_PERIOD: RegExp;
 export declare const DEFAULT_PLACEHOLDER: {
@@ -11,14 +11,13 @@ export declare const timePeriod: {
     pm: string;
 };
 export declare const startTime: {
-    hour: string;
     minute: string;
     period: string;
 };
 export declare const formatHour: (hour: number | string, minHour: number, maxHour: number) => string;
 export declare const formatMinute: (minute: number | string, minMinute: number, maxMinute: number) => string;
 export declare const formatFullTime: (hasPeriod: boolean, selectedHour: number | string, selectedMinute: number | string, selectedPeriod: TimePeriod) => string;
-export declare const parseFullTime: (hasPeriod: boolean, fullTimeText: string) => {
+export declare const parseFullTime: (hasPeriod: boolean, fullTimeText: string, hourFormat: TimeFormat) => {
     selectedHour: string;
     selectedMinute: string;
     selectedPeriod: TimePeriod;

package/artifacts/dist/types/components/panel-switcher/desktop/panel-switcher-desktop.d.ts

@@ -1,7 +1,7 @@
 import { TabBodyProps } from '../../../components/tabs';
 import React, { ComponentProps, FC, ReactElement } from 'react';
 import './panel-switcher-desktop.css';
-import { ButtonsHeaderData } from '../panel-switcher';
+import { ButtonsHeaderData } from '../../../components/panel-switcher';
 export interface PanelSwitcherDesktopProps extends ComponentProps<'div'> {
     buttonListRef: React.RefObject<HTMLDivElement | null>;
     panelRef: React.RefObject<HTMLDivElement | null>;
@@ -9,5 +9,6 @@ export interface PanelSwitcherDesktopProps extends ComponentProps<'div'> {
     activateButton: (index: number) => void;
     buttonsHeaderData: Array<ButtonsHeaderData>;
     buttonsBodyData: Array<ReactElement<TabBodyProps>>;
+    darkMode?: boolean;
 }
 export declare const PanelSwitcherDesktop: FC<PanelSwitcherDesktopProps>;

package/artifacts/dist/types/components/panel-switcher/helper.d.ts

@@ -0,0 +1,36 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { BooleanProp } from '../../models';
+import { TabBodyProps } from '../tabs';
+type ReactNodeOrFC = ReactNode | FC<{
+    darkMode?: BooleanProp;
+}>;
+export type PanelData = {
+    text: string;
+    withIcon?: boolean;
+    leadingIcon?: string;
+    content: ReactNodeOrFC;
+    leadingIconHover?: string;
+};
+export type ButtonsHeaderData = {
+    withIcon: boolean;
+    leadingIcon: string;
+    leadingIconHover: string;
+    child: ReactElement<TabBodyProps>;
+};
+export interface PanelSwitcherProps {
+    /**
+     * Collection of PanelData to be displayed by panel.
+     */
+    data: PanelData[];
+    /**
+     * Defines the label of the modal close button.
+     */
+    modalCloseButtonLabel: string;
+    /**
+     * The flag to set if the footer is in dark mode or light mode.
+     */
+    darkMode?: boolean;
+}
+export declare const convertContentToNode: (content: ReactNodeOrFC, darkMode?: boolean) => ReactNode;
+export declare const handleIcons: (hasIcon: boolean, icon: string, leadingIcon: boolean) => string | undefined;
+export {};

package/artifacts/dist/types/components/panel-switcher/index.d.ts

@@ -1,2 +1,2 @@
 export { PanelSwitcher } from './panel-switcher';
-export type { PanelSwitcherProps } from './panel-switcher';
+export type { PanelSwitcherProps, PanelData, ButtonsHeaderData } from './helper';

package/artifacts/dist/types/components/panel-switcher/mobile/panel-switcher-mobile.d.ts

@@ -1,13 +1,14 @@
 import React, { FC, ReactElement, RefObject } from 'react';
 import { TabBodyProps } from '../../../components/tabs';
 import './panel-switcher-mobile.css';
-import { ButtonsHeaderData } from '../panel-switcher';
+import { ButtonsHeaderData } from '../../../components/panel-switcher';
 export interface PanelSwitcherMobileProps {
     modalCloseButtonLabel: string;
     buttonListRef: RefObject<HTMLDivElement | null>;
     buttonsHeaderData: Array<ButtonsHeaderData>;
     buttonsBodyData: Array<ReactElement<TabBodyProps>>;
     activeButton?: number;
+    darkMode?: boolean;
 }
 export declare const ModalContent: FC<{
     content: React.ReactNode;

package/artifacts/dist/types/components/panel-switcher/panel-switcher-container.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 import { TabProps } from '../tabs';
-import { PanelData } from './panel-switcher';
+import { PanelData } from '../../components/panel-switcher';
 export interface PanelSwitcherContainerProps {
     /**
      * Collection of PanelData to be displayed by panel.
@@ -14,5 +14,9 @@ export interface PanelSwitcherContainerProps {
      * Defines the label of the modal close button.
      */
     modalCloseButtonLabel: string;
+    /**
+     * The flag to set if the footer is in dark mode or light mode.
+     */
+    darkMode?: boolean;
 }
 export declare const PanelSwitcherContainer: FC<PanelSwitcherContainerProps>;

package/artifacts/dist/types/components/panel-switcher/panel-switcher.d.ts

@@ -1,24 +1,3 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { TabBodyProps } from '../tabs';
-export type PanelData = {
-    text: string;
-    content: ReactNode;
-    leadingIcon?: string;
-    leadingIconHover?: string;
-};
-export type ButtonsHeaderData = {
-    leadingIcon: string;
-    leadingIconHover: string;
-    child: ReactElement<TabBodyProps>;
-};
-export interface PanelSwitcherProps {
-    /**
-     * Collection of PanelData to be displayed by panel.
-     */
-    data: PanelData[];
-    /**
-     * Defines the label of the modal close button.
-     */
-    modalCloseButtonLabel: string;
-}
+import { FC } from 'react';
+import { PanelSwitcherProps } from './helper';
 export declare const PanelSwitcher: FC<PanelSwitcherProps>;