@hazelcast/ui 1.0.1-next.9 → 1.2.0

package/lib/Button.module.scss

@@ -1,6 +1,18 @@
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
+@mixin buttonColor($color: c.$colorPrimary) {
+  color: $color;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin disabledButtonColor {
+  color: c.$colorTextSecondary;
+  background-color: c.$colorNeutral;
+  border-color: c.$colorNeutral;
+}
+
 .button {
   display: inline-block;
   position: relative;
@@ -8,17 +20,17 @@
   cursor: pointer;
   border: none;
   padding: 0;
-  border-radius: c.$borderRadius;
-  height: c.$inputHeight;
+  border-radius: c.$borderRadiusButtonSmall;
+  height: c.$inputHeightSmall;
   max-width: c.$buttonMaxWidth;
   // for <a> element
   text-decoration: none;
 
-  @include c.typographyButton;
+  @include c.typographyButton('small');
 
   .outline {
     position: absolute;
-    border-radius: c.$borderRadius;
+    border-radius: c.$borderRadiusButtonSmall;
     pointer-events: none;
     top: 50%;
     left: 50%;
@@ -38,17 +50,6 @@
     }
   }
 
-  &.small {
-    height: c.$inputHeightSmall;
-    border-radius: c.$borderRadiusButtonSmall;
-
-    @include c.typographyButton('small');
-
-    .outline {
-      border-radius: c.$borderRadiusButtonSmall;
-    }
-  }
-
   &:focus,
   &.focus {
     // Do not remove outline for high-contrast modes
@@ -86,97 +87,128 @@
     box-sizing: border-box;
   }
 
-  // Kind === primary
-  &.primary {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorPrimary;
+  &.color {
+    &Primary {
+      @include buttonColor(c.$colorPrimary);
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorPrimaryLight;
-    }
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorPrimaryLight);
+      }
 
-    &:active,
-    &.active {
-      background-color: c.$colorPrimaryDark;
-    }
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorPrimaryDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
-  }
 
