@x15ventures/x15-ui-library 3.16.1 → 3.18.0

package/dist/esm/autoGenerated/libraryThemes.json

@@ -10,8 +10,8 @@
       "map": "index.min.css.map"
     },
     "versioned": {
-      "css": "base.min.3.16.1.css",
-      "map": "base.min.3.16.1.css.map"
+      "css": "base.min.3.18.0.css",
+      "map": "base.min.3.18.0.css.map"
     }
   },
   "cba": {
@@ -25,8 +25,8 @@
       "map": "cba.min.css.map"
     },
     "versioned": {
-      "css": "cba.min.3.16.1.css",
-      "map": "cba.min.3.16.1.css.map"
+      "css": "cba.min.3.18.0.css",
+      "map": "cba.min.3.18.0.css.map"
     }
   },
   "creditSavvy": {
@@ -40,8 +40,8 @@
       "map": "creditSavvy.min.css.map"
     },
     "versioned": {
-      "css": "creditSavvy.min.3.16.1.css",
-      "map": "creditSavvy.min.3.16.1.css.map"
+      "css": "creditSavvy.min.3.18.0.css",
+      "map": "creditSavvy.min.3.18.0.css.map"
     }
   },
   "doshii": {
@@ -55,8 +55,8 @@
       "map": "doshii.min.css.map"
     },
     "versioned": {
-      "css": "doshii.min.3.16.1.css",
-      "map": "doshii.min.3.16.1.css.map"
+      "css": "doshii.min.3.18.0.css",
+      "map": "doshii.min.3.18.0.css.map"
     }
   },
   "homeIn": {
@@ -70,8 +70,8 @@
       "map": "homeIn.min.css.map"
     },
     "versioned": {
-      "css": "homeIn.min.3.16.1.css",
-      "map": "homeIn.min.3.16.1.css.map"
+      "css": "homeIn.min.3.18.0.css",
+      "map": "homeIn.min.3.18.0.css.map"
     }
   },
   "x15Core": {
@@ -85,8 +85,8 @@
       "map": "x15Core.min.css.map"
     },
     "versioned": {
-      "css": "x15Core.min.3.16.1.css",
-      "map": "x15Core.min.3.16.1.css.map"
+      "css": "x15Core.min.3.18.0.css",
+      "map": "x15Core.min.3.18.0.css.map"
     }
   }
 }

package/dist/esm/components/design/accordion/Accordion.js

@@ -3,9 +3,8 @@
 /* eslint-disable jsxA11y/no-noninteractive-tabindex, no-unused-vars */
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, useState } from 'react';
-import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
 import { chevronUp, chevronDown } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
