@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/components/design/banners/pageBanner/PageBanner.js

@@ -0,0 +1,77 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PageBanner = exports.Banner = exports.Alert = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../../icons/basicIcon/Icon");
+var _SimpleButton = require("../../../form/buttons/SimpleButton");
+require("./pageBanners.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PageBanner = ({
+  animation = 'none',
+  reDisplayOnClose = false,
+  autoHide = false,
+  autoHideDelay = 10,
+  children,
+  displayMode = 'fixed',
+  icon = 'info',
+  id = 'pageBanner',
+  position = 'topCentre',
+  type = 'info',
+  disableClose = false,
+  widthVariant = 'lg',
+  backgroundFill = 'primary'
+}) => {
+  const StorageKey = `pageBanner_${id}`;
+  const StorageValue = localStorage.getItem(StorageKey);
+  const UserPreferences = StorageValue && JSON.parse(StorageValue);
+  const {
+    shouldDisplay
+  } = UserPreferences || {
+    shouldDisplay: true
+  };
+  const [isVisible, setVisibility] = (0, _react.useState)(shouldDisplay);
+  const autoHideCssClass = autoHide ? `autoHide_${autoHideDelay}` : 'noAutoHide';
+  const cssClass = `
+    pageBanner 
+    ${type} 
+    ${position} 
+    ${displayMode} 
+    ${autoHideCssClass}_${animation}
+    width_${widthVariant}
+    backgroundFill_${backgroundFill}
+  `;
+  const handleBannerClose = () => {
+    setVisibility(false);
+    localStorage.setItem(StorageKey, JSON.stringify({
+      shouldDisplay: reDisplayOnClose
+    }));
+  };
+  if (isVisible) {
+    return /*#__PURE__*/_react.default.createElement("aside", {
+      className: cssClass
+    }, !disableClose && /*#__PURE__*/_react.default.createElement(_SimpleButton.SimpleButton, {
+      cssClass: "closeBannerButton",
+      label: "Close page banner",
+      id: `${id}_CloseBannerButton`,
+      onClickHandler: handleBannerClose,
+      hideLabel: true,
+      leftIcon: {
+        icon: 'close'
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "pageBannerMainIcon"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: icon
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "pageBannerContent"
+    }, children));
+  }
+  return null;
+};
+exports.Alert = exports.Banner = exports.PageBanner = PageBanner;
+var _default = exports.default = PageBanner;
+//# sourceMappingURL=PageBanner.js.map

package/dist/cjs/components/design/banners/pageBanner/PageBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.js","names":["Object","defineProperty","exports","value","default","PageBanner","Banner","Alert","_react","_interopRequireWildcard","require","_Icon","_SimpleButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","animation","reDisplayOnClose","autoHide","autoHideDelay","children","displayMode","icon","id","position","type","disableClose","widthVariant","backgroundFill","StorageKey","StorageValue","localStorage","getItem","UserPreferences","JSON","parse","shouldDisplay","isVisible","setVisibility","useState","autoHideCssClass","cssClass","handleBannerClose","setItem","stringify","createElement","className","SimpleButton","label","onClickHandler","hideLabel","leftIcon","Icon","_default"],"sources":["../../../../../../src/components/design/banners/pageBanner/PageBanner.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, ReactNode, ReactElement } from 'react';\nimport { Icon } from '../../icons/basicIcon/Icon';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\n\nimport './pageBanners.scss';\n\nexport interface PageBannerProps {\n  id: string;\n  children: ReactNode | ReactElement;\n  animation?: 'slideInLeft' | 'slideInRight' | 'growOnHover' | 'none';\n  reDisplayOnClose?: boolean;\n  autoHide?: boolean;\n  autoHideDelay?: 1 | 3 | 5 | 10;\n  displayMode?: 'fixed' | 'inline';\n  icon?: string;\n  position?: 'topRight' | 'topCentre' | 'bottomRight' | 'bottomLeft'; // Only applicable with fixed display\n  type?: 'alert' | 'info' | 'warn' | 'error' | 'success';\n  disableClose?: boolean;\n  widthVariant?: 'sm' | 'md' | 'lg';\n  backgroundFill?: 'primary' | 'secondary';\n}\n\nexport const PageBanner: React.FC<PageBannerProps> = ({\n  animation = 'none',\n  reDisplayOnClose = false,\n  autoHide = false,\n  autoHideDelay = 10,\n  children,\n  displayMode = 'fixed',\n  icon = 'info',\n  id = 'pageBanner',\n  position = 'topCentre', \n  type = 'info',\n  disableClose = false,\n  widthVariant = 'lg',\n  backgroundFill = 'primary',\n}) => {\n  const StorageKey = `pageBanner_${ id }`;\n  const StorageValue = localStorage.getItem(StorageKey);\n  const UserPreferences = StorageValue && JSON.parse(StorageValue);\n\n  const { shouldDisplay } = UserPreferences || { shouldDisplay: true };\n\n  const [isVisible, setVisibility] = useState<boolean>(shouldDisplay);\n\n  const autoHideCssClass = autoHide ? `autoHide_${ autoHideDelay }` : 'noAutoHide';\n\n  const cssClass = `\n    pageBanner \n    ${ type } \n    ${ position } \n    ${ displayMode } \n    ${ autoHideCssClass }_${ animation }\n    width_${ widthVariant }\n    backgroundFill_${ backgroundFill }\n  `;\n\n  const handleBannerClose = () => {\n    setVisibility(false);\n    localStorage.setItem(StorageKey, JSON.stringify({ shouldDisplay: reDisplayOnClose }));\n  };\n\n  if (isVisible) {\n    return (\n      <aside className={ cssClass }>\n        { !disableClose && (\n          <SimpleButton\n            cssClass=\"closeBannerButton\"\n            label=\"Close page banner\"\n            id={ `${ id }_CloseBannerButton` }\n            onClickHandler={ handleBannerClose }\n            hideLabel\n            leftIcon={ { icon: 'close' } }\n          />\n        ) }\n\n        <div className=\"pageBannerMainIcon\">\n          <Icon icon={ icon } />\n        </div>\n\n        <div className=\"pageBannerContent\">\n          { children }\n        </div>\n      </aside>\n    );\n  }\n\n  return null;\n};\n\nexport default PageBanner;\n\nexport { PageBanner as Banner };\nexport { PageBanner as Alert };"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/design/banners/pageBanner/_animations.css

@@ -0,0 +1,177 @@
+/* Popovers */
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: 10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+@keyframes slideInRight {
+  0% {
+    margin-left: 100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: -10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+.autoHide_1_none {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_1_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_1_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_1_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_none {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_3_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_3_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_none {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_5_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_5_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_none {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_10_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_10_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+
+.noAutoHide_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .noAutoHide_growOnHover:hover {
+    transition: none;
+  }
+}
+.noAutoHide_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards;
+}
+.noAutoHide_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards;
+}

package/dist/cjs/components/design/banners/pageBanner/pageBanners.css

@@ -0,0 +1,322 @@
+/* Popovers */
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: 10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+@keyframes slideInRight {
+  0% {
+    margin-left: 100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: -10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+.autoHide_1_none {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_1_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_1_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_1_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_none {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_3_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_3_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_none {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_5_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_5_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_none {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_10_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_10_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+
+.noAutoHide_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .noAutoHide_growOnHover:hover {
+    transition: none;
+  }
+}
+.noAutoHide_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards;
+}
+.noAutoHide_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards;
+}
+
+.pageBanner {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20px;
+  font-size: 16px;
+  position: relative;
+  border-color: var(--bannerBorderColor, transparent);
+  border-radius: var(--bannerBorderRadius, 5px);
+  min-height: 44px;
+  box-sizing: border-box;
+}
+.pageBanner h3 {
+  margin: 0;
+}
+.pageBanner fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.pageBanner .pageBannerContent {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex: 1;
+}
+.pageBanner .closeBannerButton {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 44px;
+  height: 44px;
+  text-align: right;
+  font-size: 20px;
+  background: none;
+  border: none;
+  color: inherit;
+}
+.pageBanner a {
+  color: currentColor;
+  text-decoration: underline;
+  font-size: inherit;
+}
+.pageBanner .pageBannerMainIcon {
+  width: var(--bannerIconSize, 24px);
+}
+.pageBanner .pageBannerMainIcon .icon {
+  height: var(--bannerIconSize, 24px);
+  text-align: center;
+  font-size: var(--bannerIconSize, 24px);
+}
+.pageBanner {
+  /* Width variants */
+}
+.pageBanner.width_sm {
+  width: var(--bannerWidthSm, 35vw);
+}
+.pageBanner.width_md {
+  width: var(--bannerWidthMd, 50vw);
+}
+.pageBanner.width_lg {
+  width: var(--bannerWidthLg, 85vw);
+}
+.pageBanner {
+  /* Display modes */
+}
+.pageBanner.fixed {
+  position: fixed;
+  z-index: 2000;
+  /* Positions */
+}
+.pageBanner.fixed.topRight {
+  top: var(--bannerStandardOffset, 20px);
+  right: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.fixed.topCentre {
+  top: var(--bannerStandardOffset, 20px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pageBanner.fixed.bottomRight {
+  bottom: var(--bannerStandardOffset, 20px);
+  right: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.fixed.bottomLeft {
+  bottom: var(--bannerStandardOffset, 20px);
+  left: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.inline {
+  position: relative;
+  width: auto;
+}
+.pageBanner {
+  /* Types */
+}
+.pageBanner.alert.backgroundFill_primary {
+  background: var(--bannerAlertBg, #FFDE03);
+  color: var(--bannerAlertFgColor, #000);
+}
+.pageBanner.alert.backgroundFill_secondary {
+  background: var(--bannerAlertBgSecondary, rgb(255, 235.3571428571, 105));
+  color: var(--bannerAlertFgColor, #000);
+  border: 1px solid var(--bannerAlertSecondaryBorder, #FFDE03);
+}
+.pageBanner.info.backgroundFill_primary {
+  background: var(--bannerInfoBg, #094DB3);
+  color: var(--bannerInfoFgColor, #fff);
+}
+.pageBanner.info.backgroundFill_secondary {
+  background: var(--bannerInfoBgSecondary, rgb(94.0904255319, 155.2180851064, 246.9095744681));
+  color: var(--bannerInfoFgSecondaryColor, #000);
+  border: 1px solid var(--bannerInfoSecondaryBorder, #094DB3);
+}
+.pageBanner.warn.backgroundFill_primary {
+  background: var(--bannerWarnBg, #F5A623);
+  color: var(--bannerWarnFgColor, #000);
+}
+.pageBanner.warn.backgroundFill_secondary {
+  background: var(--bannerWarnBgSecondary, rgb(248.3260869565, 195.602173913, 108.1739130435));
+  color: var(--bannerWarnFgColor, #000);
+  border: 1px solid var(--bannerWarnSecondaryBorder, #F5A623);
+}
+.pageBanner.error.backgroundFill_primary {
+  background: var(--bannerErrorBg, #BB0000);
+  color: var(--bannerErrorFgColor, #fff);
+}
+.pageBanner.error.backgroundFill_secondary {
+  background: var(--bannerErrorBgSecondary, #ff5555);
+  color: var(--bannerErrorFgSecondaryColor, #000);
+  border: 1px solid var(--bannerErrorSecondaryBorder, #BB0000);
+}
+.pageBanner.success.backgroundFill_primary {
+  background: var(--bannerSuccessBg, #008243);
+  color: var(--bannerSuccessFgColor, #fff);
+}
+.pageBanner.success.backgroundFill_secondary {
+  background: var(--bannerSuccessBgSecondary, rgb(0, 232, 119.5692307692));
+  color: var(--bannerSuccessFgSecondaryColor, #000);
+  border: 1px solid var(--bannerSuccessSecondaryBorder, #008243);
+}

package/dist/cjs/components/design/card/Card.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+require("./card.css");
+var _CardHeader = require("./cardHeader/CardHeader");
+const Card = ({
+  id,
+  header,
+  children,
+  footer,
+  customCssClass,
+  restrictHeight,
+  size = 's'
+}) => {
+  const cardId = id || `card_${Date.now()}`;
+  const heightCssClass = restrictHeight ? `card_height_${restrictHeight}` : '';
+  const sizeCssClass = `card_${size}`;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: cardId,
+    className: `card ${sizeCssClass} ${heightCssClass} ${customCssClass || ''}`
+  }, header && /*#__PURE__*/_react.default.createElement(_CardHeader.CardHeader, (0, _extends2.default)({}, header, {
+    cardId: cardId
+  })), /*#__PURE__*/_react.default.createElement("section", {
+    className: "cardContent"
+  }, children), footer && /*#__PURE__*/_react.default.createElement("footer", {
+    className: "cardFooter"
+  }, footer));
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/dist/cjs/components/design/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","Card","_extends2","_react","_CardHeader","id","header","children","footer","customCssClass","restrictHeight","size","cardId","Date","now","heightCssClass","sizeCssClass","default","createElement","className","CardHeader"],"sources":["../../../../../src/components/design/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport './card.scss';\nimport { CardHeaderProps, CardHeader } from './cardHeader/CardHeader';\n\nexport interface CardProps {\n  id: string;\n  header?: CardHeaderProps;\n  footer?: string | React.ReactElement;\n  customCssClass?: string;\n  restrictHeight?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  children?: React.ReactNode;\n}\n\nexport const Card: React.FC<CardProps> = (\n  {\n    id,\n    header,\n    children,\n    footer,\n    customCssClass,\n    restrictHeight,\n    size = 's'\n  }\n) => {\n  const cardId = id || `card_${ Date.now() }`;\n  const heightCssClass = restrictHeight ? `card_height_${ restrictHeight }` : '';\n  const sizeCssClass = `card_${ size }`;\n\n  return (\n    <div id={ cardId } className={ `card ${ sizeCssClass } ${ heightCssClass } ${ customCssClass || '' }` }>\n      {\n        header && <CardHeader { ...header } cardId={ cardId } />\n      }\n\n      <section className=\"cardContent\">\n        { children }\n      </section>\n      {\n        footer\n        && (\n          <footer className=\"cardFooter\">\n            { footer }\n          </footer>\n        )\n      }\n\n    </div>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,IAAA;AAAA,IAAAC,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEb,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEAA,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAYO,MAAMK,IAAyB,GAAGA,CACvC;EACEI,EAAE;EACFC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,cAAc;EACdC,cAAc;EACdC,IAAI,GAAG;AACT,CAAC,KACE;EACH,MAAMC,MAAM,GAAGP,EAAE,IAAI,QAASQ,IAAI,CAACC,GAAG,CAAC,CAAC,EAAG;EAC3C,MAAMC,cAAc,GAAGL,cAAc,GAAG,eAAgBA,cAAc,EAAG,GAAG,EAAE;EAC9E,MAAMM,YAAY,GAAG,QAASL,IAAI,EAAG;EAErC,oBACER,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAAKb,EAAE,EAAGO,MAAQ;IAACO,SAAS,EAAG,QAASH,YAAY,IAAMD,cAAc,IAAMN,cAAc,IAAI,EAAE;EAAK,GAEnGH,MAAM,iBAAIH,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACd,WAAA,CAAAgB,UAAU,MAAAlB,SAAA,CAAAe,OAAA,MAAMX,MAAM;IAAGM,MAAM,EAAGA;EAAQ,EAAE,CAAC,eAG1DT,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAASC,SAAS,EAAC;EAAa,GAC5BZ,QACK,CAAC,EAERC,MAAM,iBAEJL,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAAQC,SAAS,EAAC;EAAY,GAC1BX,MACI,CAIT,CAAC;AAEV,CAAC;AAACT,OAAA,CAAAE,IAAA,GAAAA,IAAA","ignoreList":[]}