@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/revealMore/types/revealMoreTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=revealMoreTypes.js.map

package/dist/esm/components/design/revealMore/types/revealMoreTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revealMoreTypes.js","names":[],"sources":["../../../../../../src/components/design/revealMore/types/revealMoreTypes.ts"],"sourcesContent":["import React from 'react';\n\n// Props shared by both components\nexport type BaseRevealMoreProps = {\n  children: React.ReactNode | string;\n  customCssClass?: string;\n}\n\n// Button configuration types\nexport type CustomButtonProps = {\n  revealMoreButton: React.ReactElement;\n  revealLessButton: React.ReactElement;\n}\n\nexport type ManagedButtonProps = {\n  revealMoreLabel?: string;\n  revealLessLabel?: string;\n  revealMoreLabelOnClickHandler?: () => void;\n  revealLessLabelOnClickHandler?: () => void;\n  icon?: {\n    onRevealMore: string;\n    onRevealLess: string;\n  };\n}\n\n// Component-specific props\nexport type RevealMoreInlineProps = BaseRevealMoreProps & (CustomButtonProps | ManagedButtonProps) & {\n  characterClamp?: number;\n  children: string; \n}\n\nexport type RevealMoreBelowProps = BaseRevealMoreProps & (CustomButtonProps | ManagedButtonProps) & {\n  lineClamp?: number;\n  children: React.ReactNode | string;\n}\n\n// Main component props \nexport type RevealMoreProps = \n  | ({ labelStyle: 'inline' } & RevealMoreInlineProps)\n  | ({ labelStyle: 'below' } & RevealMoreBelowProps);"],"mappings":"","ignoreList":[]}

