@hazelcast/ui 4.0.1-canary.9 → 4.0.2

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAA+B,MAAM,kBAAkB,CAAA;AAG9D,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,kBAAkB,EAAmB,MAAM,oBAAoB,CAAA;AAExE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAmBH,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,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,eACE,QAAQ,EACnB,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAC,aAAa,iBAAY,GAAG,QAAQ,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjI,eAAe,EAAE,oBAAC,YAAY,iBAAY,GAAG,QAAQ,OAAO,GAAI,EAChE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAc,OAAK,KAAK,GAAI,EACnE,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAA+B,MAAM,kBAAkB,CAAA;AAG9D,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,kBAAkB,EAAmB,MAAM,oBAAoB,CAAA;AAExE,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAE1C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAgBH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,eACE,QAAQ,EACnB,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAC,aAAa,iBAAY,GAAG,QAAQ,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,GAAI,EAC5G,eAAe,EAAE,oBAAC,YAAY,iBAAY,GAAG,QAAQ,OAAO,GAAI,EAChE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAc,OAAK,KAAK,GAAI,EACnE,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Calendar/Calendar.module.css

@@ -0,0 +1,321 @@
+.container {
+  width: 300px;
+  min-width: 118px;
+
+  &.time {
+    min-width: 183px;
+  }
+}
+
+.container :global .react-datepicker-wrapper {
+  width: 100%;
+}
+
+/*
+ * Internal styles override for those that cannot be
+ * overridden using classNames composition
+ */
+
+.popper :global(.hz-date-picker-popper-container) :global .react-datepicker-popper {
+  z-index: var(--hive-z-index-200);
+}
+
+.popper :global(.hz-date-picker-popper-container) :global .react-datepicker {
+  padding: calc(var(--hive-grid) * 3);
+}
+
+.popper :global(.hz-date-picker-popper-container) :global .react-datepicker :global .react-datepicker__header {
+  margin: 0;
+  padding: 0;
+  background-color: var(--hive-color-neutral-lighter);
+  border: none;
+  border-radius: 0;
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__header
+  :global
+  .react-datepicker__day-names {
+  margin-bottom: var(--hive-grid);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__header
+  :global
+  .react-datepicker__day-names
+  :global
+  .react-datepicker__day-name {
+  width: calc(var(--hive-grid) * 8);
+  height: calc(var(--hive-grid) * 8);
+  text-align: center;
+  vertical-align: middle;
+  line-height: calc(var(--hive-grid) * 8) !important;
+  margin: 0;
+  color: var(--hive-color-text);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-bold);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__header
+  :global
+  .react-datepicker__day-names
+  :global
+  .react-datepicker__day-name:not(:last-of-type) {
+  margin-right: calc(var(--hive-grid) * 2);
+}
+
+/*
+ * Note: The calendar part is asymmetrical by design
+ * It's padded by 2 extra px from the left
+ */
+.popper :global(.hz-date-picker-popper-container) :global .react-datepicker :global .react-datepicker__month {
+  margin: 0 0 0 calc(var(--hive-grid) * 0.5);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week:not(:last-of-type) {
+  margin-bottom: calc(var(--hive-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
+ */
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day {
+  border-radius: var(--hive-grid);
+  width: calc(var(--hive-grid) * 8);
+  height: calc(var(--hive-grid) * 8);
+  background-color: var(--hive-color-neutral-white);
+  color: var(--hive-color-text-secondary);
+  text-align: center;
+  vertical-align: middle;
+  line-height: calc(var(--hive-grid) * 8) !important;
+  margin: 0;
+
+  /* Do not remove outline for high-contrast modes */
+  /* https://stackoverflow.com/a/52616313 */
+  outline: transparent solid var(--hive-outline-width);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day--today {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-bold);
+}
+
+/* TODO: Improvised colour, consult with @Pawel */
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day--in-selecting-range,
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day--in-range {
+  background-color: var(--hive-color-info-light);
+  color: var(--hive-color-neutral-white);
+}
+
+/* Note: Disable default browser outline, force our only on :focus */
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day--selected {
+  background-color: var(--hive-color-primary-light);
+  color: var(--hive-color-neutral-white);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-bold);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day--disabled {
+  cursor: default;
+  color: var(--hive-color-neutral);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day:focus-visible {
+  box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__month
+  :global
+  .react-datepicker__week
+  :global
+  .react-datepicker__day:not(:last-of-type) {
+  margin-right: calc(var(--hive-grid) * 2);
+}
+
+.popper :global(.hz-date-picker-popper-container) :global .react-datepicker :global .react-datepicker__input-time-container {
+  margin: 0;
+  padding: 0;
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__input-time-container
+  :global
+  .react-datepicker-time__caption {
+  display: none;
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__input-time-container
+  :global
+  .react-datepicker-time__input-container {
+  margin: 0 var(--hive-grid) 0 calc(var(--hive-grid) * 5);
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__input-time-container
+  :global
+  .react-datepicker-time__input-container
+  :global
+  .react-datepicker-time__input {
+  margin: 0;
+}
+
+.popper
+  :global(.hz-date-picker-popper-container)
+  :global
+  .react-datepicker
+  :global
+  .react-datepicker__input-time-container
+  :global
+  .react-datepicker-time__input-container
+  :global
+  .react-datepicker-time__input
+  input {
+  width: auto;
+}
+
+.popper :global(.hz-date-picker-popper-container) .calendar {
+  display: flex;
+  flex-direction: row;
+  border: var(--hive-border-width) solid var(--hive-color-neutral-light);
+  background-color: var(--hive-color-neutral-lighter);
+  box-sizing: border-box;
+}
+
+.popper :global(.hz-date-picker-popper-container) .calendar .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: var(--hive-separator-width);
+}
+
+.popper :global(.hz-date-picker-popper-container) .calendar .headerContainer .headerMonthAndYear {
+  color: var(--hive-color-text-secondary);
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-bold);
+}

package/lib/components/Calendar/CalendarRange.js

@@ -3,11 +3,11 @@ import { ArrowRight } from 'react-feather';
 import cn from 'classnames';
 import { Icon } from '../Icon';
 import { Calendar } from './Calendar';
-import styles from './CalendarRange.module.scss';
-export const CalendarRange = ({ startDate, startInputLabel = 'From', startOpen, onStartDateChange, endDate, endInputLabel = 'To', endOpen, onEndDateChange, size, variant = 'horizontal', ...rest }) => {
+import styles from './CalendarRange.module.css';
+export const CalendarRange = ({ startDate, startInputLabel = 'From', startOpen, onStartDateChange, endDate, endInputLabel = 'To', endOpen, onEndDateChange, variant = 'horizontal', ...rest }) => {
     return (React.createElement("div", { className: cn(styles.container, { [styles.vertical]: variant === 'vertical' }) },
-        React.createElement(Calendar, { "data-test": "calendar-range-start", date: startDate, onDateChange: onStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, inputLabel: startInputLabel, open: startOpen, size: size, ...rest }),
-        variant === 'horizontal' && (React.createElement(Icon, { "data-test": "calendar-range-icon", className: cn(styles.arrowRight, { [styles.small]: size === 'small' }), icon: ArrowRight, ariaLabel: "Arrow Right" })),
-        React.createElement(Calendar, { "data-test": "calendar-range-end", date: endDate, onDateChange: onEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, inputLabel: endInputLabel, open: endOpen, size: size, ...rest })));
+        React.createElement(Calendar, { "data-test": "calendar-range-start", date: startDate, onDateChange: onStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, inputLabel: startInputLabel, open: startOpen, ...rest }),
+        variant === 'horizontal' && (React.createElement(Icon, { "data-test": "calendar-range-icon", className: cn(styles.arrowRight, styles.small), icon: ArrowRight, ariaLabel: "Arrow Right" })),
+        React.createElement(Calendar, { "data-test": "calendar-range-end", date: endDate, onDateChange: onEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, inputLabel: endInputLabel, open: endOpen, ...rest })));
 };
 //# sourceMappingURL=CalendarRange.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarRange.js","sourceRoot":"","sources":["../../../src/components/Calendar/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAehD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,SAAS,EACT,eAAe,GAAG,MAAM,EACxB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,OAAO,EACP,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC;QACjF,oBAAC,QAAQ,iBACG,sBAAsB,EAChC,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,iBAAiB,EAC/B,YAAY,QACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,KACN,IAAI,GACR;QACD,OAAO,KAAK,YAAY,IAAI,CAC3B,oBAAC,IAAI,iBACO,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,CAAC,EACtE,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,aAAa,GACvB,CACH;QACD,oBAAC,QAAQ,iBACG,oBAAoB,EAC9B,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,eAAe,EAC7B,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,aAAa,EACzB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,IAAI,KACN,IAAI,GACR,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CalendarRange.js","sourceRoot":"","sources":["../../../src/components/Calendar/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAe/C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,SAAS,EACT,eAAe,GAAG,MAAM,EACxB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,OAAO,EACP,eAAe,EACf,OAAO,GAAG,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC;QACjF,oBAAC,QAAQ,iBACG,sBAAsB,EAChC,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,iBAAiB,EAC/B,YAAY,QACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,KACX,IAAI,GACR;QACD,OAAO,KAAK,YAAY,IAAI,CAC3B,oBAAC,IAAI,iBAAW,qBAAqB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAC,aAAa,GAAG,CACnI;QACD,oBAAC,QAAQ,iBACG,oBAAoB,EAC9B,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,eAAe,EAC7B,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,aAAa,EACzB,IAAI,EAAE,OAAO,KACT,IAAI,GACR,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Calendar/CalendarRange.module.css

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.vertical {
+    flex-direction: column;
+    gap: calc(var(--hive-grid) * 4);
+  }
+
+  .arrowRight {
+    color: var(--hive-color-neutral-light);
+    margin: 0 calc(var(--hive-grid) * 2) calc(var(--hive-grid) * 2);
+
+    &.small {
+      margin-bottom: calc(var(--hive-grid) * 0.75);
+    }
+  }
+}

package/lib/components/Calendar/components/CalendarHeader.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { ChevronLeft, ChevronRight } from 'react-feather';
 import { format } from 'date-fns';
 import { IconButton } from '../../IconButton';
-import styles from '../Calendar.module.scss';
-import styleConsts from '../../../../styles/constants/export.module.scss';
+import styles from '../Calendar.module.css';
+import { styleConstants } from '../../../utils/styleConstants';
 export const CalendarHeader = ({ date, decreaseMonth, increaseMonth }) => {
     return (React.createElement("div", { "data-test": "date-picker-header", className: styles.headerContainer },
-        React.createElement(IconButton, { "data-test": "date-picker-header-icon-previous", icon: ChevronLeft, ariaLabel: "Previous month", iconColor: styleConsts.colorPrimary, onClick: decreaseMonth }),
+        React.createElement(IconButton, { "data-test": "date-picker-header-icon-previous", icon: ChevronLeft, ariaLabel: "Previous month", iconColor: styleConstants.colorPrimary, onClick: decreaseMonth }),
         React.createElement("div", { className: styles.headerMonthAndYear }, format(date, 'MMMM y')),
-        React.createElement(IconButton, { "data-test": "date-picker-header-icon-next", icon: ChevronRight, ariaLabel: "Next month", iconColor: styleConsts.colorPrimary, onClick: increaseMonth })));
+        React.createElement(IconButton, { "data-test": "date-picker-header-icon-next", icon: ChevronRight, ariaLabel: "Next month", iconColor: styleConstants.colorPrimary, onClick: increaseMonth })));
 };
 //# sourceMappingURL=CalendarHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,WAAW,MAAM,iDAAiD,CAAA;AAezE,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,EAAE;IAChG,OAAO,CACL,0CAAe,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe;QACnE,oBAAC,UAAU,iBACC,kCAAkC,EAC5C,IAAI,EAAE,WAAW,EACjB,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,WAAW,CAAC,YAAY,EACnC,OAAO,EAAE,aAAa,GACtB;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,IAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAO;QACzE,oBAAC,UAAU,iBACC,8BAA8B,EACxC,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,WAAW,CAAC,YAAY,EACnC,OAAO,EAAE,aAAa,GACtB,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CalendarHeader.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAe9D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,EAAE;IAChG,OAAO,CACL,0CAAe,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe;QACnE,oBAAC,UAAU,iBACC,kCAAkC,EAC5C,IAAI,EAAE,WAAW,EACjB,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,cAAc,CAAC,YAAY,EACtC,OAAO,EAAE,aAAa,GACtB;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,IAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAO;QACzE,oBAAC,UAAU,iBACC,8BAA8B,EACxC,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,cAAc,CAAC,YAAY,EACtC,OAAO,EAAE,aAAa,GACtB,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Calendar/components/CalendarInput.d.ts

@@ -1,6 +1,5 @@
 import React, { FC, ChangeEvent, InputHTMLAttributes } from 'react';
 import { DataTestProp } from '../../../helpers/types';
-import { CalendarSize } from '../Calendar';
 export type CalendarInputInternalProps = {
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 } & CalendarInputExtraProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Required<DataTestProp>;
@@ -9,7 +8,6 @@ export declare const CalendarInputInternal: React.ForwardRefExoticComponent<{
 } & CalendarInputExtraProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & Required<DataTestProp> & React.RefAttributes<HTMLInputElement>>;
 export type CalendarInputExtraProps = {
     label?: string;
-    textFieldSize?: CalendarSize;
     className?: string;
 };
 export type CalendarInputProps = unknown & CalendarInputExtraProps;

package/lib/components/Calendar/components/CalendarInput.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Calendar } from 'react-feather';
 import { TextField } from '../../TextField';
-export const CalendarInputInternal = forwardRef(({ className, value, onChange, label, textFieldSize, 'data-test': dataTest, ...props }, ref) => (React.createElement(TextField, { ...props, mRef: ref, size: textFieldSize, "data-test": dataTest, value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" })));
+export const CalendarInputInternal = forwardRef(({ className, value, onChange, label, 'data-test': dataTest, ...props }, ref) => (React.createElement(TextField, { ...props, mRef: ref, "data-test": dataTest, value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" })));
 CalendarInputInternal.displayName = 'CalendarInputInternal';
 export const CalendarInput = forwardRef((props, ref) => {
     // Note: Cast the "unknown" props to the actual type

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAS3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9F,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,aAAa,eACR,QAAQ,EACnB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,GACtC,CACH,CACF,CAAA;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAgB3D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnH,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAC5D,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
+{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/E,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,GAAG,eACE,QAAQ,EACnB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,GACtC,CACH,CACF,CAAA;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAe3D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnH,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAC5D,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}

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

@@ -4,7 +4,7 @@ import { Button } from '../../Button';
 import { timePoints } from '../helpers/consts';
 import { TimeField } from '../../TimeField';
 import { useRefValue } from '../../../hooks';
-import styles from './CalendarTime.module.scss';
+import styles from './CalendarTime.module.css';
 const DATE_FORMAT = 'HH:mm';
 export const CalendarTimeInternal = ({ date, value, onChange, 'data-test': dataTest = 'calendar-time' }) => {
     const [time, setTime] = useState(value);
@@ -58,7 +58,7 @@ export const CalendarTimeInternal = ({ date, value, onChange, 'data-test': dataT
     }, [onChange, getValue, date]);
     return (React.createElement("div", { "data-test": dataTest, className: styles.container },
         React.createElement("div", { "data-test": `${dataTest}-header`, className: styles.header },
-            React.createElement(TimeField, { showAriaLabel: true, size: "small", label: "Time Input", error: timeInputError, name: "time", value: time.toString(), "data-test": `${dataTest}-input`, inputClassName: styles.timeInput, onChange: handleTimeInputChange })),
+            React.createElement(TimeField, { showAriaLabel: true, label: "Time Input", error: timeInputError, name: "time", value: time.toString(), "data-test": `${dataTest}-input`, inputClassName: styles.timeInput, onChange: handleTimeInputChange })),
         React.createElement("div", { "data-test": `${dataTest}-timePoints`, className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP, variant: "ghost", color: "secondary", onClick: handleDateClick(tP) }, tP))))));
 };
 export const CalendarTime = (props) => {

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

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

package/lib/components/Calendar/components/{CalendarTime.module.scss → CalendarTime.module.css}

@@ -1,6 +1,3 @@
-@use '../../../../styles/constants' as c;
-@use '../../../../styles/helpers' as h;
-
 /*
  * Note:
  * What's the motivation for statically settings the height of this particular element?
@@ -14,15 +11,6 @@
  * and would cause overflow in case of option 1.
  * Therefore only option 2 is left.
  */
-$calendarTimeHeight: 227px;
-
-// Note: Add padding in order to preserve button's outline
-$outlinePreservingPadding: c.$grid * 1.25;
-
-// Note: Button width is 98px with border-box applied
-/* doiuse-disable calc */
-$buttonWidth: calc(98px - 2 * #{$outlinePreservingPadding});
-/* doiuse-enable calc */
 
 .container {
   display: flex;
@@ -34,30 +22,37 @@ $buttonWidth: calc(98px - 2 * #{$outlinePreservingPadding});
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: c.$grid * 2;
+    margin-bottom: calc(var(--hive-grid) * 2);
   }
 
   .timePoints {
     display: flex;
     flex-direction: column;
     overflow-y: scroll;
-    padding: $outlinePreservingPadding;
-    height: $calendarTimeHeight;
-    width: $buttonWidth;
+    /* Note: Add padding in order to preserve button's outline */
+    padding: calc(var(--hive-grid) * 1.25);
+    height: 227px;
+    /* Note: Button width is 98px with border-box applied */
+    /* doiuse-disable calc */
+    width: calc(98px - var(--hive-grid) * 2.5);
+    /* doiuse-enable calc */
     box-sizing: border-box;
 
     > .timePoint {
-      color: c.$colorTextSubdued;
+      color: var(--hive-color-text-subdued);
       /*
        * Note: Using min-height instead of height to workaround IE11 flex-bug
        * where flex text content on overflow: scroll disappears
        */
-      min-height: c.$grid * 5;
-
-      @include c.typographyBodySmall;
+      min-height: calc(var(--hive-grid) * 5);
+      font-family: var(--hive-font-family-text);
+      font-size: var(--hive-font-size-body-small);
+      letter-spacing: var(--hive-letter-spacing-body-small);
+      line-height: var(--hive-line-height-body-small);
+      font-weight: var(--hive-font-weight-text-regular);
 
       &:not(:last-of-type) {
-        margin-bottom: c.$grid;
+        margin-bottom: var(--hive-grid);
       }
 
       > .timePointBody {

package/lib/components/Card.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { Icon } from './Icon';
-import styles from './Card.module.scss';
+import styles from './Card.module.css';
 const Title = ({ as: Tag, ...props }) => React.createElement(Tag, { "data-test": "card-heading-title", ...props });
 /**
  * ### Purpose

package/lib/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAuBvC,MAAM,KAAK,GAAmB,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,GAAG,iBAAW,oBAAoB,KAAK,KAAK,GAAI,CAAA;AAE1G;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,EAAE,SAAS,CAAC;IAEhH,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,CAAC,KAAK,IAAI,cAAc,IAAI,WAAW,CAAC,IAAI,CAC3C,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;QAC9H,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACvG,KAAK,CACA,CACT;QACA,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"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAuBtC,MAAM,KAAK,GAAmB,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,GAAG,iBAAW,oBAAoB,KAAK,KAAK,GAAI,CAAA;AAE1G;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,EAAE,SAAS,CAAC;IAEhH,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,CAAC,KAAK,IAAI,cAAc,IAAI,WAAW,CAAC,IAAI,CAC3C,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;QAC9H,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACvG,KAAK,CACA,CACT;QACA,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"}

package/lib/components/Card.module.css

@@ -0,0 +1,97 @@
+.wrapper {
+  background: var(--hive-color-neutral-white);
+
+  .heading {
+    display: flex;
+    align-items: center;
+    margin-bottom: calc(var(--hive-grid) * 5);
+
+    .icon {
+      margin-right: calc(var(--hive-grid) * 2.5);
+    }
+
+    .title {
+      margin: 0;
+
+      &.space {
+        margin-right: calc(var(--hive-grid) * 2.5);
+      }
+    }
+  }
+
+  .separator {
+    width: 100%;
+    height: 1px;
+    margin-top: calc(var(--hive-grid) * 4);
+    background: var(--hive-color-neutral);
+  }
+
+  .content {
+    padding-top: calc(var(--hive-grid) * 6);
+    font-family: var(--hive-font-family-text);
+    font-size: var(--hive-font-size-body-normal);
+    letter-spacing: var(--hive-letter-spacing-body-normal);
+    line-height: var(--hive-line-height-body-normal);
+    font-weight: var(--hive-font-weight-text-regular);
+  }
+
+  .caption {
+    display: flex;
+    margin-bottom: calc(var(--hive-grid) * 5);
+
+    & > * {
+      flex: 1;
+    }
+  }
+}
+
+.bordered {
+  padding: calc(var(--hive-grid) * 5);
+  border-radius: var(--hive-border-radius);
+  border: var(--hive-border-width) solid var(--hive-color-neutral);
+
+  .heading {
+    font-weight: var(--hive-font-weight-heading-regular);
+    font-size: var(--hive-font-size-h3);
+    letter-spacing: var(--hive-letter-spacing-h3);
+    line-height: var(--hive-line-height-h3);
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    .icon {
+      margin-right: calc(var(--hive-grid) * 2.5);
+    }
+
+    .title {
+      margin: 0;
+      font-size: var(--hive-font-size-body-normal) !important;
+      line-height: var(--hive-line-height-body-normal) !important;
+
+      &.space {
+        margin-right: calc(var(--hive-grid) * 2.5);
+      }
+    }
+  }
+
+  .content {
+    font-family: var(--hive-font-family-text);
+    font-size: var(--hive-font-size-body-normal);
+    letter-spacing: var(--hive-letter-spacing-body-normal);
+    line-height: var(--hive-line-height-body-normal);
+    font-weight: var(--hive-font-weight-text-regular);
+    margin-top: calc(var(--hive-grid) * 4);
+    padding: 0;
+  }
+
+  .caption {
+    margin: calc(var(--hive-grid) * -5) calc(var(--hive-grid) * -5) calc(var(--hive-grid) * 5);
+  }
+}
+
+.noTitle {
+  .content {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}