@laerdal/life-react-components 1.6.0-dev.1.full → 1.6.0-dev.11

package/dist/Chips/FilterChip.js

@@ -2,65 +2,58 @@
  * Import React libraries.
  */
 import * as React from 'react';
-import { Size } from '../types';
+
 /**
  * Import custom components.
  */
-
-import { SystemIcons as icons } from '../icons/index';
+import { SystemIcons } from '../icons/index';
 /**
  * Import custom styles.
  */
 
-import { FilterChipContainer } from './ChipStyles';
+import { ChipContent, ChipContentContainer, ChipContainer } from './ChipStyles';
 /**
  * Import custom types.
  */
 
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
 
 var FilterChip = function FilterChip(_ref) {
   var selected = _ref.selected,
       text = _ref.text,
-      variant = _ref.variant,
       size = _ref.size,
       disabled = _ref.disabled,
       _onClick = _ref.onClick;
 
-  /**
-   * Retrieves icon size based on the chip size.
-   * @returns A string indicating the icon size.
-   */
-  var getIconSize = function getIconSize() {
-    var iconSize; // Calculate correct icon size
-
-    if (size === Size.Small) {
-      iconSize = '16px';
-    } else if (size === Size.Medium) {
-      iconSize = '20px';
-    } else {
-      iconSize = '24px';
-    }
-
-    return iconSize;
-  };
   /**
    * Return Filter Chip component.
    */
-
-
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(FilterChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : selected ? 'selected icon-chip' : variant),
+    children: /*#__PURE__*/_jsx(ChipContainer, {
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline'),
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === 'Enter' && _onClick();
+      },
+      onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
         return _onClick();
       },
-      children: [selected && icons.CheckComplete({
-        size: getIconSize(),
-        className: 'icon'
-      }), text]
+      children: /*#__PURE__*/_jsx(ChipContentContainer, {
+        children: /*#__PURE__*/_jsxs(ChipContent, {
+          children: [selected && /*#__PURE__*/_jsx("div", {
+            className: 'chip-icon icon-left',
+            children: /*#__PURE__*/_jsx(SystemIcons.CheckComplete, {
+              className: 'icon'
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            children: text
+          })]
+        })
+      })
     })
   });
 };

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","icons","FilterChipContainer","FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","CheckComplete","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACD,SAASC,IAAT,QAAqB,UAArB;AAEC;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AAEA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;;;;;AAGC,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKR,IAAI,CAACa,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKR,IAAI,CAACc,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE;AAAA,2BACE,MAAC,mBAAD;AAAqB,MAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,MAAA,OAAO,EAAE;AAAA,eAAMG,QAAO,EAAb;AAAA,OAAzH;AAAA,iBAEGL,QAAQ,IAAIH,KAAK,CAACa,aAAN,CAAoB;AAAEP,QAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBK,QAAAA,SAAS,EAAE;AAAlC,OAApB,CAFf,EAKGV,IALH;AAAA;AADF,IADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,CAAxB;AACe,MAAA,QAAQ,EAAEG,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CADzC;AAEe,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBF,QAAO,EAAhC;AAAA,OAF3B;AAGe,MAAA,WAAW,EAAEN,yBAH5B;AAIe,MAAA,OAAO,EAAE;AAAA,eAAMM,QAAO,EAAb;AAAA,OAJxB;AAAA,6BAKE,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AALF;AADF,IADF;AAgBD,CA5BD;;AA8BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}

package/dist/Chips/InputChip.cjs

@@ -11,12 +11,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _index = require("../icons/index");
 
-var _index2 = require("../Button/index");
-
-var _types = require("../types");
-
 var _ChipStyles = require("./ChipStyles");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 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); }
