@popsure/dirty-swan 0.50.0 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/Readme.md +7 -0
  2. package/dist/cjs/index.js +225 -169
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/lib/components/button/index.d.ts +1 -1
  5. package/dist/cjs/lib/components/button/index.stories.d.ts +1 -1
  6. package/dist/cjs/lib/components/{card → cards/card}/index.d.ts +3 -1
  7. package/dist/{esm/lib/components → cjs/lib/components/cards}/card/index.stories.d.ts +9 -2
  8. package/dist/cjs/lib/components/cards/cardButton/index.d.ts +5 -11
  9. package/dist/cjs/lib/components/cards/cardButton/index.stories.d.ts +1 -1
  10. package/dist/cjs/lib/components/icon/icons/ArrowRightFilled.d.ts +4 -0
  11. package/dist/cjs/lib/components/icon/icons/index.d.ts +4 -1
  12. package/dist/cjs/lib/components/input/index.d.ts +1 -1
  13. package/dist/cjs/lib/components/input/input.stories.d.ts +1 -1
  14. package/dist/cjs/lib/components/modal/bottomModal/index.d.ts +2 -1
  15. package/dist/cjs/lib/components/modal/genericModal/index.d.ts +20 -0
  16. package/dist/cjs/lib/components/modal/hooks/useOnClose.d.ts +2 -0
  17. package/dist/cjs/lib/components/modal/index.d.ts +4 -3
  18. package/dist/cjs/lib/components/modal/index.stories.d.ts +2 -0
  19. package/dist/cjs/lib/components/modal/regularModal/index.d.ts +2 -1
  20. package/dist/cjs/lib/index.d.ts +1 -1
  21. package/dist/esm/components/{card → cards/card}/index.js +19 -11
  22. package/dist/esm/components/cards/card/index.js.map +1 -0
  23. package/dist/esm/components/{card → cards/card}/index.stories.js +21 -16
  24. package/dist/esm/components/cards/card/index.stories.js.map +1 -0
  25. package/dist/esm/components/cards/cardButton/index.js +12 -14
  26. package/dist/esm/components/cards/cardButton/index.js.map +1 -1
  27. package/dist/esm/components/cards/cardButton/index.stories.js +4 -4
  28. package/dist/esm/components/cards/cardButton/index.stories.js.map +1 -1
  29. package/dist/esm/components/cards/index.js +2 -1
  30. package/dist/esm/components/cards/index.js.map +1 -1
  31. package/dist/esm/components/cards/infoCard/index.js +2 -1
  32. package/dist/esm/components/cards/infoCard/index.js.map +1 -1
  33. package/dist/esm/components/cards/infoCard/index.stories.js +2 -1
  34. package/dist/esm/components/cards/infoCard/index.stories.js.map +1 -1
  35. package/dist/esm/components/icon/icons/ArrowRightFilled.js +13 -0
  36. package/dist/esm/components/icon/icons/ArrowRightFilled.js.map +1 -0
  37. package/dist/esm/components/icon/icons.stories.js +5 -2
  38. package/dist/esm/components/icon/icons.stories.js.map +1 -1
  39. package/dist/esm/components/icon/index.stories.js +5 -2
  40. package/dist/esm/components/icon/index.stories.js.map +1 -1
  41. package/dist/esm/components/modal/bottomModal/index.js +19 -24
  42. package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
  43. package/dist/esm/components/modal/bottomOrRegularModal/index.js +3 -2
  44. package/dist/esm/components/modal/bottomOrRegularModal/index.js.map +1 -1
  45. package/dist/esm/components/modal/genericModal/index.js +94 -0
  46. package/dist/esm/components/modal/genericModal/index.js.map +1 -0
  47. package/dist/esm/components/modal/index.stories.js +26 -3
  48. package/dist/esm/components/modal/index.stories.js.map +1 -1
  49. package/dist/esm/components/modal/regularModal/index.js +18 -16
  50. package/dist/esm/components/modal/regularModal/index.js.map +1 -1
  51. package/dist/esm/{index-e506c4ca.js → index-73378a46.js} +9 -3
  52. package/dist/esm/{index-e506c4ca.js.map → index-73378a46.js.map} +1 -1
  53. package/dist/esm/index.js +6 -3
  54. package/dist/esm/index.js.map +1 -1
  55. package/dist/esm/lib/components/button/index.d.ts +1 -1
  56. package/dist/esm/lib/components/button/index.stories.d.ts +1 -1
  57. package/dist/esm/lib/components/{card → cards/card}/index.d.ts +3 -1
  58. package/dist/{cjs/lib/components → esm/lib/components/cards}/card/index.stories.d.ts +9 -2
  59. package/dist/esm/lib/components/cards/cardButton/index.d.ts +5 -11
  60. package/dist/esm/lib/components/cards/cardButton/index.stories.d.ts +1 -1
  61. package/dist/esm/lib/components/icon/icons/ArrowRightFilled.d.ts +4 -0
  62. package/dist/esm/lib/components/icon/icons/index.d.ts +4 -1
  63. package/dist/esm/lib/components/input/index.d.ts +1 -1
  64. package/dist/esm/lib/components/input/input.stories.d.ts +1 -1
  65. package/dist/esm/lib/components/modal/bottomModal/index.d.ts +2 -1
  66. package/dist/esm/lib/components/modal/genericModal/index.d.ts +20 -0
  67. package/dist/esm/lib/components/modal/hooks/useOnClose.d.ts +2 -0
  68. package/dist/esm/lib/components/modal/index.d.ts +4 -3
  69. package/dist/esm/lib/components/modal/index.stories.d.ts +2 -0
  70. package/dist/esm/lib/components/modal/regularModal/index.d.ts +2 -1
  71. package/dist/esm/lib/index.d.ts +1 -1
  72. package/package.json +1 -1
  73. package/src/lib/components/{card → cards/card}/index.stories.tsx +12 -5
  74. package/src/lib/components/{card → cards/card}/index.tsx +19 -6
  75. package/src/lib/components/{card → cards/card}/style.module.scss +5 -1
  76. package/src/lib/components/cards/cardButton/index.stories.tsx +11 -15
  77. package/src/lib/components/cards/cardButton/index.tsx +33 -48
  78. package/src/lib/components/cards/cardButton/style.module.scss +4 -37
  79. package/src/lib/components/icon/assets/arrow-right-filled.svg +4 -0
  80. package/src/lib/components/icon/icons/ArrowRightFilled.tsx +23 -0
  81. package/src/lib/components/icon/icons/index.ts +4 -1
  82. package/src/lib/components/modal/bottomModal/index.tsx +18 -78
  83. package/src/lib/components/modal/bottomModal/style.module.scss +11 -71
  84. package/src/lib/components/modal/genericModal/index.tsx +133 -0
  85. package/src/lib/components/modal/genericModal/style.module.scss +71 -0
  86. package/src/lib/components/modal/hooks/useOnClose.ts +27 -5
  87. package/src/lib/components/modal/index.stories.tsx +95 -0
  88. package/src/lib/components/modal/index.ts +4 -2
  89. package/src/lib/components/modal/regularModal/index.tsx +20 -61
  90. package/src/lib/components/modal/regularModal/style.module.scss +6 -74
  91. package/src/lib/index.tsx +1 -1
  92. package/dist/esm/components/card/index.js.map +0 -1
  93. package/dist/esm/components/card/index.stories.js.map +0 -1
  94. package/dist/esm/useOnClose-d818a54f.js +0 -46
  95. package/dist/esm/useOnClose-d818a54f.js.map +0 -1
  96. package/src/lib/components/cards/a.stories.mdx +0 -44
  97. package/src/lib/components/modal/bottomModal/img/close.svg +0 -4
  98. package/src/lib/components/modal/regularModal/img/close.svg +0 -4
