@ama-pt/agora-design-system 3.0.1 → 3.2.0

package/artifacts/dist/tailwind.css

@@ -937,10 +937,6 @@ input[type]::placeholder{
   margin: 32px;
 }
 
-.m-64{
-  margin: 64px;
-}
-
 .m-auto{
   margin: auto;
 }
@@ -1143,10 +1139,6 @@ input[type]::placeholder{
   height: 44px !important;
 }
 
-.\!h-auto{
-  height: auto !important;
-}
-
 .h-0{
   height: 0px;
 }
@@ -1211,6 +1203,10 @@ input[type]::placeholder{
   height: calc(100% - 128px);
 }
 
+.h-dvh{
+  height: 100dvh;
+}
+
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -1277,10 +1273,6 @@ input[type]::placeholder{
   width: 44px !important;
 }
 
-.\!w-full{
-  width: 100% !important;
-}
-
 .w-1\/2{
   width: 50%;
 }
@@ -1362,6 +1354,14 @@ input[type]::placeholder{
   max-width: 1440px;
 }
 
+.max-w-\[280px\]{
+  max-width: 280px;
+}
+
+.max-w-\[384px\]{
+  max-width: 384px;
+}
+
 .max-w-full{
   max-width: 100%;
 }
@@ -1763,6 +1763,10 @@ input[type]::placeholder{
   grid-auto-flow: column;
 }
 
+.grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-12{
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -1863,6 +1867,10 @@ input[type]::placeholder{
   gap: 64px;
 }
 
+.gap-\[8px\]{
+  gap: 8px;
+}
+
 .gap-x-16{
   -moz-column-gap: 16px;
        column-gap: 16px;
@@ -2268,6 +2276,11 @@ input[type]::placeholder{
   border-color: transparent !important;
 }
 
+.border-\[\#9747FF\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(151 71 255 / var(--tw-border-opacity, 1));
+}
+
 .border-\[var\(--color-neutral-200\)\]{
   border-color: var(--color-neutral-200);
 }
@@ -2280,6 +2293,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);
 }
@@ -5942,10 +5959,26 @@ input[type]::placeholder{
   background-color: var(--color-backdrop);
 }
 
+.bg-\[var\(--color-danger-100\)\]{
+  background-color: var(--color-danger-100);
+}
+
 .bg-\[var\(--color-danger-200\)\]{
   background-color: var(--color-danger-200);
 }
 
+.bg-\[var\(--color-danger-600\)\]{
+  background-color: var(--color-danger-600);
+}
+
+.bg-\[var\(--color-informative-300\)\]{
+  background-color: var(--color-informative-300);
+}
+
+.bg-\[var\(--color-informative-50\)\]{
+  background-color: var(--color-informative-50);
+}
+
 .bg-\[var\(--color-neutral-100\)\]{
   background-color: var(--color-neutral-100);
 }
@@ -5966,10 +5999,22 @@ input[type]::placeholder{
   background-color: var(--color-neutral-50);
 }
 
+.bg-\[var\(--color-neutral-500\)\]{
+  background-color: var(--color-neutral-500);
+}
+
 .bg-\[var\(--color-primary-100\)\]{
   background-color: var(--color-primary-100);
 }
 
+.bg-\[var\(--color-primary-300\)\]{
+  background-color: var(--color-primary-300);
+}
+
+.bg-\[var\(--color-primary-500\)\]{
+  background-color: var(--color-primary-500);
+}
+
 .bg-\[var\(--color-primary-600\)\]{
   background-color: var(--color-primary-600);
 }
@@ -5982,10 +6027,38 @@ input[type]::placeholder{
   background-color: var(--color-primary-900);
 }
 
+.bg-\[var\(--color-secondary-100\)\]{
+  background-color: var(--color-secondary-100);
+}
+
+.bg-\[var\(--color-secondary-300\)\]{
+  background-color: var(--color-secondary-300);
+}
+
 .bg-\[var\(--color-secondary-700\)\]{
   background-color: var(--color-secondary-700);
 }
 