@@ -41,36 +39,18 @@ var InputChip = function InputChip(_ref) {
       size = _ref.size,
       disabled = _ref.disabled,
       _onClick = _ref.onClick,
+      disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-
-  /**
-   * Retrieves icon size based on the chip size.
-   * @returns A string indicating the icon size.
-   */
-  var getIconSize = function getIconSize() {
-    var iconSize; // Calculate correct icon size
-
-    if (size === _types.Size.Small) {
-      iconSize = '16px';
-    } else if (size === _types.Size.Medium) {
-      iconSize = '20px';
-    } else {
-      iconSize = '24px';
-    }
-
-    return iconSize;
-  };
+  var containerRef = React.useRef(null);
+  var removeRef = React.useRef(null);
+  (0, _common.useActionWithin)(containerRef, [removeRef]);
   /**
    * Calls onRemove action when remove button is clicked.
    * @param event - Event handler from the button click.
    */
 
-
   var onRemoveClick = function onRemoveClick(event) {
-    if (event) {
-      event.stopPropagation();
-    }
-
+    !!event && event.stopPropagation();
     onRemove();
   };
   /**
@@ -79,27 +59,47 @@ var InputChip = function InputChip(_ref) {
 
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContainer, {
-      className: "".concat(size, " button-chip ").concat(disabled ? 'disabled' : variant, " ").concat(icon && 'icon-chip'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
+      ref: containerRef,
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant),
+      tabIndex: disabled ? -1 : 0,
+      onMouseDown: _common.defaultOnMouseDownHandler,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === 'Enter' && _onClick();
+      },
       onClick: function onClick() {
         return _onClick();
       },
-      children: [variant !== 'error' && icon && _index.SystemIcons[icon]({
-        size: getIconSize(),
-        className: 'icon'
-      }), text, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        action: function action(event) {
-          return onRemoveClick(event);
-        },
-        disabled: disabled,
-        children: _index.SystemIcons.Close({
-          size: getIconSize(),
-          className: 'remove'
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
+          className: 'with-action-right',
+          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: 'chip-icon icon-left',
+            children: _index.SystemIcons[icon]({
+              className: 'icon'
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: text
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            ref: removeRef,
+            className: "action-right ".concat(disableRemove ? 'disabled' : ''),
+            tabIndex: disableRemove || disabled ? -1 : 0,
+            onMouseDown: _common.defaultOnMouseDownHandler,
+            onClick: function onClick(e) {
+              return !disableRemove && onRemoveClick(e);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.key === 'Enter' && onRemoveClick(e);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'chip-icon',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.Close, {
+                className: 'remove'
+              })
+            })
+          })]
         })
-      })]
+      })
     })
   });
 };

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","Size","Small","Medium","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAKM,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAKM,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDR,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,sBAAC,yBAAD;AAAe,MAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,MAAA,OAAO,EAAE;AAAA,eAAMK,QAAO,EAAb;AAAA,OAApH;AAAA,iBAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+Be,mBAAMf,IAAN,EAAY;AAAEG,QAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,QAAAA,SAAS,EAAE;AAAlC,OAAZ,CAFlC,EAKGf,IALH,eAQE,qBAAC,kBAAD;AACE,QAAA,OAAO,EAAC,WADV;AAEE,QAAA,KAAK,EAAC,UAFR;AAGE,QAAA,wBAAwB,MAH1B;AAIE,QAAA,MAAM,EAAE,gBAACY,KAAD;AAAA,iBAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,SAJV;AAKE,QAAA,QAAQ,EAAET,QALZ;AAAA,kBAMGW,mBAAME,KAAN,CAAY;AAAEd,UAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,UAAAA,SAAS,EAAE;AAAlC,SAAZ;AANH,QARF;AAAA;AADF,IADF;AAqBD,CAxDD;;eA0DejB,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === Size.Small) {\n      iconSize = '16px';\n    } else if (size === Size.Medium) {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","React","useRef","removeRef","onRemoveClick","event","stopPropagation","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAOA;;AAMA;;;;;;;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AASA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OASuB;AAAA,MARpBC,IAQoB,QARpBA,IAQoB;AAAA,MAPpBC,IAOoB,QAPpBA,IAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,IAKoB,QALpBA,IAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,QAGoB,QAHpBA,OAGoB;AAAA,MAFpBC,aAEoB,QAFpBA,aAEoB;AAAA,MADpBC,QACoB,QADpBA,QACoB;AAEhF,MAAMC,YAAY,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,SAAS,GAAGF,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAlB;AAEA,+BAAgBF,YAAhB,EAA8B,CAACG,SAAD,CAA9B;AAEA;AACF;AACA;AACA;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAoE;AACxF,KAAC,CAACA,KAAF,IAAWA,KAAK,CAACC,eAAN,EAAX;AACAP,IAAAA,QAAQ;AACT,GAHD;AAKA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,GAAG,EAAEC,YAApB;AACe,MAAA,SAAS,YAAKL,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,eAA4CF,OAA5C,CADxB;AAEe,MAAA,QAAQ,EAAEE,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAFzC;AAGe,MAAA,WAAW,EAAEW,iCAH5B;AAIe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBZ,QAAO,EAAhC;AAAA,OAJ3B;AAKe,MAAA,OAAO,EAAE;AAAA,eAAMA,QAAO,EAAb;AAAA,OALxB;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAa,UAAA,SAAS,EAAE,mBAAxB;AAAA,qBACGL,IAAI,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBAAwCkB,mBAAMlB,IAAN,EAAY;AAACmB,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AAAxC,YADX,eAGE;AAAA,sBAAMlB;AAAN,YAHF,eAKE;AAAK,YAAA,GAAG,EAAEU,SAAV;AACK,YAAA,SAAS,yBAAkBL,aAAa,GAAG,UAAH,GAAgB,EAA/C,CADd;AAEK,YAAA,QAAQ,EAAEA,aAAa,IAAIF,QAAjB,GAA4B,CAAC,CAA7B,GAAiC,CAFhD;AAGK,YAAA,WAAW,EAAEW,iCAHlB;AAIK,YAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,qBAAI,CAACV,aAAD,IAAkBM,aAAa,CAACI,CAAD,CAAnC;AAAA,aAJf;AAKK,YAAA,SAAS,EAAE,mBAAAA,CAAC;AAAA,qBAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBL,aAAa,CAACI,CAAD,CAAtC;AAAA,aALjB;AAAA,mCAME;AAAK,cAAA,SAAS,EAAE,WAAhB;AAAA,qCACE,qBAAC,kBAAD,CAAa,KAAb;AAAmB,gBAAA,SAAS,EAAE;AAA9B;AADF;AANF,YALF;AAAA;AADF;AANF;AADF,IADF;AA6BD,CAzDD;;eA2DejB,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({\n                                                              icon,\n                                                              text,\n                                                              variant,\n                                                              size,\n                                                              disabled,\n                                                              onClick,\n                                                              disableRemove,\n                                                              onRemove\n                                                            }: InputChipProps) => {\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => e.key === 'Enter' && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}

package/dist/Chips/InputChip.js

@@ -6,18 +6,17 @@ import * as React from 'react';
  * Import custom components.
  */
 
-import { SystemIcons as icons } from '../icons/index';
-import { IconButton } from '../Button/index';
-import { Size } from '../types';
+import { SystemIcons, SystemIcons as icons } from '../icons/index';
+
 /**
  * Import custom styles.
  */
-
-import { ChipContainer } from './ChipStyles';
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 /**
  * Import custom types.
  */
 
+import { defaultOnMouseDownHandler, useActionWithin } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,36 +28,18 @@ var InputChip = function InputChip(_ref) {
       size = _ref.size,
       disabled = _ref.disabled,
       _onClick = _ref.onClick,
+      disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-
-  /**
-   * Retrieves icon size based on the chip size.
-   * @returns A string indicating the icon size.
-   */
-  var getIconSize = function getIconSize() {
-    var iconSize; // Calculate correct icon size
-
-    if (size === Size.Small) {
-      iconSize = '16px';
-    } else if (size === Size.Medium) {
-      iconSize = '20px';
-    } else {
-      iconSize = '24px';
-    }
-
-    return iconSize;
-  };
+  var containerRef = React.useRef(null);
+  var removeRef = React.useRef(null);
+  useActionWithin(containerRef, [removeRef]);
   /**
    * Calls onRemove action when remove button is clicked.
    * @param event - Event handler from the button click.
    */
 
-
   var onRemoveClick = function onRemoveClick(event) {
-    if (event) {
-      event.stopPropagation();
-    }
-
+    !!event && event.stopPropagation();
     onRemove();
   };
   /**
@@ -67,27 +48,47 @@ var InputChip = function InputChip(_ref) {
 
 
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ChipContainer, {
-      className: "".concat(size, " button-chip ").concat(disabled ? 'disabled' : variant, " ").concat(icon && 'icon-chip'),
+    children: /*#__PURE__*/_jsx(ChipContainer, {
+      ref: containerRef,
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant),
+      tabIndex: disabled ? -1 : 0,
+      onMouseDown: defaultOnMouseDownHandler,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === 'Enter' && _onClick();
+      },
       onClick: function onClick() {
         return _onClick();
       },
-      children: [variant !== 'error' && icon && icons[icon]({
-        size: getIconSize(),
-        className: 'icon'
-      }), text, /*#__PURE__*/_jsx(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        action: function action(event) {
-          return onRemoveClick(event);
-        },
-        disabled: disabled,
-        children: icons.Close({
-          size: getIconSize(),
-          className: 'remove'
+      children: /*#__PURE__*/_jsx(ChipContentContainer, {
+        children: /*#__PURE__*/_jsxs(ChipContent, {
+          className: 'with-action-right',
+          children: [icon && /*#__PURE__*/_jsx("div", {
+            className: 'chip-icon icon-left',
+            children: icons[icon]({
+              className: 'icon'
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            children: text
+          }), /*#__PURE__*/_jsx("div", {
+            ref: removeRef,
+            className: "action-right ".concat(disableRemove ? 'disabled' : ''),
+            tabIndex: disableRemove || disabled ? -1 : 0,
+            onMouseDown: defaultOnMouseDownHandler,
+            onClick: function onClick(e) {
+              return !disableRemove && onRemoveClick(e);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.key === 'Enter' && onRemoveClick(e);
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              className: 'chip-icon',
+              children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+                className: 'remove'
+              })
+            })
+          })]
         })
-      })]
+      })
     })
   });
 };

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","IconButton","Size","ChipContainer","InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","Small","Medium","onRemoveClick","event","stopPropagation","className","Close"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAW,IAAIC,KAAxB,QAAqC,gBAArC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA;AACA;AACA;;;;;;AAGA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAKN,IAAI,CAACY,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAKN,IAAI,CAACa,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDP,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,MAAC,aAAD;AAAe,MAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,MAAA,OAAO,EAAE;AAAA,eAAMK,QAAO,EAAb;AAAA,OAApH;AAAA,iBAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BL,KAAK,CAACK,IAAD,CAAL,CAAY;AAAEG,QAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBO,QAAAA,SAAS,EAAE;AAAlC,OAAZ,CAFlC,EAKGb,IALH,eAQE,KAAC,UAAD;AACE,QAAA,OAAO,EAAC,WADV;AAEE,QAAA,KAAK,EAAC,UAFR;AAGE,QAAA,wBAAwB,MAH1B;AAIE,QAAA,MAAM,EAAE,gBAACW,KAAD;AAAA,iBAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,SAJV;AAKE,QAAA,QAAQ,EAAER,QALZ;AAAA,kBAMGT,KAAK,CAACoB,KAAN,CAAY;AAAEZ,UAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBO,UAAAA,SAAS,EAAE;AAAlC,SAAZ;AANH,QARF;AAAA;AADF,IADF;AAqBD,CAxDD;;AA0DA,eAAef,SAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === Size.Small) {\n      iconSize = '16px';\n    } else if (size === Size.Medium) {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBA,WAAW,IAAIC,KAApC,QAAgD,gBAAhD;;AAIA;AACA;AACA;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,EAAmCC,eAAnC,QAAyD,WAAzD;;;;;AAEA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OASuB;AAAA,MARpBC,IAQoB,QARpBA,IAQoB;AAAA,MAPpBC,IAOoB,QAPpBA,IAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,IAKoB,QALpBA,IAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,QAGoB,QAHpBA,OAGoB;AAAA,MAFpBC,aAEoB,QAFpBA,aAEoB;AAAA,MADpBC,QACoB,QADpBA,QACoB;AAEhF,MAAMC,YAAY,GAAGjB,KAAK,CAACkB,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,SAAS,GAAGnB,KAAK,CAACkB,MAAN,CAA6B,IAA7B,CAAlB;AAEAX,EAAAA,eAAe,CAACU,YAAD,EAAe,CAACE,SAAD,CAAf,CAAf;AAEA;AACF;AACA;AACA;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAoE;AACxF,KAAC,CAACA,KAAF,IAAWA,KAAK,CAACC,eAAN,EAAX;AACAN,IAAAA,QAAQ;AACT,GAHD;AAKA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,GAAG,EAAEC,YAApB;AACe,MAAA,SAAS,YAAKL,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,eAA4CF,OAA5C,CADxB;AAEe,MAAA,QAAQ,EAAEE,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAFzC;AAGe,MAAA,WAAW,EAAEP,yBAH5B;AAIe,MAAA,SAAS,EAAE,mBAAAiB,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBV,QAAO,EAAhC;AAAA,OAJ3B;AAKe,MAAA,OAAO,EAAE;AAAA,eAAMA,QAAO,EAAb;AAAA,OALxB;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAa,UAAA,SAAS,EAAE,mBAAxB;AAAA,qBACGL,IAAI,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBAAwCP,KAAK,CAACO,IAAD,CAAL,CAAY;AAACgB,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AAAxC,YADX,eAGE;AAAA,sBAAMf;AAAN,YAHF,eAKE;AAAK,YAAA,GAAG,EAAES,SAAV;AACK,YAAA,SAAS,yBAAkBJ,aAAa,GAAG,UAAH,GAAgB,EAA/C,CADd;AAEK,YAAA,QAAQ,EAAEA,aAAa,IAAIF,QAAjB,GAA4B,CAAC,CAA7B,GAAiC,CAFhD;AAGK,YAAA,WAAW,EAAEP,yBAHlB;AAIK,YAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,qBAAI,CAACR,aAAD,IAAkBK,aAAa,CAACG,CAAD,CAAnC;AAAA,aAJf;AAKK,YAAA,SAAS,EAAE,mBAAAA,CAAC;AAAA,qBAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBJ,aAAa,CAACG,CAAD,CAAtC;AAAA,aALjB;AAAA,mCAME;AAAK,cAAA,SAAS,EAAE,WAAhB;AAAA,qCACE,KAAC,WAAD,CAAa,KAAb;AAAmB,gBAAA,SAAS,EAAE;AAA9B;AADF;AANF,YALF;AAAA;AADF;AANF;AADF,IADF;AA6BD,CAzDD;;AA2DA,eAAef,SAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({\n                                                              icon,\n                                                              text,\n                                                              variant,\n                                                              size,\n                                                              disabled,\n                                                              onClick,\n                                                              disableRemove,\n                                                              onRemove\n                                                            }: InputChipProps) => {\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => e.key === 'Enter' && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/HyperLink/HyperLink.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledLink = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -43,6 +43,8 @@ var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
 