-import { Icon } from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import { useInertAttribute } from '../../../hooks/InertAttribute';
 import './accordion.css';
 export const Accordion = ({
@@ -75,26 +74,11 @@ export const Accordion = ({
   const headerCssClass = `accordionHeader ${customSectionHeader || isFixed ? 'accordionHeader_custom' : ''} ${innerBorders ? 'accordionHeader_innerBorders' : ''}`;
   const controlCssClass = `accordionControl ${customCssClass ? `${customCssClass}_accordionControl` : ''} ${headerButtonCssClass || ''}`;
   const contentCssClass = `accordionContent ${customCssClass ? `${customCssClass}_accordionContent` : ''}`;
-  const OpenIcon = () => {
-    if (openIcon) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        icon: openIcon
-      });
-    }
-    return /*#__PURE__*/React.createElement(SvgIcon, {
-      svgDefinition: chevronUp
-    });
-  };
-  const CloseIcon = () => {
-    if (closeIcon) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        icon: closeIcon
-      });
-    }
-    return /*#__PURE__*/React.createElement(SvgIcon, {
-      svgDefinition: chevronDown
-    });
-  };
+  const toggleIcon = panelIsOpen ? renderIcon(openIcon, {
+    fallback: chevronUp
+  }) : renderIcon(closeIcon, {
+    fallback: chevronDown
+  });
   return /*#__PURE__*/React.createElement("section", {
     className: wrapperCssClass,
     style: alignmentStyle
@@ -115,7 +99,7 @@ export const Accordion = ({
     className: "sr-only"
   }, "Open and close accordion"), headerButtonCustomLabel || /*#__PURE__*/React.createElement("span", {
     className: "labelText"
-  }, heading), panelIsOpen ? /*#__PURE__*/React.createElement(OpenIcon, null) : /*#__PURE__*/React.createElement(CloseIcon, null)))), /*#__PURE__*/React.createElement("section", _extends({
+  }, heading), toggleIcon))), /*#__PURE__*/React.createElement("section", _extends({
     ref: accordionContentSection,
     className: contentCssClass,
     id: contentId,

package/dist/esm/components/design/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_extends","React","useRef","useState","SvgIcon","chevronUp","chevronDown","Icon","useInertAttribute","Accordion","id","heading","children","footer","openIcon","closeIcon","isOpen","isAnimated","isFixed","innerBorders","outerBorders","hasShadow","onChange","customCssClass","restrictHeight","headerButtonCustomLabel","headerButtonCssClass","paddingStyle","horizontalAlignments","panelIsOpen","setPanelIsOpen","accordionControl","accordionContentSection","panelId","Date","now","contentId","controlId","customSectionHeader","TogglePanelOpenState","newState","heightCssClass","justifyContentMap","left","center","right","alignmentStyle","header","content","wrapperCssClass","headerCssClass","controlCssClass","contentCssClass","OpenIcon","createElement","icon","svgDefinition","CloseIcon","className","style","tabIndex","ref","onClick","type","undefined"],"sources":["../../../../../src/components/design/accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable jsxA11y/no-noninteractive-tabindex, no-unused-vars */\n\nimport React, { ReactNode, useRef, useState } from 'react';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { chevronUp, chevronDown } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\n\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { useInertAttribute } from '../../../hooks/InertAttribute';\n\nimport './accordion.scss';\n\nexport interface AccordionProps {\n  id: string;\n  isOpen?: boolean;\n  isAnimated?: boolean;\n  isFixed?: boolean;\n  innerBorders?: boolean;\n  outerBorders?: boolean;\n  hasShadow?: boolean;\n  onChange?: (args: boolean) => void;\n  openIcon?: ReactNode;\n  closeIcon?: ReactNode;\n  heading: ReactNode;\n  footer?: ReactNode;\n  customCssClass?: string;\n  restrictHeight?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  headerButtonCustomLabel?: ReactNode;\n  headerButtonCssClass?: string;\n  paddingStyle?: 'compact' | 'regular' | 'spacious';\n  children?: ReactNode;\n  horizontalAlignments?: {\n    header?: 'left' | 'center' | 'right';\n    content?: 'left' | 'center' | 'right';\n    footer?: 'left' | 'center' | 'right';\n  };\n}\n\nexport const Accordion: React.FC<AccordionProps> = (\n  {\n    id,\n    heading,\n    children,\n    footer,\n    openIcon = null,\n    closeIcon = null,\n    isOpen = true,\n    isAnimated = true,\n    isFixed = false,\n    innerBorders = true,\n    outerBorders = true,\n    hasShadow = false,\n    onChange,\n    customCssClass,\n    restrictHeight,\n    headerButtonCustomLabel,\n    headerButtonCssClass,\n    paddingStyle = 'regular',\n    horizontalAlignments,\n  }\n) => {\n  const [panelIsOpen, setPanelIsOpen] = useState(isOpen || isFixed);\n  const accordionControl = useRef(null);\n  const accordionContentSection = useRef<HTMLElement>(null);\n\n  useInertAttribute(accordionContentSection, !panelIsOpen && !isFixed);\n\n  const panelId = id || `accordion_${ Date.now() }`;\n  const contentId = `${ panelId }_content`;\n  const controlId = `${ panelId }_control`;\n\n  const customSectionHeader = typeof heading !== 'string' && !headerButtonCustomLabel;\n\n  const TogglePanelOpenState = () => {\n    const newState = !panelIsOpen;\n    setPanelIsOpen(newState);\n    if (onChange) {\n      onChange(newState);\n    }\n  };\n\n  const heightCssClass = restrictHeight ? `accordion_${ restrictHeight }` : '';\n\n  // map horizontal alignment props to justify-content values for fixed accordions\n  const justifyContentMap = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n  };\n\n  const alignmentStyle = {\n    ...(isFixed && horizontalAlignments?.header\n      ? { '--header-align-h': justifyContentMap[horizontalAlignments.header] }\n      : { '--header-align-h': horizontalAlignments?.header || 'left' }),\n    '--content-align-h': horizontalAlignments?.content || 'left',\n    '--footer-align-h': horizontalAlignments?.footer || 'left',\n  };\n\n  const wrapperCssClass = `\n    accordion\n    ${ customCssClass || '' }\n    ${ heightCssClass }\n    ${ panelIsOpen || isFixed ? 'open' : 'closed' }\n    ${ isFixed ? 'fixed' : '' }\n    ${ isAnimated ? 'animated' : '' }\n    ${ outerBorders ? 'outerBorders' : '' }\n    ${ paddingStyle ? `padding_${ paddingStyle }` : '' }\n    ${ hasShadow ? 'hasShadow' : '' }\n  `;\n\n  const headerCssClass = `accordionHeader ${ customSectionHeader || isFixed ? 'accordionHeader_custom' : '' } ${ innerBorders ? 'accordionHeader_innerBorders' : '' }`;\n\n  const controlCssClass = `accordionControl ${ customCssClass ? `${ customCssClass }_accordionControl` : '' } ${ headerButtonCssClass || '' }`;\n\n  const contentCssClass = `accordionContent ${ customCssClass ? `${ customCssClass }_accordionContent` : '' }`;\n\n  const OpenIcon = () => {\n    if (openIcon) {\n      return <Icon icon={ openIcon } />;\n    }\n    return <SvgIcon svgDefinition={ chevronUp } />;\n  };\n\n  const CloseIcon = () => {\n    if (closeIcon) {\n      return <Icon icon={ closeIcon } />;\n    }\n    return <SvgIcon svgDefinition={ chevronDown } />;\n  };\n\n  return (\n    <section className={ wrapperCssClass } style={ alignmentStyle as React.CSSProperties }>\n      <header className={ headerCssClass }>\n        {\n          customSectionHeader\n            ? <div tabIndex={ 0 } className=\"accordionCustomHeading\">{ heading }</div>\n            : (\n              <h3>\n                { isFixed\n                  ? heading\n                  : (\n                    <button\n                      ref={ accordionControl }\n                      aria-controls={ contentId }\n                      aria-expanded={ panelIsOpen }\n                      id={ controlId }\n                      onClick={ TogglePanelOpenState }\n                      type=\"button\"\n                      className={ controlCssClass }\n                    >\n                      <span className=\"sr-only\">Open and close accordion</span>\n                      {\n                        headerButtonCustomLabel || <span className=\"labelText\">{ heading }</span>\n                      }\n                      {\n                        panelIsOpen\n                          ? <OpenIcon />\n                          : <CloseIcon />\n                      }\n                    </button>\n                  ) }\n              </h3>\n            )\n        }\n      </header>\n\n      <section\n        ref={ accordionContentSection }\n        className={ contentCssClass }\n        id={ contentId }\n        aria-labelledby={ controlId }\n        { ...(!panelIsOpen && !isFixed ? {\n          'aria-hidden': true\n        } : {}) }\n        tabIndex={ restrictHeight && (panelIsOpen || isFixed) ? 0 : undefined }\n      >\n        <span className=\"sr-only\">Start of accordion content</span>\n        { children }\n\n        { footer\n          && (\n            <footer>\n              { footer }\n            </footer>\n          ) }\n      </section>\n    </section>\n  );\n};\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["_extends","React","useRef","useState","chevronUp","chevronDown","renderIcon","useInertAttribute","Accordion","id","heading","children","footer","openIcon","closeIcon","isOpen","isAnimated","isFixed","innerBorders","outerBorders","hasShadow","onChange","customCssClass","restrictHeight","headerButtonCustomLabel","headerButtonCssClass","paddingStyle","horizontalAlignments","panelIsOpen","setPanelIsOpen","accordionControl","accordionContentSection","panelId","Date","now","contentId","controlId","customSectionHeader","TogglePanelOpenState","newState","heightCssClass","justifyContentMap","left","center","right","alignmentStyle","header","content","wrapperCssClass","headerCssClass","controlCssClass","contentCssClass","toggleIcon","fallback","createElement","className","style","tabIndex","ref","onClick","type","undefined"],"sources":["../../../../../src/components/design/accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable jsxA11y/no-noninteractive-tabindex, no-unused-vars */\n\nimport React, { ReactNode, useRef, useState } from 'react';\nimport { chevronUp, chevronDown } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\n\nimport { IconSource, renderIcon } from '../../../helpers/iconHelpers';\nimport { useInertAttribute } from '../../../hooks/InertAttribute';\n\nimport './accordion.scss';\n\nexport interface AccordionProps {\n  id: string;\n  isOpen?: boolean;\n  isAnimated?: boolean;\n  isFixed?: boolean;\n  innerBorders?: boolean;\n  outerBorders?: boolean;\n  hasShadow?: boolean;\n  onChange?: (args: boolean) => void;\n  openIcon?: IconSource;\n  closeIcon?: IconSource;\n  heading: ReactNode;\n  footer?: ReactNode;\n  customCssClass?: string;\n  restrictHeight?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  headerButtonCustomLabel?: ReactNode;\n  headerButtonCssClass?: string;\n  paddingStyle?: 'compact' | 'regular' | 'spacious';\n  children?: ReactNode;\n  horizontalAlignments?: {\n    header?: 'left' | 'center' | 'right';\n    content?: 'left' | 'center' | 'right';\n    footer?: 'left' | 'center' | 'right';\n  };\n}\n\nexport const Accordion: React.FC<AccordionProps> = (\n  {\n    id,\n    heading,\n    children,\n    footer,\n    openIcon = null,\n    closeIcon = null,\n    isOpen = true,\n    isAnimated = true,\n    isFixed = false,\n    innerBorders = true,\n    outerBorders = true,\n    hasShadow = false,\n    onChange,\n    customCssClass,\n    restrictHeight,\n    headerButtonCustomLabel,\n    headerButtonCssClass,\n    paddingStyle = 'regular',\n    horizontalAlignments,\n  }\n) => {\n  const [panelIsOpen, setPanelIsOpen] = useState(isOpen || isFixed);\n  const accordionControl = useRef(null);\n  const accordionContentSection = useRef<HTMLElement>(null);\n\n  useInertAttribute(accordionContentSection, !panelIsOpen && !isFixed);\n\n  const panelId = id || `accordion_${ Date.now() }`;\n  const contentId = `${ panelId }_content`;\n  const controlId = `${ panelId }_control`;\n\n  const customSectionHeader = typeof heading !== 'string' && !headerButtonCustomLabel;\n\n  const TogglePanelOpenState = () => {\n    const newState = !panelIsOpen;\n    setPanelIsOpen(newState);\n    if (onChange) {\n      onChange(newState);\n    }\n  };\n\n  const heightCssClass = restrictHeight ? `accordion_${ restrictHeight }` : '';\n\n  // map horizontal alignment props to justify-content values for fixed accordions\n  const justifyContentMap = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n  };\n\n  const alignmentStyle = {\n    ...(isFixed && horizontalAlignments?.header\n      ? { '--header-align-h': justifyContentMap[horizontalAlignments.header] }\n      : { '--header-align-h': horizontalAlignments?.header || 'left' }),\n    '--content-align-h': horizontalAlignments?.content || 'left',\n    '--footer-align-h': horizontalAlignments?.footer || 'left',\n  };\n\n  const wrapperCssClass = `\n    accordion\n    ${ customCssClass || '' }\n    ${ heightCssClass }\n    ${ panelIsOpen || isFixed ? 'open' : 'closed' }\n    ${ isFixed ? 'fixed' : '' }\n    ${ isAnimated ? 'animated' : '' }\n    ${ outerBorders ? 'outerBorders' : '' }\n    ${ paddingStyle ? `padding_${ paddingStyle }` : '' }\n    ${ hasShadow ? 'hasShadow' : '' }\n  `;\n\n  const headerCssClass = `accordionHeader ${ customSectionHeader || isFixed ? 'accordionHeader_custom' : '' } ${ innerBorders ? 'accordionHeader_innerBorders' : '' }`;\n\n  const controlCssClass = `accordionControl ${ customCssClass ? `${ customCssClass }_accordionControl` : '' } ${ headerButtonCssClass || '' }`;\n\n  const contentCssClass = `accordionContent ${ customCssClass ? `${ customCssClass }_accordionContent` : '' }`;\n\n  const toggleIcon = panelIsOpen\n    ? renderIcon(openIcon, { fallback: chevronUp })\n    : renderIcon(closeIcon, { fallback: chevronDown });\n\n  return (\n    <section className={ wrapperCssClass } style={ alignmentStyle as React.CSSProperties }>\n      <header className={ headerCssClass }>\n        {\n          customSectionHeader\n            ? <div tabIndex={ 0 } className=\"accordionCustomHeading\">{ heading }</div>\n            : (\n              <h3>\n                { isFixed\n                  ? heading\n                  : (\n                    <button\n                      ref={ accordionControl }\n                      aria-controls={ contentId }\n                      aria-expanded={ panelIsOpen }\n                      id={ controlId }\n                      onClick={ TogglePanelOpenState }\n                      type=\"button\"\n                      className={ controlCssClass }\n                    >\n                      <span className=\"sr-only\">Open and close accordion</span>\n                      {\n                        headerButtonCustomLabel || <span className=\"labelText\">{ heading }</span>\n                      }\n                      { toggleIcon }\n                    </button>\n                  ) }\n              </h3>\n            )\n        }\n      </header>\n\n      <section\n        ref={ accordionContentSection }\n        className={ contentCssClass }\n        id={ contentId }\n        aria-labelledby={ controlId }\n        { ...(!panelIsOpen && !isFixed ? {\n          'aria-hidden': true\n        } : {}) }\n        tabIndex={ restrictHeight && (panelIsOpen || isFixed) ? 0 : undefined }\n      >\n        <span className=\"sr-only\">Start of accordion content</span>\n        { children }\n\n        { footer\n          && (\n            <footer>\n              { footer }\n            </footer>\n          ) }\n      </section>\n    </section>\n  );\n};\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Icon } from '../../icons/basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import { SimpleButton } from '../../../form/buttons/SimpleButton';
 import './pageBanners.css';
 export const PageBanner = ({
@@ -61,9 +61,7 @@ export const PageBanner = ({
       }
     }), /*#__PURE__*/React.createElement("div", {
       className: "pageBannerMainIcon"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: icon
-    })), /*#__PURE__*/React.createElement("div", {
+    }, renderIcon(icon)), /*#__PURE__*/React.createElement("div", {
       className: "pageBannerContent"
     }, children));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"PageBanner.js","names":["React","useState","useEffect","Icon","SimpleButton","PageBanner","animation","reDisplayOnClose","autoHide","autoHideDelay","children","displayMode","icon","id","position","type","disableClose","widthVariant","backgroundFill","StorageKey","StorageValue","setStorageValue","localStorage","getItem","UserPreferences","JSON","parse","shouldDisplay","isVisible","setVisibility","autoHideCssClass","cssClass","handleBannerClose","setItem","stringify","createElement","className","label","onClickHandler","hideLabel","leftIcon","Banner","Alert"],"sources":["../../../../../../src/components/design/banners/pageBanner/PageBanner.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, ReactNode, ReactElement, useEffect } 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\n  const [StorageValue, setStorageValue] = useState<string | null>(null);\n\n  useEffect(() => {\n    setStorageValue(localStorage.getItem(StorageKey));\n  }, [StorageKey]);\n\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":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,EAA2BC,SAAS,QAAQ,OAAO;AAC3E,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,YAAY,QAAQ,oCAAoC;AAEjE,OAAO,oBAAoB;AAkB3B,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,SAAS,GAAG,MAAM;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAG,EAAE;EAClBC,QAAQ;EACRC,WAAW,GAAG,OAAO;EACrBC,IAAI,GAAG,MAAM;EACbC,EAAE,GAAG,YAAY;EACjBC,QAAQ,GAAG,WAAW;EACtBC,IAAI,GAAG,MAAM;EACbC,YAAY,GAAG,KAAK;EACpBC,YAAY,GAAG,IAAI;EACnBC,cAAc,GAAG;AACnB,CAAC,KAAK;EACJ,MAAMC,UAAU,GAAG,cAAeN,EAAE,EAAG;EAEvC,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAgB,IAAI,CAAC;EAErEC,SAAS,CAAC,MAAM;IACdmB,eAAe,CAACC,YAAY,CAACC,OAAO,CAACJ,UAAU,CAAC,CAAC;EACnD,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMK,eAAe,GAAGJ,YAAY,IAAIK,IAAI,CAACC,KAAK,CAACN,YAAY,CAAC;EAEhE,MAAM;IAAEO;EAAc,CAAC,GAAGH,eAAe,IAAI;IAAEG,aAAa,EAAE;EAAK,CAAC;EAEpE,MAAM,CAACC,SAAS,EAAEC,aAAa,CAAC,GAAG5B,QAAQ,CAAU0B,aAAa,CAAC;EAEnE,MAAMG,gBAAgB,GAAGtB,QAAQ,GAAG,YAAaC,aAAa,EAAG,GAAG,YAAY;EAEhF,MAAMsB,QAAQ,GAAG;AACnB;AACA,MAAOhB,IAAI;AACX,MAAOD,QAAQ;AACf,MAAOH,WAAW;AAClB,MAAOmB,gBAAgB,IAAMxB,SAAS;AACtC,YAAaW,YAAY;AACzB,qBAAsBC,cAAc;AACpC,GAAG;EAED,MAAMc,iBAAiB,GAAGA,CAAA,KAAM;IAC9BH,aAAa,CAAC,KAAK,CAAC;IACpBP,YAAY,CAACW,OAAO,CAACd,UAAU,EAAEM,IAAI,CAACS,SAAS,CAAC;MAAEP,aAAa,EAAEpB;IAAiB,CAAC,CAAC,CAAC;EACvF,CAAC;EAED,IAAIqB,SAAS,EAAE;IACb,oBACE5B,KAAA,CAAAmC,aAAA;MAAOC,SAAS,EAAGL;IAAU,GACzB,CAACf,YAAY,iBACbhB,KAAA,CAAAmC,aAAA,CAAC/B,YAAY;MACX2B,QAAQ,EAAC,mBAAmB;MAC5BM,KAAK,EAAC,mBAAmB;MACzBxB,EAAE,EAAG,GAAIA,EAAE,oBAAuB;MAClCyB,cAAc,EAAGN,iBAAmB;MACpCO,SAAS;MACTC,QAAQ,EAAG;QAAE5B,IAAI,EAAE;MAAQ;IAAG,CAC/B,CACF,eAEDZ,KAAA,CAAAmC,aAAA;MAAKC,SAAS,EAAC;IAAoB,gBACjCpC,KAAA,CAAAmC,aAAA,CAAChC,IAAI;MAACS,IAAI,EAAGA;IAAM,CAAE,CAClB,CAAC,eAENZ,KAAA,CAAAmC,aAAA;MAAKC,SAAS,EAAC;IAAmB,GAC9B1B,QACC,CACA,CAAC;EAEZ;EAEA,OAAO,IAAI;AACb,CAAC;AAED,eAAeL,UAAU;AAEzB,SAASA,UAAU,IAAIoC,MAAM;AAC7B,SAASpC,UAAU,IAAIqC,KAAK","ignoreList":[]}
+{"version":3,"file":"PageBanner.js","names":["React","useState","useEffect","renderIcon","SimpleButton","PageBanner","animation","reDisplayOnClose","autoHide","autoHideDelay","children","displayMode","icon","id","position","type","disableClose","widthVariant","backgroundFill","StorageKey","StorageValue","setStorageValue","localStorage","getItem","UserPreferences","JSON","parse","shouldDisplay","isVisible","setVisibility","autoHideCssClass","cssClass","handleBannerClose","setItem","stringify","createElement","className","label","onClickHandler","hideLabel","leftIcon","Banner","Alert"],"sources":["../../../../../../src/components/design/banners/pageBanner/PageBanner.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, ReactNode, ReactElement, useEffect } from 'react';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\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?: IconSource;\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\n  const [StorageValue, setStorageValue] = useState<string | null>(null);\n\n  useEffect(() => {\n    setStorageValue(localStorage.getItem(StorageKey));\n  }, [StorageKey]);\n\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          { renderIcon(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":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,EAA2BC,SAAS,QAAQ,OAAO;AAC3E,SAAqBC,UAAU,QAAQ,iCAAiC;AACxE,SAASC,YAAY,QAAQ,oCAAoC;AAEjE,OAAO,oBAAoB;AAkB3B,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,SAAS,GAAG,MAAM;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAG,EAAE;EAClBC,QAAQ;EACRC,WAAW,GAAG,OAAO;EACrBC,IAAI,GAAG,MAAM;EACbC,EAAE,GAAG,YAAY;EACjBC,QAAQ,GAAG,WAAW;EACtBC,IAAI,GAAG,MAAM;EACbC,YAAY,GAAG,KAAK;EACpBC,YAAY,GAAG,IAAI;EACnBC,cAAc,GAAG;AACnB,CAAC,KAAK;EACJ,MAAMC,UAAU,GAAG,cAAeN,EAAE,EAAG;EAEvC,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAgB,IAAI,CAAC;EAErEC,SAAS,CAAC,MAAM;IACdmB,eAAe,CAACC,YAAY,CAACC,OAAO,CAACJ,UAAU,CAAC,CAAC;EACnD,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMK,eAAe,GAAGJ,YAAY,IAAIK,IAAI,CAACC,KAAK,CAACN,YAAY,CAAC;EAEhE,MAAM;IAAEO;EAAc,CAAC,GAAGH,eAAe,IAAI;IAAEG,aAAa,EAAE;EAAK,CAAC;EAEpE,MAAM,CAACC,SAAS,EAAEC,aAAa,CAAC,GAAG5B,QAAQ,CAAU0B,aAAa,CAAC;EAEnE,MAAMG,gBAAgB,GAAGtB,QAAQ,GAAG,YAAaC,aAAa,EAAG,GAAG,YAAY;EAEhF,MAAMsB,QAAQ,GAAG;AACnB;AACA,MAAOhB,IAAI;AACX,MAAOD,QAAQ;AACf,MAAOH,WAAW;AAClB,MAAOmB,gBAAgB,IAAMxB,SAAS;AACtC,YAAaW,YAAY;AACzB,qBAAsBC,cAAc;AACpC,GAAG;EAED,MAAMc,iBAAiB,GAAGA,CAAA,KAAM;IAC9BH,aAAa,CAAC,KAAK,CAAC;IACpBP,YAAY,CAACW,OAAO,CAACd,UAAU,EAAEM,IAAI,CAACS,SAAS,CAAC;MAAEP,aAAa,EAAEpB;IAAiB,CAAC,CAAC,CAAC;EACvF,CAAC;EAED,IAAIqB,SAAS,EAAE;IACb,oBACE5B,KAAA,CAAAmC,aAAA;MAAOC,SAAS,EAAGL;IAAU,GACzB,CAACf,YAAY,iBACbhB,KAAA,CAAAmC,aAAA,CAAC/B,YAAY;MACX2B,QAAQ,EAAC,mBAAmB;MAC5BM,KAAK,EAAC,mBAAmB;MACzBxB,EAAE,EAAG,GAAIA,EAAE,oBAAuB;MAClCyB,cAAc,EAAGN,iBAAmB;MACpCO,SAAS;MACTC,QAAQ,EAAG;QAAE5B,IAAI,EAAE;MAAQ;IAAG,CAC/B,CACF,eAEDZ,KAAA,CAAAmC,aAAA;MAAKC,SAAS,EAAC;IAAoB,GAC/BjC,UAAU,CAACS,IAAI,CACd,CAAC,eAENZ,KAAA,CAAAmC,aAAA;MAAKC,SAAS,EAAC;IAAmB,GAC9B1B,QACC,CACA,CAAC;EAEZ;EAEA,OAAO,IAAI;AACb,CAAC;AAED,eAAeL,UAAU;AAEzB,SAASA,UAAU,IAAIoC,MAAM;AAC7B,SAASpC,UAAU,IAAIqC,KAAK","ignoreList":[]}

package/dist/esm/components/design/card/cardContent/CardContentLine.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Icon } from '../../icons/basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import { LogoLink } from '../../logos/LogoLink';
 import { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';
 import { StatusLightsBar } from '../../statusIndicators/statusLightsBar/StatusLightsBar';
@@ -29,7 +29,7 @@ export const CardContentLine = ({
     type: "button",
     className: "cardContentLineButton",
     onClick: handleLineClick
-  }, icon && /*#__PURE__*/React.createElement(Icon, icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
+  }, renderIcon(icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
     src: graphic.imageUrl,
     className: "logoImage",
     alt: `${graphic.label}`

package/dist/esm/components/design/card/cardContent/CardContentLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContentLine.js","names":["React","Icon","LogoLink","OwnerDetailsPopup","StatusLightsBar","CardContentLine","id","icon","logo","graphic","owner","title","hideTitle","onLineClick","children","statuses","handleLineClick","createElement","className","type","onClick","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardContent/CardContentLine.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactElement,\n  ReactNode\n} from 'react';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { GenericFunction } from '../../../../interfaces';\nimport { StatusIndicatorsInterface } from '../../statusIndicators/statusIndicators.interface';\nimport { StatusLightsBar } from '../../statusIndicators/statusLightsBar/StatusLightsBar';\n\nimport './cardContentLine.scss';\n\nexport interface CardContentLineProps {\n  id: string;\n  icon?: IconProps;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email: string;\n    phone: string;\n  },\n  title: string;\n  hideTitle?: boolean;\n  onLineClick: GenericFunction;\n  children: ReactNode | ReactElement;\n  statuses?: StatusIndicatorsInterface;\n}\n\nexport const CardContentLine: React.FC<CardContentLineProps> = (\n  {\n    id,\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    hideTitle = false,\n    onLineClick = () => {},\n    children,\n    statuses\n  }\n) => {\n  const handleLineClick = () => {\n    onLineClick(id);\n  };\n\n  return (\n    <div id={ id } className=\"cardContentLine\" title={ title }>\n      <button type=\"button\" className=\"cardContentLineButton\" onClick={ handleLineClick }>\n        { icon && <Icon { ...icon } /> }\n\n        { logo && <LogoLink { ...logo } /> }\n\n        { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n        <span className={ hideTitle ? 'sr-only' : 'cardContentLineTitle' }>{ title }</span>\n      </button>\n\n      <div className=\"cardContentLineContent\">\n        {\n          children\n        }\n      </div>\n\n      {\n        statuses && <StatusLightsBar { ...statuses } />\n      }\n\n      {\n        owner && <OwnerDetailsPopup owner={ owner } />\n      }\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAGL,OAAO;AACd,SAASC,IAAI,QAAmB,4BAA4B;AAC5D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAG7E,SAASC,eAAe,QAAQ,wDAAwD;AAExF,OAAO,wBAAwB;AAsB/B,OAAO,MAAMC,eAA+C,GAAGA,CAC7D;EACEC,EAAE;EACFC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,QAAQ;EACRC;AACF,CAAC,KACE;EACH,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC5BH,WAAW,CAACP,EAAE,CAAC;EACjB,CAAC;EAED,oBACEN,KAAA,CAAAiB,aAAA;IAAKX,EAAE,EAAGA,EAAI;IAACY,SAAS,EAAC,iBAAiB;IAACP,KAAK,EAAGA;EAAO,gBACxDX,KAAA,CAAAiB,aAAA;IAAQE,IAAI,EAAC,QAAQ;IAACD,SAAS,EAAC,uBAAuB;IAACE,OAAO,EAAGJ;EAAiB,GAC/ET,IAAI,iBAAIP,KAAA,CAAAiB,aAAA,CAAChB,IAAI,EAAMM,IAAQ,CAAC,EAE5BC,IAAI,iBAAIR,KAAA,CAAAiB,aAAA,CAACf,QAAQ,EAAMM,IAAQ,CAAC,EAEhCC,OAAO,iBAAIT,KAAA,CAAAiB,aAAA;IAAKI,GAAG,EAAGZ,OAAO,CAACa,QAAU;IAACJ,SAAS,EAAC,WAAW;IAACK,GAAG,EAAG,GAAId,OAAO,CAACe,KAAK;EAAK,CAAE,CAAC,eAEhGxB,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAGN,SAAS,GAAG,SAAS,GAAG;EAAwB,GAAGD,KAAa,CAC5E,CAAC,eAETX,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAwB,GAEnCJ,QAEC,CAAC,EAGJC,QAAQ,iBAAIf,KAAA,CAAAiB,aAAA,CAACb,eAAe,EAAMW,QAAY,CAAC,EAI/CL,KAAK,iBAAIV,KAAA,CAAAiB,aAAA,CAACd,iBAAiB;IAACO,KAAK,EAAGA;EAAO,CAAE,CAE5C,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"CardContentLine.js","names":["React","renderIcon","LogoLink","OwnerDetailsPopup","StatusLightsBar","CardContentLine","id","icon","logo","graphic","owner","title","hideTitle","onLineClick","children","statuses","handleLineClick","createElement","className","type","onClick","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardContent/CardContentLine.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactElement,\n  ReactNode\n} from 'react';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { GenericFunction } from '../../../../interfaces';\nimport { StatusIndicatorsInterface } from '../../statusIndicators/statusIndicators.interface';\nimport { StatusLightsBar } from '../../statusIndicators/statusLightsBar/StatusLightsBar';\n\nimport './cardContentLine.scss';\n\nexport interface CardContentLineProps {\n  id: string;\n  icon?: IconSource;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email: string;\n    phone: string;\n  },\n  title: string;\n  hideTitle?: boolean;\n  onLineClick: GenericFunction;\n  children: ReactNode | ReactElement;\n  statuses?: StatusIndicatorsInterface;\n}\n\nexport const CardContentLine: React.FC<CardContentLineProps> = (\n  {\n    id,\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    hideTitle = false,\n    onLineClick = () => {},\n    children,\n    statuses\n  }\n) => {\n  const handleLineClick = () => {\n    onLineClick(id);\n  };\n\n  return (\n    <div id={ id } className=\"cardContentLine\" title={ title }>\n      <button type=\"button\" className=\"cardContentLineButton\" onClick={ handleLineClick }>\n        { renderIcon(icon) }\n\n        { logo && <LogoLink { ...logo } /> }\n\n        { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n        <span className={ hideTitle ? 'sr-only' : 'cardContentLineTitle' }>{ title }</span>\n      </button>\n\n      <div className=\"cardContentLineContent\">\n        {\n          children\n        }\n      </div>\n\n      {\n        statuses && <StatusLightsBar { ...statuses } />\n      }\n\n      {\n        owner && <OwnerDetailsPopup owner={ owner } />\n      }\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAGL,OAAO;AACd,SAAqBC,UAAU,QAAQ,iCAAiC;AACxE,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAG7E,SAASC,eAAe,QAAQ,wDAAwD;AAExF,OAAO,wBAAwB;AAsB/B,OAAO,MAAMC,eAA+C,GAAGA,CAC7D;EACEC,EAAE;EACFC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,QAAQ;EACRC;AACF,CAAC,KACE;EACH,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC5BH,WAAW,CAACP,EAAE,CAAC;EACjB,CAAC;EAED,oBACEN,KAAA,CAAAiB,aAAA;IAAKX,EAAE,EAAGA,EAAI;IAACY,SAAS,EAAC,iBAAiB;IAACP,KAAK,EAAGA;EAAO,gBACxDX,KAAA,CAAAiB,aAAA;IAAQE,IAAI,EAAC,QAAQ;IAACD,SAAS,EAAC,uBAAuB;IAACE,OAAO,EAAGJ;EAAiB,GAC/Ef,UAAU,CAACM,IAAI,CAAC,EAEhBC,IAAI,iBAAIR,KAAA,CAAAiB,aAAA,CAACf,QAAQ,EAAMM,IAAQ,CAAC,EAEhCC,OAAO,iBAAIT,KAAA,CAAAiB,aAAA;IAAKI,GAAG,EAAGZ,OAAO,CAACa,QAAU;IAACJ,SAAS,EAAC,WAAW;IAACK,GAAG,EAAG,GAAId,OAAO,CAACe,KAAK;EAAK,CAAE,CAAC,eAEhGxB,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAGN,SAAS,GAAG,SAAS,GAAG;EAAwB,GAAGD,KAAa,CAC5E,CAAC,eAETX,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAwB,GAEnCJ,QAEC,CAAC,EAGJC,QAAQ,iBAAIf,KAAA,CAAAiB,aAAA,CAACb,eAAe,EAAMW,QAAY,CAAC,EAI/CL,KAAK,iBAAIV,KAAA,CAAAiB,aAAA,CAACd,iBAAiB;IAACO,KAAK,EAAGA;EAAO,CAAE,CAE5C,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Icon } from '../../icons/basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import { LogoLink } from '../../logos/LogoLink';
 import { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';
 import { SimpleButton } from '../../../form/buttons/SimpleButton';
@@ -21,7 +21,7 @@ export const CardHeaderItem = ({
 }, url ? /*#__PURE__*/React.createElement("a", {
   className: "cardHeaderItemLink",
   href: url
-}, icon && /*#__PURE__*/React.createElement(Icon, icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
+}, renderIcon(icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
   src: graphic.imageUrl,
   className: "logoImage",
   alt: `${graphic.label}`

package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeaderItem.js","names":["React","Icon","LogoLink","OwnerDetailsPopup","SimpleButton","CardHeaderItem","icon","logo","graphic","owner","title","content","hideTitle","url","actionButton","createElement","className","href","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardHeader/CardHeaderItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { ButtonProps } from '../../../form/buttons/button.interface';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\n\nexport interface CardHeaderItemProps {\n  icon?: IconProps;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email?: string;\n    phone?: string;\n  },\n  title?: string;\n  content?: ReactNode | ReactElement;\n  hideTitle?: boolean;\n  url?: string;\n  actionButton?: ButtonProps;\n}\n\nexport const CardHeaderItem: React.FC<CardHeaderItemProps> = (\n  {\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    content,\n    hideTitle = false,\n    url,\n    actionButton\n  }\n) => (\n  <div className=\"cardHeaderItem\" title={ title }>\n    {\n      url\n        ? (\n          <a className=\"cardHeaderItemLink\" href={ url }>\n            { icon && <Icon { ...icon } /> }\n\n            { logo && <LogoLink { ...logo } /> }\n\n            { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n            <span className={ hideTitle ? 'sr-only' : 'cardHeaderItemTitle' }>{ content || title }</span>\n          </a>\n        )\n        : content\n    }\n\n    {\n      owner && <OwnerDetailsPopup owner={ owner } />\n    }\n\n    {\n      actionButton && <SimpleButton { ...actionButton } />\n    }\n  </div>\n);\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAmC,OAAO;AACtD,SAASC,IAAI,QAAmB,4BAA4B;AAC5D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAE7E,SAASC,YAAY,QAAQ,oCAAoC;AAqBjE,OAAO,MAAMC,cAA6C,GAAGA,CAC3D;EACEC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,SAAS,GAAG,KAAK;EACjBC,GAAG;EACHC;AACF,CAAC,kBAEDd,KAAA,CAAAe,aAAA;EAAKC,SAAS,EAAC,gBAAgB;EAACN,KAAK,EAAGA;AAAO,GAE3CG,GAAG,gBAECb,KAAA,CAAAe,aAAA;EAAGC,SAAS,EAAC,oBAAoB;EAACC,IAAI,EAAGJ;AAAK,GAC1CP,IAAI,iBAAIN,KAAA,CAAAe,aAAA,CAACd,IAAI,EAAMK,IAAQ,CAAC,EAE5BC,IAAI,iBAAIP,KAAA,CAAAe,aAAA,CAACb,QAAQ,EAAMK,IAAQ,CAAC,EAEhCC,OAAO,iBAAIR,KAAA,CAAAe,aAAA;EAAKG,GAAG,EAAGV,OAAO,CAACW,QAAU;EAACH,SAAS,EAAC,WAAW;EAACI,GAAG,EAAG,GAAIZ,OAAO,CAACa,KAAK;AAAK,CAAE,CAAC,eAEhGrB,KAAA,CAAAe,aAAA;EAAMC,SAAS,EAAGJ,SAAS,GAAG,SAAS,GAAG;AAAuB,GAAGD,OAAO,IAAID,KAAa,CAC3F,CAAC,GAEJC,OAAO,EAIXF,KAAK,iBAAIT,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;EAACM,KAAK,EAAGA;AAAO,CAAE,CAAC,EAI9CK,YAAY,iBAAId,KAAA,CAAAe,aAAA,CAACX,YAAY,EAAMU,YAAgB,CAElD,CACN","ignoreList":[]}
+{"version":3,"file":"CardHeaderItem.js","names":["React","renderIcon","LogoLink","OwnerDetailsPopup","SimpleButton","CardHeaderItem","icon","logo","graphic","owner","title","content","hideTitle","url","actionButton","createElement","className","href","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardHeader/CardHeaderItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { ButtonProps } from '../../../form/buttons/button.interface';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\n\nexport interface CardHeaderItemProps {\n  icon?: IconSource;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email?: string;\n    phone?: string;\n  },\n  title?: string;\n  content?: ReactNode | ReactElement;\n  hideTitle?: boolean;\n  url?: string;\n  actionButton?: ButtonProps;\n}\n\nexport const CardHeaderItem: React.FC<CardHeaderItemProps> = (\n  {\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    content,\n    hideTitle = false,\n    url,\n    actionButton\n  }\n) => (\n  <div className=\"cardHeaderItem\" title={ title }>\n    {\n      url\n        ? (\n          <a className=\"cardHeaderItemLink\" href={ url }>\n            { renderIcon(icon) }\n\n            { logo && <LogoLink { ...logo } /> }\n\n            { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n            <span className={ hideTitle ? 'sr-only' : 'cardHeaderItemTitle' }>{ content || title }</span>\n          </a>\n        )\n        : content\n    }\n\n    {\n      owner && <OwnerDetailsPopup owner={ owner } />\n    }\n\n    {\n      actionButton && <SimpleButton { ...actionButton } />\n    }\n  </div>\n);\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAmC,OAAO;AACtD,SAAqBC,UAAU,QAAQ,iCAAiC;AACxE,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAE7E,SAASC,YAAY,QAAQ,oCAAoC;AAqBjE,OAAO,MAAMC,cAA6C,GAAGA,CAC3D;EACEC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,SAAS,GAAG,KAAK;EACjBC,GAAG;EACHC;AACF,CAAC,kBAEDd,KAAA,CAAAe,aAAA;EAAKC,SAAS,EAAC,gBAAgB;EAACN,KAAK,EAAGA;AAAO,GAE3CG,GAAG,gBAECb,KAAA,CAAAe,aAAA;EAAGC,SAAS,EAAC,oBAAoB;EAACC,IAAI,EAAGJ;AAAK,GAC1CZ,UAAU,CAACK,IAAI,CAAC,EAEhBC,IAAI,iBAAIP,KAAA,CAAAe,aAAA,CAACb,QAAQ,EAAMK,IAAQ,CAAC,EAEhCC,OAAO,iBAAIR,KAAA,CAAAe,aAAA;EAAKG,GAAG,EAAGV,OAAO,CAACW,QAAU;EAACH,SAAS,EAAC,WAAW;EAACI,GAAG,EAAG,GAAIZ,OAAO,CAACa,KAAK;AAAK,CAAE,CAAC,eAEhGrB,KAAA,CAAAe,aAAA;EAAMC,SAAS,EAAGJ,SAAS,GAAG,SAAS,GAAG;AAAuB,GAAGD,OAAO,IAAID,KAAa,CAC3F,CAAC,GAEJC,OAAO,EAIXF,KAAK,iBAAIT,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;EAACM,KAAK,EAAGA;AAAO,CAAE,CAAC,EAI9CK,YAAY,iBAAId,KAAA,CAAAe,aAAA,CAACX,YAAY,EAAMU,YAAgB,CAElD,CACN","ignoreList":[]}

package/dist/esm/components/design/dialog/Dialog.js

@@ -64,7 +64,9 @@ export const Dialog = ({
     } else {
       HandleClose();
     }
-  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
+    // customCssClasses is intentionally excluded: it isn't read here, and including it (as a
+    // fresh object reference on every parent render) re-ran this effect and stole focus on each keystroke.
+  }, [createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
   const DialogCloseButton = () => /*#__PURE__*/React.createElement("button", {
     ref: dialogCloseButton,
     className: "dialogClose",

package/dist/esm/components/design/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","xmarkLarge","SvgIcon","EllipsisTooltip","useDialogOverlay","useFocusTrap","Dialog","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","dialogElement","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","HandleClose","dialogCssClass","dialog","HandleOpen","dialogOverlay","showOverlay","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","svgDefinition","role","tabIndex","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          {\n            footer && (\n              <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n                { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n              </div>\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","xmarkLarge","SvgIcon","EllipsisTooltip","useDialogOverlay","useFocusTrap","Dialog","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","dialogElement","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","HandleClose","dialogCssClass","dialog","HandleOpen","dialogOverlay","showOverlay","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","svgDefinition","role","tabIndex","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n    // customCssClasses is intentionally excluded: it isn't read here, and including it (as a\n    // fresh object reference on every parent render) re-ran this effect and stole focus on each keystroke.\n  }, [createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          {\n            footer && (\n              <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n                { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n              </div>\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/dialog/dialog.css

@@ -129,6 +129,11 @@
   justify-content: flex-start;
   min-height: var(--dialogFooterHeight, 50px);
 }
+.dialog .dialogFooter .actionButtons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
 .dialog .dialogFullScroller {
   flex: 1;
   box-sizing: border-box;

package/dist/esm/components/design/headerBar/HeaderBar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { Icon } from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';
 import { SimpleButton } from '../../form/buttons/SimpleButton';
 import { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';
@@ -24,7 +24,7 @@ export const HeaderBar = ({
   const Heading = `h${headingLevel}`;
   return /*#__PURE__*/React.createElement("header", {
     className: headerCssClass
-  }, leftIcon && /*#__PURE__*/React.createElement(Icon, leftIcon), text && /*#__PURE__*/React.createElement(Heading, null, text), children, buttons && /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(leftIcon), text && /*#__PURE__*/React.createElement(Heading, null, text), children, buttons && /*#__PURE__*/React.createElement("div", {
     className: "headerButtons"
   }, buttons.map(button => {
     if (button.kind === 'notifications') {
@@ -35,6 +35,6 @@ export const HeaderBar = ({
     return /*#__PURE__*/React.createElement(SimpleButton, _extends({
       key: button.id
     }, button));
-  })), rightIcon && /*#__PURE__*/React.createElement(Icon, rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
+  })), renderIcon(rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
 };
 //# sourceMappingURL=HeaderBar.js.map

package/dist/esm/components/design/headerBar/HeaderBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.js","names":["_extends","React","Icon","NotificationIcon","SimpleButton","NotificationsButton","HeaderBar","text","leftIcon","rightIcon","buttons","notificationIcon","headingLevel","children","headerCssClass","Heading","createElement","className","map","button","kind","key","id"],"sources":["../../../../../src/components/design/headerBar/HeaderBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { HeaderTextInterface } from '../../../interfaces/headerText.interface';\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { ButtonProps } from '../../form/buttons/button.interface';\n\nimport './headerBar.scss';\n\ntype HeadingLevel = NonNullable<HeaderTextInterface['headingLevel']>;\ntype HeadingTag = `h${ HeadingLevel }`;\n\nexport const HeaderBar: React.FC<HeaderTextInterface> = (\n  {\n    text,\n    leftIcon,\n    rightIcon,\n    buttons,\n    notificationIcon,\n    headingLevel = 2,\n    children\n  }\n) => {\n  const headerCssClass = `headerBar \n    ${ leftIcon ? 'withLeftIcon' : '' }\n    ${ rightIcon ? 'withRightIcon' : '' }\n    ${ notificationIcon ? 'withNotification' : '' }\n    `;\n  const Heading: HeadingTag = `h${ headingLevel }`;\n\n  return (\n    <header className={ headerCssClass }>\n      {\n        leftIcon && <Icon { ...leftIcon } />\n      }\n\n      {\n        text && <Heading>{ text }</Heading>\n      }\n\n      { children }\n\n      {\n        buttons\n        && (\n          <div className=\"headerButtons\">\n            {\n              buttons.map((button) => {\n                if (button.kind === 'notifications') {\n                  return <NotificationsButton key={ button.id } { ...button } />;\n                }\n                return <SimpleButton key={ button.id } { ...(button as ButtonProps) } />;\n              })\n            }\n          </div>\n        )\n      }\n\n      {\n        rightIcon && <Icon { ...rightIcon } />\n      }\n\n      {\n        notificationIcon && <NotificationIcon { ...notificationIcon } />\n      }\n    </header>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,gBAAgB,QAAQ,4CAA4C;AAC7E,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,mBAAmB,QAAQ,4DAA4D;AAGhG,OAAO,kBAAkB;AAKzB,OAAO,MAAMC,SAAwC,GAAGA,CACtD;EACEC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,gBAAgB;EAChBC,YAAY,GAAG,CAAC;EAChBC;AACF,CAAC,KACE;EACH,MAAMC,cAAc,GAAG;AACzB,MAAON,QAAQ,GAAG,cAAc,GAAG,EAAE;AACrC,MAAOC,SAAS,GAAG,eAAe,GAAG,EAAE;AACvC,MAAOE,gBAAgB,GAAG,kBAAkB,GAAG,EAAE;AACjD,KAAK;EACH,MAAMI,OAAmB,GAAG,IAAKH,YAAY,EAAG;EAEhD,oBACEX,KAAA,CAAAe,aAAA;IAAQC,SAAS,EAAGH;EAAgB,GAEhCN,QAAQ,iBAAIP,KAAA,CAAAe,aAAA,CAACd,IAAI,EAAMM,QAAY,CAAC,EAIpCD,IAAI,iBAAIN,KAAA,CAAAe,aAAA,CAACD,OAAO,QAAGR,IAAe,CAAC,EAGnCM,QAAQ,EAGRH,OAAO,iBAELT,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAC;EAAe,GAE1BP,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IACtB,IAAIA,MAAM,CAACC,IAAI,KAAK,eAAe,EAAE;MACnC,oBAAOnB,KAAA,CAAAe,aAAA,CAACX,mBAAmB,EAAAL,QAAA;QAACqB,GAAG,EAAGF,MAAM,CAACG;MAAI,GAAMH,MAAM,CAAI,CAAC;IAChE;IACA,oBAAOlB,KAAA,CAAAe,aAAA,CAACZ,YAAY,EAAAJ,QAAA;MAACqB,GAAG,EAAGF,MAAM,CAACG;IAAI,GAAOH,MAAM,CAAoB,CAAC;EAC1E,CAAC,CAEA,CACN,EAIDV,SAAS,iBAAIR,KAAA,CAAAe,aAAA,CAACd,IAAI,EAAMO,SAAa,CAAC,EAItCE,gBAAgB,iBAAIV,KAAA,CAAAe,aAAA,CAACb,gBAAgB,EAAMQ,gBAAoB,CAE3D,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"file":"HeaderBar.js","names":["_extends","React","renderIcon","NotificationIcon","SimpleButton","NotificationsButton","HeaderBar","text","leftIcon","rightIcon","buttons","notificationIcon","headingLevel","children","headerCssClass","Heading","createElement","className","map","button","kind","key","id"],"sources":["../../../../../src/components/design/headerBar/HeaderBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { HeaderTextInterface } from '../../../interfaces/headerText.interface';\nimport { renderIcon } from '../../../helpers/iconHelpers';\nimport { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { ButtonProps } from '../../form/buttons/button.interface';\n\nimport './headerBar.scss';\n\ntype HeadingLevel = NonNullable<HeaderTextInterface['headingLevel']>;\ntype HeadingTag = `h${ HeadingLevel }`;\n\nexport const HeaderBar: React.FC<HeaderTextInterface> = (\n  {\n    text,\n    leftIcon,\n    rightIcon,\n    buttons,\n    notificationIcon,\n    headingLevel = 2,\n    children\n  }\n) => {\n  const headerCssClass = `headerBar \n    ${ leftIcon ? 'withLeftIcon' : '' }\n    ${ rightIcon ? 'withRightIcon' : '' }\n    ${ notificationIcon ? 'withNotification' : '' }\n    `;\n  const Heading: HeadingTag = `h${ headingLevel }`;\n\n  return (\n    <header className={ headerCssClass }>\n      { renderIcon(leftIcon) }\n\n      {\n        text && <Heading>{ text }</Heading>\n      }\n\n      { children }\n\n      {\n        buttons\n        && (\n          <div className=\"headerButtons\">\n            {\n              buttons.map((button) => {\n                if (button.kind === 'notifications') {\n                  return <NotificationsButton key={ button.id } { ...button } />;\n                }\n                return <SimpleButton key={ button.id } { ...(button as ButtonProps) } />;\n              })\n            }\n          </div>\n        )\n      }\n\n      { renderIcon(rightIcon) }\n\n      {\n        notificationIcon && <NotificationIcon { ...notificationIcon } />\n      }\n    </header>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,8BAA8B;AACzD,SAASC,gBAAgB,QAAQ,4CAA4C;AAC7E,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,mBAAmB,QAAQ,4DAA4D;AAGhG,OAAO,kBAAkB;AAKzB,OAAO,MAAMC,SAAwC,GAAGA,CACtD;EACEC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,gBAAgB;EAChBC,YAAY,GAAG,CAAC;EAChBC;AACF,CAAC,KACE;EACH,MAAMC,cAAc,GAAG;AACzB,MAAON,QAAQ,GAAG,cAAc,GAAG,EAAE;AACrC,MAAOC,SAAS,GAAG,eAAe,GAAG,EAAE;AACvC,MAAOE,gBAAgB,GAAG,kBAAkB,GAAG,EAAE;AACjD,KAAK;EACH,MAAMI,OAAmB,GAAG,IAAKH,YAAY,EAAG;EAEhD,oBACEX,KAAA,CAAAe,aAAA;IAAQC,SAAS,EAAGH;EAAgB,GAChCZ,UAAU,CAACM,QAAQ,CAAC,EAGpBD,IAAI,iBAAIN,KAAA,CAAAe,aAAA,CAACD,OAAO,QAAGR,IAAe,CAAC,EAGnCM,QAAQ,EAGRH,OAAO,iBAELT,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAC;EAAe,GAE1BP,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IACtB,IAAIA,MAAM,CAACC,IAAI,KAAK,eAAe,EAAE;MACnC,oBAAOnB,KAAA,CAAAe,aAAA,CAACX,mBAAmB,EAAAL,QAAA;QAACqB,GAAG,EAAGF,MAAM,CAACG;MAAI,GAAMH,MAAM,CAAI,CAAC;IAChE;IACA,oBAAOlB,KAAA,CAAAe,aAAA,CAACZ,YAAY,EAAAJ,QAAA;MAACqB,GAAG,EAAGF,MAAM,CAACG;IAAI,GAAOH,MAAM,CAAoB,CAAC;EAC1E,CAAC,CAEA,CACN,EAGDjB,UAAU,CAACO,SAAS,CAAC,EAGrBE,gBAAgB,iBAAIV,KAAA,CAAAe,aAAA,CAACb,gBAAgB,EAAMQ,gBAAoB,CAE3D,CAAC;AAEb,CAAC","ignoreList":[]}

package/dist/esm/components/design/icons/notificationIcon/NotificationIcon.js

@@ -1,8 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { Icon } from '../basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import './notificationIcon.css';
 export const NotificationIcon = ({
   icon,
@@ -13,9 +12,9 @@ export const NotificationIcon = ({
   return /*#__PURE__*/React.createElement("span", {
     title: hoverText,
     className: `notificationIcon ${customCssClass || ''}`
-  }, icon && /*#__PURE__*/React.createElement(Icon, _extends({}, icon, {
-    customCssClass: customCssClass
-  })), text);
+  }, renderIcon(icon, {
+    customCssClass
+  }), text);
 };
 export default NotificationIcon;
 //# sourceMappingURL=NotificationIcon.js.map

package/dist/esm/components/design/icons/notificationIcon/NotificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationIcon.js","names":["_extends","React","Icon","NotificationIcon","icon","customCssClass","text","hoverText","createElement","title","className"],"sources":["../../../../../../src/components/design/icons/notificationIcon/NotificationIcon.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Icon, IconProps } from '../basicIcon/Icon';\n\nimport './notificationIcon.scss';\n\nexport interface NotificationIconProps {\n  icon?: IconProps;\n  customCssClass?: string;\n  text?: number | string;\n}\n\nexport const NotificationIcon: React.FC<NotificationIconProps> = (\n  {\n    icon,\n    customCssClass,\n    text = ''\n  }\n) => {\n  const hoverText = `You have ${ text !== 0 ? text : 'no' } notifications`;\n  return (\n    <span title={ hoverText } className={ `notificationIcon ${ customCssClass || '' }` }>\n      {\n        icon\n        && <Icon { ...icon } customCssClass={ customCssClass } />\n      }\n      {\n        text\n      }\n    </span>\n  );\n};\n\nexport default NotificationIcon;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,mBAAmB;AAEnD,OAAO,yBAAyB;AAQhC,OAAO,MAAMC,gBAAiD,GAAGA,CAC/D;EACEC,IAAI;EACJC,cAAc;EACdC,IAAI,GAAG;AACT,CAAC,KACE;EACH,MAAMC,SAAS,GAAG,YAAaD,IAAI,KAAK,CAAC,GAAGA,IAAI,GAAG,IAAI,gBAAiB;EACxE,oBACEL,KAAA,CAAAO,aAAA;IAAMC,KAAK,EAAGF,SAAW;IAACG,SAAS,EAAG,oBAAqBL,cAAc,IAAI,EAAE;EAAK,GAEhFD,IAAI,iBACDH,KAAA,CAAAO,aAAA,CAACN,IAAI,EAAAF,QAAA,KAAMI,IAAI;IAAGC,cAAc,EAAGA;EAAgB,EAAE,CAAC,EAGzDC,IAEE,CAAC;AAEX,CAAC;AAED,eAAeH,gBAAgB","ignoreList":[]}
+{"version":3,"file":"NotificationIcon.js","names":["React","renderIcon","NotificationIcon","icon","customCssClass","text","hoverText","createElement","title","className"],"sources":["../../../../../../src/components/design/icons/notificationIcon/NotificationIcon.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './notificationIcon.scss';\n\nexport interface NotificationIconProps {\n  icon?: IconSource;\n  customCssClass?: string;\n  text?: number | string;\n}\n\nexport const NotificationIcon: React.FC<NotificationIconProps> = (\n  {\n    icon,\n    customCssClass,\n    text = ''\n  }\n) => {\n  const hoverText = `You have ${ text !== 0 ? text : 'no' } notifications`;\n  return (\n    <span title={ hoverText } className={ `notificationIcon ${ customCssClass || '' }` }>\n      { renderIcon(icon, { customCssClass }) }\n      {\n        text\n      }\n    </span>\n  );\n};\n\nexport default NotificationIcon;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAqBC,UAAU,QAAQ,iCAAiC;AAExE,OAAO,yBAAyB;AAQhC,OAAO,MAAMC,gBAAiD,GAAGA,CAC/D;EACEC,IAAI;EACJC,cAAc;EACdC,IAAI,GAAG;AACT,CAAC,KACE;EACH,MAAMC,SAAS,GAAG,YAAaD,IAAI,KAAK,CAAC,GAAGA,IAAI,GAAG,IAAI,gBAAiB;EACxE,oBACEL,KAAA,CAAAO,aAAA;IAAMC,KAAK,EAAGF,SAAW;IAACG,SAAS,EAAG,oBAAqBL,cAAc,IAAI,EAAE;EAAK,GAChFH,UAAU,CAACE,IAAI,EAAE;IAAEC;EAAe,CAAC,CAAC,EAEpCC,IAEE,CAAC;AAEX,CAAC;AAED,eAAeH,gBAAgB","ignoreList":[]}

package/dist/esm/components/design/paginators/Paginator.js

@@ -134,9 +134,7 @@ export const Paginator = ({
     id: `paginator_${id}_first`,
     disabled: activePage === 1,
     onClickHandler: () => handlePageChange(1),
-    leftIcon: isNonNullFirstIcon ? {
-      icon: buttonConfig?.firstButton?.icon || 'first'
-    } : undefined,
+    leftIcon: isNonNullFirstIcon ? buttonConfig?.firstButton?.icon || 'first' : undefined,
     hideLabel: buttonConfig?.firstButton?.label ? false : true,
     label: buttonConfig?.firstButton?.label || 'Go to first item',
     buttonStyle: {
@@ -146,9 +144,7 @@ export const Paginator = ({
     id: `paginator_${id}_previous`,
     disabled: activePage === 1,
     onClickHandler: () => handlePageChange(activePage - 1),
-    leftIcon: isNonNullPrevIcon ? {
-      icon: buttonConfig?.previousButton?.icon || 'previous2'
-    } : undefined,
+    leftIcon: isNonNullPrevIcon ? buttonConfig?.previousButton?.icon || 'previous2' : undefined,
     hideLabel: buttonConfig?.previousButton?.label ? false : true,
     label: buttonConfig?.previousButton?.label || `Show previous ${pageSize} items`,
     buttonStyle: {
@@ -173,9 +169,7 @@ export const Paginator = ({
     id: `paginator_${id}_next`,
     disabled: activePage === totalPages,
     onClickHandler: () => handlePageChange(activePage + 1),
-    rightIcon: isNonNullNextIcon ? {
-      icon: buttonConfig?.nextButton?.icon || 'next2'
-    } : undefined,
+    rightIcon: isNonNullNextIcon ? buttonConfig?.nextButton?.icon || 'next2' : undefined,
     hideLabel: buttonConfig?.nextButton?.label ? false : true,
     label: buttonConfig?.nextButton?.label || `Show next ${pageSize} items`,
     buttonStyle: {
@@ -185,9 +179,7 @@ export const Paginator = ({
     id: `paginator_${id}_last`,
     disabled: activePage === totalPages,
     onClickHandler: () => handlePageChange(totalPages),
-    rightIcon: isNonNullLastIcon ? {
-      icon: buttonConfig?.lastButton?.icon || 'last'
-    } : undefined,
+    rightIcon: isNonNullLastIcon ? buttonConfig?.lastButton?.icon || 'last' : undefined,
     hideLabel: buttonConfig?.lastButton?.label ? false : true,
     label: buttonConfig?.lastButton?.label || 'Go to last item',
     buttonStyle: {