+.bg-\[var\(--color-success-500\)\]{
+  background-color: var(--color-success-500);
+}
+
+.bg-\[var\(--color-warning-200\)\]{
+  background-color: var(--color-warning-200);
+}
+
+.bg-\[var\(--color-warning-300\)\]{
+  background-color: var(--color-warning-300);
+}
+
+.bg-\[var\(--color-warning-500\)\]{
+  background-color: var(--color-warning-500);
+}
+
+.bg-\[var\(--color-warning-800\)\]{
+  background-color: var(--color-warning-800);
+}
+
 .bg-backdrop{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -6604,14 +6677,38 @@ input[type]::placeholder{
   background-origin: content-box;
 }
 
+.fill-\[var\(--color-danger-500\)\]{
+  fill: var(--color-danger-500);
+}
+
+.fill-\[var\(--color-informative-500\)\]{
+  fill: var(--color-informative-500);
+}
+
 .fill-\[var\(--color-neutral-900\)\]{
   fill: var(--color-neutral-900);
 }
 
+.fill-\[var\(--color-primary-500\)\]{
+  fill: var(--color-primary-500);
+}
+
 .fill-\[var\(--color-primary-600\)\]{
   fill: var(--color-primary-600);
 }
 
+.fill-\[var\(--color-secondary-500\)\]{
+  fill: var(--color-secondary-500);
+}
+
+.fill-\[var\(--color-success-500\)\]{
+  fill: var(--color-success-500);
+}
+
+.fill-\[var\(--color-warning-500\)\]{
+  fill: var(--color-warning-500);
+}
+
 .fill-backdrop{
   fill: rgba(43, 54, 60, 0.96);
 }
@@ -7369,10 +7466,6 @@ input[type]::placeholder{
   padding-bottom: 64px;
 }
 
-.pb-96{
-  padding-bottom: 96px;
-}
-
 .pl-8{
   padding-left: 8px;
 }
@@ -7417,6 +7510,10 @@ input[type]::placeholder{
   text-align: end;
 }
 
+.align-middle{
+  vertical-align: middle;
+}
+
 .align-text-top{
   vertical-align: text-top;
 }
@@ -7664,6 +7761,10 @@ input[type]::placeholder{
   color: var(--color-neutral-900);
 }
 
+.text-\[var\(--color-primary-400\)\]{
+  color: var(--color-primary-400);
+}
+
 .text-\[var\(--color-primary-600\)\]{
   color: var(--color-primary-600);
 }
@@ -12612,6 +12713,10 @@ input[type]::placeholder{
   background-color: var(--color-primary-100);
 }
 
+.hover\:bg-\[var\(--color-primary-900\)\]:hover{
+  background-color: var(--color-primary-900);
+}
+
 .hover\:bg-backdrop:hover{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -20967,9 +21072,8 @@ input[type]::placeholder{
   background-color: var(--color-neutral-200);
 }
 
-.active\:bg-primary-700:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 56 162 / var(--tw-bg-opacity, 1));
+.active\:bg-\[var\(--color-primary-700\)\]:active{
+  background-color: var(--color-primary-700);
 }
 
 .active\:text-\[var\(--color-neutral-900\)\]:active{
@@ -26701,6 +26805,10 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
+  .xs\:p-32{
+    padding: 32px;
+  }
+
   .xs\:px-32{
     padding-left: 32px;
     padding-right: 32px;
@@ -34372,6 +34480,10 @@ 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;
@@ -34721,6 +34833,10 @@ input[type]::placeholder{
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .xl\:grid-cols-6{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }

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

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
 import { BooleanProp, HeadingLevel } from '../../models';
-import './accordion.scss';
+import './accordion.css';
 export interface AccordionElement extends HTMLDivElement {
     /**
      *  Expand the accordion.

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

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactElement } from 'react';
 import { BooleanProp } from '../../models';
 import { AccordionProps } from '../../components/accordion';
-import './accordion-group.scss';
+import './accordion-group.css';
 export interface AccordionGroupProps extends ComponentProps<'ul'> {
     /**
      * List of accordion components to use as children of the group.

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

@@ -1,6 +1,6 @@
 import { BooleanProp } from '../../models';
 import { ComponentProps, FC, ReactNode } from 'react';
-import './anchor.scss';
+import './anchor.css';
 /**
  * The available variants of the anchors. This variants will define the background and border color of the anchors.
  */

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

@@ -2,11 +2,11 @@ import { ComponentProps, FC, ReactNode } from 'react';
 import { IconName } from '../../components/icon';
 import { TooltipAlignment, TooltipPosition } from '../../components/tooltip';
 import { BooleanProp } from '../../models';
-import './avatar.scss';
+import './avatar.css';
 /**
  *  The available avatar types. Each of them define the appearance of the avatar image.
  */
-export type AvatarType = 'image' | 'icon' | 'initials';
+export type AvatarType = 'image' | 'icon' | 'initials' | 'empty';
 /**
  * The available badge positions. Each of them defines the location of the badge on the avatar.
  */

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

@@ -1,7 +1,7 @@
 import { BooleanProp } from '../../models';
 import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
 import { AvatarProps } from '../avatar';
-import './avatar-group.scss';
+import './avatar-group.css';
 export interface AvatarGroupProps extends ComponentPropsWithoutRef<'ul'> {
     /**
      * List of avatar components to use as children of the group.

package/artifacts/dist/types/components/breadcrumb/desktop/breadcrumb-desktop.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BreadcrumbProps } from '../../../components/breadcrumb';
-import './breadcrumb-desktop.scss';
+import './breadcrumb-desktop.css';
 export declare const BreadcrumbDesktop: FC<BreadcrumbProps>;

package/artifacts/dist/types/components/breadcrumb/mobile/breadcrumb-mobile.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BreadcrumbProps } from '../../../components/breadcrumb';
-import './breadcrumb-mobile.scss';
+import './breadcrumb-mobile.css';
 export declare const BreadcrumbMobile: FC<BreadcrumbProps>;

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

@@ -1,6 +1,6 @@
 import { BooleanProp } from '../../models';
 import { ComponentProps, FC, ReactNode } from 'react';
-import './button.scss';
+import './button.css';
 /**
  * The available variants of the button. This variants will define the background and border color of the button.
  */

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

@@ -1,7 +1,7 @@
 import { ButtonProps, ButtonVariant } from '../../components/button';
 import { BooleanProp } from '../../models';
 import { FC, HtmlHTMLAttributes, ReactElement } from 'react';
-import './button-group.scss';
+import './button-group.css';
 export type ButtonGroupOrientation = 'horizontal' | 'vertical';
 export interface ButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/artifacts/dist/types/components/cards/card-action/card-action.d.ts

@@ -1,39 +1,11 @@
-import React, { FC } from 'react';
-import './card-action.scss';
+import { FC, ImgHTMLAttributes } from 'react';
+import { ButtonProps } from '../../../components/button';
+import { IconProps } from '../../../components/icon';
+import './card-action.css';
+import { BooleanProp } from '../../../models';
 export type CardActionStyles = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'white-line' | 'primary-900-line';
+export type CardActionAlignment = 'left' | 'center' | 'right';
 export interface CardActionProps {
-    /**
-     * style of card action
-     */
-    variant?: CardActionStyles;
-    /**
-     * it allow you align title, text and button
-     */
-    alignment?: 'left' | 'center';
-    /**
-     * show the image within the card
-     */
-    hasImg?: boolean;
-    /**
-     * source of image
-     */
-    imgSrc?: string;
-    /**
-     * alternative text to image
-     */
-    imgAlt?: string;
-    /**
-     * show the card horizontally
-     */
-    isCardHorizontal?: boolean;
-    /**
-     * show the icon logo
-     */
-    hasIconLogo?: boolean;
-    /**
-     * name of icon logo
-     */
-    iconLogoName?: string;
     /**
      * title of card
      */
@@ -43,32 +15,28 @@ export interface CardActionProps {
      */
     text: string;
     /**
-     * show icon within the button
-     */
-    buttonHasIcon?: boolean;
-    /**
-     * allow the button get all empty space
+     * style of card action
      */
-    isButtonFullWidth?: boolean;
+    variant?: CardActionStyles;
     /**
-     * name of button
+     * it allow you align title, text and button
      */
-    buttonValue: string;
+    alignment?: CardActionAlignment;
     /**
-     * name of icon to show inside of button
+     * show the card horizontally
      */
-    buttonLeadingIcon?: string;
+    isCardHorizontal?: BooleanProp;
     /**
-     * name of icon to show when hover the button
+     * name of icon logo
      */
-    buttonLeadingIconHover?: string;
+    icon?: IconProps;
     /**
-     * function called when click on the button
+     * image card to draw in the card if specified.
      */
-    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    image?: ImgHTMLAttributes<HTMLImageElement>;
     /**
-     * additional class names for the card action component
+     * props for the button component
      */
-    className?: string;
+    button: ButtonProps;
 }
 export declare const CardAction: FC<CardActionProps>;

package/artifacts/dist/types/components/cards/card-article/card-article.d.ts

@@ -2,7 +2,7 @@ import { AnchorProps } from '../../../components/anchor';
 import { PillProps } from '../../../components/pill';
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { ComponentPropsWithoutRef, FC, ImgHTMLAttributes, ReactNode } from 'react';
-import './card-article.scss';
+import './card-article.css';
 export type CardArticleVariant = 'default' | 'indented';
 export interface CardArticleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**

package/artifacts/dist/types/components/cards/card-collection/card-collection.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { BooleanProp, HeadingLevel } from '../../../models';
-import './card-collection.scss';
+import './card-collection.css';
 export interface CardCollectionProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * Card Collection heading level title.

package/artifacts/dist/types/components/cards/card-emphasize/card-emphasize.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
-import './card-emphasize.scss';
+import './card-emphasize.css';
 /**
  * The available alignments of the card emphasize.
  */

package/artifacts/dist/types/components/cards/card-error/card-error.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../../models';
-import './card-error.scss';
+import './card-error.css';
 export interface CardErrorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      *  The card icon.

package/artifacts/dist/types/components/cards/card-expandable/card-accordion/card-accordion.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
 import { BooleanProp, HeadingLevel } from '../../../../models';
-import './card-accordion.scss';
+import './card-accordion.css';
 /**
  * The available variants of the accordion. Those variants will define the style of the accordion.
  */
-export type CardAccordionVariant = 'white' | 'primary-light' | 'primary-dark';
+export type CardAccordionVariant = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900';
 export interface CardAccordionElement extends HTMLDivElement {
     /**
      *  Expand the accordion.

package/artifacts/dist/types/components/cards/card-expandable/card-expandable-style.d.ts

@@ -0,0 +1,16 @@
+import { CardExpandableVariant } from './card-expandable';
+type CardExpandableStylesBody = {
+    backgroundColor: string;
+    textColor: string;
+    iconColor: string;
+    anchorColor: string;
+};
+export type CardExpandableStylesMap = Record<CardExpandableVariant, CardExpandableStylesBody>;
+export declare const cardExpandableStylesMap: CardExpandableStylesMap;
+type BookMarkIconStyles = {
+    fill: string;
+    fillTop: string;
+};
+export type BookMarkIconStylesMap = Record<CardExpandableVariant, BookMarkIconStyles>;
+export declare const bookMarkIconStylesMap: BookMarkIconStylesMap;
+export {};

package/artifacts/dist/types/components/cards/card-expandable/card-expandable.d.ts

@@ -1,11 +1,11 @@
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
-import './card-expandable.scss';
 import { CardAccordionElement } from './card-accordion';
+import './card-expandable.css';
 /**
  * The available variants of the card. Those variants will define the style of the card.
  */
-export type CardExpandableVariant = 'white' | 'primary-light' | 'primary-dark';
+export type CardExpandableVariant = 'white' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'neutral-100';
 export interface CardExpandableElement extends CardAccordionElement {
 }
 export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title'> {

package/artifacts/dist/types/components/cards/card-frame/card-frame.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
-import './card-frame.scss';
+import './card-frame.css';
 export interface CardFrameProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.

package/artifacts/dist/types/components/cards/card-full-image/card-full-image.d.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, FC, ImgHTMLAttributes, ReactElement } from 'r
 import { CardHeroHelperProps } from '../../../components/cards/card-hero-helper';
 import { CardHeroIndexProps } from '../../../components/cards/card-hero-index';
 import { CardHeroSitemapProps } from '../../../components/cards/card-hero-sitemap';
-import './card-full-image.scss';
+import './card-full-image.css';
 export interface CardFullImageProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.

package/artifacts/dist/types/components/cards/card-hero-helper/card-hero-helper.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
-import './card-hero-helper.scss';
+import './card-hero-helper.css';
 export interface HelpTopic {
     description: ReactNode;
     anchor: AnchorProps;

package/artifacts/dist/types/components/cards/card-hero-index/card-hero-index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { HeadingLevel } from '../../../models';
-import './card-hero-index.scss';
+import './card-hero-index.css';
 export interface CardHeroIndexProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * The title of the card.

package/artifacts/dist/types/components/cards/card-hero-sitemap/card-hero-sitemap.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { HeadingLevel } from '../../../models';
-import './card-hero-sitemap.scss';
+import './card-hero-sitemap.css';
 export interface CardHeroSitemapProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * Header title.

package/artifacts/dist/types/components/cards/card-highlight/card-highlight.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ImgHTMLAttributes, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { HeadingLevel } from '../../../models';
-import './card-highlight.scss';
+import './card-highlight.css';
 export type HighlightAreaPositionType = 'interior' | 'exterior';
 export type HighlightCardPositionType = 'bottom' | 'middle';
 export type HighlightCardSizeType = 's' | 'default';

package/artifacts/dist/types/components/cards/card-highlight/shared/inner-highlight-card.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../../components/anchor';
 import { HeadingLevel } from '../../../../models';
-import './inner-highlight-card.scss';
+import './inner-highlight-card.css';
 export interface InnerHighlightCardProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**
      * header title.

package/artifacts/dist/types/components/cards/card-highlight-newsletter/card-highlight-newsletter.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { InputEmailBarProps } from '../../../components/input-email-bar/input-email-bar';
-import './card-highlight-newsletter.scss';
+import './card-highlight-newsletter.css';
 export interface CardHighlightNewsletterProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**
      * The title to be displayed.

package/artifacts/dist/types/components/cards/card-highlight-single/card-highlight-single.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ReactNode } from 'react';
 import { ButtonProps } from '../../../components/button';
-import './card-highlight-single.scss';
+import './card-highlight-single.css';
 import { BooleanProp } from '../../../models';
 export interface CardHighlightSingleProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**