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

package/artifacts/dist/tailwind.css

@@ -660,7 +660,8 @@ textarea::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  color: var(--color-neutral-500);
+  --tw-text-opacity: 1;
+  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
 }
 
 textarea::placeholder{
@@ -668,7 +669,8 @@ textarea::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  color: var(--color-neutral-500);
+  --tw-text-opacity: 1;
+  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
 }
 
 input[type]::-moz-placeholder{
@@ -676,7 +678,8 @@ input[type]::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  color: var(--color-neutral-500);
+  --tw-text-opacity: 1;
+  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
 }
 
 input[type]::placeholder{
@@ -684,14 +687,15 @@ input[type]::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  color: var(--color-neutral-500);
+  --tw-text-opacity: 1;
+  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
 }
 
 *:focus{
   outline-style: solid;
   outline-width: 2px;
   outline-offset: -2px;
-  outline-color: var(--color-focus);
+  outline-color: #F408FC;
 }
 
 .container{
@@ -1139,10 +1143,6 @@ input[type]::placeholder{
   height: 44px !important;
 }
 
-.\!h-auto{
-  height: auto !important;
-}
-
 .h-0{
   height: 0px;
 }
@@ -1273,10 +1273,6 @@ input[type]::placeholder{
   width: 44px !important;
 }
 
-.\!w-full{
-  width: 100% !important;
-}
-
 .w-1\/2{
   width: 50%;
 }
@@ -1358,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%;
 }
@@ -1859,6 +1863,10 @@ input[type]::placeholder{
   gap: 64px;
 }
 
+.gap-\[8px\]{
+  gap: 8px;
+}
+
 .gap-x-16{
   -moz-column-gap: 16px;
        column-gap: 16px;
@@ -2264,24 +2272,13 @@ input[type]::placeholder{
   border-color: transparent !important;
 }
 
-.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-primary-400\)\]{
-  border-color: var(--color-primary-400);
+.border-\[\#9747FF\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(151 71 255 / var(--tw-border-opacity, 1));
 }
 
-.border-\[var\(--color-primary-600\)\]{
-  border-color: var(--color-primary-600);
+.border-\[var\(--color-neutral-700\)\]{
+  border-color: var(--color-neutral-700);
 }
 
 .border-backdrop{
@@ -4321,10 +4318,6 @@ 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);
 }
@@ -5934,54 +5927,10 @@ input[type]::placeholder{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
 }
 
-.bg-\[var\(--color-backdrop\)\]{
-  background-color: var(--color-backdrop);
-}
-
-.bg-\[var\(--color-danger-200\)\]{
-  background-color: var(--color-danger-200);
-}
-
-.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-primary-100\)\]{
-  background-color: var(--color-primary-100);
-}
-
-.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-700\)\]{
-  background-color: var(--color-secondary-700);
-}
-
 .bg-backdrop{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -6600,14 +6549,6 @@ input[type]::placeholder{
   background-origin: content-box;
 }
 
-.fill-\[var\(--color-neutral-900\)\]{
-  fill: var(--color-neutral-900);
-}
-
-.fill-\[var\(--color-primary-600\)\]{
-  fill: var(--color-primary-600);
-}
-
 .fill-backdrop{
   fill: rgba(43, 54, 60, 0.96);
 }
@@ -7413,6 +7354,10 @@ input[type]::placeholder{
   text-align: end;
 }
 
+.align-middle{
+  vertical-align: middle;
+}
+
 .align-text-top{
   vertical-align: text-top;
 }
@@ -7644,38 +7589,6 @@ 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-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);
 }
@@ -8153,8 +8066,8 @@ input[type]::placeholder{
   text-decoration-line: line-through;
 }
 
