@ama-pt/agora-design-system 3.1.0 → 3.3.0

package/artifacts/dist/tailwind.css

@@ -660,8 +660,7 @@ textarea::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 textarea::placeholder{
@@ -669,8 +668,7 @@ textarea::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 input[type]::-moz-placeholder{
@@ -678,8 +676,7 @@ input[type]::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 input[type]::placeholder{
@@ -687,15 +684,14 @@ input[type]::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 *:focus{
   outline-style: solid;
   outline-width: 2px;
   outline-offset: -2px;
-  outline-color: #F408FC;
+  outline-color: var(--color-focus);
 }
 
 .container{
@@ -901,6 +897,10 @@ input[type]::placeholder{
   grid-column: span 8 / span 8;
 }
 
+.col-span-full{
+  grid-column: 1 / -1;
+}
+
 .col-start-1{
   grid-column-start: 1;
 }
@@ -1207,6 +1207,10 @@ input[type]::placeholder{
   height: calc(100% - 128px);
 }
 
+.h-dvh{
+  height: 100dvh;
+}
+
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -1321,6 +1325,11 @@ input[type]::placeholder{
   width: calc(100% + 64px);
 }
 
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full{
   width: 100%;
 }
@@ -1358,10 +1367,6 @@ input[type]::placeholder{
   max-width: 280px;
 }
 
-.max-w-\[384px\]{
-  max-width: 384px;
-}
-
 .max-w-full{
   max-width: 100%;
 }
@@ -1763,6 +1768,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));
 }
@@ -2277,10 +2286,30 @@ input[type]::placeholder{
   border-color: rgb(151 71 255 / var(--tw-border-opacity, 1));
 }
 
+.border-\[var\(--color-neutral-200\)\]{
+  border-color: var(--color-neutral-200);
+}
+
+.border-\[var\(--color-neutral-300\)\]{
+  border-color: var(--color-neutral-300);
+}
+
+.border-\[var\(--color-neutral-600\)\]{
+  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);
+}
+
+.border-\[var\(--color-primary-600\)\]{
+  border-color: var(--color-primary-600);
+}
+
 .border-backdrop{
   border-color: rgba(43, 54, 60, 0.96);
 }
@@ -4318,6 +4347,10 @@ input[type]::placeholder{
   border-inline-end-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.border-l-\[var\(--color-neutral-900\)\]{
+  border-left-color: var(--color-neutral-900);
+}
+
 .border-l-backdrop{
   border-left-color: rgba(43, 54, 60, 0.96);
 }
@@ -5927,10 +5960,114 @@ input[type]::placeholder{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
 }
 
+.bg-\[--color-primary-900\]{
+  background-color: var(--color-primary-900);
+}
+
+.bg-\[var\(--color-backdrop\)\]{
+  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);
+}
+
+.bg-\[var\(--color-neutral-200\)\]{
+  background-color: var(--color-neutral-200);
+}
+
+.bg-\[var\(--color-neutral-300\)\]{
+  background-color: var(--color-neutral-300);
+}
+
+.bg-\[var\(--color-neutral-400\)\]{
+  background-color: var(--color-neutral-400);
+}
+
+.bg-\[var\(--color-neutral-50\)\]{
+  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);
+}
+
 .bg-\[var\(--color-primary-700\)\]{
   background-color: var(--color-primary-700);
 }
 
+.bg-\[var\(--color-primary-900\)\]{
+  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);
 }
@@ -6549,6 +6686,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);
 }
@@ -7306,10 +7475,6 @@ input[type]::placeholder{
   padding-bottom: 64px;
 }
 
-.pb-96{
-  padding-bottom: 96px;
-}
-
 .pl-8{
   padding-left: 8px;
 }
@@ -7589,6 +7754,42 @@ input[type]::placeholder{
   text-transform: none;
 }
 
+.text-\[var\(--color-informative-500\)\]{
+  color: var(--color-informative-500);
+}
+
+.text-\[var\(--color-neutral-500\)\]{
+  color: var(--color-neutral-500);
+}
+
+.text-\[var\(--color-neutral-700\)\]{
+  color: var(--color-neutral-700);
+}
+
+.text-\[var\(--color-neutral-900\)\]{
+  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);
+}
+
+.text-\[var\(--color-primary-700\)\]{
+  color: var(--color-primary-700);
+}
+
+.text-\[var\(--color-primary-900\)\]{
+  color: var(--color-primary-900);
+}
+
+.text-\[var\(--color-white\)\]{
+  color: var(--color-white);
+}
+
 .text-backdrop{
   color: rgba(43, 54, 60, 0.96);
 }
@@ -8066,8 +8267,8 @@ input[type]::placeholder{
   text-decoration-line: line-through;
 }
 