package/dist/esm/components/design/sidePanel/SidePanel.js

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Icon } from '../icons/basicIcon/Icon';
+import './sidePanel.css';
+export const SidePanel = ({
+  id,
+  panelLabel = 'side panel',
+  size = 'm',
+  position = 'right',
+  positionRefNode,
+  animation = 'slide',
+  icons,
+  onClose = () => {},
+  onOpen = () => {},
+  isOpen = false,
+  allowOverflow = false,
+  isFloating = true,
+  customCssClass,
+  customControlButtonCssClass = '',
+  children
+}) => {
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const panelElement = useRef(null);
+  const TOGGLE_TEXT = `Open and close ${panelLabel}`;
+  const panelCloseButton = useRef(null);
+  const TogglePanelOpenState = useCallback(() => {
+    const newStateIsOpen = !isOpenState;
+    setIsOpenState(newStateIsOpen);
+    if (newStateIsOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [isOpenState, onClose, onOpen]);
+  const getIconCssClass = () => {
+    if (icons) {
+      return isOpenState ? icons.closed : icons.open;
+    }
+    if (isOpenState) {
+      return 'close';
+    }
+    switch (position) {
+      case 'left':
+        return 'chevronRightSelect';
+      case 'top':
+        return 'chevronDownSelect';
+      case 'bottom':
+        return 'chevronUpSelect';
+      default:
+        return 'chevronLeftSelect';
+    }
+  };
+  const PanelCloseButton = () => /*#__PURE__*/React.createElement("button", {
+    ref: panelCloseButton,
+    className: `sidePanelClose ${customControlButtonCssClass}`,
+    title: TOGGLE_TEXT,
+    type: "button",
+    onClick: () => TogglePanelOpenState()
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: getIconCssClass()
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Open and close panel"));
+  const panelCssClass = useCallback(() => `sidePanel 
+    ${isOpenState ? 'isOpen' : ''}
+    ${allowOverflow ? 'allowOverflow' : ''}
+    ${isFloating ? 'isFloating' : ''}
+    sidePanelSize_${size}
+    sidePanelPosition_${position}
+    sidePanelAnimation_${animation}
+    ${customCssClass || ''}`, [isOpenState, isFloating, size, position, animation, customCssClass]);
+  useEffect(() => {
+    setIsOpenState(isOpen);
+  }, [isOpen]);
+  const getParentNode = () => {
+    if (positionRefNode) {
+      if ('current' in positionRefNode) {
+        return positionRefNode.current ? positionRefNode.current : document.body;
+      }
+      return positionRefNode;
+    }
+    return document.body;
+  };
+  useEffect(() => {
+    const parentNode = getParentNode();
+    parentNode.classList.add('withSidePanels');
+    if (isOpenState) {
+      parentNode.classList.add(`sidePanel_${size}_${position}`);
+    } else {
+      parentNode.classList.remove(`sidePanel_${size}_${position}`);
+    }
+    return () => {
+      parentNode.classList.remove(`sidePanel_${size}_${position}`);
+    };
+  }, [animation, isOpenState, position, size]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: panelElement,
+    title: panelLabel,
+    id: id,
+    className: panelCssClass()
+  }, animation === 'slide' && /*#__PURE__*/React.createElement(PanelCloseButton, null), /*#__PURE__*/React.createElement("div", {
+    className: "sidePanelContent",
+    tabIndex: 0
+  }, children));
+};
+//# sourceMappingURL=SidePanel.js.map

package/dist/esm/components/design/sidePanel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","names":["React","useCallback","useEffect","useRef","useState","Icon","SidePanel","id","panelLabel","size","position","positionRefNode","animation","icons","onClose","onOpen","isOpen","allowOverflow","isFloating","customCssClass","customControlButtonCssClass","children","isOpenState","setIsOpenState","panelElement","TOGGLE_TEXT","panelCloseButton","TogglePanelOpenState","newStateIsOpen","getIconCssClass","closed","open","PanelCloseButton","createElement","ref","className","title","type","onClick","icon","panelCssClass","getParentNode","current","document","body","parentNode","classList","add","remove","tabIndex"],"sources":["../../../../../src/components/design/sidePanel/SidePanel.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactNode, useCallback, useEffect, useRef, useState\n} from 'react';\nimport { GenericFunction } from '../../../interfaces';\nimport { Icon } from '../icons/basicIcon/Icon';\n\nimport './sidePanel.scss';\n\nexport interface SidePanelInterface {\n  id: string;\n  panelLabel?: string;\n  size?: 's' | 'm' | 'l';\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  positionRefNode?: HTMLElement | React.RefObject<HTMLElement>;\n  animation?: 'none' | 'slide';\n  icons?: {\n    open: string;\n    closed: string;\n  }\n  onClose?: GenericFunction;\n  onOpen?: GenericFunction;\n  isOpen?: boolean;\n  allowOverflow?: boolean;\n  isFloating?: boolean;\n  customCssClass?: string;\n  customControlButtonCssClass?: string;\n  children: ReactNode;\n}\n\nexport const SidePanel: React.FC<SidePanelInterface> = (\n  {\n    id,\n    panelLabel = 'side panel',\n    size = 'm',\n    position = 'right',\n    positionRefNode,\n    animation = 'slide',\n    icons,\n    onClose = () => {},\n    onOpen = () => {},\n    isOpen = false,\n    allowOverflow = false,\n    isFloating = true,\n    customCssClass,\n    customControlButtonCssClass = '',\n    children\n  }\n) => {\n  const [isOpenState, setIsOpenState] = useState(isOpen);\n  const panelElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = `Open and close ${ panelLabel }`;\n  const panelCloseButton = useRef(null);\n\n  const TogglePanelOpenState = useCallback(() => {\n    const newStateIsOpen = !isOpenState;\n    setIsOpenState(newStateIsOpen);\n    if (newStateIsOpen) {\n      onOpen();\n    } else {\n      onClose();\n    }\n  }, [isOpenState, onClose, onOpen]);\n\n  const getIconCssClass = () => {\n    if (icons) {\n      return isOpenState ? icons.closed : icons.open;\n    }\n\n    if (isOpenState) {\n      return 'close';\n    }\n\n    switch (position) {\n    case 'left':\n      return 'chevronRightSelect';\n    case 'top':\n      return 'chevronDownSelect';\n    case 'bottom':\n      return 'chevronUpSelect';\n    default:\n      return 'chevronLeftSelect';\n    }\n  };\n\n  const PanelCloseButton: React.FC = () => (\n    <button\n      ref={ panelCloseButton }\n      className={ `sidePanelClose ${ customControlButtonCssClass }` }\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => TogglePanelOpenState() }\n    >\n      <Icon icon={ getIconCssClass() } />\n      <span className=\"sr-only\">Open and close panel</span>\n    </button>\n  );\n\n  const panelCssClass = useCallback(() =>\n    `sidePanel \n    ${ isOpenState ? 'isOpen' : '' }\n    ${ allowOverflow ? 'allowOverflow' : '' }\n    ${ isFloating ? 'isFloating' : '' }\n    sidePanelSize_${ size }\n    sidePanelPosition_${ position }\n    sidePanelAnimation_${ animation }\n    ${ customCssClass || '' }`,\n  [isOpenState, isFloating, size, position, animation, customCssClass]);\n\n  useEffect(() => {\n    setIsOpenState(isOpen);\n  }, [isOpen]);\n\n  const getParentNode = () => {\n    if (positionRefNode) {\n      if ('current' in positionRefNode) {\n        return positionRefNode.current ? positionRefNode.current : document.body;\n      }\n      return positionRefNode;\n    }\n    return document.body;\n  };\n\n  useEffect(() => {\n    const parentNode = getParentNode();\n\n    parentNode.classList.add('withSidePanels');\n    if (isOpenState) {\n      parentNode.classList.add(`sidePanel_${ size }_${ position }`);\n    } else {\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    }\n    return () =>{\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    };\n  }, [animation, isOpenState, position, size]);\n\n  return (\n    <div ref={ panelElement } title={ panelLabel } id={ id } className={ panelCssClass() }>\n      { animation === 'slide' && <PanelCloseButton /> }\n      { /* eslint-disable-next-line jsxA11y/no-noninteractive-tabindex */ }\n      <div className=\"sidePanelContent\" tabIndex={ 0 }>\n        { children }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,178 @@
+/* BODY CLASSES FOR NON-FLOATING VERSIONS */
+body.withSidePanels,
+.panelContainer.withSidePanels {
+  transition: none;
+}
+body.withSidePanels.sidePanel_s_left,
+.panelContainer.withSidePanels.sidePanel_s_left {
+  padding-left: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_left,
+.panelContainer.withSidePanels.sidePanel_m_left {
+  padding-left: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_left,
+.panelContainer.withSidePanels.sidePanel_l_left {
+  padding-left: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_right,
+.panelContainer.withSidePanels.sidePanel_s_right {
+  padding-right: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_right,
+.panelContainer.withSidePanels.sidePanel_m_right {
+  padding-right: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_right,
+.panelContainer.withSidePanels.sidePanel_l_right {
+  padding-right: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_top,
+.panelContainer.withSidePanels.sidePanel_s_top {
+  padding-top: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_top,
+.panelContainer.withSidePanels.sidePanel_m_top {
+  padding-top: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_top,
+.panelContainer.withSidePanels.sidePanel_l_top {
+  padding-top: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_bottom,
+.panelContainer.withSidePanels.sidePanel_s_bottom {
+  padding-bottom: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_bottom,
+.panelContainer.withSidePanels.sidePanel_m_bottom {
+  padding-bottom: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_bottom,
+.panelContainer.withSidePanels.sidePanel_l_bottom {
+  padding-bottom: var(--sidePanelSizeLarge, 420px);
+}
+
+.sidePanel {
+  position: fixed;
+  z-index: 10;
+  background: var(--sidePanelBg, #fff);
+  color: var(--sidePanelFg, #24282b);
+  border-left: var(--sidePanelBorder, 1px solid #eef2f4);
+  box-shadow: var(--sidePanelShadow, none);
+  display: flex;
+  top: 0;
+  bottom: 0;
+}
+.sidePanel .sidePanelContent {
+  position: relative;
+  z-index: 1;
+  padding: var(--sidePanelPadding, 20px);
+  box-sizing: border-box;
+  overflow: auto;
+  flex: 1;
+}
+.sidePanel.allowOverflow .sidePanelContent {
+  overflow: visible;
+}
+.sidePanel .sidePanelClose {
+  position: absolute;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: none;
+  padding: 0;
+  border: var(--sidePanelCloseButtonBorder, 1px solid #eef2f4);
+  background: var(--sidePanelCloseButtonBg, #fff);
+  color: var(--sidePanelCloseButtonFg, #24282b);
+  box-shadow: var(--sidePanelCloseButtonShadow, 0 0 5px 0 #eef2f4);
+}
+.sidePanel.sidePanelSize_s {
+  width: var(--sidePanelSizeSmall, 44px);
+}
+.sidePanel.sidePanelSize_s .sidePanelContent {
+  padding: 0;
+  display: flex;
+  row-gap: 2px;
+  column-gap: 2px;
+}
+.sidePanel.sidePanelSize_s.sidePanelPosition_left .sidePanelContent, .sidePanel.sidePanelSize_s.sidePanelPosition_right .sidePanelContent {
+  flex-direction: column;
+}
+.sidePanel.sidePanelSize_m {
+  width: var(--sidePanelSizeMedium, 300px);
+}
+.sidePanel.sidePanelSize_l {
+  width: var(--sidePanelSizeLarge, 420px);
+}
+.sidePanel.sidePanelPosition_left .sidePanelClose, .sidePanel.sidePanelPosition_right .sidePanelClose {
+  top: 0;
+  width: 20px;
+  height: 60px;
+}
+.sidePanel.sidePanelPosition_top .sidePanelClose, .sidePanel.sidePanelPosition_bottom .sidePanelClose {
+  left: 50%;
+  margin-left: -30px;
+  width: 60px;
+  height: 20px;
+}
+.sidePanel.sidePanelPosition_left.isOpen, .sidePanel.sidePanelPosition_right.isOpen, .sidePanel.sidePanelPosition_top.isOpen, .sidePanel.sidePanelPosition_bottom.isOpen {
+  transform: none;
+}
+.sidePanel.sidePanelPosition_left {
+  left: 0;
+  right: auto;
+  transform: translateX(-100%);
+}
+.sidePanel.sidePanelPosition_left .sidePanelClose {
+  border-radius: 0 3px 0 0;
+  right: -20px;
+}
+.sidePanel.sidePanelPosition_right {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.sidePanel.sidePanelPosition_right .sidePanelClose {
+  border-radius: 0 0 0 3px;
+  left: -20px;
+}
+.sidePanel.sidePanelPosition_top {
+  left: 0;
+  bottom: auto;
+  transform: translateY(-100%);
+}
+.sidePanel.sidePanelPosition_top .sidePanelClose {
+  border-radius: 0 3px 3px 0;
+  top: auto;
+  bottom: -20px;
+}
+.sidePanel.sidePanelPosition_bottom {
+  left: 0;
+  top: auto;
+  bottom: 0;
+  transform: translateY(100%);
+}
+.sidePanel.sidePanelPosition_bottom .sidePanelClose {
+  border-radius: 3px 0 0 3px;
+  top: -20px;
+}
+.sidePanel.sidePanelPosition_top, .sidePanel.sidePanelPosition_bottom {
+  height: 300px;
+  width: 100%;
+}
+.sidePanel.sidePanelPosition_top.sidePanelSize_s, .sidePanel.sidePanelPosition_bottom.sidePanelSize_s {
+  height: 44px;
+}
+.sidePanel.sidePanelPosition_top.sidePanelSize_l, .sidePanel.sidePanelPosition_bottom.sidePanelSize_l {
+  height: 420px;
+}
+.sidePanel.sidePanelAnimation_slide {
+  transition: all ease 0.5s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel.sidePanelAnimation_slide {
+    transition: none;
+  }
+}

package/dist/esm/components/design/spinner/Spinner.js

@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react';
+import { SpinnerWithArms } from './spinnerWithArms/SpinnerWithArms';
+import { SpinnerArc } from './spinnerArc/SpinnerArc';
+import './spinners.css';
+export const Spinner = ({
+  spinnerStyle = 'arms',
+  size = 'm',
+  customCssClass = ''
+}) => {
+  const spinnerCssClass = `spinner_${size} ${customCssClass}`;
+  if (spinnerStyle === 'arc') {
+    return /*#__PURE__*/React.createElement(SpinnerArc, {
+      cssClass: spinnerCssClass
+    });
+  }
+  return /*#__PURE__*/React.createElement(SpinnerWithArms, {
+    cssClass: spinnerCssClass
+  });
+};
+export default Spinner;
+//# sourceMappingURL=Spinner.js.map

package/dist/esm/components/design/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["React","SpinnerWithArms","SpinnerArc","Spinner","spinnerStyle","size","customCssClass","spinnerCssClass","createElement","cssClass"],"sources":["../../../../../src/components/design/spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { SpinnerWithArms } from './spinnerWithArms/SpinnerWithArms';\nimport { SpinnerArc } from './spinnerArc/SpinnerArc';\nimport { SpinnersInterface } from './spinner.interface';\n\nimport './spinners.scss';\n\nexport const Spinner: React.FC<SpinnersInterface> = (\n  {\n    spinnerStyle = 'arms',\n    size = 'm',\n    customCssClass = ''\n  }\n) => {\n  const spinnerCssClass = `spinner_${ size } ${ customCssClass }`;\n\n  if (spinnerStyle === 'arc') {\n    return <SpinnerArc cssClass={ spinnerCssClass } />;\n  }\n  return <SpinnerWithArms cssClass={ spinnerCssClass } />;\n};\n\nexport default Spinner;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mCAAmC;AACnE,SAASC,UAAU,QAAQ,yBAAyB;AAGpD,OAAO,iBAAiB;AAExB,OAAO,MAAMC,OAAoC,GAAGA,CAClD;EACEC,YAAY,GAAG,MAAM;EACrBC,IAAI,GAAG,GAAG;EACVC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAMC,eAAe,GAAG,WAAYF,IAAI,IAAMC,cAAc,EAAG;EAE/D,IAAIF,YAAY,KAAK,KAAK,EAAE;IAC1B,oBAAOJ,KAAA,CAAAQ,aAAA,CAACN,UAAU;MAACO,QAAQ,EAAGF;IAAiB,CAAE,CAAC;EACpD;EACA,oBAAOP,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACQ,QAAQ,EAAGF;EAAiB,CAAE,CAAC;AACzD,CAAC;AAED,eAAeJ,OAAO","ignoreList":[]}

package/dist/esm/components/design/spinner/spinner.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=spinner.interface.js.map

package/dist/esm/components/design/spinner/spinner.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.interface.js","names":[],"sources":["../../../../../src/components/design/spinner/spinner.interface.ts"],"sourcesContent":["export interface SpinnersInterface {\n  spinnerStyle?: 'arms' | 'arc';\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl';\n  customCssClass?: string;\n}\n\nexport interface SpinnerProps {\n  cssClass: string;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/design/spinner/spinnerArc/SpinnerArc.js

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import './spinnerArc.css';
+export const SpinnerArc = ({
+  cssClass
+}) => /*#__PURE__*/React.createElement("span", {
+  className: `spinner spinnerArc rotate ${cssClass}`
+}, /*#__PURE__*/React.createElement("svg", {
+  width: "96",
+  height: "96",
+  viewBox: "0 0 96 96",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("mask", {
+  id: "spinnerArcMask",
+  maskUnits: "userSpaceOnUse",
+  x: "-1",
+  y: "0",
+  width: "97",
+  height: "96"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "47.9021",
+  cy: "48",
+  r: "48",
+  className: "spinnerArcMask"
+})), /*#__PURE__*/React.createElement("g", {
+  mask: "url(#spinnerArcMask)"
+}, /*#__PURE__*/React.createElement("path", {
+  className: "spinnerArcPath",
+  d: "M40.1757 0.489025C40.8387 0.354254 41.4916 0.206371 42.1577 0.0861769C44.9214 -0.384492 47.2441 1.14701 47.8325 3.8203C48.406 6.42071 47.03 8.73432 44.3005 9.41053C39.6471 10.5537 35.0375 11.8018 30.9284 14.3673C18.2082 22.3108 10.9837 33.6605 10.2128 48.9579C10.1512 50.1316 10.1502 51.3082 10.1188 52.4833C10.0265 55.4999 8.15652 57.451 5.3484 57.4449C2.75098 57.4416 0.814064 55.4446 0.661566 52.5158C0.341757 46.5852 1.0917 40.7484 2.96562 35.1612C9.12014 16.8115 21.6922 5.40701 40.1757 0.489025Z"
+}))));
+//# sourceMappingURL=SpinnerArc.js.map

package/dist/esm/components/design/spinner/spinnerArc/SpinnerArc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerArc.js","names":["React","SpinnerArc","cssClass","createElement","className","width","height","viewBox","fill","xmlns","id","maskUnits","x","y","cx","cy","r","mask","d"],"sources":["../../../../../../src/components/design/spinner/spinnerArc/SpinnerArc.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { SpinnerProps } from '../spinner.interface';\n\nimport './spinnerArc.scss';\n\nexport const SpinnerArc: React.FC<SpinnerProps> = (\n  {\n    cssClass\n  }\n) => (\n  <span className={ `spinner spinnerArc rotate ${ cssClass }` }>\n    <svg width=\"96\" height=\"96\" viewBox=\"0 0 96 96\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"spinnerArcMask\" maskUnits=\"userSpaceOnUse\" x=\"-1\" y=\"0\" width=\"97\" height=\"96\">\n        <circle cx=\"47.9021\" cy=\"48\" r=\"48\" className=\"spinnerArcMask\" />\n      </mask>\n      <g mask=\"url(#spinnerArcMask)\">\n        <path\n          className=\"spinnerArcPath\"\n          d=\"M40.1757 0.489025C40.8387 0.354254 41.4916 0.206371 42.1577 0.0861769C44.9214 -0.384492 47.2441 1.14701 47.8325 3.8203C48.406 6.42071 47.03 8.73432 44.3005 9.41053C39.6471 10.5537 35.0375 11.8018 30.9284 14.3673C18.2082 22.3108 10.9837 33.6605 10.2128 48.9579C10.1512 50.1316 10.1502 51.3082 10.1188 52.4833C10.0265 55.4999 8.15652 57.451 5.3484 57.4449C2.75098 57.4416 0.814064 55.4446 0.661566 52.5158C0.341757 46.5852 1.0917 40.7484 2.96562 35.1612C9.12014 16.8115 21.6922 5.40701 40.1757 0.489025Z\"\n        />\n      </g>\n    </svg>\n  </span>\n);\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,mBAAmB;AAE1B,OAAO,MAAMC,UAAkC,GAAGA,CAChD;EACEC;AACF,CAAC,kBAEDF,KAAA,CAAAG,aAAA;EAAMC,SAAS,EAAG,6BAA8BF,QAAQ;AAAK,gBAC3DF,KAAA,CAAAG,aAAA;EAAKE,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC,IAAI;EAACC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAACC,KAAK,EAAC;AAA4B,gBAC5FT,KAAA,CAAAG,aAAA;EAAMO,EAAE,EAAC,gBAAgB;EAACC,SAAS,EAAC,gBAAgB;EAACC,CAAC,EAAC,IAAI;EAACC,CAAC,EAAC,GAAG;EAACR,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,gBACtFN,KAAA,CAAAG,aAAA;EAAQW,EAAE,EAAC,SAAS;EAACC,EAAE,EAAC,IAAI;EAACC,CAAC,EAAC,IAAI;EAACZ,SAAS,EAAC;AAAgB,CAAE,CAC5D,CAAC,eACPJ,KAAA,CAAAG,aAAA;EAAGc,IAAI,EAAC;AAAsB,gBAC5BjB,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,gBAAgB;EAC1Bc,CAAC,EAAC;AAAuf,CAC1f,CACA,CACA,CACD,CACP","ignoreList":[]}

package/dist/esm/components/design/spinner/spinnerArc/spinnerArc.css

@@ -0,0 +1,12 @@
+.spinnerArc {
+  color: #000;
+}
+.spinnerArc svg mask {
+  mask-type: alpha;
+}
+.spinnerArc svg .spinnerArcMask {
+  fill: #fff;
+}
+.spinnerArc svg .spinnerArcPath {
+  fill: currentColor;
+}

package/dist/esm/components/design/spinner/spinnerWithArms/SpinnerWithArms.js

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import './spinnerWithArms.css';
+export const SpinnerWithArms = ({
+  cssClass = ''
+}) => /*#__PURE__*/React.createElement("span", {
+  className: `spinner spinnerWithArms rotate-steps-12 ${cssClass}`
+}, /*#__PURE__*/React.createElement("svg", {
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 100 100"
+}, /*#__PURE__*/React.createElement("path", {
+  className: "path1",
+  d: "M48,72c0-1.1,0.9-2,2-2s2,0.9,2,2v26c0,1.1-0.9,2-2,2s-2-0.9-2-2V72z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path2",
+  d: "M59.3,70.1c-0.6-1-0.2-2.2,0.7-2.7s2.2-0.2,2.7,0.7l13,22.5c0.6,1,0.2,2.2-0.7,2.7s-2.2,0.2-2.7-0.7L59.3,70.1z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path3",
+  d: "M68.1,62.7c-1-0.6-1.3-1.8-0.7-2.7s1.8-1.3,2.7-0.7l22.5,13c1,0.6,1.3,1.8,0.7,2.7s-1.8,1.3-2.7,0.7L68.1,62.7z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path4",
+  d: "M72,52c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2H72z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path5",
+  d: "M70.1,40.7c-1,0.6-2.2,0.2-2.7-0.7s-0.2-2.2,0.7-2.7l22.5-13c1-0.6,2.2-0.2,2.7,0.7s0.2,2.2-0.7,2.7L70.1,40.7z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path6",
+  d: "M62.7,31.9c-0.6,1-1.8,1.3-2.7,0.7s-1.3-1.8-0.7-2.7l13-22.5c0.6-1,1.8-1.3,2.7-0.7s1.3,1.8,0.7,2.7L62.7,31.9z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path7",
+  d: "M52,28c0,1.1-0.9,2-2,2s-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2V28z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path8",
+  d: "M40.7,29.9c0.6,1,0.2,2.2-0.7,2.7s-2.2,0.2-2.7-0.7l-13-22.5c-0.6-1-0.2-2.2,0.7-2.7s2.2-0.2,2.7,0.7L40.7,29.9z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path9",
+  d: "M31.9,37.3c1,0.6,1.3,1.8,0.7,2.7s-1.8,1.3-2.7,0.7l-22.5-13c-1-0.6-1.3-1.8-0.7-2.7s1.8-1.3,2.7-0.7L31.9,37.3z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path10",
+  d: "M28,48c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2H28z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path11",
+  d: "M29.9,59.3c1-0.6,2.2-0.2,2.7,0.7s0.2,2.2-0.7,2.7l-22.5,13c-1,0.6-2.2,0.2-2.7-0.7s-0.2-2.2,0.7-2.7L29.9,59.3z"
+}), /*#__PURE__*/React.createElement("path", {
+  className: "path12",
+  d: "M37.3,68.1c0.6-1,1.8-1.3,2.7-0.7s1.3,1.8,0.7,2.7l-13,22.5c-0.6,1-1.8,1.3-2.7,0.7s-1.3-1.8-0.7-2.7L37.3,68.1z"
+})));
+export default SpinnerWithArms;
+//# sourceMappingURL=SpinnerWithArms.js.map

package/dist/esm/components/design/spinner/spinnerWithArms/SpinnerWithArms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerWithArms.js","names":["React","SpinnerWithArms","cssClass","createElement","className","version","xmlns","viewBox","d"],"sources":["../../../../../../src/components/design/spinner/spinnerWithArms/SpinnerWithArms.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { SpinnerProps } from '../spinner.interface';\n\nimport './spinnerWithArms.scss';\n\nexport const SpinnerWithArms: React.FC<SpinnerProps> = (\n  {\n    cssClass = ''\n  }\n) => (\n  <span className={ `spinner spinnerWithArms rotate-steps-12 ${ cssClass }` }>\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n      <path\n        className=\"path1\"\n        d=\"M48,72c0-1.1,0.9-2,2-2s2,0.9,2,2v26c0,1.1-0.9,2-2,2s-2-0.9-2-2V72z\"\n      />\n      <path\n        className=\"path2\"\n        d=\"M59.3,70.1c-0.6-1-0.2-2.2,0.7-2.7s2.2-0.2,2.7,0.7l13,22.5c0.6,1,0.2,2.2-0.7,2.7s-2.2,0.2-2.7-0.7L59.3,70.1z\"\n      />\n      <path\n        className=\"path3\"\n        d=\"M68.1,62.7c-1-0.6-1.3-1.8-0.7-2.7s1.8-1.3,2.7-0.7l22.5,13c1,0.6,1.3,1.8,0.7,2.7s-1.8,1.3-2.7,0.7L68.1,62.7z\"\n      />\n      <path\n        className=\"path4\"\n        d=\"M72,52c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2H72z\"\n      />\n      <path\n        className=\"path5\"\n        d=\"M70.1,40.7c-1,0.6-2.2,0.2-2.7-0.7s-0.2-2.2,0.7-2.7l22.5-13c1-0.6,2.2-0.2,2.7,0.7s0.2,2.2-0.7,2.7L70.1,40.7z\"\n      />\n      <path\n        className=\"path6\"\n        d=\"M62.7,31.9c-0.6,1-1.8,1.3-2.7,0.7s-1.3-1.8-0.7-2.7l13-22.5c0.6-1,1.8-1.3,2.7-0.7s1.3,1.8,0.7,2.7L62.7,31.9z\"\n      />\n      <path\n        className=\"path7\"\n        d=\"M52,28c0,1.1-0.9,2-2,2s-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2V28z\"\n      />\n      <path\n        className=\"path8\"\n        d=\"M40.7,29.9c0.6,1,0.2,2.2-0.7,2.7s-2.2,0.2-2.7-0.7l-13-22.5c-0.6-1-0.2-2.2,0.7-2.7s2.2-0.2,2.7,0.7L40.7,29.9z\"\n      />\n      <path\n        className=\"path9\"\n        d=\"M31.9,37.3c1,0.6,1.3,1.8,0.7,2.7s-1.8,1.3-2.7,0.7l-22.5-13c-1-0.6-1.3-1.8-0.7-2.7s1.8-1.3,2.7-0.7L31.9,37.3z\"\n      />\n      <path\n        className=\"path10\"\n        d=\"M28,48c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2H28z\"\n      />\n      <path\n        className=\"path11\"\n        d=\"M29.9,59.3c1-0.6,2.2-0.2,2.7,0.7s0.2,2.2-0.7,2.7l-22.5,13c-1,0.6-2.2,0.2-2.7-0.7s-0.2-2.2,0.7-2.7L29.9,59.3z\"\n      />\n      <path\n        className=\"path12\"\n        d=\"M37.3,68.1c0.6-1,1.8-1.3,2.7-0.7s1.3,1.8,0.7,2.7l-13,22.5c-0.6,1-1.8,1.3-2.7,0.7s-1.3-1.8-0.7-2.7L37.3,68.1z\"\n      />\n    </svg>\n  </span>\n);\n\nexport default SpinnerWithArms;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,wBAAwB;AAE/B,OAAO,MAAMC,eAAuC,GAAGA,CACrD;EACEC,QAAQ,GAAG;AACb,CAAC,kBAEDF,KAAA,CAAAG,aAAA;EAAMC,SAAS,EAAG,2CAA4CF,QAAQ;AAAK,gBACzEF,KAAA,CAAAG,aAAA;EAAKE,OAAO,EAAC,KAAK;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAa,gBACzEP,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAAoE,CACvE,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA6G,CAChH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA6G,CAChH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAAgF,CACnF,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA6G,CAChH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA6G,CAChH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAAmE,CACtE,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA8G,CACjH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,OAAO;EACjBI,CAAC,EAAC;AAA8G,CACjH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,QAAQ;EAClBI,CAAC,EAAC;AAA+E,CAClF,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,QAAQ;EAClBI,CAAC,EAAC;AAA8G,CACjH,CAAC,eACFR,KAAA,CAAAG,aAAA;EACEC,SAAS,EAAC,QAAQ;EAClBI,CAAC,EAAC;AAA8G,CACjH,CACE,CACD,CACP;AAED,eAAeP,eAAe","ignoreList":[]}

package/dist/esm/components/design/spinner/spinnerWithArms/spinnerWithArms.css

@@ -0,0 +1,53 @@
+.spinnerWithArms,
+.spinnerWithArms svg {
+  width: 65px;
+  height: 65px;
+}
+
+.spinnerWithArms svg .path1 {
+  opacity: 0.8;
+}
+
+.spinnerWithArms svg .path2 {
+  opacity: 0.17;
+}
+
+.spinnerWithArms svg .path3 {
+  opacity: 0.25;
+}
+
+.spinnerWithArms svg .path4 {
+  opacity: 0.33;
+}
+
+.spinnerWithArms svg .path5 {
+  opacity: 0.42;
+}
+
+.spinnerWithArms svg .path6 {
+  opacity: 0.5;
+}
+
+.spinnerWithArms svg .path7 {
+  opacity: 0.58;
+}
+
+.spinnerWithArms svg .path8 {
+  opacity: 0.67;
+}
+
+.spinnerWithArms svg .path9 {
+  opacity: 0.75;
+}
+
+.spinnerWithArms svg .path10 {
+  opacity: 0.83;
+}
+
+.spinnerWithArms svg .path11 {
+  opacity: 0.92;
+}
+
+.spinnerWithArms svg .path12 {
+  opacity: 1;
+}

package/dist/esm/components/design/spinner/spinners.css

@@ -0,0 +1,32 @@
+.rotate svg {
+  animation: rotate 1s linear infinite;
+}
+
+.rotate-steps-12 svg {
+  animation: rotate 1s steps(12) infinite;
+}
+
+.spinner {
+  color: currentColor;
+  position: relative;
+}
+.spinner.spinner_xs, .spinner.spinner_xs svg {
+  width: 20px;
+  height: 20px;
+}
+.spinner.spinner_s, .spinner.spinner_s svg {
+  width: 30px;
+  height: 30px;
+}
+.spinner.spinner_m, .spinner.spinner_m svg {
+  width: 45px;
+  height: 45px;
+}
+.spinner.spinner_l, .spinner.spinner_l svg {
+  width: 65px;
+  height: 65px;
+}
+.spinner.spinner_xl, .spinner.spinner_xl svg {
+  width: 100px;
+  height: 100px;
+}

package/dist/esm/components/design/statusIndicators/statusIconButton/StatusIconButton.js

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+import { SimpleButton } from '../../../form/buttons/SimpleButton';
+import { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';
+import { StatusIconLabel } from '../statusIconLabel/StatusIconLabel';
+import './statusIconButton.css';
+export const StatusIconButton = ({
+  id,
+  description,
+  status,
+  label,
+  hideLabel,
+  indicator = 'info',
+  dueAt,
+  onClick = () => {},
+  customIcon,
+  customCssClass = '',
+  iconPosition = 'left'
+}) => {
+  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';
+  const buttonProps = {
+    cssClass: `statusIconButton ${indicator} ${customCssClass}`,
+    title: `${description || status} ${dueAt ? 'Due at ' + formattedDueDateTime : ''}`,
+    label: /*#__PURE__*/React.createElement(StatusIconLabel, {
+      id: `${id}-label`,
+      description,
+      status,
+      label,
+      hideLabel,
+      indicator,
+      dueAt,
+      customIcon,
+      iconPosition
+    }),
+    id,
+    onClickHandler: () => onClick(id)
+  };
+  return /*#__PURE__*/React.createElement(SimpleButton, buttonProps);
+};
+//# sourceMappingURL=StatusIconButton.js.map

package/dist/esm/components/design/statusIndicators/statusIconButton/StatusIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIconButton.js","names":["React","SimpleButton","dateToShortReadableDateTime","StatusIconLabel","StatusIconButton","id","description","status","label","hideLabel","indicator","dueAt","onClick","customIcon","customCssClass","iconPosition","formattedDueDateTime","buttonProps","cssClass","title","createElement","onClickHandler"],"sources":["../../../../../../src/components/design/statusIndicators/statusIconButton/StatusIconButton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\nimport { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';\nimport { StatusIconLabel , StatusIconLabelInterface } from '../statusIconLabel/StatusIconLabel';\nimport { ButtonProps } from '../../../form/buttons/button.interface';\nimport { GenericFunction } from '../../../../interfaces';\n\nimport './statusIconButton.scss';\n\ninterface StatusIconButtonInterface extends StatusIconLabelInterface {\n  onClick: GenericFunction\n}\n\nexport const StatusIconButton: React.FC<StatusIconButtonInterface> = (\n  {\n    id,\n    description,\n    status,\n    label,\n    hideLabel,\n    indicator = 'info',\n    dueAt,\n    onClick = () => {},\n    customIcon,\n    customCssClass = '',\n    iconPosition = 'left'\n  }\n) => {\n  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';\n\n  const buttonProps: ButtonProps = {\n    cssClass: `statusIconButton ${ indicator } ${ customCssClass }`,\n    title: `${ description || status } ${ dueAt ? 'Due at ' + formattedDueDateTime : '' }`,\n    label: (\n      <StatusIconLabel\n        {\n          ...{\n            id: `${ id }-label`,\n            description,\n            status,\n            label,\n            hideLabel,\n            indicator,\n            dueAt,\n            customIcon,\n            iconPosition\n          }\n        }\n      />\n    ),\n    id,\n    onClickHandler: () => onClick(id)\n  };\n\n  return (\n    <SimpleButton { ...buttonProps } />\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,oCAAoC;AACjE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAmC,oCAAoC;AAI/F,OAAO,yBAAyB;AAMhC,OAAO,MAAMC,gBAAqD,GAAGA,CACnE;EACEC,EAAE;EACFC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,MAAM;EAClBC,KAAK;EACLC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClBC,UAAU;EACVC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG;AACjB,CAAC,KACE;EACH,MAAMC,oBAAoB,GAAGL,KAAK,GAAGT,2BAA2B,CAACS,KAAK,CAAC,GAAG,KAAK;EAE/E,MAAMM,WAAwB,GAAG;IAC/BC,QAAQ,EAAE,oBAAqBR,SAAS,IAAMI,cAAc,EAAG;IAC/DK,KAAK,EAAE,GAAIb,WAAW,IAAIC,MAAM,IAAMI,KAAK,GAAG,SAAS,GAAGK,oBAAoB,GAAG,EAAE,EAAG;IACtFR,KAAK,eACHR,KAAA,CAAAoB,aAAA,CAACjB,eAAe;MAGVE,EAAE,EAAE,GAAIA,EAAE,QAAS;MACnBC,WAAW;MACXC,MAAM;MACNC,KAAK;MACLC,SAAS;MACTC,SAAS;MACTC,KAAK;MACLE,UAAU;MACVE;IAAY,CAGjB,CACF;IACDV,EAAE;IACFgB,cAAc,EAAEA,CAAA,KAAMT,OAAO,CAACP,EAAE;EAClC,CAAC;EAED,oBACEL,KAAA,CAAAoB,aAAA,CAACnB,YAAY,EAAMgB,WAAe,CAAC;AAEvC,CAAC","ignoreList":[]}

package/dist/esm/components/design/statusIndicators/statusIconButton/statusIconButton.css

@@ -0,0 +1,4 @@
+.statusIconButton {
+  border: none;
+  background: none;
+}

package/dist/esm/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';
+import { Icon } from '../../icons/basicIcon/Icon';
+import './statusIconLabel.css';
+export const StatusIconLabel = ({
+  description,
+  status,
+  label,
+  hideLabel = false,
+  indicator = 'info',
+  dueAt,
+  customIcon,
+  customCssClass = '',
+  iconPosition = 'left'
+}) => {
+  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';
+  const iconMap = {
+    info: 'info',
+    alert: 'notification',
+    warn: 'warning',
+    defCon3: 'fire',
+    success: 'info'
+  };
+  const StatusIcon = () => {
+    if (customIcon) {
+      return /*#__PURE__*/React.createElement(Icon, customIcon);
+    }
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: iconMap[indicator]
+    });
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: `statusIconLabel ${indicator} ${customCssClass}`,
+    title: `${status} ${description ? ': ' + description : ''}${dueAt ? '. Due at ' + formattedDueDateTime : ''}`
+  }, iconPosition === 'left' && /*#__PURE__*/React.createElement(StatusIcon, null), /*#__PURE__*/React.createElement("span", {
+    className: hideLabel ? 'sr-only' : ''
+  }, label), iconPosition !== 'left' && /*#__PURE__*/React.createElement(StatusIcon, null));
+};
+export default StatusIconLabel;
+//# sourceMappingURL=StatusIconLabel.js.map