-.decoration-\[var\(--color-primary-600\)\]{
-  text-decoration-color: var(--color-primary-600);
+.decoration-primary-600{
+  text-decoration-color: #034AD8;
 }
 
 .decoration-2{
@@ -8304,8 +8217,8 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.outline-\[var\(--color-focus\)\]{
-  outline-color: var(--color-focus);
+.outline-focus{
+  outline-color: #F408FC;
 }
 
 .blur{
@@ -12604,10 +12517,6 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
-.hover\:bg-\[var\(--color-primary-100\)\]:hover{
-  background-color: var(--color-primary-100);
-}
-
 .hover\:bg-backdrop:hover{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -14093,10 +14002,6 @@ 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);
 }
@@ -20951,16 +20856,17 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.focus\:outline-\[var\(--color-focus\)\]:focus{
-  outline-color: var(--color-focus);
+.focus\:outline-focus:focus{
+  outline-color: #F408FC;
 }
 
 .active\:border-0:active{
   border-width: 0;
 }
 
-.active\:bg-\[var\(--color-neutral-200\)\]:active{
-  background-color: var(--color-neutral-200);
+.active\:bg-neutral-200:active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(225 228 234 / var(--tw-bg-opacity, 1));
 }
 
 .active\:bg-primary-700:active{
@@ -20968,8 +20874,9 @@ input[type]::placeholder{
   background-color: rgb(3 56 162 / var(--tw-bg-opacity, 1));
 }
 
-.active\:text-\[var\(--color-neutral-900\)\]:active{
-  color: var(--color-neutral-900);
+.active\:text-neutral-900:active{
+  --tw-text-opacity: 1;
+  color: rgb(43 54 60 / var(--tw-text-opacity, 1));
 }
 
 .active\:shadow-inner:active{
@@ -26697,6 +26604,14 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
+  .xs\:p-0{
+    padding: 0px;
+  }
+
+  .xs\:p-32{
+    padding: 32px;
+  }
+
   .xs\:px-32{
     padding-left: 32px;
     padding-right: 32px;
@@ -33351,6 +33266,10 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
+  .md\:p-64{
+    padding: 64px;
+  }
+
   .md\:px-64{
     padding-left: 64px;
     padding-right: 64px;
@@ -39951,6 +39870,10 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
+  .xl\:p-64{
+    padding: 64px;
+  }
+
   .xl\:px-0{
     padding-left: 0px;
     padding-right: 0px;
@@ -40786,8 +40709,9 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
-.\[\&\>\*\]\:text-\[var\(--color-neutral-500\)\]>*{
-  color: var(--color-neutral-500);
+.\[\&\>\*\]\:text-neutral-500>*{
+  --tw-text-opacity: 1;
+  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
 }
 
 .\[\&\>\.children-wrapper\]\:w-full>.children-wrapper{

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

@@ -6,7 +6,7 @@ import './avatar.scss';
 /**
  *  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/cards/card-action/card-action-styles.d.ts

@@ -0,0 +1,15 @@
+import { CardActionStyles } from './card-action';
+import { ButtonVariant } from '../../button/button';
+type CardActionStylesBody = {
+    backgroundColor: string;
+    textColor?: string;
+    titleColor?: string;
+    hasBorder?: boolean;
+    isBorderWhite?: boolean;
+    buttonVariant?: ButtonVariant;
+    buttonDarkMode?: boolean;
+    iconColor?: string;
+};
+export type CardActionStylesMap = Record<CardActionStyles, CardActionStylesBody>;
+export declare const cardActionStylesMap: CardActionStylesMap;
+export {};

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

@@ -0,0 +1,42 @@
+import { FC, ImgHTMLAttributes } from 'react';
+import { ButtonProps } from '../../../components/button';
+import { IconProps } from '../../../components/icon';
+import './card-action.scss';
+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 {
+    /**
+     * title of card
+     */
+    title: string;
+    /**
+     * text to show within the card
+     */
+    text: string;
+    /**
+     * style of card action
+     */
+    variant?: CardActionStyles;
+    /**
+     * it allow you align title, text and button
+     */
+    alignment?: CardActionAlignment;
+    /**
+     * show the card horizontally
+     */
+    isCardHorizontal?: BooleanProp;
+    /**
+     * name of icon logo
+     */
+    icon?: IconProps;
+    /**
+     * image card to draw in the card if specified.
+     */
+    image?: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * props for the button component
+     */
+    button: ButtonProps;
+}
+export declare const CardAction: FC<CardActionProps>;

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

@@ -0,0 +1,2 @@
+export { CardAction } from './card-action';
+export type { CardActionProps } from './card-action';

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

@@ -0,0 +1,9 @@
+import { CardLinksStyles } from './card-links';
+type CardLinksStylesBody = {
+    backgroundColor: string;
+    textColor?: string;
+    borderColor?: string;
+};
+export type CardLinksStylesMap = Record<CardLinksStyles, CardLinksStylesBody>;
+export declare const cardLinksStylesMap: CardLinksStylesMap;
+export {};

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

@@ -2,7 +2,12 @@ import { ComponentProps, FC, ImgHTMLAttributes, ReactNode } from 'react';
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
 import './card-links.scss';
+export type CardLinksStyles = 'transparent' | 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900';
 export interface CardLinksProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /**
+     * Style of card
+     */
+    variant?: CardLinksStyles;
     /**
      * Heading level to apply in the card.
      */
@@ -24,7 +29,11 @@ export interface CardLinksProps extends Omit<ComponentProps<'div'>, 'title'> {
      */
     description?: ReactNode;
     /**
-     * card image.
+     * The description of the card.
+     */
+    description2?: ReactNode;
+    /**
+     * Second description of the card.
      */
     image?: ImgHTMLAttributes<HTMLImageElement>;
     /**
@@ -44,8 +53,8 @@ export interface CardLinksProps extends Omit<ComponentProps<'div'>, 'title'> {
      */
     darkMode?: BooleanProp;
     /**
-     * Makes the whole card clickable.
+     * Makes the title clickable.
      */
-    blockedLink?: BooleanProp;
+    titleLink?: BooleanProp;
 }
 export declare const CardLinks: FC<CardLinksProps>;

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

@@ -1,4 +1,4 @@
-import { ComponentProps, FC, ReactNode } from 'react';
+import React, { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../../models';
 import './card-no-results.scss';
 export interface CardNoResultsProps extends Omit<ComponentProps<'div'>, 'title'> {
@@ -18,9 +18,58 @@ export interface CardNoResultsProps extends Omit<ComponentProps<'div'>, 'title'>
      * The description of the card.
      */
     description?: ReactNode;
+    /**
+     * The extra description of the card.
+     */
+    extraDescription?: ReactNode;
     /**
      * If the card should be displayed in a dark mode.
      */
     darkMode?: BooleanProp;
+    /**
+     * allow you to say where the content should be aligned
+     */
+    position?: 'left' | 'center';
+    /**
+     * show the button within the card
+     */
+    hasAnchor?: boolean;
+    /**
+     * name of icon to show inside of anchor
+     */
+    anchorLeadingIcon?: string;
+    /**
+     * name of icon to show when hover the anchor
+     */
+    anchorLeadingIconHover?: string;
+    /**
+     * name of icon to show after the name of button when hover the anchor
+     */
+    anchorTrailingIcon?: string;
+    /**
+     * name of icon to show after the name of button when hover the anchor
+     */
+    anchorTrailingIconHover?: string;
+    /**
+     * name of button
+     */
+    valueAnchor?: string;
+    /**
+     * list of items to be displayed
+     */
+    itemList?: ReactNode[];
+    /**
+     * show the list inside the card
+     */
+    hasList?: boolean;
+    /**
+     * href of the anchor
+     */
+    anchorHref?: string;
+    /**
+     * target of the anchor link
+     */
+    anchorTarget?: '_blank' | '_self' | '_parent' | '_top';
 }
+export declare const stringOrReactNode: (value: string | ReactNode, className: string) => React.JSX.Element | null;
 export declare const CardNoResults: FC<CardNoResultsProps>;

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

@@ -15,3 +15,4 @@ export * from './card-links';
 export * from './card-no-results';
 export * from './card-single';
 export * from './card-topic';
+export * from './card-action';

package/artifacts/dist/types/components/dropdown/internals/internal-dropdown-context.d.ts

@@ -22,6 +22,8 @@ export interface InternalDropdownContextProps {
     applyFilter: (filter: string) => void;
     activeFilter: string;
     resetFilter: () => void;
+    lastSelectedOption?: string;
+    setLastSelectedOption: (optionId: string | undefined) => void;
 }
 export declare const InternalDropdownContext: import("react").Context<InternalDropdownContextProps>;
 export declare const useInternalDropdownContext: () => InternalDropdownContextProps;

package/artifacts/dist/types/components/dropdown/internals/internal-dropdown-option.d.ts

@@ -13,6 +13,7 @@ export interface InternalDropdownOptionProps extends ComponentProps<'li'> {
     selected?: BooleanProp;
     filtered?: BooleanProp;
     sectionOptionId?: string;
+    onRangeSelection?: (optionId: string, isShiftClick: boolean) => void;
 }
 declare const InternalDropdownOption: FC<InternalDropdownOptionProps>;
 export { InternalDropdownOption };

package/artifacts/dist/types/components/dropdown/internals/internal-dropdown-section.d.ts

@@ -1,7 +1,6 @@
+import { BooleanProp } from '../../../models';
 import { FC, ReactElement } from 'react';
 import { InternalDropdownOptionProps } from './internal-dropdown-option';
-import './internal-dropdown-section.scss';
-import { BooleanProp } from '../../../models';
 export interface InternalDropdownSectionProps {
     className?: string;
     name: string;

package/artifacts/dist/types/components/glossary-letters/glossary-letters.d.ts

@@ -20,6 +20,10 @@ export interface GlossaryLettersProps extends ComponentProps<'div'> {
      * Letters Array
      */
     letters?: GlossaryLetter[];
+    /**
+     * Turn the dark mode on or off.
+     */
+    darkMode?: boolean;
 }
 declare const GlossaryLetters: FC<GlossaryLettersProps>;
 export { GlossaryLetters };

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

@@ -38,6 +38,10 @@ export interface InputDateProps extends ComponentProps<'input'> {
      * Feedback text displayed below input.
      */
     feedbackText?: ReactNode;
+    /**
+     * Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
     /**
      * The flag to set if the label and feedbackText is in dark mode or light mode.
      */

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

@@ -35,6 +35,10 @@ export interface InputEmailBarProps extends ComponentProps<'input'> {
      * Indicates the feedback state of feedback text. This param will change the left feedback icon and dye it.
      */
     hasError?: BooleanProp;
+    /**
+     * Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
 }
 declare const InputEmailBar: FC<InputEmailBarProps>;
 export { InputEmailBar };

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

@@ -26,6 +26,10 @@ export interface InputNumberProps extends ComponentProps<'input'> {
      * Feedback text displayed below input.
      */
     feedbackText?: ReactNode;
+    /**
+     * Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.
      */

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

@@ -22,6 +22,10 @@ export interface InputPasswordProps extends ComponentProps<'input'> {
      * Defines the state of the feedback text. This param will change the feedback icon and dye it.
      */
     feedbackState?: FeedbackState;
+    /**
+     * Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.
      */

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

@@ -35,6 +35,10 @@ export interface InputPhoneProps extends ComponentProps<'input'> {
      * Feedback text displayed below input.
      */
     feedbackText?: ReactNode;
+    /**
+     * Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.
      */

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

@@ -20,7 +20,7 @@ export interface InputRangeProps extends Omit<ComponentProps<'input'>, 'value' |
      */
     disabled?: boolean;
     /**
-     *   The value or values for the input range. It can be a number array with 1 or 2 positions according tp the type specified.
+     *  The value or values for the input range. It can be a number array with 1 or 2 positions according tp the type specified.
      */
     value?: number[];
     /**
@@ -56,6 +56,10 @@ export interface InputRangeProps extends Omit<ComponentProps<'input'>, 'value' |
      *  Feedback text displayed below input.
      */
     feedbackText?: ReactNode;
+    /**
+     *  Error feedback text displayed below input.
+     */
+    errorFeedbackText?: ReactNode;
 }
 export interface InputRangeElement extends HTMLDivElement {
     sliders: HTMLInputElement[];