@laerdal/life-react-components 1.8.0 → 1.9.0-dev.1

package/dist/icons/index.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSize = exports.SystemIcons = exports.SystemIcon = exports.ContentIcons = exports.ContentIcon = exports.BaseIcon = void 0;
+exports.getSize = exports.formatSvgString = exports.SystemIcons = exports.SystemIcon = exports.ContentIcons = exports.ContentIcon = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -29,7 +29,7 @@ exports.SystemIcons = SystemIcons;
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -52,96 +52,49 @@ exports.getSize = getSize;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  ", "\n"])), (0, _TooltipStyles.TooltipTrigger)());
 
-var IconComponent = _styledComponents.default.svg(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  pointer-events: none;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-
-var renderIcon = function renderIcon(children, width, height, viewBox, tooltip, className) {
+var renderIcon = function renderIcon(children, tooltip) {
   return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-      className: className,
-      width: width,
-      height: height,
-      viewBox: viewBox,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
       children: tooltip
     })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-    className: className,
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: children
   });
 };
 
-var BaseIcon = function BaseIcon(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? '16px' : _ref$size,
-      _ref$viewBox = _ref.viewBox,
-      viewBox = _ref$viewBox === void 0 ? '0 0 25 25' : _ref$viewBox,
-      _ref$tooltip = _ref.tooltip,
-      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
-};
+var gTagsRegex = new RegExp(/<g [A-Za-z\W\D]*>/, 'g'); // matches <g id = ".....">
 