-.decoration-primary-600{
-  text-decoration-color: #034AD8;
+.decoration-\[var\(--color-primary-600\)\]{
+  text-decoration-color: var(--color-primary-600);
 }
 
 .decoration-2{
@@ -8217,8 +8418,8 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.outline-focus{
-  outline-color: #F408FC;
+.outline-\[var\(--color-focus\)\]{
+  outline-color: var(--color-focus);
 }
 
 .blur{
@@ -12517,6 +12718,14 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
+.hover\:bg-\[var\(--color-primary-100\)\]:hover{
+  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);
 }
@@ -14002,6 +14211,10 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
+.hover\:text-\[var\(--color-primary-600\)\]:hover{
+  color: var(--color-primary-600);
+}
+
 .hover\:text-backdrop:hover{
   color: rgba(43, 54, 60, 0.96);
 }
@@ -20856,27 +21069,24 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.focus\:outline-focus:focus{
-  outline-color: #F408FC;
+.focus\:outline-\[var\(--color-focus\)\]:focus{
+  outline-color: var(--color-focus);
 }
 
 .active\:border-0:active{
   border-width: 0;
 }
 
-.active\:bg-neutral-200:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 228 234 / var(--tw-bg-opacity, 1));
+.active\:bg-\[var\(--color-neutral-200\)\]:active{
+  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-neutral-900:active{
-  --tw-text-opacity: 1;
-  color: rgb(43 54 60 / var(--tw-text-opacity, 1));
+.active\:text-\[var\(--color-neutral-900\)\]:active{
+  color: var(--color-neutral-900);
 }
 
 .active\:shadow-inner:active{
@@ -26604,10 +26814,6 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .xs\:p-0{
-    padding: 0px;
-  }
-
   .xs\:p-32{
     padding: 32px;
   }
@@ -27615,6 +27821,10 @@ input[type]::placeholder{
     display: block;
   }
 
+  .md\:flex{
+    display: flex;
+  }
+
   .md\:hidden{
     display: none;
   }
@@ -33266,10 +33476,6 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .md\:p-64{
-    padding: 64px;
-  }
-
   .md\:px-64{
     padding-left: 64px;
     padding-right: 64px;
@@ -34088,6 +34294,20 @@ input[type]::placeholder{
   .md\:bg-blend-luminosity{
     background-blend-mode: luminosity;
   }
+
+  @media not all and (min-width: 1280px){
+    .md\:max-xl\:col-span-8{
+      grid-column: span 8 / span 8;
+    }
+
+    .md\:max-xl\:col-span-full{
+      grid-column: 1 / -1;
+    }
+
+    .md\:max-xl\:p-64{
+      padding: 64px;
+    }
+  }
 }
 
 @media (min-width: 1280px){
@@ -34275,6 +34495,10 @@ input[type]::placeholder{
     height: calc(100% - 2px);
   }
 
+  .xl\:h-screen{
+    height: 100vh;
+  }
+
   .xl\:w-\[1120px\]{
     width: 1120px;
   }
@@ -34287,6 +34511,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;
@@ -34636,6 +34864,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));
   }
@@ -34656,6 +34888,10 @@ input[type]::placeholder{
     flex-direction: row;
   }
 
+  .xl\:items-center{
+    align-items: center;
+  }
+
   .xl\:justify-start{
     justify-content: flex-start;
   }
@@ -39870,15 +40106,21 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .xl\:p-64{
-    padding: 64px;
-  }
-
   .xl\:px-0{
     padding-left: 0px;
     padding-right: 0px;
   }
 
+  .xl\:px-\[112px\]{
+    padding-left: 112px;
+    padding-right: 112px;
+  }
+
+  .xl\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .xl\:py-128{
     padding-top: 128px;
     padding-bottom: 128px;
@@ -40709,9 +40951,8 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
-.\[\&\>\*\]\:text-neutral-500>*{
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+.\[\&\>\*\]\:text-\[var\(--color-neutral-500\)\]>*{
+  color: var(--color-neutral-500);
 }
 
 .\[\&\>\.children-wrapper\]\:w-full>.children-wrapper{

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,7 +2,7 @@ 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.
  */

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-styles.d.ts → card-action-variants.d.ts}

@@ -1,6 +1,6 @@
-import { CardActionStyles } from './card-action';
+import { CardActionVariants } from './card-action';
 import { ButtonVariant } from '../../button/button';
-type CardActionStylesBody = {
+type CardActionVariantsBody = {
     backgroundColor: string;
     textColor?: string;
     titleColor?: string;
@@ -10,6 +10,6 @@ type CardActionStylesBody = {
     buttonDarkMode?: boolean;
     iconColor?: string;
 };
-export type CardActionStylesMap = Record<CardActionStyles, CardActionStylesBody>;
-export declare const cardActionStylesMap: CardActionStylesMap;
+export type CardActionVariantsMap = Record<CardActionVariants, CardActionVariantsBody>;
+export declare const cardActionVariantsMap: CardActionVariantsMap;
 export {};

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

@@ -1,23 +1,23 @@
 import { FC, ImgHTMLAttributes } from 'react';
 import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
-import './card-action.scss';
+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 CardActionVariants = '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 {
     /**
      * title of card
      */
-    title: string;
+    titleText: string;
     /**
      * text to show within the card
      */
-    text: string;
+    descriptionText: string;
     /**
-     * style of card action
+     * variant of card action
      */
-    variant?: CardActionStyles;
+    variant?: CardActionVariants;
     /**
      * it allow you align title, text and button
      */
@@ -38,5 +38,9 @@ export interface CardActionProps {
      * props for the button component
      */
     button: ButtonProps;
+    /**
+     * turn button full width
+     */
+    buttonFullWidth?: BooleanProp;
 }
 export declare const CardAction: FC<CardActionProps>;