+exports.StyledLink = StyledLink;
+
 var HyperLink = function HyperLink(_ref) {
   var children = _ref.children,
       _ref$target = _ref.target,

package/dist/HyperLink/HyperLink.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,0HAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALY,EAMZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANY,CAAhB;;AAmBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;AAC7I,sBACE,qBAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.cjs"}
+{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,0HAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALmB,EAMnB,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;AAC7I,sBACE,qBAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.cjs"}

package/dist/HyperLink/HyperLink.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
+    variant: 'default' | 'inverted';
+    margin?: string | undefined;
+}, never>;
 export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     id?: string;
     variant: 'default' | 'inverted';

package/dist/HyperLink/HyperLink.js

@@ -14,7 +14,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
 import { jsx as _jsx } from "react/jsx-runtime";
-var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (props) {
+export var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (props) {
   return props.variant === 'inverted' ? invertedStyle : defaultStyle;
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';

package/dist/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALY,EAMZ,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,MAAhC,SAA4C,EAAxD;AAAA,CANY,CAAhB;;AAmBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,OAAO,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALmB,EAMnB,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/HyperLink/styling.cjs

@@ -15,7 +15,7 @@ var _ = require("..");
 
 var _templateObject, _templateObject2;
 
-var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
+var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.primary_400, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
 exports.defaultStyle = defaultStyle;
 var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
 exports.invertedStyle = invertedStyle;

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.cjs"}
+{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_400};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.cjs"}

package/dist/HyperLink/styling.js

@@ -4,6 +4,6 @@ var _templateObject, _templateObject2;
 
 import { css } from 'styled-components';
 import { COLORS } from '..';
-export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.primary_500, COLORS.accent1_500, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
+export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.primary_500, COLORS.primary_400, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
 export var invertedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.white, COLORS.neutral_800, COLORS.white, COLORS.neutral_800, COLORS.neutral_800);
 //# sourceMappingURL=styling.js.map

package/dist/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_400};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}