-exports.BaseIcon = BaseIcon;
-BaseIcon.propTypes = {
-  className: _propTypes.default.string,
-  children: _propTypes.default.any,
-  size: _propTypes.default.string,
-  viewBox: _propTypes.default.string,
-  tooltip: _propTypes.default.string
+var fillColorRegex = new RegExp(/fill="#[A-F0-9]*"/, 'g'); // matches fill="#1F1F1F"
+
+var formatSvgString = function formatSvgString(text, color) {
+  return text.replace(gTagsRegex, '').replaceAll('</g>', '').replace(fillColorRegex, "fill=\"".concat(color, "\""));
 };
 
-var SystemIcon = function SystemIcon(_ref2) {
-  var className = _ref2.className,
-      children = _ref2.children,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? '24px' : _ref2$size,
-      _ref2$viewBox = _ref2.viewBox,
-      viewBox = _ref2$viewBox === void 0 ? '0 0 24 24' : _ref2$viewBox,
-      _ref2$tooltip = _ref2.tooltip,
-      tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+exports.formatSvgString = formatSvgString;
+
+var SystemIcon = function SystemIcon(_ref) {
+  var children = _ref.children,
+      _ref$tooltip = _ref.tooltip,
+      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
+  return renderIcon(children, tooltip);
 };
 
 exports.SystemIcon = SystemIcon;
 SystemIcon.propTypes = {
-  className: _propTypes.default.string,
   children: _propTypes.default.any,
-  size: _propTypes.default.string,
-  viewBox: _propTypes.default.string,
   tooltip: _propTypes.default.string
 };
 
-var ContentIcon = function ContentIcon(_ref3) {
-  var className = _ref3.className,
-      children = _ref3.children,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? '48px' : _ref3$size,
-      _ref3$viewBox = _ref3.viewBox,
-      viewBox = _ref3$viewBox === void 0 ? '0 0 48 48' : _ref3$viewBox,
-      _ref3$tooltip = _ref3.tooltip,
-      tooltip = _ref3$tooltip === void 0 ? '' : _ref3$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+var ContentIcon = function ContentIcon(_ref2) {
+  var children = _ref2.children,
+      _ref2$tooltip = _ref2.tooltip,
+      tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip;
+  return renderIcon(children, tooltip);
 };
 
 exports.ContentIcon = ContentIcon;
 ContentIcon.propTypes = {
-  className: _propTypes.default.string,
   children: _propTypes.default.any,
-  size: _propTypes.default.string,
-  viewBox: _propTypes.default.string,
   tooltip: _propTypes.default.string
 };
 //# sourceMappingURL=index.cjs.map

package/dist/icons/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icons/index.tsx"],"names":["getSize","size","indexOf","Container","styled","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n  pointer-events: none;\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/icons/index.tsx"],"names":["getSize","size","indexOf","Container","styled","div","renderIcon","children","tooltip","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AACA;;;;;;;;;;;;AAeA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAkB;AACvC,MAAI,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,CAACC,OAAL,CAAa,IAAb,MAAuB,CAAC,CAAxD,EAA2D;AACzD,qBAAUD,IAAV;AACD,GAFD,MAEO;AACL,WAAOA,IAAP;AACD;AACF,CANM;;;;AAQP,IAAME,SAAS,GAAGC,0BAAOC,GAAV,qHAEX,oCAFW,CAAf;;AAKA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAA4BC,OAA5B,EAAiD;AAClE,SAAOA,OAAO,gBACZ,sBAAC,SAAD;AAAA,eACGD,QADH,eAEE,qBAAC,sBAAD;AAAA,gBAAUC;AAAV,MAFF;AAAA,IADY,gBAMZ;AAAA,cACGD;AADH,IANF;AAUD,CAXD;;AAaA,IAAME,UAAU,GAAG,IAAIC,MAAJ,CAAW,mBAAX,EAA+B,GAA/B,CAAnB,C,CAAwD;;AACxD,IAAMC,cAAc,GAAG,IAAID,MAAJ,CAAW,mBAAX,EAA+B,GAA/B,CAAvB,C,CAA4D;;AAErD,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAACC,IAAD,EAAeC,KAAf,EAAyC;AACtE,SAAOD,IAAI,CAACE,OAAL,CAAaN,UAAb,EAAyB,EAAzB,EACKO,UADL,CACgB,MADhB,EACuB,EADvB,EAEKD,OAFL,CAEaJ,cAFb,mBAEsCG,KAFtC,QAAP;AAGD,CAJM;;;;AAMA,IAAMG,UAA8C,GAAG,SAAjDA,UAAiD,OAAgC;AAAA,MAA7BV,QAA6B,QAA7BA,QAA6B;AAAA,0BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,6BAAT,EAAS;AAC5F,SAAOF,UAAU,CAACC,QAAD,EAAWC,OAAX,CAAjB;AACD,CAFM;;;;AApDLD,EAAAA,Q;AACAC,EAAAA,O;;;AAuDK,IAAMU,WAA+C,GAAG,SAAlDA,WAAkD,QAAgC;AAAA,MAA7BX,QAA6B,SAA7BA,QAA6B;AAAA,4BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,8BAAT,EAAS;AAC7F,SAAOF,UAAU,CAACC,QAAD,EAAWC,OAAX,CAAjB;AACD,CAFM;;;;AAxDLD,EAAAA,Q;AACAC,EAAAA,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  children?: any;\n  tooltip?: string;\n}\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string) => {\n  return tooltip ? (\n    <Container>\n      {children}\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <>\n      {children}\n    </>\n  );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n  return text.replace(gTagsRegex, '')\n             .replaceAll('</g>','')\n             .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '' }) => {\n  return renderIcon(children, tooltip);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '' }) => {\n  return renderIcon(children, tooltip);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.cjs"}

package/dist/icons/index.d.ts

@@ -2,10 +2,7 @@ import * as React from 'react';
 import * as ContentIcons from './contenticons/ContentIcons';
 import * as SystemIcons from './systemicons/SystemIcons';
 export declare type BaseProps = {
-    className?: string;
     children?: any;
-    size?: string;
-    viewBox?: string;
     tooltip?: string;
 };
 export declare type IconProps = {
@@ -21,7 +18,7 @@ export declare type IconProps = {
  * @returns Numeric value indicating the size of the icon.
  */
 export declare const getSize: (size: string) => string;
-export declare const BaseIcon: React.FunctionComponent<BaseProps>;
+export declare const formatSvgString: (text: string, color: string) => string;
 export declare const SystemIcon: React.FunctionComponent<BaseProps>;
 export declare const ContentIcon: React.FunctionComponent<BaseProps>;
 export { SystemIcons };

package/dist/icons/index.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 import * as React from 'react';
 import styled from 'styled-components';
@@ -10,6 +10,7 @@ import * as ContentIcons from './contenticons/ContentIcons';
 import * as SystemIcons from './systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 
 /**
  * Retrieves the size of the icon.
@@ -24,88 +25,42 @@ export var getSize = function getSize(size) {
   }
 };
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n"])), TooltipTrigger());
-var IconComponent = styled.svg(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  pointer-events: none;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
 
-var renderIcon = function renderIcon(children, width, height, viewBox, tooltip, className) {
+var renderIcon = function renderIcon(children, tooltip) {
   return tooltip ? /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsx(IconComponent, {
-      className: className,
-      width: width,
-      height: height,
-      viewBox: viewBox,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: children
-    }), /*#__PURE__*/_jsx(Tooltip, {
+    children: [children, /*#__PURE__*/_jsx(Tooltip, {
       children: tooltip
     })]
-  }) : /*#__PURE__*/_jsx(IconComponent, {
-    className: className,
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+  }) : /*#__PURE__*/_jsx(_Fragment, {
     children: children
   });
 };
 
-export var BaseIcon = function BaseIcon(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? '16px' : _ref$size,
-      _ref$viewBox = _ref.viewBox,
-      viewBox = _ref$viewBox === void 0 ? '0 0 25 25' : _ref$viewBox,
+var gTagsRegex = new RegExp(/<g [A-Za-z\W\D]*>/, 'g'); // matches <g id = ".....">
+
+var fillColorRegex = new RegExp(/fill="#[A-F0-9]*"/, 'g'); // matches fill="#1F1F1F"
+
+export var formatSvgString = function formatSvgString(text, color) {
+  return text.replace(gTagsRegex, '').replaceAll('</g>', '').replace(fillColorRegex, "fill=\"".concat(color, "\""));
+};
+export var SystemIcon = function SystemIcon(_ref) {
+  var children = _ref.children,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+  return renderIcon(children, tooltip);
 };
-BaseIcon.propTypes = {
-  className: _pt.string,
+SystemIcon.propTypes = {
   children: _pt.any,
-  size: _pt.string,
-  viewBox: _pt.string,
   tooltip: _pt.string
 };
-export var SystemIcon = function SystemIcon(_ref2) {
-  var className = _ref2.className,
-      children = _ref2.children,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? '24px' : _ref2$size,
-      _ref2$viewBox = _ref2.viewBox,
-      viewBox = _ref2$viewBox === void 0 ? '0 0 24 24' : _ref2$viewBox,
+export var ContentIcon = function ContentIcon(_ref2) {
+  var children = _ref2.children,
       _ref2$tooltip = _ref2.tooltip,
       tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
-};
-SystemIcon.propTypes = {
-  className: _pt.string,
-  children: _pt.any,
-  size: _pt.string,
-  viewBox: _pt.string,
-  tooltip: _pt.string
-};
-export var ContentIcon = function ContentIcon(_ref3) {
-  var className = _ref3.className,
-      children = _ref3.children,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? '48px' : _ref3$size,
-      _ref3$viewBox = _ref3.viewBox,
-      viewBox = _ref3$viewBox === void 0 ? '0 0 48 48' : _ref3$viewBox,
-      _ref3$tooltip = _ref3.tooltip,
-      tooltip = _ref3$tooltip === void 0 ? '' : _ref3$tooltip;
-  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+  return renderIcon(children, tooltip);
 };
 ContentIcon.propTypes = {
-  className: _pt.string,
   children: _pt.any,
-  size: _pt.string,
-  viewBox: _pt.string,
   tooltip: _pt.string
 };
 export { SystemIcons };

package/dist/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n  pointer-events: none;\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","renderIcon","children","tooltip","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,OAAT,EAAkBC,cAAlB,QAAwC,2BAAxC;AACA,OAAO,KAAKC,YAAZ,MAA8B,6BAA9B;AACA,OAAO,KAAKC,WAAZ,MAA6B,2BAA7B;;;;;AAeA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAkB;AACvC,MAAI,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,CAACC,OAAL,CAAa,IAAb,MAAuB,CAAC,CAAxD,EAA2D;AACzD,qBAAUD,IAAV;AACD,GAFD,MAEO;AACL,WAAOA,IAAP;AACD;AACF,CANM;AAQP,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,uGAEXP,cAAc,EAFH,CAAf;;AAKA,IAAMQ,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAA4BC,OAA5B,EAAiD;AAClE,SAAOA,OAAO,gBACZ,MAAC,SAAD;AAAA,eACGD,QADH,eAEE,KAAC,OAAD;AAAA,gBAAUC;AAAV,MAFF;AAAA,IADY,gBAMZ;AAAA,cACGD;AADH,IANF;AAUD,CAXD;;AAaA,IAAME,UAAU,GAAG,IAAIC,MAAJ,CAAW,mBAAX,EAA+B,GAA/B,CAAnB,C,CAAwD;;AACxD,IAAMC,cAAc,GAAG,IAAID,MAAJ,CAAW,mBAAX,EAA+B,GAA/B,CAAvB,C,CAA4D;;AAE5D,OAAO,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAACC,IAAD,EAAeC,KAAf,EAAyC;AACtE,SAAOD,IAAI,CAACE,OAAL,CAAaN,UAAb,EAAyB,EAAzB,EACKO,UADL,CACgB,MADhB,EACuB,EADvB,EAEKD,OAFL,CAEaJ,cAFb,mBAEsCG,KAFtC,QAAP;AAGD,CAJM;AAMP,OAAO,IAAMG,UAA8C,GAAG,SAAjDA,UAAiD,OAAgC;AAAA,MAA7BV,QAA6B,QAA7BA,QAA6B;AAAA,0BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,6BAAT,EAAS;AAC5F,SAAOF,UAAU,CAACC,QAAD,EAAWC,OAAX,CAAjB;AACD,CAFM;;AApDLD,EAAAA,Q;AACAC,EAAAA,O;;AAuDF,OAAO,IAAMU,WAA+C,GAAG,SAAlDA,WAAkD,QAAgC;AAAA,MAA7BX,QAA6B,SAA7BA,QAA6B;AAAA,4BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,8BAAT,EAAS;AAC7F,SAAOF,UAAU,CAACC,QAAD,EAAWC,OAAX,CAAjB;AACD,CAFM;;AAxDLD,EAAAA,Q;AACAC,EAAAA,O;;AA2DF,SAASR,WAAT;AACA,SAASD,YAAT","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  children?: any;\n  tooltip?: string;\n}\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string) => {\n  return tooltip ? (\n    <Container>\n      {children}\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <>\n      {children}\n    </>\n  );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n  return text.replace(gTagsRegex, '')\n             .replaceAll('</g>','')\n             .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '' }) => {\n  return renderIcon(children, tooltip);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '' }) => {\n  return renderIcon(children, tooltip);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}