@ama-pt/agora-design-system 3.3.4 → 3.3.5

package/artifacts/dist/tailwind.css

@@ -953,6 +953,11 @@ input[type]::placeholder{
   margin-right: 32px;
 }
 
+.mx-\[-64px\]{
+  margin-left: -64px;
+  margin-right: -64px;
+}
+
 .mx-\[4px\]{
   margin-left: 4px;
   margin-right: 4px;
@@ -983,10 +988,6 @@ input[type]::placeholder{
   margin-bottom: 8px;
 }
 
-.-ml-16{
-  margin-left: -16px;
-}
-
 .-ml-32{
   margin-left: -32px;
 }
@@ -1043,6 +1044,10 @@ input[type]::placeholder{
   margin-right: 24px;
 }
 
+.mr-32{
+  margin-right: 32px;
+}
+
 .mr-8{
   margin-right: 8px;
 }
@@ -1142,6 +1147,10 @@ input[type]::placeholder{
   display: grid;
 }
 
+.\!hidden{
+  display: none !important;
+}
+
 .hidden{
   display: none;
 }
@@ -1174,10 +1183,6 @@ input[type]::placeholder{
   height: 32px;
 }
 
-.h-56{
-  height: 56px;
-}
-
 .h-64{
   height: 64px;
 }
@@ -1186,6 +1191,10 @@ input[type]::placeholder{
   height: 100vh;
 }
 
+.h-\[126px\]{
+  height: 126px;
+}
+
 .h-\[400px\]{
   height: 400px;
 }
@@ -1300,10 +1309,6 @@ input[type]::placeholder{
   width: 32px;
 }
 
-.w-56{
-  width: 56px;
-}
-
 .w-64{
   width: 64px;
 }
@@ -1739,11 +1744,6 @@ input[type]::placeholder{
   transform-origin: center;
 }
 
-.translate-y-0{
-  --tw-translate-y: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-y-1\/2{
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1761,6 +1761,10 @@ input[type]::placeholder{
   cursor: default;
 }
 
+.cursor-pointer{
+  cursor: pointer;
+}
+
 .select-none{
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2313,10 +2317,6 @@ 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);
 }
@@ -2334,6 +2334,10 @@ input[type]::placeholder{
   border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 
+.border-black\/5{
+  border-color: rgb(0 0 0 / 0.05);
+}
+
 .border-danger-100{
   --tw-border-opacity: 1;
   border-color: rgb(254 225 227 / var(--tw-border-opacity, 1));
@@ -2714,6 +2718,10 @@ input[type]::placeholder{
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.border-white\/5{
+  border-color: rgb(255 255 255 / 0.05);
+}
+
 .border-x-backdrop{
   border-left-color: rgba(43, 54, 60, 0.96);
   border-right-color: rgba(43, 54, 60, 0.96);
@@ -6145,10 +6153,6 @@ input[type]::placeholder{
   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);
 }
@@ -6165,14 +6169,6 @@ 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);
 }
@@ -7642,6 +7638,10 @@ input[type]::placeholder{
   padding-bottom: 128px;
 }
 
+.pb-16{
+  padding-bottom: 16px;
+}
+
 .pb-32{
   padding-bottom: 32px;
 }
@@ -7650,6 +7650,10 @@ input[type]::placeholder{
   padding-bottom: 64px;
 }
 
+.pl-32{
+  padding-left: 32px;
+}
+
 .pl-8{
   padding-left: 8px;
 }
@@ -7658,10 +7662,18 @@ input[type]::placeholder{
   padding-left: 44px;
 }
 
+.pr-16{
+  padding-right: 16px;
+}
+
 .pr-\[44px\]{
   padding-right: 44px;
 }
 
+.pt-16{
+  padding-top: 16px;
+}
+
 .pt-32{
   padding-top: 32px;
 }
@@ -8458,18 +8470,10 @@ input[type]::placeholder{
   text-decoration-thickness: 2px;
 }
 
-.opacity-0{
-  opacity: 0;
-}
-
 .opacity-10{
   opacity: 0.1;
 }
 
-.opacity-100{
-  opacity: 1;
-}
-
 .opacity-20{
   opacity: 0.2;
 }
@@ -8614,10 +8618,6 @@ input[type]::placeholder{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.ease-in-out{
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .\!\[clip\:rect\(0\2c 0\2c 0\2c 0\)\]{
   clip: rect(0,0,0,0) !important;
 }
@@ -14544,6 +14544,14 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
+.hover\:text-\[var\(--color-neutral-600\)\]:hover{
+  color: var(--color-neutral-600);
+}
+
+.hover\:text-\[var\(--color-neutral-700\)\]:hover{
+  color: var(--color-neutral-700);
+}
+
 .hover\:text-\[var\(--color-primary-600\)\]:hover{
   color: var(--color-primary-600);
 }
@@ -21610,22 +21618,6 @@ input[type]::placeholder{
   display: none;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
-.group:hover .group-hover\:opacity-100{
-  opacity: 1;
-}
-
-.group:focus .group-focus\:opacity-0{
-  opacity: 0;
-}
-
-.group:focus .group-focus\:opacity-100{
-  opacity: 1;
-}
-
 @media not all and (min-width: 768px){
   .max-md\:w-full{
     width: 100%;
@@ -21657,6 +21649,11 @@ input[type]::placeholder{
     grid-column-start: 1;
   }
 
+  .xs\:mx-64{
+    margin-left: 64px;
+    margin-right: 64px;
+  }
+
   .xs\:my-16{
     margin-top: 16px;
     margin-bottom: 16px;
@@ -22123,11 +22120,6 @@ input[type]::placeholder{
          column-gap: 32px;
   }
 
-  .xs\:gap-x-8{
-    -moz-column-gap: 8px;
-         column-gap: 8px;
-  }
-
   .xs\:gap-y-16{
     row-gap: 16px;
   }
@@ -27493,11 +27485,6 @@ input[type]::placeholder{
     padding-bottom: 0px;
   }
 
-  .xs\:py-16{
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-
   .xs\:py-32{
     padding-top: 32px;
     padding-bottom: 32px;
@@ -28315,6 +28302,16 @@ input[type]::placeholder{
   .xs\:bg-blend-luminosity{
     background-blend-mode: luminosity;
   }
+
+  @media not all and (min-width: 768px){
+    .xs\:max-md\:mb-32{
+      margin-bottom: 32px;
+    }
+
+    .xs\:max-md\:flex-col{
+      flex-direction: column;
+    }
+  }
 }
 
 @media (min-width: 768px){
@@ -28382,10 +28379,6 @@ input[type]::placeholder{
     grid-column-start: 1;
   }
 
-  .md\:col-start-2{
-    grid-column-start: 2;
-  }
-
   .md\:col-start-4{
     grid-column-start: 4;
   }
@@ -28415,11 +28408,6 @@ input[type]::placeholder{
     margin-right: 64px;
   }
 
-  .md\:my-0{
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
   .md\:my-128{
     margin-top: 128px;
     margin-bottom: 128px;
@@ -28526,12 +28514,12 @@ input[type]::placeholder{
     width: 137px;
   }
 
-  .md\:w-\[calc\(\(\(var\(--footer-aux-vw\)-100\%\)\/2\)\+100\%\)\]{
-    width: calc(((var(--footer-aux-vw) - 100%) / 2) + 100%);
+  .md\:w-\[50\%\]{
+    width: 50%;
   }
 
-  .md\:w-\[calc\(100\%\+32px\)\]{
-    width: calc(100% + 32px);
+  .md\:w-\[calc\(\(\(var\(--footer-aux-vw\)-100\%\)\/2\)\+100\%\)\]{
+    width: calc(((var(--footer-aux-vw) - 100%) / 2) + 100%);
   }
 
   .md\:w-full{
@@ -28938,11 +28926,6 @@ input[type]::placeholder{
     gap: 30px;
   }
 
-  .md\:gap-x-24{
-    -moz-column-gap: 24px;
-         column-gap: 24px;
-  }
-
   .md\:gap-x-32{
     -moz-column-gap: 32px;
          column-gap: 32px;
@@ -34324,11 +34307,6 @@ input[type]::placeholder{
     padding-right: 64px;
   }
 
-  .md\:py-32{
-    padding-top: 32px;
-    padding-bottom: 32px;
-  }
-
   .md\:py-64{
     padding-top: 64px;
     padding-bottom: 64px;
@@ -35286,6 +35264,11 @@ input[type]::placeholder{
     grid-row: span 2 / span 2;
   }
 
+  .xl\:my-32{
+    margin-top: 32px;
+    margin-bottom: 32px;
+  }
+
   .xl\:my-8{
     margin-top: 8px;
     margin-bottom: 8px;
@@ -35319,6 +35302,10 @@ input[type]::placeholder{
     margin-top: 0px;
   }
 
+  .xl\:mt-32{
+    margin-top: 32px;
+  }
+
   .xl\:mt-64{
     margin-top: 64px;
   }
@@ -35346,6 +35333,10 @@ input[type]::placeholder{
     height: 32px;
   }
 
+  .xl\:h-\[260px\]{
+    height: 260px;
+  }
+
   .xl\:h-\[calc\(100\%-2px\)\]{
     height: calc(100% - 2px);
   }
@@ -35354,6 +35345,10 @@ input[type]::placeholder{
     height: auto;
   }
 
+  .xl\:h-full{
+    height: 100%;
+  }
+
   .xl\:h-screen{
     height: 100vh;
   }
@@ -35366,6 +35361,14 @@ input[type]::placeholder{
     width: 175px;
   }
 
+  .xl\:w-\[40\%\]{
+    width: 40%;
+  }
+
+  .xl\:w-\[60\%\]{
+    width: 60%;
+  }
+
   .xl\:w-\[696px\]{
     width: 696px;
   }
@@ -35759,6 +35762,10 @@ input[type]::placeholder{
     flex-wrap: nowrap;
   }
 
+  .xl\:items-end{
+    align-items: flex-end;
+  }
+
   .xl\:items-center{
     align-items: center;
   }
@@ -35771,13 +35778,16 @@ input[type]::placeholder{
     justify-content: flex-end;
   }
 
+  .xl\:justify-center{
+    justify-content: center;
+  }
+
   .xl\:justify-items-start{
     justify-items: start;
   }
 
-  .xl\:gap-x-24{
-    -moz-column-gap: 24px;
-         column-gap: 24px;
+  .xl\:gap-32{
+    gap: 32px;
   }
 
   .xl\:overflow-hidden{

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

@@ -1,14 +1,8 @@
 import { CardActionVariants } from './card-action';
 import { ButtonVariant } from '../../button/button';
 type CardActionVariantsBody = {
-    backgroundColor: string;
-    textColor?: string;
-    titleColor?: string;
-    hasBorder?: boolean;
-    isBorderWhite?: boolean;
     buttonVariant?: ButtonVariant;
     buttonDarkMode?: boolean;
-    iconColor?: string;
 };
 export type CardActionVariantsMap = Record<CardActionVariants, CardActionVariantsBody>;
 export declare const cardActionVariantsMap: CardActionVariantsMap;

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

@@ -1,11 +1,11 @@
-import { FC, ImgHTMLAttributes } from 'react';
+import { ComponentProps, FC, ImgHTMLAttributes } from 'react';
 import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
 import './card-action.css';
 import { BooleanProp } from '../../../models';
 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 {
+export interface CardActionProps extends ComponentProps<'div'> {
     /**
      * title of card
      */

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

@@ -1,18 +1,5 @@
 import { CardExpandableVariant } from './card-expandable';
 import { ButtonVariant } from '../../../index';
-type CardExpandableStylesBody = {
-    backgroundColor: string;
-    textColor: string;
-    iconColor: 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;
 type CardExpandableButtonVariantsBody = {
     buttonVariant?: ButtonVariant;
     buttonDarkMode?: boolean;

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

@@ -0,0 +1,64 @@
+import React, { FC, ImgHTMLAttributes } from 'react';
+import './card-general.css';
+import { AnchorProps } from '../../../components/anchor/anchor';
+import { IconSetState } from '../../../components/shared/icon-set/icon-set';
+export interface CardGeneralProps {
+    /**
+     * image card to draw in the card if specified.
+     */
+    image?: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * to config the icon in the card if specified.
+     */
+    iconDefault?: string;
+    /**
+     * to config the icon in the card when hovered if specified.
+     */
+    iconHover?: string;
+    /**
+     * to config the icon in the card when activated if specified.
+     */
+    iconActive?: string;
+    /**
+     * text to show within a pill
+     */
+    pillText?: string;
+    /**
+     * text to show the subtitle
+     */
+    subtitleText?: string;
+    /**
+     * title of card
+     */
+    titleText: string;
+    /**
+     * status of the card (adds a colored dot)
+     */
+    status?: 'default' | 'success' | 'warning' | 'danger' | 'disabled';
+    /**
+     * label to show next to the status dot
+     */
+    statusText?: string;
+    /**
+     * text to show within the card
+     */
+    descriptionText: string;
+    /**
+     * anchor props
+     */
+    anchor?: AnchorProps;
+    /**
+     * if true, the card will be displayed horizontally
+     */
+    isCardHorizontal?: boolean;
+    /**
+     * Makes the whole card clickable. When card is clicked the anchor will activate.
+     */
+    isBlockedLink?: boolean;
+    /**
+     * turns on indent style for the image
+     */
+    imageIndent?: boolean;
+}
+export type setComponentStateType = React.Dispatch<React.SetStateAction<IconSetState>>;
+export declare const CardGeneral: FC<CardGeneralProps>;

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

@@ -0,0 +1,2 @@
+export { CardGeneral } from './card-general';
+export type { CardGeneralProps } from './card-general';

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { HeadingLevel } from '../../../../models';
+import { AnchorProps } from '../../../../components/anchor';
+import './card-section-helper.css';
+import { CardSectionVariants } from '../card-section-types';
+export interface HelpTopic {
+    description: ReactNode;
+    anchor: AnchorProps;
+}
+export interface CardSectionHelperProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * header title.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * The title of the card
+     */
+    title?: ReactNode;
+    /**
+     * The subtitle of the card
+     */
+    subtitle?: ReactNode;
+    /**
+     * The list of help topics of the card
+     */
+    helpTopics?: HelpTopic[];
+    /**
+     * Variant of card section
+     */
+    variant?: CardSectionVariants;
+}
+export declare const CardSectionHelper: FC<CardSectionHelperProps>;

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

@@ -0,0 +1,2 @@
+export { CardSectionHelper } from './card-section-helper';
+export type { CardSectionHelperProps } from './card-section-helper';

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

@@ -0,0 +1,24 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { AnchorProps } from '../../../../components/anchor';
+import { HeadingLevel } from '../../../../models';
+import './card-section-index.css';
+import { CardSectionVariants } from '../card-section-types';
+export interface CardSectionIndexProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * The title of the card.
+     */
+    title?: ReactNode;
+    /**
+     *  Heading level to apply in the card.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * The list of anchor props that makes up the index.
+     */
+    index: AnchorProps[];
+    /**
+     * Variant of card section
+     */
+    variant?: CardSectionVariants;
+}
+export declare const CardSectionIndex: FC<CardSectionIndexProps>;

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

@@ -0,0 +1,2 @@
+export { CardSectionIndex } from './card-section-index';
+export type { CardSectionIndexProps } from './card-section-index';

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { AnchorProps } from '../../../../components/anchor';
+import { HeadingLevel } from '../../../../models';
+import './card-section-sitemap.css';
+import { CardSectionVariants } from '../card-section-types';
+export interface CardSectionSitemapProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * Header title.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * The title of the card
+     */
+    title?: ReactNode;
+    /**
+     * The description of the card
+     */
+    description?: ReactNode;
+    /**
+     * The list of anchor props that makes up the index.
+     */
+    anchors: AnchorProps[];
+    /**
+     * The anchor props that makes up the highlighted link.
+     */
+    highlightedLink?: AnchorProps;
+    /**
+     * Variant of card section
+     */
+    variant?: CardSectionVariants;
+}
+export declare const CardSectionSitemap: FC<CardSectionSitemapProps>;

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

@@ -0,0 +1,2 @@
+export { CardSectionSitemap } from './card-section-sitemap';
+export type { CardSectionSitemapProps } from './card-section-sitemap';

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

@@ -0,0 +1 @@
+export type CardSectionVariants = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-900';

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

@@ -0,0 +1,3 @@
+export * from './card-section-helper';
+export * from './card-section-index';
+export * from './card-section-sitemap';

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

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