@@ -15,6 +15,6 @@ declare const Button: React.ForwardRefExoticComponent<Pick<{
15
15
  rightIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
16
16
  loading?: boolean | undefined;
17
17
  hideLabel?: boolean | undefined;
18
- } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "value" | "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" | "loading" | "variant" | "leftIcon" | "rightIcon"> & React.RefAttributes<HTMLButtonElement>>;
18
+ } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "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" | "loading" | "variant" | "leftIcon" | "rightIcon" | "hideLabel"> & React.RefAttributes<HTMLButtonElement>>;
19
19
  export { Button };
20
20
  export type { ButtonProps, ButtonVariant };
@@ -9,7 +9,7 @@ declare const story: {
9
9
  rightIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
10
10
  loading?: boolean | undefined;
11
11
  hideLabel?: boolean | undefined;
12
- } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "value" | "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" | "loading" | "variant" | "leftIcon" | "rightIcon"> & import("react").RefAttributes<HTMLButtonElement>>;
12
+ } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "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" | "loading" | "variant" | "leftIcon" | "rightIcon" | "hideLabel"> & import("react").RefAttributes<HTMLButtonElement>>;
13
13
  argTypes: {
14
14
  children: {
15
15
  control: {
@@ -3,6 +3,7 @@ declare const cardDefaultAs: "section";
3
3
  declare type CardDefaultAsType = typeof cardDefaultAs;
4
4
  declare type DensityType = 'balanced' | 'compact' | 'spacious';
5
5
  declare type TitleVariantType = 'small' | 'medium' | 'large';
6
+ declare type VerticalAlignmentType = 'top' | 'center' | 'bottom';
6
7
  declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
7
8
  as?: E;
8
9
  children?: ReactNode;
@@ -27,7 +28,8 @@ declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
27
28
  onClick?: () => void;
28
29
  actionIcon?: ReactNode;
29
30
  showActionIcon?: boolean;
31
+ verticalAlignment?: VerticalAlignmentType;
30
32
  };
31
33
  export declare type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<ComponentProps<E>, keyof CardOwnProps<E>>;
32
- declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
34
+ declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, ...rest }: CardProps<E>) => JSX.Element;
33
35
  export { Card };
