@popsure/dirty-swan 0.50.0 → 0.51.0

package/dist/esm/lib/components/input/input.stories.d.ts

@@ -9,7 +9,7 @@ declare const story: {
         id?: string | undefined;
         hideLabel?: boolean | undefined;
         labelInsideInput?: boolean | undefined;
-    }, "className" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "children" | "onClick" | "error" | "size" | "color" | "hidden" | "type" | "list" | "enterKeyHint" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "hideLabel" | "labelInsideInput"> & import("react").RefAttributes<HTMLInputElement>>;
+    }, "className" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "children" | "onClick" | "error" | "size" | "color" | "hidden" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "hideLabel" | "list" | "step" | "enterKeyHint" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "labelInsideInput"> & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         value: {
             defaultValue: string;

package/dist/esm/lib/components/modal/bottomModal/index.d.ts

@@ -1,2 +1,3 @@
 import { Props } from '..';
-export declare const BottomModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
+declare const BottomModal: ({ className, ...rest }: Props) => JSX.Element;
+export { BottomModal };

package/dist/esm/lib/components/modal/genericModal/index.d.ts

@@ -0,0 +1,20 @@
+import { Props } from '..';
+interface GenericModalProps extends Props {
+    classNames?: {
+        wrapper?: string | (({ isClosing }: {
+            isClosing: boolean;
+        }) => string);
+        container?: string | (({ isClosing }: {
+            isClosing: boolean;
+        }) => string);
+        overlay?: string;
+        header?: string;
+        closeButton?: string;
+        title?: string;
+        body?: string;
+        footer?: string;
+    };
+    titleSize?: 'small' | 'default';
+}
+export declare const GenericModal: ({ title, isOpen, children, onClose, classNames, dismissible, footer, titleSize, }: GenericModalProps) => JSX.Element | null;
+export {};

package/dist/esm/lib/components/modal/hooks/useOnClose.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface OnCloseReturn {
     isClosing: boolean;
+    isVisible: boolean;
+    handleOnCloseAnimationEnded: () => void;
     handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleOnClose: () => void;
     handleOnOverlayClick: () => void;

package/dist/esm/lib/components/modal/index.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
 import { BottomModal } from './bottomModal';
 import { RegularModal } from './regularModal';
 import { BottomOrRegularModal } from './bottomOrRegularModal';
+import { ReactNode } from 'react';
 export interface Props {
-    title?: string;
+    title?: ReactNode;
     isOpen: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
     onClose: () => void;
     className?: string;
     dismissible?: boolean;
+    footer?: ReactNode;
 }
 export { BottomModal, RegularModal, BottomOrRegularModal };

package/dist/esm/lib/components/modal/index.stories.d.ts

@@ -59,4 +59,6 @@ export declare const BottomModalStory: {
     storyName: string;
 };
 export declare const NonDismissibleModal: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
+export declare const ModalWithFooter: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
+export declare const ModalWithFooterAndScroll: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
 export default story;

package/dist/esm/lib/components/modal/regularModal/index.d.ts

@@ -1,2 +1,3 @@
 import { Props } from '..';
-export declare const RegularModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
+declare const RegularModal: ({ className, ...rest }: Props) => JSX.Element;
+export { RegularModal };

package/dist/esm/lib/index.d.ts

@@ -12,7 +12,7 @@ import { Checkbox } from './components/input/checkbox';
 import { Radio } from './components/input/radio';
 import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
 import { InfoCard, CardButton } from './components/cards';
-import { Card, CardProps } from './components/card';
+import { Card, CardProps } from './components/cards/card';
 import { Button } from './components/button';
 import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/{card → cards/card}/index.stories.tsx

@@ -1,11 +1,11 @@
 import { Card, CardProps } from '.';
-import { illustrations } from '../../util/images';
-import { Button } from '../button';
-import { Badge } from '../badge';
-import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
+import { illustrations } from '../../../util/images';
+import { Button } from '../../button';
+import { Badge } from '../../badge';
+import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
 
 const story = {
-  title: 'JSX/Card',
+  title: 'JSX/Cards/Card',
   component: Card,
   argTypes: {
     as: {
@@ -50,6 +50,10 @@ const story = {
     showActionIcon: {
       description: 'Property that always displays action icon even if no onClick is set.',
     },
+    verticalAlignment: {
+      description: 'Vertical alignment of the card content',
+      control: { type: 'select' },
+    },
   },
   args: {
     density: 'balanced',
@@ -69,6 +73,7 @@ const story = {
       icon: ''
     },
     dropShadow: true,
+    verticalAlignment: 'center',
   }
 };
 
@@ -87,6 +92,7 @@ export const CardStory = ({
   onClick,
   title,
   titleVariant,
+  verticalAlignment,
 }: CardProps) => (
   <div className='d-flex p24 bg-grey-200'>
     <Card
@@ -103,6 +109,7 @@ export const CardStory = ({
       onClick={onClick}
       actionIcon={actionIcon}
       showActionIcon={showActionIcon}
+      verticalAlignment={verticalAlignment}
     >
       {children}
     </Card>

package/src/lib/components/{card → cards/card}/index.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType, ReactNode } from 'react';
 import classNamesUtil from 'classnames';
-import { ChevronRightIcon } from '../icon';
+import { ChevronRightIcon } from '../../icon';
 
 import styles from './style.module.scss';
 
@@ -8,6 +8,7 @@ const cardDefaultAs = 'section' as const
 type CardDefaultAsType = typeof cardDefaultAs;
 type DensityType = 'balanced' | 'compact' | 'spacious';
 type TitleVariantType = 'small' | 'medium' | 'large';
+type VerticalAlignmentType = 'top' | 'center' | 'bottom';
 
 type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
   as?: E;
@@ -33,6 +34,7 @@ type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
   onClick?: () => void;
   actionIcon?: ReactNode;
   showActionIcon?: boolean;
+  verticalAlignment?: VerticalAlignmentType;
 } 
 
 export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &
@@ -53,6 +55,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
   title,
   titleVariant = 'large',
   showActionIcon,
+  verticalAlignment = 'center',
   ...rest
 }: CardProps<E>) => {
   const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
@@ -78,13 +81,18 @@ const Card = <E extends ElementType = CardDefaultAsType>({
     >
       <div
         className={classNamesUtil(
-          'd-flex fd-column jc-center br8 bg-white w100 ta-left',
+          'd-flex fd-column br8 bg-white w100 ta-left',
           { 'bs-sm': dropShadow },
           {
             compact: 'p16',
             balanced: 'p24',
             spacious: 'p32',
           }[density as DensityType],
+          {
+            top: 'jc-start',
+            center: 'jc-center',
+            bottom: 'jc-end',
+          }[verticalAlignment as VerticalAlignmentType],
           classNames?.wrapper
         )}
       >
@@ -92,10 +100,15 @@ const Card = <E extends ElementType = CardDefaultAsType>({
           {icon && (
             <div
               className={classNamesUtil(
-                `d-flex ai-center tc-primary-500`,
+                `d-flex tc-primary-500`,
                 styles.icon,
                 styles[`icon${density}`],
-                classNames?.icon
+                classNames?.icon, 
+                {
+                  top: 'ai-start',
+                  center: 'ai-center',
+                  bottom: 'ai-end',
+                }[verticalAlignment as VerticalAlignmentType],
               )}
             >
               {icon}
@@ -128,9 +141,9 @@ const Card = <E extends ElementType = CardDefaultAsType>({
               {description && (
                 <div
                   className={classNamesUtil(
-                    'tc-grey-600',
+                    styles.description,
                     classNames?.description,
-                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p',
                   )}
                 >
                   {description}

package/src/lib/components/{card → cards/card}/style.module.scss

@@ -1,4 +1,4 @@
-@use '../../scss/public/colors' as *;
+@use '../../../scss/public/colors' as *;
 
 .button {
   background-color: transparent;
@@ -41,3 +41,7 @@
     margin-left: 24px;
   }
 }
+
+.description {
+  color: $ds-grey-600;
+}

package/src/lib/components/cards/cardButton/index.stories.tsx

@@ -1,4 +1,3 @@
-import { FormEvent } from 'react';
 import { CardButton, CardButtonProps } from '.';
 
 const story = {
@@ -29,7 +28,7 @@ const story = {
       },
     },
     href: {
-      defaultValue: '',
+      defaultValue: 'https://feather-insurance.com/',
       description: 'Redirect URL on click of the button',
     },
   },
@@ -42,19 +41,16 @@ export const CardButtonStory = ({
   className,
   href,
   onClick,
-}: CardButtonProps) => {
-  const handleOnClick = (e: FormEvent) => onClick?.(e);
-  return (
-    <CardButton
-      title={title}
-      description={description}
-      disabled={disabled}
-      className={className}
-      href={href}
-      onClick={handleOnClick}
-    />
-  );
-}
+}: CardButtonProps) => (
+  <CardButton
+    title={title}
+    description={description}
+    disabled={disabled}
+    className={className}
+    href={href}
+    onClick={onClick}
+  />
+);
 
 CardButtonStory.storyName = "CardButton";
 

package/src/lib/components/cards/cardButton/index.tsx

@@ -1,64 +1,49 @@
-import { FormEvent, createElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { ChevronRightIcon } from '../../icon/icons';
 
 import styles from './style.module.scss';
-
-type ActionProps =
-  | { href: string; onClick?: (e: FormEvent) => void }
-  | { href?: string; onClick: (e: FormEvent) => void };
+import { Card, CardProps } from '../card';
+import classNames from 'classnames';
 
 export type CardButtonProps = {
   title: string;
   description: string | ReactNode;
   disabled?: boolean;
   className?: string;
-} & ActionProps;
-
-const CardContent = ({
-  title,
-  description,
-}: {
-  title: string;
-  description: string | ReactNode;
-}) => (
-  <>
-    <div>
-      <div className="p-p--small">{title}</div>
-      {typeof description === 'string' ? (
-        <div className="tc-primary-500 p-p">{description}</div>
-      ) : (
-        description
-      )}
-    </div>
-    <ChevronRightIcon
-      size={16}
-      color={'purple-500'}
-      className={styles.chevronRight}
-    />
-  </>
-);
+  href?: string;
+} & CardProps;
 
 export const CardButton = ({
   title,
   description,
   disabled = false,
-  onClick,
-  href,
   className,
-}: CardButtonProps) => {
-  const component = href ? 'a' : 'button';
-  return (
-    <>
-      {createElement(component, {
-        className: `c-pointer ta-left w100 ${styles.container} ${
-          className ?? ''
-        }
-        `,
-        children: <CardContent title={title} description={description} />,
-        disabled,
-        ...(component === 'a' ? { href } : { onClick }),
-      })}
-    </>
-  );
-};
+  href,
+}: CardButtonProps) => (
+  <Card
+      as={href ? 'a' : 'button'}
+      classNames={{
+        buttonWrapper: classNames(
+          'c-pointer ta-left w100',
+          className,
+          { [styles.containerDisabled]: disabled }
+        ),
+        description: 'tc-primary-500 p-p',
+      }}
+      density='compact'
+      label={title}
+      description={typeof description === 'string' ? description : null}
+      actionIcon={
+        <ChevronRightIcon
+          size={20}
+          color={'purple-500'}
+          className={styles.chevronRight}
+        />
+      }
+      showActionIcon
+      {...href ? { href } : {}}
+    >
+      {typeof description !== 'string' ? description : null}
+  </Card>
+);

package/src/lib/components/cards/cardButton/style.module.scss

@@ -1,37 +1,4 @@
-@use '../../../scss/public/colors' as *;
-
-.container {
-  background-color: white;
-
-  padding: 8px 16px;
-
-  box-shadow: 0px 2px 20px rgba(97, 96, 162, 0.07);
-
-  border-radius: 8px;
-  border: 2px solid white;
-
-  transition: border 0.2s ease-in-out;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  text-decoration: none;
-
-  &:hover {
-    border: 2px solid $ds-primary-300;
-  }
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.25;
-  }
-
-  &:focus {
-    border: 2px solid $ds-primary-500;
-  }
-}
-
-.chevronRight {
-  min-width: 16px;
-}
+.containerDisabled {
+  pointer-events: none;
+  opacity: 0.25;
+}

package/src/lib/components/icon/assets/arrow-right-filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#8E8CEE" stroke="#8E8CEE" stroke-width="2"/>
+<path d="M12 8L15.8232 11.8232C15.9209 11.9209 15.9209 12.0791 15.8232 12.1768L12 16M8 12H16" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/lib/components/icon/icons/ArrowRightFilled.tsx

@@ -0,0 +1,23 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <circle
+      cx={12}
+      cy={12}
+      r={10}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={2}
+    />,
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeWidth={2}
+      d="m12 8 3.823 3.823a.25.25 0 0 1 0 .354L12 16m-4-4h8"
+    />
+  );

package/src/lib/components/icon/icons/index.ts

@@ -6,6 +6,7 @@ export { default as Svg5Icon } from './5';
 export { default as Svg6Icon } from './6';
 export { default as Svg7Icon } from './7';
 export { default as Svg8Icon } from './8';
+export { default as CancerIcon } from './Cancer';
 export { default as ActivityIcon } from './Activity';
 export { default as AdhdIcon } from './Adhd';
 export { default as AdviceRecommendationIcon } from './AdviceRecommendation';
@@ -27,6 +28,7 @@ export { default as ArrowDownIcon } from './ArrowDown';
 export { default as ArrowLeftCircleIcon } from './ArrowLeftCircle';
 export { default as ArrowLeftIcon } from './ArrowLeft';
 export { default as ArrowRightCircleIcon } from './ArrowRightCircle';
+export { default as ArrowRightFilledIcon } from './ArrowRightFilled';
 export { default as ArrowRightIcon } from './ArrowRight';
 export { default as ArrowUpCircleIcon } from './ArrowUpCircle';
 export { default as ArrowUpLeftIcon } from './ArrowUpLeft';
@@ -61,7 +63,6 @@ export { default as CalculatorIcon } from './Calculator';
 export { default as CalendarIcon } from './Calendar';
 export { default as CameraOffIcon } from './CameraOff';
 export { default as CameraIcon } from './Camera';
-export { default as CancerIcon } from './Cancer';
 export { default as CastIcon } from './Cast';
 export { default as CheckCircleIcon } from './CheckCircle';
 export { default as CheckInCircleFilledIcon } from './CheckInCircleFilled';
@@ -238,6 +239,8 @@ export { default as PhoneOutgoingIcon } from './PhoneOutgoing';
 export { default as PhoneIcon } from './Phone';
 export { default as PieChartIcon } from './PieChart';
 export { default as PlaneFilledIcon } from './PlaneFilled';
+export { default as PlaneRepatriationFilledIcon } from './PlaneRepatriationFilled';
+export { default as PlaneRepatriationIcon } from './PlaneRepatriation';
 export { default as PlaneIcon } from './Plane';
 export { default as PlayCircleIcon } from './PlayCircle';
 export { default as PlayIcon } from './Play';

package/src/lib/components/modal/bottomModal/index.tsx

@@ -1,83 +1,23 @@
-import React, { useState, useCallback } from 'react';
-
 import { Props } from '..';
 import styles from './style.module.scss';
-
-import { XIcon } from '../../icon/icons';
-import useOnClose from '../hooks/useOnClose';
 import classNames from 'classnames';
+import { GenericModal } from '../genericModal';
 
-export const BottomModal = ({
-  title,
-  isOpen,
-  children,
-  onClose,
-  className = '',
-  dismissible = true,
-}: Props) => {
-  const [containerXOffset, setContainerXOffset] = useState(0);
-  const {
-    isClosing,
-    handleContainerClick,
-    handleOnClose,
-    handleOnOverlayClick,
-  } = useOnClose(onClose, isOpen, dismissible);
-
-  const containerRef = useCallback((node: HTMLDivElement) => {
-    if (node !== null) {
-      setContainerXOffset(
-        Math.max(
-          window.innerHeight * 0.1,
-          window.innerHeight - node.getBoundingClientRect().height
-        )
-      );
-    }
-  }, []);
-
-  if (!isOpen) {
-    return <></>;
-  }
+const BottomModal = ({ className, ...rest }: Props) => (
+  <GenericModal
+    titleSize='small'
+    classNames={{
+      wrapper: classNames('w100', styles.wrapper),
+      container: ({ isClosing }) => classNames(
+        'bg-white d-flex fd-column w100',
+        className,
+        styles.container, {
+          [styles.containerClose]: isClosing, 
+        }
+      ),
+    }}
+    {...rest}
+  />
+);
 
-  return (
-    <div
-      className={isClosing ? styles['overlay--close'] : styles.overlay}
-      onClick={handleOnOverlayClick}
-    >
-      <div
-        className={styles.wrapper}
-        ref={containerRef}
-        onClick={handleContainerClick}
-        style={{ top: `${containerXOffset}px` }}
-      >
-        <div
-          className={`${
-            isClosing ? styles['container--close'] : styles.container
-          } ${className}`}
-        >
-          <div
-            className={classNames(styles.header, {
-              'jc-between': !!title,
-              'jc-end': !title,
-            })}
-          >
-            <div className={`p-h4 ${styles.title}`}>{title}</div>
-            {dismissible && (
-              <button
-                type="button"
-                className={styles.close}
-                onClick={handleOnClose}
-              >
-                <XIcon
-                  size={24}
-                  color={'grey-700'}
-                  className={`${styles.closeIcon}`}
-                />
-              </button>
-            )}
-          </div>
-          <div className={styles.content}>{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-};
+export { BottomModal };