@x15ventures/x15-ui-library 3.17.0 → 3.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","names":["React","useEffect","useRef","useState","SimpleButton","SelectDropdown","Paginator","id","page","totalPages","pageSize","allowPageSizeChange","onPageChange","onPageSizeChange","paginationType","paginatorPosition","buttonConfig","maxButtonsVisible","displayedButtonLimit","setDisplayedButtonLimit","activePage","setActivePage","isPageSizeChangeAllowed","setIsPageSizeChangeAllowed","pageNumberButtonsVisible","setPageNumberButtonsVisible","Array","from","length","_","i","lowestPageNumberVisible","highestPageNumberVisible","pageSizeChangePosition","isNonNullPrevIcon","previousButton","icon","isNonNullNextIcon","nextButton","isNonNullFirstIcon","firstButton","isNonNullLastIcon","lastButton","updateVisiblePageNumbers","newPage","current","newVisiblePages","filter","pageNum","resetVisiblePageNumbers","handlePageChange","handlePageSizeChange","event","Number","target","value","requiresPagination","pageSizeChange","createElement","className","field","name","options","label","includeEmptyOption","defaultValue","onChange","text","layout","customCssClasses","wrapper","Fragment","disabled","onClickHandler","leftIcon","undefined","hideLabel","buttonStyle","size","map","pageNumber","key","String","rightIcon"],"sources":["../../../../../src/components/design/paginators/Paginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\n\nimport './paginator.scss';\n\nexport interface IconLabelProp {\n  icon?: string | ReactElement | null;\n  label?: string | null;\n}\n\nexport interface PaginatorProps {\n  id: string;\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  onPageChange: GenericFunction;\n  allowPageSizeChange?: boolean;\n  onPageSizeChange?: GenericFunction;\n  paginationType?: 'buttons' | 'showMore';\n  paginatorPosition?: 'left' | 'right' | 'center';\n  buttonConfig?: {\n    previousButton?: IconLabelProp;\n    nextButton?: IconLabelProp;\n    firstButton?: IconLabelProp;\n    lastButton?: IconLabelProp;\n  };\n  maxButtonsVisible?: number;\n}\n\nexport const Paginator: React.FC<PaginatorProps> = (\n  {\n    id,\n    page,\n    totalPages,\n    pageSize = 20,\n    allowPageSizeChange,\n    onPageChange,\n    onPageSizeChange,\n    paginationType = 'buttons',\n    paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',\n    buttonConfig,\n    maxButtonsVisible = 5,\n  }\n) => {\n\n  const [displayedButtonLimit, setDisplayedButtonLimit] = useState<number>(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  const [activePage, setActivePage] = useState(0);\n  const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState<boolean>(false);\n  const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState<number[]>(Array.from({ length: displayedButtonLimit }, (_, i) => i + 1));\n  \n  const lowestPageNumberVisible = useRef(1);\n  const highestPageNumberVisible = useRef(displayedButtonLimit);\n\n  const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';\n\n  const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;\n  const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;\n  const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;\n  const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;\n\n  const updateVisiblePageNumbers = (newPage: number) => {\n    if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {\n      return;\n    }\n    if (newPage < lowestPageNumberVisible.current) {\n      lowestPageNumberVisible.current = newPage;\n      highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;\n    } else if (newPage > highestPageNumberVisible.current) {\n      highestPageNumberVisible.current = newPage;\n      lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;\n    }\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => lowestPageNumberVisible.current + i).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n  };\n\n  // ensure lowest and highest visible page numbers are within a valid range\n  const resetVisiblePageNumbers = (page: number) => {\n    lowestPageNumberVisible.current = 1;\n    highestPageNumberVisible.current = displayedButtonLimit;\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => i + 1).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n    updateVisiblePageNumbers(page);\n  };\n\n  const handlePageChange = (newPage: number) => {\n    if (newPage < 1 || newPage > totalPages) {\n      return;\n    }\n    setActivePage(newPage);\n    onPageChange(newPage);\n    updateVisiblePageNumbers(newPage);\n  };\n\n  const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onPageSizeChange && onPageSizeChange(Number(event.target.value));\n  };\n\n  const requiresPagination = () => {\n    if (paginationType === 'buttons') {\n      return totalPages > 1;\n    }\n\n    if (paginationType === 'showMore') {\n      return page < totalPages;\n    }\n    return false;\n  };\n\n  useEffect(() => {\n    const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;\n    if (newPage !== page) {\n      onPageChange(newPage);\n    }\n    setActivePage(newPage);\n    if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {\n      resetVisiblePageNumbers(newPage);\n    }\n    setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');\n  }, [page, totalPages, displayedButtonLimit]);\n\n  useEffect(() => {\n    setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  }, [totalPages, maxButtonsVisible]);\n\n  if (!requiresPagination()) {\n    return null;\n  }\n\n  const pageSizeChange = () => ( \n    <div className=\"pageSizeChangeContainer\">\n      <SelectDropdown {\n        ...{\n          field: {\n            id: `paginator_${ id }_pageSizeChange`,\n            name: `paginator_${ id }_pageSizeChange`,\n            options: [\n              {\n                label: '10',\n                value: 10,\n              },\n              {\n                label: '20',\n                value: 20,\n              },\n              {\n                label: '50',\n                value: 50,\n              },\n              {\n                label: '100',\n                value: 100,\n              },\n            ],\n            includeEmptyOption: false,\n            defaultValue: pageSize,\n            onChange: handlePageSizeChange,\n          },\n          label: {\n            text: 'Items per page',\n          },\n          layout: 'horizontal',\n          customCssClasses: {\n            wrapper: 'pageSizeChange',\n          }\n        }\n      }\n      />\n    </div>\n  );\n\n  return (\n    <div id={ `paginator_${ id }` } className={ `paginator ${ paginationType } position_${ paginatorPosition } ${ isPageSizeChangeAllowed ? 'withPageSizeChange' : '' }` }>\n      { paginationType === 'buttons' && (\n        <>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange() }\n          <div className=\"paginatorControls\">\n\n            <SimpleButton\n              id={ `paginator_${ id }_first` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(1) }\n              leftIcon={ isNonNullFirstIcon ? { icon: buttonConfig?.firstButton?.icon || 'first' } : undefined }\n              hideLabel={ buttonConfig?.firstButton?.label ? false : true }\n              label={ buttonConfig?.firstButton?.label || 'Go to first item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_previous` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(activePage - 1) }\n              leftIcon={ isNonNullPrevIcon ? { icon: buttonConfig?.previousButton?.icon || 'previous2' } : undefined }\n              hideLabel={ buttonConfig?.previousButton?.label ? false : true }\n              label={ buttonConfig?.previousButton?.label || `Show previous ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n            <div className=\"paginatorPageButtonsWrapper\">\n              <div className=\"paginatorPageButtonsScroller\">\n                <div className=\"paginatorPageButtons\">\n                  {\n                    pageNumberButtonsVisible.map((pageNumber) => (\n                      <SimpleButton\n                        key={ `paginator_${ id }_page_${ pageNumber }` }\n                        id={ `paginator_${ id }_page_${ pageNumber }` }\n                        disabled={ activePage === pageNumber }\n                        onClickHandler={ () => handlePageChange(pageNumber) }\n                        label={ String(pageNumber) }\n                        buttonStyle={ { size: 'compact' } }\n                      />\n                    ))\n                  }\n                </div>\n              </div>\n            </div>\n\n            <SimpleButton\n              id={ `paginator_${ id }_next` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(activePage + 1) }\n              rightIcon={ isNonNullNextIcon ? { icon: buttonConfig?.nextButton?.icon || 'next2' } : undefined }\n              hideLabel={ buttonConfig?.nextButton?.label ? false : true }\n              label={ buttonConfig?.nextButton?.label || `Show next ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_last` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(totalPages) }\n              rightIcon={ isNonNullLastIcon ? { icon: buttonConfig?.lastButton?.icon || 'last' } : undefined }\n              hideLabel={ buttonConfig?.lastButton?.label ? false : true }\n              label={ buttonConfig?.lastButton?.label || 'Go to last item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n          </div>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange() }\n        </>\n      ) }\n      { paginationType === 'showMore' && (\n        <div className=\"showMore\">\n          <SimpleButton\n            id={ `paginator_${ id }_previous` }\n            onClickHandler={ () => handlePageChange(activePage + 1) }\n            rightIcon={ { icon: 'arrowDown' } }\n            label=\"Show more items\"\n            buttonStyle={ { size: 'compact' } }\n          />\n        </div>\n      ) }\n    </div>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Paginator.js","names":["React","useEffect","useRef","useState","SimpleButton","SelectDropdown","Paginator","id","page","totalPages","pageSize","allowPageSizeChange","onPageChange","onPageSizeChange","paginationType","paginatorPosition","buttonConfig","maxButtonsVisible","displayedButtonLimit","setDisplayedButtonLimit","activePage","setActivePage","isPageSizeChangeAllowed","setIsPageSizeChangeAllowed","pageNumberButtonsVisible","setPageNumberButtonsVisible","Array","from","length","_","i","lowestPageNumberVisible","highestPageNumberVisible","pageSizeChangePosition","isNonNullPrevIcon","previousButton","icon","isNonNullNextIcon","nextButton","isNonNullFirstIcon","firstButton","isNonNullLastIcon","lastButton","updateVisiblePageNumbers","newPage","current","newVisiblePages","filter","pageNum","resetVisiblePageNumbers","handlePageChange","handlePageSizeChange","event","Number","target","value","requiresPagination","pageSizeChange","createElement","className","field","name","options","label","includeEmptyOption","defaultValue","onChange","text","layout","customCssClasses","wrapper","Fragment","disabled","onClickHandler","leftIcon","undefined","hideLabel","buttonStyle","size","map","pageNumber","key","String","rightIcon"],"sources":["../../../../../src/components/design/paginators/Paginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\nimport { IconSource } from '../../../helpers/iconHelpers';\n\nimport './paginator.scss';\n\nexport interface IconLabelProp {\n  icon?: IconSource | null;\n  label?: string | null;\n}\n\nexport interface PaginatorProps {\n  id: string;\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  onPageChange: GenericFunction;\n  allowPageSizeChange?: boolean;\n  onPageSizeChange?: GenericFunction;\n  paginationType?: 'buttons' | 'showMore';\n  paginatorPosition?: 'left' | 'right' | 'center';\n  buttonConfig?: {\n    previousButton?: IconLabelProp;\n    nextButton?: IconLabelProp;\n    firstButton?: IconLabelProp;\n    lastButton?: IconLabelProp;\n  };\n  maxButtonsVisible?: number;\n}\n\nexport const Paginator: React.FC<PaginatorProps> = (\n  {\n    id,\n    page,\n    totalPages,\n    pageSize = 20,\n    allowPageSizeChange,\n    onPageChange,\n    onPageSizeChange,\n    paginationType = 'buttons',\n    paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',\n    buttonConfig,\n    maxButtonsVisible = 5,\n  }\n) => {\n\n  const [displayedButtonLimit, setDisplayedButtonLimit] = useState<number>(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  const [activePage, setActivePage] = useState(0);\n  const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState<boolean>(false);\n  const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState<number[]>(Array.from({ length: displayedButtonLimit }, (_, i) => i + 1));\n  \n  const lowestPageNumberVisible = useRef(1);\n  const highestPageNumberVisible = useRef(displayedButtonLimit);\n\n  const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';\n\n  const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;\n  const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;\n  const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;\n  const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;\n\n  const updateVisiblePageNumbers = (newPage: number) => {\n    if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {\n      return;\n    }\n    if (newPage < lowestPageNumberVisible.current) {\n      lowestPageNumberVisible.current = newPage;\n      highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;\n    } else if (newPage > highestPageNumberVisible.current) {\n      highestPageNumberVisible.current = newPage;\n      lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;\n    }\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => lowestPageNumberVisible.current + i).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n  };\n\n  // ensure lowest and highest visible page numbers are within a valid range\n  const resetVisiblePageNumbers = (page: number) => {\n    lowestPageNumberVisible.current = 1;\n    highestPageNumberVisible.current = displayedButtonLimit;\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => i + 1).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n    updateVisiblePageNumbers(page);\n  };\n\n  const handlePageChange = (newPage: number) => {\n    if (newPage < 1 || newPage > totalPages) {\n      return;\n    }\n    setActivePage(newPage);\n    onPageChange(newPage);\n    updateVisiblePageNumbers(newPage);\n  };\n\n  const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onPageSizeChange && onPageSizeChange(Number(event.target.value));\n  };\n\n  const requiresPagination = () => {\n    if (paginationType === 'buttons') {\n      return totalPages > 1;\n    }\n\n    if (paginationType === 'showMore') {\n      return page < totalPages;\n    }\n    return false;\n  };\n\n  useEffect(() => {\n    const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;\n    if (newPage !== page) {\n      onPageChange(newPage);\n    }\n    setActivePage(newPage);\n    if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {\n      resetVisiblePageNumbers(newPage);\n    }\n    setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');\n  }, [page, totalPages, displayedButtonLimit]);\n\n  useEffect(() => {\n    setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  }, [totalPages, maxButtonsVisible]);\n\n  if (!requiresPagination()) {\n    return null;\n  }\n\n  const pageSizeChange = () => ( \n    <div className=\"pageSizeChangeContainer\">\n      <SelectDropdown {\n        ...{\n          field: {\n            id: `paginator_${ id }_pageSizeChange`,\n            name: `paginator_${ id }_pageSizeChange`,\n            options: [\n              {\n                label: '10',\n                value: 10,\n              },\n              {\n                label: '20',\n                value: 20,\n              },\n              {\n                label: '50',\n                value: 50,\n              },\n              {\n                label: '100',\n                value: 100,\n              },\n            ],\n            includeEmptyOption: false,\n            defaultValue: pageSize,\n            onChange: handlePageSizeChange,\n          },\n          label: {\n            text: 'Items per page',\n          },\n          layout: 'horizontal',\n          customCssClasses: {\n            wrapper: 'pageSizeChange',\n          }\n        }\n      }\n      />\n    </div>\n  );\n\n  return (\n    <div id={ `paginator_${ id }` } className={ `paginator ${ paginationType } position_${ paginatorPosition } ${ isPageSizeChangeAllowed ? 'withPageSizeChange' : '' }` }>\n      { paginationType === 'buttons' && (\n        <>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange() }\n          <div className=\"paginatorControls\">\n\n            <SimpleButton\n              id={ `paginator_${ id }_first` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(1) }\n              leftIcon={ isNonNullFirstIcon ? buttonConfig?.firstButton?.icon || 'first' : undefined }\n              hideLabel={ buttonConfig?.firstButton?.label ? false : true }\n              label={ buttonConfig?.firstButton?.label || 'Go to first item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_previous` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(activePage - 1) }\n              leftIcon={ isNonNullPrevIcon ? buttonConfig?.previousButton?.icon || 'previous2' : undefined }\n              hideLabel={ buttonConfig?.previousButton?.label ? false : true }\n              label={ buttonConfig?.previousButton?.label || `Show previous ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n            <div className=\"paginatorPageButtonsWrapper\">\n              <div className=\"paginatorPageButtonsScroller\">\n                <div className=\"paginatorPageButtons\">\n                  {\n                    pageNumberButtonsVisible.map((pageNumber) => (\n                      <SimpleButton\n                        key={ `paginator_${ id }_page_${ pageNumber }` }\n                        id={ `paginator_${ id }_page_${ pageNumber }` }\n                        disabled={ activePage === pageNumber }\n                        onClickHandler={ () => handlePageChange(pageNumber) }\n                        label={ String(pageNumber) }\n                        buttonStyle={ { size: 'compact' } }\n                      />\n                    ))\n                  }\n                </div>\n              </div>\n            </div>\n\n            <SimpleButton\n              id={ `paginator_${ id }_next` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(activePage + 1) }\n              rightIcon={ isNonNullNextIcon ? buttonConfig?.nextButton?.icon || 'next2' : undefined }\n              hideLabel={ buttonConfig?.nextButton?.label ? false : true }\n              label={ buttonConfig?.nextButton?.label || `Show next ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_last` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(totalPages) }\n              rightIcon={ isNonNullLastIcon ? buttonConfig?.lastButton?.icon || 'last' : undefined }\n              hideLabel={ buttonConfig?.lastButton?.label ? false : true }\n              label={ buttonConfig?.lastButton?.label || 'Go to last item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n          </div>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange() }\n        </>\n      ) }\n      { paginationType === 'showMore' && (\n        <div className=\"showMore\">\n          <SimpleButton\n            id={ `paginator_${ id }_previous` }\n            onClickHandler={ () => handlePageChange(activePage + 1) }\n            rightIcon={ { icon: 'arrowDown' } }\n            label=\"Show more items\"\n            buttonStyle={ { size: 'compact' } }\n          />\n        </div>\n      ) }\n    </div>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Tooltip } from '../../tooltip/Tooltip';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import './circularProgressIndicator.css';
 export const CircularProgressIndicator = ({
   name,
@@ -42,7 +43,7 @@ export const CircularProgressIndicator = ({
     className: "progressRing"
   }), /*#__PURE__*/React.createElement("span", {
     className: "actionIcon"
-  }, icon, /*#__PURE__*/React.createElement("span", {
+  }, renderIcon(icon), /*#__PURE__*/React.createElement("span", {
     className: `labelText ${hideLabel || size === 'xsmall' ? 'sr-only' : ''}`
   }, name)), hasStatus && /*#__PURE__*/React.createElement("span", {
     className: "statusIndicator"

package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressIndicator.js","names":["_extends","React","Tooltip","CircularProgressIndicator","name","progress","description","statusMessage","icon","hideLabel","id","mode","onClickHandler","size","clampedProgress","Math","min","max","progressCopy","progressSummary","hasStatus","statusTooltipId","isActionable","getTitle","modeIconsMap","default","warning","error","success","progressIndicatorContent","createElement","className","passiveTrigger","triggerId","customCssClass","sharedProps","style","title","type","onClick","role"],"sources":["../../../../../../src/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../tooltip/Tooltip';\n\nimport './circularProgressIndicator.scss';\n\nexport interface CircularProgressIndicatorProps {\n  name: string;\n  progress: number; // 0 - 100\n  description?: string;\n  statusMessage?: string;\n  icon?: React.ReactNode;\n  hideLabel?: boolean;\n  id: string;\n  onClickHandler?: () => void;\n  mode?: 'default' | 'warning' | 'error' | 'success';\n  size?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';\n}\n\nexport const CircularProgressIndicator: React.FC<CircularProgressIndicatorProps> = (\n  {\n    name,\n    progress,\n    description = '',\n    statusMessage = '',\n    icon = null,\n    hideLabel = false,\n    id,\n    mode = 'default',\n    onClickHandler,\n    size = 'default',\n  }\n) => {\n  const clampedProgress = Math.min(100, Math.max(0, progress));\n  const progressCopy = `${ clampedProgress }% complete`;\n  const progressSummary = `${ progressCopy }${ description ? ` ${ description }` : '' }`;\n  const hasStatus = mode !== 'default';\n  const statusTooltipId = `${ id }_status`;\n  const isActionable = typeof onClickHandler === 'function';\n  \n  const getTitle = () => {\n    if (statusMessage) {\n      return statusMessage;\n    }\n    return progressSummary;\n  };\n\n  const modeIconsMap = {\n    default: '',\n    warning: 'warning',\n    error: 'notification',\n    success: 'checkmark',\n  };\n\n  const progressIndicatorContent = (\n    <span className=\"progressIndicator\">\n      <span className=\"glowRing\" />\n      <span className=\"progressRing\" />\n      <span className=\"actionIcon\">\n        { icon }\n        <span className={ `labelText ${ hideLabel || size === 'xsmall' ? 'sr-only' : '' }` }>{ name }</span>\n      </span>\n\n      { hasStatus &&\n        <span className=\"statusIndicator\">\n          <Tooltip\n            passiveTrigger\n            triggerId={ statusTooltipId }\n            customCssClass=\"statusIcon\"\n            icon={ modeIconsMap[mode] }\n          >\n            { getTitle() }\n          </Tooltip>\n        </span>\n      }\n    </span>\n  );\n\n  const sharedProps = {\n    className: `circularProgressIndicator ${ mode }Mode ${ size }`,\n    id,\n    style: {\n      '--progress': `${ clampedProgress }%`,\n    } as React.CSSProperties,\n    title: hasStatus ? '' : getTitle(),\n    'aria-label': progressSummary,\n    ...(hasStatus ? { 'aria-describedby': statusTooltipId + '_content' } : {}),\n  };\n\n  if (isActionable) {\n    return (\n      <button\n        { ...sharedProps }\n        type=\"button\"\n        onClick={ onClickHandler }\n      >\n        { progressIndicatorContent }\n      </button>\n    );\n  }\n\n  return (\n    <div\n      { ...sharedProps }\n      role=\"progressbar\"\n      aria-valuemin={ 0 }\n      aria-valuemax={ 100 }\n      aria-valuenow={ clampedProgress }\n    >\n      { progressIndicatorContent }\n    </div>\n  );\n};\n\nexport default CircularProgressIndicator;"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CircularProgressIndicator.js","names":["_extends","React","Tooltip","renderIcon","CircularProgressIndicator","name","progress","description","statusMessage","icon","hideLabel","id","mode","onClickHandler","size","clampedProgress","Math","min","max","progressCopy","progressSummary","hasStatus","statusTooltipId","isActionable","getTitle","modeIconsMap","default","warning","error","success","progressIndicatorContent","createElement","className","passiveTrigger","triggerId","customCssClass","sharedProps","style","title","type","onClick","role"],"sources":["../../../../../../src/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../tooltip/Tooltip';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './circularProgressIndicator.scss';\n\nexport interface CircularProgressIndicatorProps {\n  name: string;\n  progress: number; // 0 - 100\n  description?: string;\n  statusMessage?: string;\n  icon?: IconSource;\n  hideLabel?: boolean;\n  id: string;\n  onClickHandler?: () => void;\n  mode?: 'default' | 'warning' | 'error' | 'success';\n  size?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';\n}\n\nexport const CircularProgressIndicator: React.FC<CircularProgressIndicatorProps> = (\n  {\n    name,\n    progress,\n    description = '',\n    statusMessage = '',\n    icon = null,\n    hideLabel = false,\n    id,\n    mode = 'default',\n    onClickHandler,\n    size = 'default',\n  }\n) => {\n  const clampedProgress = Math.min(100, Math.max(0, progress));\n  const progressCopy = `${ clampedProgress }% complete`;\n  const progressSummary = `${ progressCopy }${ description ? ` ${ description }` : '' }`;\n  const hasStatus = mode !== 'default';\n  const statusTooltipId = `${ id }_status`;\n  const isActionable = typeof onClickHandler === 'function';\n  \n  const getTitle = () => {\n    if (statusMessage) {\n      return statusMessage;\n    }\n    return progressSummary;\n  };\n\n  const modeIconsMap = {\n    default: '',\n    warning: 'warning',\n    error: 'notification',\n    success: 'checkmark',\n  };\n\n  const progressIndicatorContent = (\n    <span className=\"progressIndicator\">\n      <span className=\"glowRing\" />\n      <span className=\"progressRing\" />\n      <span className=\"actionIcon\">\n        { renderIcon(icon) }\n        <span className={ `labelText ${ hideLabel || size === 'xsmall' ? 'sr-only' : '' }` }>{ name }</span>\n      </span>\n\n      { hasStatus &&\n        <span className=\"statusIndicator\">\n          <Tooltip\n            passiveTrigger\n            triggerId={ statusTooltipId }\n            customCssClass=\"statusIcon\"\n            icon={ modeIconsMap[mode] }\n          >\n            { getTitle() }\n          </Tooltip>\n        </span>\n      }\n    </span>\n  );\n\n  const sharedProps = {\n    className: `circularProgressIndicator ${ mode }Mode ${ size }`,\n    id,\n    style: {\n      '--progress': `${ clampedProgress }%`,\n    } as React.CSSProperties,\n    title: hasStatus ? '' : getTitle(),\n    'aria-label': progressSummary,\n    ...(hasStatus ? { 'aria-describedby': statusTooltipId + '_content' } : {}),\n  };\n\n  if (isActionable) {\n    return (\n      <button\n        { ...sharedProps }\n        type=\"button\"\n        onClick={ onClickHandler }\n      >\n        { progressIndicatorContent }\n      </button>\n    );\n  }\n\n  return (\n    <div\n      { ...sharedProps }\n      role=\"progressbar\"\n      aria-valuemin={ 0 }\n      aria-valuemax={ 100 }\n      aria-valuenow={ clampedProgress }\n    >\n      { progressIndicatorContent }\n    </div>\n  );\n};\n\nexport default CircularProgressIndicator;"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/revealMore/RevealMoreBelow.js

@@ -54,9 +54,7 @@ export const RevealMoreBelow = props => {
     id: "revealMore_button-below",
     cssClass: "button compact",
     label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
-    leftIcon: props.icon ? {
-      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
-    } : undefined,
+    leftIcon: isExpanded ? props.icon?.onRevealLess : props.icon?.onRevealMore,
     "aria-hidden": props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true
   })));
 };

package/dist/esm/components/design/revealMore/RevealMoreBelow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RevealMoreBelow.js","names":["React","useRef","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreBelow","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","contentRef","isCustomButton","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreBelow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreBelowProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreBelow: React.FC<RevealMoreBelowProps> = (props) => {\n  const {\n    children,\n    lineClamp = 2,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const el = contentRef.current;\n    if (el) {\n      setIsOverflowing(el.scrollHeight > el.clientHeight);\n    }\n  }, [children, lineClamp]);\n\n  const elementStyle: React.CSSProperties = {\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical',\n    WebkitLineClamp: lineClamp,\n  };\n\n  return (\n    <div className={ `revealMore revealMore_below ${ customCssClass || '' }` }>\n      <div\n        ref={ contentRef }\n        className={ 'revealMore_content' }\n        style={ isExpanded ? { ...elementStyle, WebkitLineClamp: 'none' } : elementStyle }\n      >\n        { children }\n      </div>\n      { isOverflowing && (\n        isCustomButton ? (\n          renderCustomButton(\n            isExpanded ? props.revealLessButton : props.revealMoreButton\n          )\n        ) : (\n          <SimpleButton\n            onClickHandler={ () => {\n              toggleExpand();\n              if (isExpanded) {\n                (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n              } else {\n                (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n              }\n            } }\n            id='revealMore_button-below'\n            cssClass=\"button compact\"\n            label={\n              isExpanded \n                ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n            }\n            leftIcon={\n              (props as ManagedButtonProps).icon ? { \n                icon: isExpanded \n                  ? (props as ManagedButtonProps).icon!.onRevealLess \n                  : (props as ManagedButtonProps).icon!.onRevealMore \n              } : undefined\n            }\n            aria-hidden = { props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true }\n          />\n        )\n      ) }\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAChD,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,eAA+C,GAAIC,KAAK,IAAK;EACxE,MAAM;IACJC,QAAQ;IACRC,SAAS,GAAG,CAAC;IACbC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAME,UAAU,GAAGf,MAAM,CAAiB,IAAI,CAAC;EAE/C,MAAMgB,cAAc,GAAG,kBAAkB,IAAIV,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMgB,EAAE,GAAGF,UAAU,CAACG,OAAO;IAC7B,IAAID,EAAE,EAAE;MACNL,gBAAgB,CAACK,EAAE,CAACE,YAAY,GAAGF,EAAE,CAACG,YAAY,CAAC;IACrD;EACF,CAAC,EAAE,CAACb,QAAQ,EAAEC,SAAS,CAAC,CAAC;EAEzB,MAAMa,YAAiC,GAAG;IACxCC,QAAQ,EAAE,QAAQ;IAClBC,OAAO,EAAE,aAAa;IACtBC,eAAe,EAAE,UAAU;IAC3BC,eAAe,EAAEjB;EACnB,CAAC;EAED,oBACET,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAG,+BAAgClB,cAAc,IAAI,EAAE;EAAK,gBACxEV,KAAA,CAAA2B,aAAA;IACEE,GAAG,EAAGb,UAAY;IAClBY,SAAS,EAAG,oBAAsB;IAClCE,KAAK,EAAGnB,UAAU,GAAG;MAAE,GAAGW,YAAY;MAAEI,eAAe,EAAE;IAAO,CAAC,GAAGJ;EAAc,GAEhFd,QACC,CAAC,EACJI,aAAa,KACbK,cAAc,GACZF,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACwB,gBAAgB,GAAGxB,KAAK,CAACyB,gBAC9C,CAAC,gBAEDhC,KAAA,CAAA2B,aAAA,CAACxB,YAAY;IACX8B,cAAc,EAAGA,CAAA,KAAM;MACrBnB,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwB2B,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJ3B,KAAK,CAAwB4B,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,yBAAyB;IAC5BC,QAAQ,EAAC,gBAAgB;IACzBC,KAAK,EACH3B,UAAU,GACLJ,KAAK,CAAwBgC,eAAe,IAAI,aAAa,GAC7DhC,KAAK,CAAwBiC,eAAe,IAAI,aACtD;IACDC,QAAQ,EACLlC,KAAK,CAAwBmC,IAAI,GAAG;MACnCA,IAAI,EAAE/B,UAAU,GACXJ,KAAK,CAAwBmC,IAAI,CAAEC,YAAY,GAC/CpC,KAAK,CAAwBmC,IAAI,CAAEE;IAC1C,CAAC,GAAGC,SACL;IACD,eAAgBtC,KAAK,CAAC2B,6BAA6B,IAAI3B,KAAK,CAAC4B,6BAA6B,GAAG,KAAK,GAAG;EAAM,CAC5G,CACF,CAEA,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"RevealMoreBelow.js","names":["React","useRef","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreBelow","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","contentRef","isCustomButton","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore"],"sources":["../../../../../src/components/design/revealMore/RevealMoreBelow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreBelowProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreBelow: React.FC<RevealMoreBelowProps> = (props) => {\n  const {\n    children,\n    lineClamp = 2,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const el = contentRef.current;\n    if (el) {\n      setIsOverflowing(el.scrollHeight > el.clientHeight);\n    }\n  }, [children, lineClamp]);\n\n  const elementStyle: React.CSSProperties = {\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical',\n    WebkitLineClamp: lineClamp,\n  };\n\n  return (\n    <div className={ `revealMore revealMore_below ${ customCssClass || '' }` }>\n      <div\n        ref={ contentRef }\n        className={ 'revealMore_content' }\n        style={ isExpanded ? { ...elementStyle, WebkitLineClamp: 'none' } : elementStyle }\n      >\n        { children }\n      </div>\n      { isOverflowing && (\n        isCustomButton ? (\n          renderCustomButton(\n            isExpanded ? props.revealLessButton : props.revealMoreButton\n          )\n        ) : (\n          <SimpleButton\n            onClickHandler={ () => {\n              toggleExpand();\n              if (isExpanded) {\n                (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n              } else {\n                (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n              }\n            } }\n            id='revealMore_button-below'\n            cssClass=\"button compact\"\n            label={\n              isExpanded \n                ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n            }\n            leftIcon={\n              isExpanded\n                ? (props as ManagedButtonProps).icon?.onRevealLess\n                : (props as ManagedButtonProps).icon?.onRevealMore\n            }\n            aria-hidden = { props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true }\n          />\n        )\n      ) }\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAChD,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,eAA+C,GAAIC,KAAK,IAAK;EACxE,MAAM;IACJC,QAAQ;IACRC,SAAS,GAAG,CAAC;IACbC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAME,UAAU,GAAGf,MAAM,CAAiB,IAAI,CAAC;EAE/C,MAAMgB,cAAc,GAAG,kBAAkB,IAAIV,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMgB,EAAE,GAAGF,UAAU,CAACG,OAAO;IAC7B,IAAID,EAAE,EAAE;MACNL,gBAAgB,CAACK,EAAE,CAACE,YAAY,GAAGF,EAAE,CAACG,YAAY,CAAC;IACrD;EACF,CAAC,EAAE,CAACb,QAAQ,EAAEC,SAAS,CAAC,CAAC;EAEzB,MAAMa,YAAiC,GAAG;IACxCC,QAAQ,EAAE,QAAQ;IAClBC,OAAO,EAAE,aAAa;IACtBC,eAAe,EAAE,UAAU;IAC3BC,eAAe,EAAEjB;EACnB,CAAC;EAED,oBACET,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAG,+BAAgClB,cAAc,IAAI,EAAE;EAAK,gBACxEV,KAAA,CAAA2B,aAAA;IACEE,GAAG,EAAGb,UAAY;IAClBY,SAAS,EAAG,oBAAsB;IAClCE,KAAK,EAAGnB,UAAU,GAAG;MAAE,GAAGW,YAAY;MAAEI,eAAe,EAAE;IAAO,CAAC,GAAGJ;EAAc,GAEhFd,QACC,CAAC,EACJI,aAAa,KACbK,cAAc,GACZF,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACwB,gBAAgB,GAAGxB,KAAK,CAACyB,gBAC9C,CAAC,gBAEDhC,KAAA,CAAA2B,aAAA,CAACxB,YAAY;IACX8B,cAAc,EAAGA,CAAA,KAAM;MACrBnB,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwB2B,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJ3B,KAAK,CAAwB4B,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,yBAAyB;IAC5BC,QAAQ,EAAC,gBAAgB;IACzBC,KAAK,EACH3B,UAAU,GACLJ,KAAK,CAAwBgC,eAAe,IAAI,aAAa,GAC7DhC,KAAK,CAAwBiC,eAAe,IAAI,aACtD;IACDC,QAAQ,EACN9B,UAAU,GACLJ,KAAK,CAAwBmC,IAAI,EAAEC,YAAY,GAC/CpC,KAAK,CAAwBmC,IAAI,EAAEE,YACzC;IACD,eAAgBrC,KAAK,CAAC2B,6BAA6B,IAAI3B,KAAK,CAAC4B,6BAA6B,GAAG,KAAK,GAAG;EAAM,CAC5G,CACF,CAEA,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/RevealMoreInline.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { SimpleButton } from '../../..';
+import { SimpleButton } from '../../form/buttons/SimpleButton';
 import { useRevealMoreLogic } from './hooks/useRevealMoreLogic';
 import { useCustomButton } from './hooks/useCustomButton';
 export const RevealMoreInline = props => {
@@ -49,9 +49,7 @@ export const RevealMoreInline = props => {
     id: "revealMore_button-inline",
     cssClass: "button compact text_only",
     label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
-    leftIcon: props.icon ? {
-      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
-    } : undefined
+    leftIcon: isExpanded ? props.icon?.onRevealLess : props.icon?.onRevealMore
   }))));
 };
 //# sourceMappingURL=RevealMoreInline.js.map

package/dist/esm/components/design/revealMore/RevealMoreInline.js.map

@@ -1 +1 @@
-{"version":3,"file":"RevealMoreInline.js","names":["React","useState","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreInline","props","children","characterClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","truncatedText","setTruncatedText","isCustomButton","text","limit","length","substring","displayText","createElement","className","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreInline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreInlineProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreInline: React.FC<RevealMoreInlineProps> = (props) => {\n  const {\n    children,\n    characterClamp = 100,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const [truncatedText, setTruncatedText] = useState('');\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const text = children as string;\n    const limit = characterClamp;\n    \n    if (text.length > limit) {\n      setTruncatedText(text.substring(0, limit));\n      setIsOverflowing(true);\n    } else {\n      setTruncatedText(text);\n      setIsOverflowing(false);\n    }\n  }, [children, characterClamp]);\n\n  const displayText = isExpanded ? (children as string) : truncatedText;\n\n  return (\n    <div className={ `revealMore revealMore_inline ${ customCssClass || '' }` }>\n      <span className=\"revealMore_content\">\n        { displayText }\n        { isOverflowing && (\n          isCustomButton ? (\n            renderCustomButton(\n              isExpanded ? props.revealLessButton : props.revealMoreButton\n            )\n          ) : (\n            <SimpleButton\n              onClickHandler={ () => {\n                toggleExpand();\n                if (isExpanded) {\n                  (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n                } else {\n                  (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n                }\n              } }\n              id='revealMore_button-inline'\n              cssClass=\"button compact text_only\"\n              label={\n                isExpanded \n                  ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                  : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n              }\n              leftIcon={\n                (props as ManagedButtonProps).icon ? { \n                  icon: isExpanded \n                    ? (props as ManagedButtonProps).icon!.onRevealLess \n                    : (props as ManagedButtonProps).icon!.onRevealMore \n                } : undefined\n              }\n            />\n          )\n        ) }\n      </span>\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,cAAc,GAAG,GAAG;IACpBC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAM,CAACE,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,QAAQ,CAAC,EAAE,CAAC;EAEtD,MAAMiB,cAAc,GAAG,kBAAkB,IAAIX,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMiB,IAAI,GAAGX,QAAkB;IAC/B,MAAMY,KAAK,GAAGX,cAAc;IAE5B,IAAIU,IAAI,CAACE,MAAM,GAAGD,KAAK,EAAE;MACvBH,gBAAgB,CAACE,IAAI,CAACG,SAAS,CAAC,CAAC,EAAEF,KAAK,CAAC,CAAC;MAC1CP,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,MAAM;MACLI,gBAAgB,CAACE,IAAI,CAAC;MACtBN,gBAAgB,CAAC,KAAK,CAAC;IACzB;EACF,CAAC,EAAE,CAACL,QAAQ,EAAEC,cAAc,CAAC,CAAC;EAE9B,MAAMc,WAAW,GAAGZ,UAAU,GAAIH,QAAQ,GAAcQ,aAAa;EAErE,oBACEhB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAG,gCAAiCf,cAAc,IAAI,EAAE;EAAK,gBACzEV,KAAA,CAAAwB,aAAA;IAAMC,SAAS,EAAC;EAAoB,GAChCF,WAAW,EACXX,aAAa,KACbM,cAAc,GACZH,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACmB,gBAAgB,GAAGnB,KAAK,CAACoB,gBAC9C,CAAC,gBAED3B,KAAA,CAAAwB,aAAA,CAACrB,YAAY;IACXyB,cAAc,EAAGA,CAAA,KAAM;MACrBd,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwBsB,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJtB,KAAK,CAAwBuB,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,0BAA0B;IAC7BC,QAAQ,EAAC,0BAA0B;IACnCC,KAAK,EACHtB,UAAU,GACLJ,KAAK,CAAwB2B,eAAe,IAAI,aAAa,GAC7D3B,KAAK,CAAwB4B,eAAe,IAAI,aACtD;IACDC,QAAQ,EACL7B,KAAK,CAAwB8B,IAAI,GAAG;MACnCA,IAAI,EAAE1B,UAAU,GACXJ,KAAK,CAAwB8B,IAAI,CAAEC,YAAY,GAC/C/B,KAAK,CAAwB8B,IAAI,CAAEE;IAC1C,CAAC,GAAGC;EACL,CACF,CACF,CAEC,CACH,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"RevealMoreInline.js","names":["React","useState","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreInline","props","children","characterClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","truncatedText","setTruncatedText","isCustomButton","text","limit","length","substring","displayText","createElement","className","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore"],"sources":["../../../../../src/components/design/revealMore/RevealMoreInline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { RevealMoreInlineProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreInline: React.FC<RevealMoreInlineProps> = (props) => {\n  const {\n    children,\n    characterClamp = 100,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const [truncatedText, setTruncatedText] = useState('');\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const text = children as string;\n    const limit = characterClamp;\n    \n    if (text.length > limit) {\n      setTruncatedText(text.substring(0, limit));\n      setIsOverflowing(true);\n    } else {\n      setTruncatedText(text);\n      setIsOverflowing(false);\n    }\n  }, [children, characterClamp]);\n\n  const displayText = isExpanded ? (children as string) : truncatedText;\n\n  return (\n    <div className={ `revealMore revealMore_inline ${ customCssClass || '' }` }>\n      <span className=\"revealMore_content\">\n        { displayText }\n        { isOverflowing && (\n          isCustomButton ? (\n            renderCustomButton(\n              isExpanded ? props.revealLessButton : props.revealMoreButton\n            )\n          ) : (\n            <SimpleButton\n              onClickHandler={ () => {\n                toggleExpand();\n                if (isExpanded) {\n                  (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n                } else {\n                  (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n                }\n              } }\n              id='revealMore_button-inline'\n              cssClass=\"button compact text_only\"\n              label={\n                isExpanded \n                  ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                  : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n              }\n              leftIcon={\n                isExpanded\n                  ? (props as ManagedButtonProps).icon?.onRevealLess\n                  : (props as ManagedButtonProps).icon?.onRevealMore\n              }\n            />\n          )\n        ) }\n      </span>\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,iCAAiC;AAE9D,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,cAAc,GAAG,GAAG;IACpBC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAM,CAACE,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,QAAQ,CAAC,EAAE,CAAC;EAEtD,MAAMiB,cAAc,GAAG,kBAAkB,IAAIX,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMiB,IAAI,GAAGX,QAAkB;IAC/B,MAAMY,KAAK,GAAGX,cAAc;IAE5B,IAAIU,IAAI,CAACE,MAAM,GAAGD,KAAK,EAAE;MACvBH,gBAAgB,CAACE,IAAI,CAACG,SAAS,CAAC,CAAC,EAAEF,KAAK,CAAC,CAAC;MAC1CP,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,MAAM;MACLI,gBAAgB,CAACE,IAAI,CAAC;MACtBN,gBAAgB,CAAC,KAAK,CAAC;IACzB;EACF,CAAC,EAAE,CAACL,QAAQ,EAAEC,cAAc,CAAC,CAAC;EAE9B,MAAMc,WAAW,GAAGZ,UAAU,GAAIH,QAAQ,GAAcQ,aAAa;EAErE,oBACEhB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAG,gCAAiCf,cAAc,IAAI,EAAE;EAAK,gBACzEV,KAAA,CAAAwB,aAAA;IAAMC,SAAS,EAAC;EAAoB,GAChCF,WAAW,EACXX,aAAa,KACbM,cAAc,GACZH,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACmB,gBAAgB,GAAGnB,KAAK,CAACoB,gBAC9C,CAAC,gBAED3B,KAAA,CAAAwB,aAAA,CAACrB,YAAY;IACXyB,cAAc,EAAGA,CAAA,KAAM;MACrBd,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwBsB,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJtB,KAAK,CAAwBuB,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,0BAA0B;IAC7BC,QAAQ,EAAC,0BAA0B;IACnCC,KAAK,EACHtB,UAAU,GACLJ,KAAK,CAAwB2B,eAAe,IAAI,aAAa,GAC7D3B,KAAK,CAAwB4B,eAAe,IAAI,aACtD;IACDC,QAAQ,EACNzB,UAAU,GACLJ,KAAK,CAAwB8B,IAAI,EAAEC,YAAY,GAC/C/B,KAAK,CAAwB8B,IAAI,EAAEE;EACzC,CACF,CACF,CAEC,CACH,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -1 +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":[]}
+{"version":3,"file":"revealMoreTypes.js","names":[],"sources":["../../../../../../src/components/design/revealMore/types/revealMoreTypes.ts"],"sourcesContent":["import React from 'react';\nimport { IconSource } from '../../../../helpers/iconHelpers';\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: IconSource;\n    onRevealLess: IconSource;\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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Icon } from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import './sidePanel.css';
 export const SidePanel = ({
   id,
@@ -33,7 +33,7 @@ export const SidePanel = ({
       onClose();
     }
   }, [isOpenState, onClose, onOpen]);
-  const getIconCssClass = () => {
+  const getToggleIcon = () => {
     if (icons) {
       return isOpenState ? icons.closed : icons.open;
     }
@@ -57,9 +57,7 @@ export const SidePanel = ({
     title: TOGGLE_TEXT,
     type: "button",
     onClick: () => TogglePanelOpenState()
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: getIconCssClass()
-  }), /*#__PURE__*/React.createElement("span", {
+  }, renderIcon(getToggleIcon()), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
   }, "Open and close panel"));
   const panelCssClass = useCallback(() => `sidePanel 

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

@@ -1 +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":[]}
+{"version":3,"file":"SidePanel.js","names":["React","useCallback","useEffect","useRef","useState","renderIcon","SidePanel","id","panelLabel","size","position","positionRefNode","animation","icons","onClose","onOpen","isOpen","allowOverflow","isFloating","customCssClass","customControlButtonCssClass","children","isOpenState","setIsOpenState","panelElement","TOGGLE_TEXT","panelCloseButton","TogglePanelOpenState","newStateIsOpen","getToggleIcon","closed","open","PanelCloseButton","createElement","ref","className","title","type","onClick","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 { IconSource, renderIcon } from '../../../helpers/iconHelpers';\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: IconSource;\n    closed: IconSource;\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 getToggleIcon = (): IconSource => {\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      { renderIcon(getToggleIcon()) }\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/statusIndicators/statusIconLabel/StatusIconLabel.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';
-import { Icon } from '../../icons/basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import './statusIconLabel.css';
 export const StatusIconLabel = ({
   description,
@@ -23,20 +23,15 @@ export const StatusIconLabel = ({
     defCon3: 'fire',
     success: 'info'
   };
-  const StatusIcon = () => {
-    if (customIcon) {
-      return /*#__PURE__*/React.createElement(Icon, customIcon);
-    }
-    return /*#__PURE__*/React.createElement(Icon, {
-      icon: iconMap[indicator]
-    });
-  };
+  const statusIcon = renderIcon(customIcon, {
+    fallback: 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", {
+  }, iconPosition === 'left' && statusIcon, /*#__PURE__*/React.createElement("span", {
     className: hideLabel ? 'sr-only' : ''
-  }, label), iconPosition !== 'left' && /*#__PURE__*/React.createElement(StatusIcon, null));
+  }, label), iconPosition !== 'left' && statusIcon);
 };
 export default StatusIconLabel;
 //# sourceMappingURL=StatusIconLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIconLabel.js","names":["React","dateToShortReadableDateTime","Icon","StatusIconLabel","description","status","label","hideLabel","indicator","dueAt","customIcon","customCssClass","iconPosition","formattedDueDateTime","iconMap","info","alert","warn","defCon3","success","StatusIcon","createElement","icon","className","title"],"sources":["../../../../../../src/components/design/statusIndicators/statusIconLabel/StatusIconLabel.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode } from 'react';\nimport { StatusInterface } from '../statusIndicators.interface';\nimport { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\n\nimport './statusIconLabel.scss';\n\nexport interface StatusIconLabelInterface extends Omit<StatusInterface, 'onClick'> {\n  customIcon?: IconProps;\n  iconPosition?: 'left' | 'right';\n  label: string | ReactNode;\n  hideLabel?: boolean;\n  customCssClass?: string;\n}\n\nexport const StatusIconLabel: React.FC<StatusIconLabelInterface> = (\n  {\n    description,\n    status,\n    label,\n    hideLabel = false,\n    indicator = 'info',\n    dueAt,\n    customIcon,\n    customCssClass = '',\n    iconPosition = 'left'\n  }\n) => {\n  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';\n\n  const iconMap: { [index: string]: string } = {\n    info: 'info',\n    alert: 'notification',\n    warn: 'warning',\n    defCon3: 'fire',\n    success: 'info'\n  };\n\n  const StatusIcon = () => {\n    if (customIcon) {\n      return <Icon { ...customIcon } />;\n    }\n    return <Icon icon={ iconMap[indicator] } />;\n  };\n\n  return (\n    <span\n      className={ `statusIconLabel ${ indicator } ${ customCssClass }` }\n      title={ `${ status } ${ description ? ': ' + description : '' }${ dueAt ? '. Due at ' + formattedDueDateTime : '' }` }\n    >\n      {\n        iconPosition === 'left' &&\n        <StatusIcon />\n      }\n      <span className={ hideLabel ? 'sr-only' : '' }>{ label }</span>\n      {\n        iconPosition !== 'left' &&\n        <StatusIcon />\n      }\n    </span>\n  );\n};\n\nexport default StatusIconLabel;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,IAAI,QAAmB,4BAA4B;AAE5D,OAAO,wBAAwB;AAU/B,OAAO,MAAMC,eAAmD,GAAGA,CACjE;EACEC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,MAAM;EAClBC,KAAK;EACLC,UAAU;EACVC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG;AACjB,CAAC,KACE;EACH,MAAMC,oBAAoB,GAAGJ,KAAK,GAAGR,2BAA2B,CAACQ,KAAK,CAAC,GAAG,KAAK;EAE/E,MAAMK,OAAoC,GAAG;IAC3CC,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,cAAc;IACrBC,IAAI,EAAE,SAAS;IACfC,OAAO,EAAE,MAAM;IACfC,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvB,IAAIV,UAAU,EAAE;MACd,oBAAOV,KAAA,CAAAqB,aAAA,CAACnB,IAAI,EAAMQ,UAAc,CAAC;IACnC;IACA,oBAAOV,KAAA,CAAAqB,aAAA,CAACnB,IAAI;MAACoB,IAAI,EAAGR,OAAO,CAACN,SAAS;IAAG,CAAE,CAAC;EAC7C,CAAC;EAED,oBACER,KAAA,CAAAqB,aAAA;IACEE,SAAS,EAAG,mBAAoBf,SAAS,IAAMG,cAAc,EAAK;IAClEa,KAAK,EAAG,GAAInB,MAAM,IAAMD,WAAW,GAAG,IAAI,GAAGA,WAAW,GAAG,EAAE,GAAKK,KAAK,GAAG,WAAW,GAAGI,oBAAoB,GAAG,EAAE;EAAK,GAGpHD,YAAY,KAAK,MAAM,iBACvBZ,KAAA,CAAAqB,aAAA,CAACD,UAAU,MAAE,CAAC,eAEhBpB,KAAA,CAAAqB,aAAA;IAAME,SAAS,EAAGhB,SAAS,GAAG,SAAS,GAAG;EAAI,GAAGD,KAAa,CAAC,EAE7DM,YAAY,KAAK,MAAM,iBACvBZ,KAAA,CAAAqB,aAAA,CAACD,UAAU,MAAE,CAEX,CAAC;AAEX,CAAC;AAED,eAAejB,eAAe","ignoreList":[]}
+{"version":3,"file":"StatusIconLabel.js","names":["React","dateToShortReadableDateTime","renderIcon","StatusIconLabel","description","status","label","hideLabel","indicator","dueAt","customIcon","customCssClass","iconPosition","formattedDueDateTime","iconMap","info","alert","warn","defCon3","success","statusIcon","fallback","createElement","className","title"],"sources":["../../../../../../src/components/design/statusIndicators/statusIconLabel/StatusIconLabel.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode } from 'react';\nimport { StatusInterface } from '../statusIndicators.interface';\nimport { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './statusIconLabel.scss';\n\nexport interface StatusIconLabelInterface extends Omit<StatusInterface, 'onClick'> {\n  customIcon?: IconSource;\n  iconPosition?: 'left' | 'right';\n  label: string | ReactNode;\n  hideLabel?: boolean;\n  customCssClass?: string;\n}\n\nexport const StatusIconLabel: React.FC<StatusIconLabelInterface> = (\n  {\n    description,\n    status,\n    label,\n    hideLabel = false,\n    indicator = 'info',\n    dueAt,\n    customIcon,\n    customCssClass = '',\n    iconPosition = 'left'\n  }\n) => {\n  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';\n\n  const iconMap: { [index: string]: string } = {\n    info: 'info',\n    alert: 'notification',\n    warn: 'warning',\n    defCon3: 'fire',\n    success: 'info'\n  };\n\n  const statusIcon = renderIcon(customIcon, { fallback: iconMap[indicator] });\n\n  return (\n    <span\n      className={ `statusIconLabel ${ indicator } ${ customCssClass }` }\n      title={ `${ status } ${ description ? ': ' + description : '' }${ dueAt ? '. Due at ' + formattedDueDateTime : '' }` }\n    >\n      { iconPosition === 'left' && statusIcon }\n      <span className={ hideLabel ? 'sr-only' : '' }>{ label }</span>\n      { iconPosition !== 'left' && statusIcon }\n    </span>\n  );\n};\n\nexport default StatusIconLabel;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAAqBC,UAAU,QAAQ,iCAAiC;AAExE,OAAO,wBAAwB;AAU/B,OAAO,MAAMC,eAAmD,GAAGA,CACjE;EACEC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,MAAM;EAClBC,KAAK;EACLC,UAAU;EACVC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG;AACjB,CAAC,KACE;EACH,MAAMC,oBAAoB,GAAGJ,KAAK,GAAGR,2BAA2B,CAACQ,KAAK,CAAC,GAAG,KAAK;EAE/E,MAAMK,OAAoC,GAAG;IAC3CC,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,cAAc;IACrBC,IAAI,EAAE,SAAS;IACfC,OAAO,EAAE,MAAM;IACfC,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,UAAU,GAAGlB,UAAU,CAACQ,UAAU,EAAE;IAAEW,QAAQ,EAAEP,OAAO,CAACN,SAAS;EAAE,CAAC,CAAC;EAE3E,oBACER,KAAA,CAAAsB,aAAA;IACEC,SAAS,EAAG,mBAAoBf,SAAS,IAAMG,cAAc,EAAK;IAClEa,KAAK,EAAG,GAAInB,MAAM,IAAMD,WAAW,GAAG,IAAI,GAAGA,WAAW,GAAG,EAAE,GAAKK,KAAK,GAAG,WAAW,GAAGI,oBAAoB,GAAG,EAAE;EAAK,GAEpHD,YAAY,KAAK,MAAM,IAAIQ,UAAU,eACvCpB,KAAA,CAAAsB,aAAA;IAAMC,SAAS,EAAGhB,SAAS,GAAG,SAAS,GAAG;EAAI,GAAGD,KAAa,CAAC,EAC7DM,YAAY,KAAK,MAAM,IAAIQ,UACzB,CAAC;AAEX,CAAC;AAED,eAAejB,eAAe","ignoreList":[]}

package/dist/esm/components/design/tabs/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import Icon from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import NotificationIcon from '../icons/notificationIcon/NotificationIcon';
 import './tabs.css';
 export const Tabs = ({
@@ -43,7 +43,7 @@ export const Tabs = ({
       type: "button",
       onClick: () => setActiveTab(index),
       className: `button tabControl ${notificationIcon ? 'withNotification' : ''} ${index === activeTab ? 'active' : ''}`
-    }, leftIcon && /*#__PURE__*/React.createElement(Icon, leftIcon), text, rightIcon && /*#__PURE__*/React.createElement(Icon, rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
+    }, renderIcon(leftIcon), text, renderIcon(rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
   })), /*#__PURE__*/React.createElement("div", {
     className: "tabPanels"
   }, tabs.map((tab, index) => {

package/dist/esm/components/design/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","useState","Icon","NotificationIcon","Tabs","tabs","activeTabIndex","activeTab","setActiveTab","getIds","id","controlId","panelId","createElement","className","role","map","tab","index","control","text","leftIcon","rightIcon","notificationIcon","key","tabIndex","type","onClick","content"],"sources":["../../../../../src/components/design/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Icon, { IconProps } from '../icons/basicIcon/Icon';\nimport NotificationIcon, { NotificationIconProps } from '../icons/notificationIcon/NotificationIcon';\n\nimport './tabs.scss';\n\ninterface TabProps {\n  id: string;\n  control: {\n    text: string;\n    leftIcon?: IconProps;\n    rightIcon?: IconProps;\n    notificationIcon?: NotificationIconProps;\n  },\n  content: React.ReactNode | React.ReactElement\n}\n\ninterface TabsProps {\n  tabs: TabProps[];\n  activeTabIndex?: number;\n}\n\nexport const Tabs: React.FC<TabsProps> = (\n  {\n    tabs,\n    activeTabIndex = 0\n  }\n) => {\n  const [activeTab, setActiveTab] = useState(activeTabIndex);\n\n  const getIds = (id: string) => ({\n    controlId: `tabControl_${ id }`,\n    panelId: `tabPanel_${ id }`\n  });\n\n  return (\n    <div className=\"tabGroup\">\n      <div className=\"tabControls\" role=\"tablist\">\n        {\n          tabs.map((tab, index) => {\n            const { id, control } = tab;\n            const {\n              text, leftIcon, rightIcon, notificationIcon\n            } = control;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <button key={ controlId }\n                role=\"tab\"\n                id={ controlId }\n                aria-controls={ panelId }\n                aria-selected={ index === activeTab }\n                tabIndex={ index === activeTab ? 0 : -1 }\n                type=\"button\"\n                onClick={ () => setActiveTab(index) }\n                className={ `button tabControl ${ notificationIcon ? 'withNotification' : '' } ${ index === activeTab ? 'active' : '' }` }\n              >\n                {\n                  leftIcon && <Icon { ...leftIcon } />\n                }\n\n                { text }\n\n                {\n                  rightIcon && <Icon { ...rightIcon } />\n                }\n\n                {\n                  notificationIcon && <NotificationIcon { ...notificationIcon } />\n                }\n              </button>\n            );\n          })\n        }\n      </div>\n\n      <div className=\"tabPanels\">\n        {\n          tabs.map((tab, index) => {\n            const { id, content } = tab;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <div key={ panelId }\n                aria-labelledby={ controlId }\n                role=\"tabpanel\"\n                tabIndex={ index === activeTab ? 0 : -1 }\n                id={ panelId }\n                className={ `tabPanel ${ index === activeTab ? 'active' : '' }` }\n              >\n                { content }\n              </div>\n            );\n          })\n        }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,IAAI,MAAqB,yBAAyB;AACzD,OAAOC,gBAAgB,MAAiC,4CAA4C;AAEpG,OAAO,aAAa;AAkBpB,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,IAAI;EACJC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAACK,cAAc,CAAC;EAE1D,MAAMG,MAAM,GAAIC,EAAU,KAAM;IAC9BC,SAAS,EAAE,cAAeD,EAAE,EAAG;IAC/BE,OAAO,EAAE,YAAaF,EAAE;EAC1B,CAAC,CAAC;EAEF,oBACEV,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,aAAa;IAACC,IAAI,EAAC;EAAS,GAEvCV,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAES;IAAQ,CAAC,GAAGF,GAAG;IAC3B,MAAM;MACJG,IAAI;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAC7B,CAAC,GAAGJ,OAAO;IAEX,MAAM;MAAER,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAQW,GAAG,EAAGb,SAAW;MACvBI,IAAI,EAAC,KAAK;MACVL,EAAE,EAAGC,SAAW;MAChB,iBAAgBC,OAAS;MACzB,iBAAgBM,KAAK,KAAKX,SAAW;MACrCkB,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCmB,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAGA,CAAA,KAAMnB,YAAY,CAACU,KAAK,CAAG;MACrCJ,SAAS,EAAG,qBAAsBS,gBAAgB,GAAG,kBAAkB,GAAG,EAAE,IAAML,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAGxHc,QAAQ,iBAAIrB,KAAA,CAAAa,aAAA,CAACX,IAAI,EAAMmB,QAAY,CAAC,EAGpCD,IAAI,EAGJE,SAAS,iBAAItB,KAAA,CAAAa,aAAA,CAACX,IAAI,EAAMoB,SAAa,CAAC,EAItCC,gBAAgB,iBAAIvB,KAAA,CAAAa,aAAA,CAACV,gBAAgB,EAAMoB,gBAAoB,CAE3D,CAAC;EAEb,CAAC,CAEA,CAAC,eAENvB,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAW,GAEtBT,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAEkB;IAAQ,CAAC,GAAGX,GAAG;IAE3B,MAAM;MAAEN,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAKW,GAAG,EAAGZ,OAAS;MAClB,mBAAkBD,SAAW;MAC7BI,IAAI,EAAC,UAAU;MACfU,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCG,EAAE,EAAGE,OAAS;MACdE,SAAS,EAAG,YAAaI,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAE/DqB,OACC,CAAC;EAEV,CAAC,CAEA,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Tabs.js","names":["React","useState","renderIcon","NotificationIcon","Tabs","tabs","activeTabIndex","activeTab","setActiveTab","getIds","id","controlId","panelId","createElement","className","role","map","tab","index","control","text","leftIcon","rightIcon","notificationIcon","key","tabIndex","type","onClick","content"],"sources":["../../../../../src/components/design/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { IconSource, renderIcon } from '../../../helpers/iconHelpers';\nimport NotificationIcon, { NotificationIconProps } from '../icons/notificationIcon/NotificationIcon';\n\nimport './tabs.scss';\n\ninterface TabProps {\n  id: string;\n  control: {\n    text: string;\n    leftIcon?: IconSource;\n    rightIcon?: IconSource;\n    notificationIcon?: NotificationIconProps;\n  },\n  content: React.ReactNode | React.ReactElement\n}\n\ninterface TabsProps {\n  tabs: TabProps[];\n  activeTabIndex?: number;\n}\n\nexport const Tabs: React.FC<TabsProps> = (\n  {\n    tabs,\n    activeTabIndex = 0\n  }\n) => {\n  const [activeTab, setActiveTab] = useState(activeTabIndex);\n\n  const getIds = (id: string) => ({\n    controlId: `tabControl_${ id }`,\n    panelId: `tabPanel_${ id }`\n  });\n\n  return (\n    <div className=\"tabGroup\">\n      <div className=\"tabControls\" role=\"tablist\">\n        {\n          tabs.map((tab, index) => {\n            const { id, control } = tab;\n            const {\n              text, leftIcon, rightIcon, notificationIcon\n            } = control;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <button key={ controlId }\n                role=\"tab\"\n                id={ controlId }\n                aria-controls={ panelId }\n                aria-selected={ index === activeTab }\n                tabIndex={ index === activeTab ? 0 : -1 }\n                type=\"button\"\n                onClick={ () => setActiveTab(index) }\n                className={ `button tabControl ${ notificationIcon ? 'withNotification' : '' } ${ index === activeTab ? 'active' : '' }` }\n              >\n                { renderIcon(leftIcon) }\n\n                { text }\n\n                { renderIcon(rightIcon) }\n\n                {\n                  notificationIcon && <NotificationIcon { ...notificationIcon } />\n                }\n              </button>\n            );\n          })\n        }\n      </div>\n\n      <div className=\"tabPanels\">\n        {\n          tabs.map((tab, index) => {\n            const { id, content } = tab;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <div key={ panelId }\n                aria-labelledby={ controlId }\n                role=\"tabpanel\"\n                tabIndex={ index === activeTab ? 0 : -1 }\n                id={ panelId }\n                className={ `tabPanel ${ index === activeTab ? 'active' : '' }` }\n              >\n                { content }\n              </div>\n            );\n          })\n        }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAAqBC,UAAU,QAAQ,8BAA8B;AACrE,OAAOC,gBAAgB,MAAiC,4CAA4C;AAEpG,OAAO,aAAa;AAkBpB,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,IAAI;EACJC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAACK,cAAc,CAAC;EAE1D,MAAMG,MAAM,GAAIC,EAAU,KAAM;IAC9BC,SAAS,EAAE,cAAeD,EAAE,EAAG;IAC/BE,OAAO,EAAE,YAAaF,EAAE;EAC1B,CAAC,CAAC;EAEF,oBACEV,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,aAAa;IAACC,IAAI,EAAC;EAAS,GAEvCV,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAES;IAAQ,CAAC,GAAGF,GAAG;IAC3B,MAAM;MACJG,IAAI;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAC7B,CAAC,GAAGJ,OAAO;IAEX,MAAM;MAAER,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAQW,GAAG,EAAGb,SAAW;MACvBI,IAAI,EAAC,KAAK;MACVL,EAAE,EAAGC,SAAW;MAChB,iBAAgBC,OAAS;MACzB,iBAAgBM,KAAK,KAAKX,SAAW;MACrCkB,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCmB,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAGA,CAAA,KAAMnB,YAAY,CAACU,KAAK,CAAG;MACrCJ,SAAS,EAAG,qBAAsBS,gBAAgB,GAAG,kBAAkB,GAAG,EAAE,IAAML,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAExHL,UAAU,CAACmB,QAAQ,CAAC,EAEpBD,IAAI,EAEJlB,UAAU,CAACoB,SAAS,CAAC,EAGrBC,gBAAgB,iBAAIvB,KAAA,CAAAa,aAAA,CAACV,gBAAgB,EAAMoB,gBAAoB,CAE3D,CAAC;EAEb,CAAC,CAEA,CAAC,eAENvB,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAW,GAEtBT,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAEkB;IAAQ,CAAC,GAAGX,GAAG;IAE3B,MAAM;MAAEN,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAKW,GAAG,EAAGZ,OAAS;MAClB,mBAAkBD,SAAW;MAC7BI,IAAI,EAAC,UAAU;MACfU,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCG,EAAE,EAAGE,OAAS;MACdE,SAAS,EAAG,YAAaI,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAE/DqB,OACC,CAAC;EAEV,CAAC,CAEA,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/themeLoader/ThemeLoader.js

@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useMemo } from 'react';
 import libraryThemes from '../../../autoGenerated/libraryThemes';
 import { AppContext } from '../../../contextProviders/appContext/AppContextProvider';
 import { CURRENT_DOMAIN } from '../../../constants/appEnvironment';
-import { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants';
+import { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants/libraryCDN';
 const themes = libraryThemes || {};
 export const ThemeLoader = ({
   useMin = false,

package/dist/esm/components/design/themeLoader/ThemeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeLoader.js","names":["React","useContext","useEffect","useRef","useMemo","libraryThemes","AppContext","CURRENT_DOMAIN","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","themes","ThemeLoader","useMin","forceProd","forceCacheBusting","userTheme","useLatest","baseCssLink","themeCssLink","appContextProvider","appTheme","appContext","theme","activeTheme","publicLibraryDomain","env","process","NODE_ENV","isProduction","isDevelopment","cdnBaseUrl","getThemeCss","console","warn","buildPath","dev","min","versioned","cssFile","css","cacheBuster","Date","getTime","libraryDomain","baseCss","themeCss","current","href","createElement","Fragment","ref","rel","as"],"sources":["../../../../../src/components/design/themeLoader/ThemeLoader.tsx"],"sourcesContent":["'use client';\n\nimport React, { useContext, useEffect, useRef, useMemo } from 'react';\n\nimport libraryThemes from '../../../autoGenerated/libraryThemes';\nimport { AppContext } from '../../../contextProviders/appContext/AppContextProvider';\nimport { CURRENT_DOMAIN } from '../../../constants/appEnvironment';\nimport { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants';\n\nexport type ThemeStructure = {\n  buildPath: string;\n  dev: {\n    css: string;\n    map: string;\n  };\n  min: {\n    css: string;\n    map: string;\n  };\n  versioned: {\n    css: string;\n    map: string;\n  };\n};\n\ntype AvailableThemes = {\n  [themeName: string]: ThemeStructure;\n};\n\ntype themeLoaderProps = {\n  useMin?: boolean,\n  forceProd?: boolean,\n  forceCacheBusting?: boolean,\n  userTheme?: string;\n  useLatest?: boolean;\n};\n\nconst themes: AvailableThemes = libraryThemes || {};\n\nexport const ThemeLoader: React.FC<themeLoaderProps> = (\n  {\n    useMin = false,\n    forceProd = false,\n    forceCacheBusting = false,\n    userTheme,\n    useLatest = true,\n  }\n) => {\n  const baseCssLink = useRef<HTMLLinkElement>(null);\n  const themeCssLink = useRef<HTMLLinkElement>(null);\n\n  const appContextProvider = useContext(AppContext);\n  const appTheme = appContextProvider?.appContext?.theme;\n\n  const activeTheme = userTheme || appTheme;\n  const publicLibraryDomain = appContextProvider?.appContext?.publicLibraryDomain || '';\n\n  const env = process.env.NODE_ENV;\n  const isProduction = env === 'production' || env === 'prod';\n  const isDevelopment = env === 'development' || env === 'dev';\n\n  const cdnBaseUrl = `${ isProduction ? LIBRARY_CDN_PROD_BASE_URL : LIBRARY_CDN_DEV_BASE_URL }/${ useLatest ? 'latest' : LIBRARY_VERSION }`;\n\n  const getThemeCss = (theme: string | undefined) => {\n    if (!theme || !themes[theme]) {\n      console.warn(`Theme \"${ theme }\" not found. Using default variables instead.`);\n      return null;\n    }\n\n    const {\n      buildPath, dev, min, versioned\n    } = themes[theme];\n\n    const cssFile = () => {\n      if (forceProd) {\n        return versioned.css;\n      }\n\n      if (isProduction) {\n        return useMin ? versioned.css : min.css;\n      }\n\n      if (isDevelopment) {\n        return useMin ? min.css : dev.css;\n      }\n\n      return dev.css;\n    };\n\n    const cacheBuster = CURRENT_DOMAIN === 'localhost' || forceCacheBusting ? `?v=${ new Date().getTime() }` : '';\n    const libraryDomain = publicLibraryDomain !== '' ? `${ publicLibraryDomain }` : cdnBaseUrl;\n\n    return `${ libraryDomain }/${ buildPath }/${ cssFile() }${ cacheBuster }`;\n  };\n\n  const baseCss = useMemo(() => getThemeCss('base'), [activeTheme, useMin, forceProd, forceCacheBusting]);\n  const themeCss = useMemo(() => getThemeCss(activeTheme), [activeTheme, useMin, forceProd, forceCacheBusting]);\n\n  useEffect(() => {\n    if (baseCss && baseCssLink.current) {\n      baseCssLink.current.href = baseCss;\n    }\n    if (themeCss && themeCssLink.current) {\n      themeCssLink.current.href = themeCss;\n    }\n  }, [activeTheme]);\n\n  return (\n    <>\n      <link ref={ baseCssLink } rel=\"stylesheet\" as=\"style\" />\n      <link ref={ themeCssLink } rel=\"stylesheet\" as=\"style\" />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ThemeLoader.js","names":["React","useContext","useEffect","useRef","useMemo","libraryThemes","AppContext","CURRENT_DOMAIN","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","themes","ThemeLoader","useMin","forceProd","forceCacheBusting","userTheme","useLatest","baseCssLink","themeCssLink","appContextProvider","appTheme","appContext","theme","activeTheme","publicLibraryDomain","env","process","NODE_ENV","isProduction","isDevelopment","cdnBaseUrl","getThemeCss","console","warn","buildPath","dev","min","versioned","cssFile","css","cacheBuster","Date","getTime","libraryDomain","baseCss","themeCss","current","href","createElement","Fragment","ref","rel","as"],"sources":["../../../../../src/components/design/themeLoader/ThemeLoader.tsx"],"sourcesContent":["'use client';\n\nimport React, { useContext, useEffect, useRef, useMemo } from 'react';\n\nimport libraryThemes from '../../../autoGenerated/libraryThemes';\nimport { AppContext } from '../../../contextProviders/appContext/AppContextProvider';\nimport { CURRENT_DOMAIN } from '../../../constants/appEnvironment';\nimport { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants/libraryCDN';\n\nexport type ThemeStructure = {\n  buildPath: string;\n  dev: {\n    css: string;\n    map: string;\n  };\n  min: {\n    css: string;\n    map: string;\n  };\n  versioned: {\n    css: string;\n    map: string;\n  };\n};\n\ntype AvailableThemes = {\n  [themeName: string]: ThemeStructure;\n};\n\ntype themeLoaderProps = {\n  useMin?: boolean,\n  forceProd?: boolean,\n  forceCacheBusting?: boolean,\n  userTheme?: string;\n  useLatest?: boolean;\n};\n\nconst themes: AvailableThemes = libraryThemes || {};\n\nexport const ThemeLoader: React.FC<themeLoaderProps> = (\n  {\n    useMin = false,\n    forceProd = false,\n    forceCacheBusting = false,\n    userTheme,\n    useLatest = true,\n  }\n) => {\n  const baseCssLink = useRef<HTMLLinkElement>(null);\n  const themeCssLink = useRef<HTMLLinkElement>(null);\n\n  const appContextProvider = useContext(AppContext);\n  const appTheme = appContextProvider?.appContext?.theme;\n\n  const activeTheme = userTheme || appTheme;\n  const publicLibraryDomain = appContextProvider?.appContext?.publicLibraryDomain || '';\n\n  const env = process.env.NODE_ENV;\n  const isProduction = env === 'production' || env === 'prod';\n  const isDevelopment = env === 'development' || env === 'dev';\n\n  const cdnBaseUrl = `${ isProduction ? LIBRARY_CDN_PROD_BASE_URL : LIBRARY_CDN_DEV_BASE_URL }/${ useLatest ? 'latest' : LIBRARY_VERSION }`;\n\n  const getThemeCss = (theme: string | undefined) => {\n    if (!theme || !themes[theme]) {\n      console.warn(`Theme \"${ theme }\" not found. Using default variables instead.`);\n      return null;\n    }\n\n    const {\n      buildPath, dev, min, versioned\n    } = themes[theme];\n\n    const cssFile = () => {\n      if (forceProd) {\n        return versioned.css;\n      }\n\n      if (isProduction) {\n        return useMin ? versioned.css : min.css;\n      }\n\n      if (isDevelopment) {\n        return useMin ? min.css : dev.css;\n      }\n\n      return dev.css;\n    };\n\n    const cacheBuster = CURRENT_DOMAIN === 'localhost' || forceCacheBusting ? `?v=${ new Date().getTime() }` : '';\n    const libraryDomain = publicLibraryDomain !== '' ? `${ publicLibraryDomain }` : cdnBaseUrl;\n\n    return `${ libraryDomain }/${ buildPath }/${ cssFile() }${ cacheBuster }`;\n  };\n\n  const baseCss = useMemo(() => getThemeCss('base'), [activeTheme, useMin, forceProd, forceCacheBusting]);\n  const themeCss = useMemo(() => getThemeCss(activeTheme), [activeTheme, useMin, forceProd, forceCacheBusting]);\n\n  useEffect(() => {\n    if (baseCss && baseCssLink.current) {\n      baseCssLink.current.href = baseCss;\n    }\n    if (themeCss && themeCssLink.current) {\n      themeCssLink.current.href = themeCss;\n    }\n  }, [activeTheme]);\n\n  return (\n    <>\n      <link ref={ baseCssLink } rel=\"stylesheet\" as=\"style\" />\n      <link ref={ themeCssLink } rel=\"stylesheet\" as=\"style\" />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useOnClickOutside } from '../../../hooks/ClickOutside';
-import { Icon } from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import { useOnEdgeProximityDetect } from '../../../hooks/EdgeProximityDetect';
 import { useOnInteractiveHostFocus } from '../../../hooks/InteractiveHostFocus';
 import './tooltip.css';
@@ -37,7 +37,6 @@ export const Tooltip = props => {
   const triggerElement = useRef(null);
   const contentElement = useRef(null);
   const hoverTimer = useRef(null);
-  const iconIsElement = /*#__PURE__*/React.isValidElement(icon);
 
   // Hover is handled in css by default. It is only taken over by js when a delay is requested.
   const hasHoverDelay = typeof hoverDelay === 'number' && hoverDelay > 0;
@@ -121,9 +120,7 @@ export const Tooltip = props => {
     setIsOpen,
     enabled: passiveTrigger
   });
-  const triggerIcon = iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
-    icon: icon.toString()
-  });
+  const triggerIcon = renderIcon(icon);
   if (passiveTrigger) {
     return /*#__PURE__*/React.createElement("span", {
       ref: tooltipElement,
@@ -154,9 +151,7 @@ export const Tooltip = props => {
       'aria-describedby': `${triggerId}_content`
     } : {}, triggerStyle === 'icon' ? {
       'aria-label': typeof label === 'string' ? label : undefined
-    } : {}), triggerStyle === 'icon' && (iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
-      icon: icon.toString()
-    })), triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
+    } : {}), triggerStyle === 'icon' && triggerIcon, triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
       className: "labelText"
     }, label)), /*#__PURE__*/React.createElement("div", _extends({
       ref: contentElement,
@@ -177,9 +172,7 @@ export const Tooltip = props => {
     id: triggerId
   } : {}, triggerStyle === 'icon' ? {
     'aria-label': typeof label === 'string' ? label : undefined
-  } : {}), triggerStyle === 'icon' && (iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
-    icon: icon.toString()
-  })), triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
+  } : {}), triggerStyle === 'icon' && triggerIcon, triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
     className: "labelText"
   }, label)), /*#__PURE__*/React.createElement("span", _extends({
     "aria-hidden": true,