@@ -2,7 +2,7 @@
2
2
  import { CardProps } from '.';
3
3
  declare const story: {
4
4
  title: string;
5
- component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
5
+ component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, ...rest }: CardProps<E>) => JSX.Element;
6
6
  argTypes: {
7
7
  as: {
8
8
  control: {
@@ -52,6 +52,12 @@ declare const story: {
52
52
  showActionIcon: {
53
53
  description: string;
54
54
  };
55
+ verticalAlignment: {
56
+ description: string;
57
+ control: {
58
+ type: string;
59
+ };
60
+ };
55
61
  };
56
62
  args: {
57
63
  density: string;
@@ -71,10 +77,11 @@ declare const story: {
71
77
  icon: string;
72
78
  };
73
79
  dropShadow: boolean;
80
+ verticalAlignment: string;
74
81
  };
75
82
  };
76
83
  export declare const CardStory: {
77
- ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
84
+ ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, verticalAlignment, }: CardProps): JSX.Element;
78
85
  storyName: string;
79
86
  };
80
87
  export declare const CardAsOtherComponents: () => JSX.Element;
@@ -1,16 +1,10 @@
1
- import { FormEvent, ReactNode } from 'react';
2
- declare type ActionProps = {
3
- href: string;
4
- onClick?: (e: FormEvent) => void;
5
- } | {
6
- href?: string;
7
- onClick: (e: FormEvent) => void;
8
- };
1
+ import { ReactNode } from 'react';
2
+ import { CardProps } from '../card';
9
3
  export declare type CardButtonProps = {
10
4
  title: string;
11
5
  description: string | ReactNode;
12
6
  disabled?: boolean;
13
7
  className?: string;
14
- } & ActionProps;
15
- export declare const CardButton: ({ title, description, disabled, onClick, href, className, }: CardButtonProps) => JSX.Element;
16
- export {};
8
+ href?: string;
9
+ } & CardProps;
10
+ export declare const CardButton: ({ title, description, disabled, className, href, }: CardButtonProps) => JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { CardButtonProps } from '.';
2
2
  declare const story: {
3
3
  title: string;
4
- component: ({ title, description, disabled, onClick, href, className, }: CardButtonProps) => JSX.Element;
4
+ component: ({ title, description, disabled, className, href, }: CardButtonProps) => JSX.Element;
5
5
  argTypes: {
6
6
  title: {
7
7
  defaultValue: string;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type { IconWrapperProps } from '../IconWrapper';
3
+ declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
4
+ export default _default;
@@ -6,6 +6,7 @@ export { default as Svg5Icon } from './5';
6
6
  export { default as Svg6Icon } from './6';
7
7
  export { default as Svg7Icon } from './7';
8
8
  export { default as Svg8Icon } from './8';
9
+ export { default as CancerIcon } from './Cancer';
9
10
  export { default as ActivityIcon } from './Activity';
10
11
  export { default as AdhdIcon } from './Adhd';
11
12
  export { default as AdviceRecommendationIcon } from './AdviceRecommendation';
@@ -27,6 +28,7 @@ export { default as ArrowDownIcon } from './ArrowDown';
27
28
  export { default as ArrowLeftCircleIcon } from './ArrowLeftCircle';
28
29
  export { default as ArrowLeftIcon } from './ArrowLeft';
29
30
  export { default as ArrowRightCircleIcon } from './ArrowRightCircle';
31
+ export { default as ArrowRightFilledIcon } from './ArrowRightFilled';
30
32
  export { default as ArrowRightIcon } from './ArrowRight';
31
33
  export { default as ArrowUpCircleIcon } from './ArrowUpCircle';
32
34
  export { default as ArrowUpLeftIcon } from './ArrowUpLeft';
@@ -61,7 +63,6 @@ export { default as CalculatorIcon } from './Calculator';
61
63
  export { default as CalendarIcon } from './Calendar';
62
64
  export { default as CameraOffIcon } from './CameraOff';
63
65
  export { default as CameraIcon } from './Camera';
64
- export { default as CancerIcon } from './Cancer';
65
66
  export { default as CastIcon } from './Cast';
66
67
  export { default as CheckCircleIcon } from './CheckCircle';
67
68
  export { default as CheckInCircleFilledIcon } from './CheckInCircleFilled';
@@ -238,6 +239,8 @@ export { default as PhoneOutgoingIcon } from './PhoneOutgoing';
238
239
  export { default as PhoneIcon } from './Phone';
239
240
  export { default as PieChartIcon } from './PieChart';
240
241
  export { default as PlaneFilledIcon } from './PlaneFilled';
242
+ export { default as PlaneRepatriationFilledIcon } from './PlaneRepatriationFilled';
243
+ export { default as PlaneRepatriationIcon } from './PlaneRepatriation';
241
244
  export { default as PlaneIcon } from './Plane';
242
245
  export { default as PlayCircleIcon } from './PlayCircle';
243
246
  export { default as PlayIcon } from './Play';
@@ -14,4 +14,4 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
14
14
  id?: string | undefined;
15
15
  hideLabel?: boolean | undefined;
16
16
  labelInsideInput?: boolean | undefined;
17
- }, "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"> & React.RefAttributes<HTMLInputElement>>;
17
+ }, "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"> & React.RefAttributes<HTMLInputElement>>;
@@ -9,7 +9,7 @@ declare const story: {
9
9
  id?: string | undefined;
10
10
  hideLabel?: boolean | undefined;
11
11
  labelInsideInput?: boolean | undefined;
12
- }, "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>>;
12
+ }, "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>>;
13
13
  argTypes: {
14
14
  value: {
15
15
  defaultValue: string;
@@ -1,2 +1,3 @@
1
1
  import { Props } from '..';
2
- export declare const BottomModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
2
+ declare const BottomModal: ({ className, ...rest }: Props) => JSX.Element;
3
+ export { BottomModal };
@@ -0,0 +1,20 @@
1
+ import { Props } from '..';
2
+ interface GenericModalProps extends Props {
3
+ classNames?: {
4
+ wrapper?: string | (({ isClosing }: {
5
+ isClosing: boolean;
6
+ }) => string);
7
+ container?: string | (({ isClosing }: {
8
+ isClosing: boolean;
9
+ }) => string);
10
+ overlay?: string;
11
+ header?: string;
12
+ closeButton?: string;
13
+ title?: string;
14
+ body?: string;
15
+ footer?: string;
16
+ };
17
+ titleSize?: 'small' | 'default';
18
+ }
19
+ export declare const GenericModal: ({ title, isOpen, children, onClose, classNames, dismissible, footer, titleSize, }: GenericModalProps) => JSX.Element | null;
20
+ export {};
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  interface OnCloseReturn {
3
3
  isClosing: boolean;
4
+ isVisible: boolean;
5
+ handleOnCloseAnimationEnded: () => void;
4
6
  handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
5
7
  handleOnClose: () => void;
6
8
  handleOnOverlayClick: () => void;
@@ -1,13 +1,14 @@
1
- /// <reference types="react" />
2
1
  import { BottomModal } from './bottomModal';
3
2
  import { RegularModal } from './regularModal';
4
3
  import { BottomOrRegularModal } from './bottomOrRegularModal';
4
+ import { ReactNode } from 'react';
5
5
  export interface Props {
6
- title?: string;
6
+ title?: ReactNode;
7
7
  isOpen: boolean;
8
- children: React.ReactNode;
8
+ children: ReactNode;
9
9
  onClose: () => void;
10
10
  className?: string;
11
11
  dismissible?: boolean;
12
+ footer?: ReactNode;
12
13
  }
13
14
  export { BottomModal, RegularModal, BottomOrRegularModal };
@@ -59,4 +59,6 @@ export declare const BottomModalStory: {
59
59
  storyName: string;
60
60
  };
61
61
  export declare const NonDismissibleModal: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
62
+ export declare const ModalWithFooter: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
63
+ export declare const ModalWithFooterAndScroll: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
62
64
  export default story;
@@ -1,2 +1,3 @@
1
1
  import { Props } from '..';
2
- export declare const RegularModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
2
+ declare const RegularModal: ({ className, ...rest }: Props) => JSX.Element;
3
+ export { RegularModal };
@@ -12,7 +12,7 @@ import { Checkbox } from './components/input/checkbox';
12
12
  import { Radio } from './components/input/radio';
13
13
  import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
14
14
  import { InfoCard, CardButton } from './components/cards';
15
- import { Card, CardProps } from './components/card';
15
+ import { Card, CardProps } from './components/cards/card';
16
16
  import { Button } from './components/button';
17
17
  import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
18
18
  import Chip from './components/chip';
@@ -1,19 +1,19 @@
1
- import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
1
+ import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import { c as classNames } from '../../index-6ea95111.js';
4
- import ChevronRightIcon from '../icon/icons/ChevronRight.js';
5
- import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
3
+ import { c as classNames } from '../../../index-6ea95111.js';
4
+ import ChevronRightIcon from '../../icon/icons/ChevronRight.js';
5
+ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
6
6
  import 'react';
7
- import '../icon/IconWrapper/IconWrapper.js';
7
+ import '../../icon/IconWrapper/IconWrapper.js';
8
8
 
9
- var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n}\n.style-module_button__KWY7b:hover {\n outline: 1px solid #8e8cee;\n color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n outline: 2px solid #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
10
- var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N6B2P","iconbalanced":"style-module_iconbalanced__3JdKC","iconspacious":"style-module_iconspacious__36ovv","actionIcon":"style-module_actionIcon__2klnb","actionIconbalanced":"style-module_actionIconbalanced__1duYl","actionIconspacious":"style-module_actionIconspacious__1sjsd"};
9
+ var css_248z = ".style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n}\n.style-module_button__P-UIa:hover {\n outline: 1px solid #8e8cee;\n color: #8e8cee;\n}\n.style-module_button__P-UIa:focus-visible {\n outline: 2px solid #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__15X1c {\n margin-right: 12px;\n}\n.style-module_iconbalanced__Zb-hZ {\n margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n color: #696970;\n}";
10
+ var styles = {"button":"style-module_button__P-UIa","icon":"style-module_icon__15X1c","iconbalanced":"style-module_iconbalanced__Zb-hZ","iconspacious":"style-module_iconspacious__3Ly0X","actionIcon":"style-module_actionIcon__3pnwR","actionIconbalanced":"style-module_actionIconbalanced__19jnn","actionIconspacious":"style-module_actionIconspacious__2LJN4","description":"style-module_description__ksrnP"};
11
11
  styleInject(css_248z);
12
12
 
13
13
  var cardDefaultAs = 'section';
14
14
  var Card = function (_a) {
15
15
  var _b;
16
- var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _c = _a.density, density = _c === void 0 ? 'balanced' : _c, description = _a.description, _d = _a.descriptionVariant, descriptionVariant = _d === void 0 ? 'large' : _d, _e = _a.dropShadow, dropShadow = _e === void 0 ? true : _e, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _f = _a.titleVariant, titleVariant = _f === void 0 ? 'large' : _f, showActionIcon = _a.showActionIcon, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon"]);
16
+ var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _c = _a.density, density = _c === void 0 ? 'balanced' : _c, description = _a.description, _d = _a.descriptionVariant, descriptionVariant = _d === void 0 ? 'large' : _d, _e = _a.dropShadow, dropShadow = _e === void 0 ? true : _e, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _f = _a.titleVariant, titleVariant = _f === void 0 ? 'large' : _f, showActionIcon = _a.showActionIcon, _g = _a.verticalAlignment, verticalAlignment = _g === void 0 ? 'center' : _g, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment"]);
17
17
  var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
18
18
  var propsWithActionIcon = onClick || (rest === null || rest === void 0 ? void 0 : rest.href) || rest.to;
19
19
  var cardDefaultTag = onClick ? 'button' : cardDefaultAs;
@@ -25,18 +25,26 @@ var Card = function (_a) {
25
25
  _b)) }, onClick && {
26
26
  onClick: onClick,
27
27
  type: "button"
28
- }, rest, { children: jsxs("div", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
28
+ }, rest, { children: jsxs("div", __assign({ className: classNames('d-flex fd-column br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
29
29
  compact: 'p16',
30
30
  balanced: 'p24',
31
31
  spacious: 'p32',
32
- }[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
32
+ }[density], {
33
+ top: 'jc-start',
34
+ center: 'jc-center',
35
+ bottom: 'jc-end',
36
+ }[verticalAlignment], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon, {
37
+ top: 'ai-start',
38
+ center: 'ai-center',
39
+ bottom: 'ai-end',
40
+ }[verticalAlignment]) }, { children: icon }), void 0)),
33
41
  jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
34
42
  title && (jsx("h2", __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
35
43
  large: 'p-h3',
36
44
  medium: 'p-h4',
37
45
  small: 'p-p',
38
46
  }[titleVariant]) }, { children: title }), void 0)),