-  // Kind === secondary
-  &.secondary {
-    color: c.$colorPrimary;
-    background-color: transparent;
-    border: c.$borderWidthButton solid;
-    border-color: c.$colorPrimary;
+    &Secondary {
+      @include buttonColor(c.$colorError);
 
-    .outline {
-      /* Note: We need to take border of 2*2px into account */
-      /* doiuse-disable calc */
-      width: calc(100% + #{c.$grid} * 3);
-      height: calc(100% + #{c.$grid} * 3);
-      /* doiuse-enable calc */
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorErrorLight);
+      }
 
-      &.inset {
-        /* doiuse-disable calc */
-        width: calc(100% + #{c.$grid});
-        height: calc(100% + #{c.$grid});
-        /* doiuse-enable calc */
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorErrorDark);
       }
-    }
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      color: c.$colorPrimaryLight;
-      border-color: c.$colorPrimaryLight;
-    }
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
 
-    &:active,
-    &.active {
-      color: c.$colorPrimaryDark;
-      border-color: c.$colorPrimaryDark;
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      border-color: c.$colorNeutral;
+    &Warning {
+      @include buttonColor(c.$colorWarning);
+
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorWarningLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorWarningDark);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
   }
 
-  // Kind === danger
-  &.danger {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorError;
+  &.variant {
+    &Outlined {
+      background: none;
+      border-style: solid;
+      border-width: c.$borderWidth;
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorErrorLight;
-    }
+      .outline {
+        /* Note: We need to take border of 1px into account */
+        /* doiuse-disable calc */
+        width: calc(100% + #{c.$grid} * 2.5);
+        height: calc(100% + #{c.$grid} * 2.5);
+        /* doiuse-enable calc */
 
-    &:active,
-    &.active {
-      background-color: c.$colorErrorDark;
-    }
+        &.inset {
+          /* doiuse-disable calc */
+          width: calc(100% + #{c.$grid});
+          height: calc(100% + #{c.$grid});
+          /* doiuse-enable calc */
+        }
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
     }
-  }
 
-  // Kind === transparent
-  &.transparent {
-    color: inherit;
-    background-color: transparent;
+    &Text {
+      color: inherit;
+      background: none;
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        color: inherit;
+        background: none;
+      }
+    }
   }
 }

package/lib/Calendar/Calendar.d.ts

@@ -3,7 +3,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 export declare type CalendarSize = 'medium' | 'small';
 export declare type CalendarProps = {
     containerClassName?: string;
-    date: ReactDatePickerProps['selected'];
+    date: Date | null;
     inputLabel: string;
     inputClassName?: string;
     onDateChange: ReactDatePickerProps['onChange'];

package/lib/Calendar/Calendar.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import cn from 'classnames';
+import { createPortal } from 'react-dom';
 import DatePicker from 'react-datepicker';
 import { CalendarInput } from './components/CalendarInput';
 import { CalendarHeader } from './components/CalendarHeader';
 import { CalendarTime } from './components/CalendarTime';
+import { canUseDOM } from '../utils/ssr';
 import styles from './Calendar.module.scss';
 const DATE_FORMAT = 'yyyy-MM-dd';
 const DATE_FORMAT_WITH_TIME = 'yyyy-MM-dd hh:mm a';
-const CalendarPopperContainer = ({ children }) => React.createElement("div", { "data-test": "date-picker-popper-container" }, children);
+const CalendarPopperContainer = ({ children }) => canUseDOM && children
+    ? createPortal(React.createElement("div", { className: styles.popper },
+        React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)), document.body)
+    : null;
 export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', ...props }) => (React.createElement("div", { className: cn(styles.container, {
         [styles.time]: showTimeInput,
     }, containerClassName) },

package/lib/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,0CAAe,8BAA8B,IAAE,QAAQ,CAAO,CAAA;AAapH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,oBACL,KAAK,IACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,IAC5B,CACE,CACP,CAAA"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,SAAS,IAAI,QAAQ;IACnB,CAAC,CAAC,YAAY,CACZ,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,EACJ,QAAQ,CAAC,IAAI,CACd;IACH,CAAC,CAAC,IAAI,CAAA;AAaV,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,oBACL,KAAK,IACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,IAC5B,CACE,CACP,CAAA"}

package/lib/Calendar/Calendar.module.scss

@@ -10,163 +10,171 @@ $inputPadding: c.$grid * 3;
  * Rest of styles
  */
 .container {
-  /*
-  * Internal styles override for those that cannot be
-  * overridden using classNames composition
-  */
+  width: $inputMaxWidth;
+  min-width: $inputMinWidth;
+
   :global .react-datepicker-wrapper {
     width: 100%;
   }
 
-  :global .react-datepicker {
-    :global .react-datepicker__header {
-      margin: 0;
-      padding: 0;
-      background-color: c.$colorNeutralLighter;
-      border: none;
-      border-radius: 0;
+  &.time {
+    min-width: $inputMinWidthWithTime;
+  }
+}
 
-      :global .react-datepicker__day-names {
-        margin-bottom: c.$grid;
+.popper {
+  :global(.hz-date-picker-popper-container) {
+    /*
+  * Internal styles override for those that cannot be
+  * overridden using classNames composition
+  */
+    :global .react-datepicker-popper {
+      z-index: c.$zIndex200;
+    }
 
-        :global .react-datepicker__day-name {
-          width: c.$grid * 8;
-          height: c.$grid * 8;
-          text-align: center;
-          vertical-align: middle;
-          line-height: c.$grid * 8 !important;
-          margin: 0;
-          color: c.$colorText;
+    :global .react-datepicker {
+      :global .react-datepicker__header {
+        margin: 0;
+        padding: 0;
+        background-color: c.$colorNeutralLighter;
+        border: none;
+        border-radius: 0;
+
+        :global .react-datepicker__day-names {
+          margin-bottom: c.$grid;
+
+          :global .react-datepicker__day-name {
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+            color: c.$colorText;
 
-          @include c.typographyBodySmall('bold');
+            @include c.typographyBodySmall('bold');
 
-          &:not(:last-of-type) {
-            margin-right: c.$grid * 2;
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
           }
         }
       }
-    }
-
-    :global .react-datepicker__month {
-      /*
-       * Note: The calendar part is asymmetrical by design
-       * It's padded by 2 extra px from the left
-       */
-      margin: 0 0 0 (c.$grid * 0.5);
-
-      :global .react-datepicker__week {
-        &:not(:last-of-type) {
-          margin-bottom: c.$grid * 2;
-        }
 
+      :global .react-datepicker__month {
         /*
-         * Note:
-         * We need to use :global override here, as 'renderCustomDay' only allows us to override
-         * the child of this element, which does not allow us to touch the styles properly
-         *
-         * Source styles: https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
+         * Note: The calendar part is asymmetrical by design
+         * It's padded by 2 extra px from the left
          */
-        :global .react-datepicker__day {
-          border-radius: c.$grid;
-          width: c.$grid * 8;
-          height: c.$grid * 8;
-          background-color: c.$colorNeutralWhite;
-          color: c.$colorTextSecondary;
-          text-align: center;
-          vertical-align: middle;
-          line-height: c.$grid * 8 !important;
-          margin: 0;
-
-          // Do not remove outline for high-contrast modes
-          // https://stackoverflow.com/a/52616313
-          outline: transparent solid c.$outlineWidth;
-
-          @include c.typographyBodySmall;
-
-          &--today {
-            @include c.typographyBodySmall('bold');
-          }
+        margin: 0 0 0 (c.$grid * 0.5);
 
-          &--in-selecting-range,
-          &--in-range {
-            // TODO: Improvised colour, consult with @Pawel
-            background-color: c.$colorInfoLight;
-            color: c.$colorNeutralWhite;
-          }
-
-          &--selected {
-            background-color: c.$colorPrimaryLight;
-            color: c.$colorNeutralWhite;
-            // Note: Disable default browser outline, force our only on :focus
-
-            @include c.typographyBodySmall('bold');
-          }
-
-          &--disabled {
-            cursor: default;
-            color: c.$colorNeutral;
-          }
-
-          &:focus {
-            @include h.outlineSimple;
+        :global .react-datepicker__week {
+          &:not(:last-of-type) {
+            margin-bottom: c.$grid * 2;
           }
 
-          &:not(:last-of-type) {
-            margin-right: c.$grid * 2;
+          /*
+           * Note:
+           * We need to use :global override here, as 'renderCustomDay' only allows us to override
+           * the child of this element, which does not allow us to touch the styles properly
+           *
+           * Source styles: https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
+           */
+          :global .react-datepicker__day {
+            border-radius: c.$grid;
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            background-color: c.$colorNeutralWhite;
+            color: c.$colorTextSecondary;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+
+            // Do not remove outline for high-contrast modes
+            // https://stackoverflow.com/a/52616313
+            outline: transparent solid c.$outlineWidth;
+
+            @include c.typographyBodySmall;
+
+            &--today {
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--in-selecting-range,
+            &--in-range {
+              // TODO: Improvised colour, consult with @Pawel
+              background-color: c.$colorInfoLight;
+              color: c.$colorNeutralWhite;
+            }
+
+            &--selected {
+              background-color: c.$colorPrimaryLight;
+              color: c.$colorNeutralWhite;
+              // Note: Disable default browser outline, force our only on :focus
+
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--disabled {
+              cursor: default;
+              color: c.$colorNeutral;
+            }
+
+            &:focus {
+              @include h.outlineSimple;
+            }
+
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
           }
         }
       }
-    }
 
-    :global .react-datepicker__input-time-container {
-      margin: 0;
-      padding: 0;
+      :global .react-datepicker__input-time-container {
+        margin: 0;
+        padding: 0;
 
-      :global .react-datepicker-time__caption {
-        display: none;
-      }
+        :global .react-datepicker-time__caption {
+          display: none;
+        }
 
-      :global .react-datepicker-time__input-container {
-        margin: 0 c.$grid 0 c.$grid * 5;
+        :global .react-datepicker-time__input-container {
+          margin: 0 c.$grid 0 c.$grid * 5;
 
-        :global .react-datepicker-time__input {
-          margin: 0;
+          :global .react-datepicker-time__input {
+            margin: 0;
 
-          input {
-            width: auto;
+            input {
+              width: auto;
+            }
           }
         }
       }
     }
-  }
 
-  width: $inputMaxWidth;
-  min-width: $inputMinWidth;
-
-  &.time {
-    min-width: $inputMinWidthWithTime;
-  }
-
-  .calendar {
-    display: flex;
-    flex-direction: row;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    background-color: c.$colorNeutralLighter;
-    padding: $inputPadding;
-    box-sizing: border-box;
-
-    .headerContainer {
+    .calendar {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
-      margin-bottom: c.$separatorWidth;
-
-      .headerMonthAndYear {
-        color: c.$colorTextSecondary;
+      border: c.$borderWidth solid c.$colorNeutralLight;
+      background-color: c.$colorNeutralLighter;
+      padding: $inputPadding;
+      box-sizing: border-box;
+
+      .headerContainer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
+        margin-bottom: c.$separatorWidth;
+
+        .headerMonthAndYear {
+          color: c.$colorTextSecondary;
 
-        @include c.typographyBodySmall('bold');
+          @include c.typographyBodySmall('bold');
+        }
       }
     }
   }

package/lib/Calendar/components/CalendarTime.js

@@ -53,7 +53,7 @@ export const CalendarTimeInternal = ({ date, value, onChange }) => {
     }, [onChange, date]);
     return (React.createElement("div", { "data-test": "calendar-time", className: styles.container },
         React.createElement("div", { "data-test": "calendar-time-header", className: styles.header },
-            React.createElement(TimeField, { ariaLabel: "Time Input", error: timeInputError, className: styles.input, name: "time", value: time.toString(), onChange: handleTimeInputChange })),
+            React.createElement(TimeField, { showAriaLabel: true, label: "Time Input", error: timeInputError, className: styles.input, name: "time", value: time.toString(), onChange: handleTimeInputChange })),
         React.createElement("div", { "data-test": "calendar-time-timePoints", className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP, kind: "transparent", onClick: handleDateClick(tP) }, tP))))));
 };
 export const CalendarTime = (props) => {

package/lib/Calendar/components/CalendarTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"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"}

package/lib/Card.d.ts

@@ -3,6 +3,7 @@ import { DataTestProp } from '@hazelcast/helpers';
 import { IconProps } from './Icon';
 export declare type CardProps = {
     headingIcon?: IconProps['icon'];
+    caption?: ReactNode;
     title?: string;
     headingContent?: ReactNode;
     separator?: boolean;

package/lib/Card.js

@@ -9,11 +9,12 @@ import styles from './Card.module.scss';
  * ### General Info
  * - Card can be rendered with an optional separator and/or icon.
  */
-export const Card = ({ headingIcon, title, headingContent, separator = false, 'data-test': dataTest, children, className, iconClassName, titleClassName, contentClassName, headerClassName, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title }, className) },
+export const Card = ({ headingIcon, title, headingContent, separator = false, 'data-test': dataTest, children, className, iconClassName, titleClassName, contentClassName, headerClassName, caption, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title }, className) },
+    caption && React.createElement("div", { className: styles.caption }, caption),
     title && (React.createElement("div", { "data-test": "card-heading", className: cn(styles.heading, headerClassName) },
         headingIcon && React.createElement(Icon, { "data-test": "card-heading-icon", icon: headingIcon, className: cn(styles.icon, iconClassName), ariaHidden: true }),
-        React.createElement("h3", { "data-test": "card-heading-title", className: cn(styles.title, titleClassName, { [styles.space]: !!headingContent }) }, title),
+        React.createElement("h3", { "data-test": "card-heading-title", className: cn(styles.title, { [styles.space]: !!headingContent }, titleClassName) }, title),
         headingContent)),
     separator && React.createElement("div", { "data-test": "card-separator", className: styles.separator }),
-    React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children)));
+    children && (React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children))));
 //# sourceMappingURL=Card.js.map

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAevC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,EAAE,EAAE,CAAC,CACJ,0CAAgB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC;IAC/G,KAAK,IAAI,CACR,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC/H,yCAAc,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,IACjH,KAAK,CACH;QACJ,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE7E,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACF,CACP,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAgBvC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CAAgB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC;IAC/G,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,KAAK,IAAI,CACR,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC/H,yCAAc,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACjH,KAAK,CACH;QACJ,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE5E,QAAQ,IAAI,CACX,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACP,CACG,CACP,CAAA"}