39
- description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
47
+ description && (jsx("div", __assign({ className: classNames(styles.description, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
40
48
  (showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
41
49
  children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0) }), void 0));
42
50
  };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'balanced' | 'compact' | 'spacious';\ntype TitleVariantType = 'small' | 'medium' | 'large';\ntype VerticalAlignmentType = 'top' | 'center' | 'bottom';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n as?: E;\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: DensityType;\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: TitleVariantType;\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n showActionIcon?: boolean;\n verticalAlignment?: VerticalAlignmentType;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n as,\n children,\n classNames,\n density = 'balanced',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n showActionIcon,\n verticalAlignment = 'center',\n ...rest\n}: CardProps<E>) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n const propsWithActionIcon = onClick || rest?.href || rest.to; \n const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n const Tag = as || cardDefaultTag;\n \n return (\n <Tag\n className={classNamesUtil(\n classNames?.buttonWrapper,\n ' d-flex w100 br8 ai-stretch',\n {\n 'c-pointer': propsWithActionIcon,\n [styles.button]: propsWithActionIcon\n },\n )}\n {...onClick && { \n onClick, \n type: \"button\"\n }}\n {...rest}\n >\n <div\n className={classNamesUtil(\n 'd-flex fd-column br8 bg-white w100 ta-left',\n { 'bs-sm': dropShadow },\n {\n compact: 'p16',\n balanced: 'p24',\n spacious: 'p32',\n }[density as DensityType],\n {\n top: 'jc-start',\n center: 'jc-center',\n bottom: 'jc-end',\n }[verticalAlignment as VerticalAlignmentType],\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex tc-primary-500`,\n styles.icon,\n styles[`icon${density}`],\n classNames?.icon, \n {\n top: 'ai-start',\n center: 'ai-center',\n bottom: 'ai-end',\n }[verticalAlignment as VerticalAlignmentType],\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n {label && (\n <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h3>\n )}\n\n {title && (\n <h2\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant as TitleVariantType]\n )}\n >\n {title}\n </h2>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n styles.description,\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p',\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </div>\n </Tag>\n );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
@@ -1,22 +1,22 @@
1
- import { _ as __assign } from '../../tslib.es6-5bc94358.js';
1
+ import { _ as __assign } from '../../../tslib.es6-5bc94358.js';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { Card } from './index.js';
4
- import { i as illustrations } from '../../index-1693701e.js';
5
- import { Button } from '../button/index.js';
6
- import { Badge } from '../badge/index.js';
7
- import CheckIcon from '../icon/icons/Check.js';
8
- import Info from '../icon/icons/Info.js';
9
- import MehIcon from '../icon/icons/Meh.js';
10
- import PlusCircleIcon from '../icon/icons/PlusCircle.js';
11
- import XIcon from '../icon/icons/X.js';
12
- import '../../index-6ea95111.js';
13
- import '../icon/icons/ChevronRight.js';
4
+ import { i as illustrations } from '../../../index-1693701e.js';
5
+ import { Button } from '../../button/index.js';
6
+ import { Badge } from '../../badge/index.js';
7
+ import CheckIcon from '../../icon/icons/Check.js';
8
+ import Info from '../../icon/icons/Info.js';
9
+ import MehIcon from '../../icon/icons/Meh.js';
10
+ import PlusCircleIcon from '../../icon/icons/PlusCircle.js';
11
+ import XIcon from '../../icon/icons/X.js';
12
+ import '../../../index-6ea95111.js';
13
+ import '../../icon/icons/ChevronRight.js';
14
14
  import 'react';
15
- import '../icon/IconWrapper/IconWrapper.js';
16
- import '../../style-inject.es-1f59c1d0.js';
15
+ import '../../icon/IconWrapper/IconWrapper.js';
16
+ import '../../../style-inject.es-1f59c1d0.js';
17
17
 
18
18
  var story = {
19
- title: 'JSX/Card',
19
+ title: 'JSX/Cards/Card',
20
20
  component: Card,
21
21
  argTypes: {
22
22
  as: {
@@ -61,6 +61,10 @@ var story = {
61
61
  showActionIcon: {
62
62
  description: 'Property that always displays action icon even if no onClick is set.',
63
63
  },
64
+ verticalAlignment: {
65
+ description: 'Vertical alignment of the card content',
66
+ control: { type: 'select' },
67
+ },
64
68
  },
65
69
  args: {
66
70
  density: 'balanced',
@@ -80,11 +84,12 @@ var story = {
80
84
  icon: ''
81
85
  },
82
86
  dropShadow: true,
87
+ verticalAlignment: 'center',
83
88
  }
84
89
  };
85
90
  var CardStory = function (_a) {
86
- var as = _a.as, actionIcon = _a.actionIcon, showActionIcon = _a.showActionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant;
87
- return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ as: as, classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon }, { children: children }), void 0) }), void 0));
91
+ var as = _a.as, actionIcon = _a.actionIcon, showActionIcon = _a.showActionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant, verticalAlignment = _a.verticalAlignment;
92
+ return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ as: as, classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon, verticalAlignment: verticalAlignment }, { children: children }), void 0) }), void 0));
88
93
  };
89
94
  CardStory.storyName = "Card";
90
95
  var CardAsOtherComponents = function () { return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx("h3", __assign({ className: 'p-h3' }, { children: "As an anchor:" }), void 0),
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/Card',\n component: Card,\n argTypes: {\n as: {\n control: { type: 'text' },\n description: 'Allow wrapper element type to be custom defined'\n },\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: { type: 'text' },\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: { type: 'text' },\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n verticalAlignment: {\n description: 'Vertical alignment of the card content',\n control: { type: 'select' },\n },\n },\n args: {\n density: 'balanced',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n verticalAlignment: 'center',\n }\n};\n\nexport const CardStory = ({ \n as,\n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n verticalAlignment,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='compact'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='compact'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n classNames={{ \n wrapper: 'bg-grey-700',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n onClick={() => {}}\n variant='filledGray'\n >\n Full coverage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}