@laerdal/life-react-components 1.6.1-dev.1 → 1.7.0-dev.11

package/dist/common/FocusVisible.js

@@ -1,3 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 import React from 'react';
 export var useFocusVisibleRef = function useFocusVisibleRef() {
   var focusWithinList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -5,47 +13,69 @@ export var useFocusVisibleRef = function useFocusVisibleRef() {
   var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
   var suppress = React.useRef(false);
 
-  var handleMouseDown = function handleMouseDown() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  var addFocusVisibleClasses = function addFocusVisibleClasses() {
     var _elementRef$current;
 
-    if (!((_elementRef$current = elementRef.current) !== null && _elementRef$current !== void 0 && _elementRef$current.classList.contains('focus-visible'))) {
+    (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.classList.add('focus-visible');
+    focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
+      var _focusWithinListItem$;
+
+      (_focusWithinListItem$ = focusWithinListItem.current) === null || _focusWithinListItem$ === void 0 ? void 0 : _focusWithinListItem$.classList.add('focus-visible-within');
+    });
+  };
+
+  var removeFocusVisibleClasses = function removeFocusVisibleClasses() {
+    var _elementRef$current2;
+
+    (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.classList.remove('focus-visible');
+    focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
+      var _focusWithinListItem$2;
+
+      (_focusWithinListItem$2 = focusWithinListItem.current) === null || _focusWithinListItem$2 === void 0 ? void 0 : _focusWithinListItem$2.classList.remove('focus-visible-within');
+    });
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    var _elementRef$current3;
+
+    if (!((_elementRef$current3 = elementRef.current) !== null && _elementRef$current3 !== void 0 && _elementRef$current3.classList.contains('focus-visible'))) {
       suppress.current = true;
     }
   };
 
   var handleFocus = function handleFocus() {
     if (!suppress.current) {
-      var _elementRef$current2;
-
-      (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.classList.add('focus-visible');
-      focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
-        var _focusWithinListItem$;
-
-        (_focusWithinListItem$ = focusWithinListItem.current) === null || _focusWithinListItem$ === void 0 ? void 0 : _focusWithinListItem$.classList.add('focus-visible-within');
-      });
+      setVisible(true);
+      addFocusVisibleClasses();
     } else {
       suppress.current = false;
     }
   };
 
   var handleBlur = function handleBlur() {
-    var _elementRef$current3;
-
-    (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.classList.remove('focus-visible');
-    focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
-      var _focusWithinListItem$2;
-
-      (_focusWithinListItem$2 = focusWithinListItem.current) === null || _focusWithinListItem$2 === void 0 ? void 0 : _focusWithinListItem$2.classList.remove('focus-visible-within');
-    });
+    setVisible(false);
+    removeFocusVisibleClasses();
   };
 
+  React.useLayoutEffect(function () {
+    if (visible) {
+      addFocusVisibleClasses();
+    } else {
+      removeFocusVisibleClasses();
+    }
+  }, [visible, elementRef, focusWithinList]);
   React.useEffect(function () {
     if (!elementRef.current) return;
     var instance = elementRef.current;
     var focusFn = elementRef.current.focus;
 
     elementRef.current.focus = function (e) {
-      suppress.current = true;
+      suppress.current = !(e !== null && e !== void 0 && e.focusVisible);
       focusFn.call(instance, e);
     };
 
@@ -56,6 +86,23 @@ export var useFocusVisibleRef = function useFocusVisibleRef() {
       instance.removeEventListener('mousedown', handleMouseDown);
       instance.removeEventListener('focus', handleFocus);
       instance.removeEventListener('blur', handleBlur);
+      instance.classList.remove('focus-visible');
+
+      var _iterator = _createForOfIteratorHelper(focusWithinList),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _el$current;
+
+          var el = _step.value;
+          (_el$current = el.current) === null || _el$current === void 0 ? void 0 : _el$current.classList.remove('focus-visible-within');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     };
   }, [elementRef]);
   return elementRef;

package/dist/common/FocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["React","useFocusVisibleRef","focusWithinList","ref","elementRef","useRef","suppress","handleMouseDown","current","classList","contains","handleFocus","add","forEach","focusWithinListItem","handleBlur","remove","useEffect","instance","focusFn","focus","e","call","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAoE;AAAA,MAAnEC,eAAmE,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AACpG,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUH,KAAK,CAACK,MAAN,CAAkB,IAAlB,CAA1B;AACA,MAAMC,QAAQ,GAAGN,KAAK,CAACK,MAAN,CAAsB,KAAtB,CAAjB;;AAEA,MAAME,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAAA;;AAC5B,QAAI,yBAACH,UAAU,CAACI,OAAZ,gDAAC,oBAAoBC,SAApB,CAA8BC,QAA9B,CAAuC,eAAvC,CAAD,CAAJ,EAA8D;AAC5DJ,MAAAA,QAAQ,CAACE,OAAT,GAAmB,IAAnB;AACD;AACF,GAJD;;AAMA,MAAMG,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAI,CAACL,QAAQ,CAACE,OAAd,EAAuB;AAAA;;AACrB,8BAAAJ,UAAU,CAACI,OAAX,8EAAoBC,SAApB,CAA8BG,GAA9B,CAAkC,eAAlC;AACAV,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEW,OAAjB,CAAyB,UAACC,mBAAD,EAAyB;AAAA;;AAChD,iCAAAA,mBAAmB,CAACN,OAApB,gFAA6BC,SAA7B,CAAuCG,GAAvC,CAA2C,sBAA3C;AACD,OAFD;AAGD,KALD,MAKO;AACLN,MAAAA,QAAQ,CAACE,OAAT,GAAmB,KAAnB;AACD;AACF,GATD;;AAWA,MAAMO,UAAU,GAAG,SAAbA,UAAa,GAAM;AAAA;;AACvB,4BAAAX,UAAU,CAACI,OAAX,8EAAoBC,SAApB,CAA8BO,MAA9B,CAAqC,eAArC;AACAd,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEW,OAAjB,CAAyB,UAACC,mBAAD,EAAyB;AAAA;;AAChD,gCAAAA,mBAAmB,CAACN,OAApB,kFAA6BC,SAA7B,CAAuCO,MAAvC,CAA8C,sBAA9C;AACD,KAFD;AAGD,GALD;;AAOAhB,EAAAA,KAAK,CAACiB,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACb,UAAU,CAACI,OAAhB,EAAyB;AAEzB,QAAMU,QAAQ,GAAGd,UAAU,CAACI,OAA5B;AACA,QAAMW,OAAO,GAAGf,UAAU,CAACI,OAAX,CAAmBY,KAAnC;;AACAhB,IAAAA,UAAU,CAACI,OAAX,CAAmBY,KAAnB,GAA2B,UAACC,CAAD,EAAY;AACrCf,MAAAA,QAAQ,CAACE,OAAT,GAAmB,IAAnB;AACAW,MAAAA,OAAO,CAACG,IAAR,CAAaJ,QAAb,EAAuBG,CAAvB;AACD,KAHD;;AAKAH,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,WAA1B,EAAuChB,eAAvC;AACAW,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,OAA1B,EAAmCZ,WAAnC;AACAO,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,MAA1B,EAAkCR,UAAlC;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,WAA7B,EAA0CjB,eAA1C;AACAW,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,OAA7B,EAAsCb,WAAtC;AACAO,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,MAA7B,EAAqCT,UAArC;AACD,KAJD;AAKD,GAnBD,EAmBG,CAACX,UAAD,CAnBH;AAqBA,SAAOA,UAAP;AACD,CAlDM","sourcesContent":["import React from 'react';\n\nexport const useFocusVisibleRef = (focusWithinList: React.MutableRefObject<any>[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n  const suppress = React.useRef<boolean>(false);\n\n  const handleMouseDown = () => {\n    if (!elementRef.current?.classList.contains('focus-visible')) {\n      suppress.current = true;\n    }\n  };\n\n  const handleFocus = () => {\n    if (!suppress.current) {\n      elementRef.current?.classList.add('focus-visible');\n      focusWithinList?.forEach((focusWithinListItem) => {\n        focusWithinListItem.current?.classList.add('focus-visible-within');\n      });\n    } else {\n      suppress.current = false;\n    }\n  };\n\n  const handleBlur = () => {\n    elementRef.current?.classList.remove('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.remove('focus-visible-within');\n    });\n  };\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n\n    const instance = elementRef.current;\n    const focusFn = elementRef.current.focus;\n    elementRef.current.focus = (e: any) => {\n      suppress.current = true;\n      focusFn.call(instance, e);\n    };\n\n    instance.addEventListener('mousedown', handleMouseDown);\n    instance.addEventListener('focus', handleFocus);\n    instance.addEventListener('blur', handleBlur);\n\n    return () => {\n      instance.removeEventListener('mousedown', handleMouseDown);\n      instance.removeEventListener('focus', handleFocus);\n      instance.removeEventListener('blur', handleBlur);\n    };\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"FocusVisible.js"}
+{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["React","useFocusVisibleRef","focusWithinList","ref","elementRef","useRef","suppress","useState","visible","setVisible","addFocusVisibleClasses","current","classList","add","forEach","focusWithinListItem","removeFocusVisibleClasses","remove","handleMouseDown","contains","handleFocus","handleBlur","useLayoutEffect","useEffect","instance","focusFn","focus","e","focusVisible","call","addEventListener","removeEventListener","el"],"mappings":"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","sourcesContent":["import React from 'react';\n\nexport const useFocusVisibleRef = (focusWithinList: React.MutableRefObject<any>[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n  const suppress = React.useRef<boolean>(false);\n  const [visible, setVisible] = React.useState(false);\n\n  const addFocusVisibleClasses = () => {\n    elementRef.current?.classList.add('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.add('focus-visible-within');\n    });\n  }\n\n  const removeFocusVisibleClasses = () => {\n    elementRef.current?.classList.remove('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.remove('focus-visible-within');\n    });\n  }\n\n  const handleMouseDown = () => {\n    if (!elementRef.current?.classList.contains('focus-visible')) {\n      suppress.current = true;\n    }\n  };\n\n  const handleFocus = () => {\n    if (!suppress.current) {\n      setVisible(true);\n      addFocusVisibleClasses();\n    } else {\n      suppress.current = false;\n    }\n  };\n\n  const handleBlur = () => {\n    setVisible(false);\n    removeFocusVisibleClasses();\n  };\n\n\n  React.useLayoutEffect(() => {\n    if (visible) {\n      addFocusVisibleClasses()\n    } else {\n      removeFocusVisibleClasses();\n    }\n  }, [visible, elementRef, focusWithinList]);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n\n    const instance = elementRef.current;\n    const focusFn = elementRef.current.focus;\n    elementRef.current.focus = (e: any) => {\n      suppress.current = !e?.focusVisible;\n      focusFn.call(instance, e);\n    };\n\n    instance.addEventListener('mousedown', handleMouseDown);\n    instance.addEventListener('focus', handleFocus);\n    instance.addEventListener('blur', handleBlur);\n\n    return () => {\n      instance.removeEventListener('mousedown', handleMouseDown);\n      instance.removeEventListener('focus', handleFocus);\n      instance.removeEventListener('blur', handleBlur);\n      instance.classList.remove('focus-visible');\n      for (let el of focusWithinList) {\n        el.current?.classList.remove('focus-visible-within');\n      }\n    };\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"FocusVisible.js"}

package/dist/common/InputStyling.cjs

@@ -15,6 +15,6 @@ var _styles = require("../styles");
 
 var _templateObject;
 
-var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &:focus, &.focus-state, &.focus-visible {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
+var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
 exports.CommonInteractionStyling = CommonInteractionStyling;
 //# sourceMappingURL=InputStyling.cjs.map

package/dist/common/InputStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/InputStyling.ts"],"names":["CommonInteractionStyling","css","COLORS","white","primary_20","primary_600","primary_100","primary_800","neutral_300"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,wBAAwB,OAAGC,qBAAH,krBAEbC,eAAOC,KAFM,EAOXD,eAAOC,KAPI,EAYbD,eAAOE,UAZM,EAaxBF,eAAOG,WAbiB,EAiBbH,eAAOI,WAjBM,EAkBxBJ,eAAOK,WAlBiB,EAsBbL,eAAOC,KAtBM,EAwBtBD,eAAOM,WAxBe,EA2BXN,eAAOC,KA3BI,CAA9B","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const CommonInteractionStyling = css`\n  &:focus, &.focus-state, &.focus-visible {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n"],"file":"InputStyling.cjs"}
+{"version":3,"sources":["../../src/common/InputStyling.ts"],"names":["CommonInteractionStyling","css","focusStyles","COLORS","primary_20","primary_600","primary_100","primary_800","white","neutral_300"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,wBAAwB,OAAGC,qBAAH,ggBAE/BC,mBAF+B,EAMbC,eAAOC,UANM,EAOxBD,eAAOE,WAPiB,EAUbF,eAAOG,WAVM,EAWxBH,eAAOI,WAXiB,EAcbJ,eAAOK,KAdM,EAgBtBL,eAAOM,WAhBe,EAmBXN,eAAOK,KAnBI,CAA9B","sourcesContent":["import { css } from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\n\nexport const CommonInteractionStyling = css`\n  &:focus, &.focus-state, &.focus-visible {\n    ${focusStyles}\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled, &.disabled-state {\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n"],"file":"InputStyling.cjs"}

package/dist/common/InputStyling.js

@@ -3,6 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 
 import { css } from 'styled-components';
-import { COLORS } from '../styles';
-export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus, &.focus-state, &.focus-visible {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.white, COLORS.white, COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
+import { COLORS, focusStyles } from '../styles';
+export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), focusStyles, COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
 //# sourceMappingURL=InputStyling.js.map

package/dist/common/InputStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/InputStyling.ts"],"names":["css","COLORS","CommonInteractionStyling","white","primary_20","primary_600","primary_100","primary_800","neutral_300"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,IAAMC,wBAAwB,GAAGF,GAAH,mqBAEbC,MAAM,CAACE,KAFM,EAOXF,MAAM,CAACE,KAPI,EAYbF,MAAM,CAACG,UAZM,EAaxBH,MAAM,CAACI,WAbiB,EAiBbJ,MAAM,CAACK,WAjBM,EAkBxBL,MAAM,CAACM,WAlBiB,EAsBbN,MAAM,CAACE,KAtBM,EAwBtBF,MAAM,CAACO,WAxBe,EA2BXP,MAAM,CAACE,KA3BI,CAA9B","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const CommonInteractionStyling = css`\n  &:focus, &.focus-state, &.focus-visible {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n"],"file":"InputStyling.js"}
+{"version":3,"sources":["../../src/common/InputStyling.ts"],"names":["css","COLORS","focusStyles","CommonInteractionStyling","primary_20","primary_600","primary_100","primary_800","white","neutral_300"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA,OAAO,IAAMC,wBAAwB,GAAGH,GAAH,ifAE/BE,WAF+B,EAMbD,MAAM,CAACG,UANM,EAOxBH,MAAM,CAACI,WAPiB,EAUbJ,MAAM,CAACK,WAVM,EAWxBL,MAAM,CAACM,WAXiB,EAcbN,MAAM,CAACO,KAdM,EAgBtBP,MAAM,CAACQ,WAhBe,EAmBXR,MAAM,CAACO,KAnBI,CAA9B","sourcesContent":["import { css } from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\n\nexport const CommonInteractionStyling = css`\n  &:focus, &.focus-state, &.focus-visible {\n    ${focusStyles}\n  }\n\n  &:hover:not(.action-within), &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active:not(.action-within), &.active-state {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled, &.disabled-state {\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n"],"file":"InputStyling.js"}

package/dist/common/index.cjs

@@ -15,6 +15,24 @@ Object.defineProperty(exports, "defaultOnMouseDownHandler", {
     return _EventHandlers.defaultOnMouseDownHandler;
   }
 });
+Object.defineProperty(exports, "useActionWithin", {
+  enumerable: true,
+  get: function get() {
+    return _ActionWithin.useActionWithin;
+  }
+});
+Object.defineProperty(exports, "useClickOutsideRef", {
+  enumerable: true,
+  get: function get() {
+    return _ClickOutside.useClickOutsideRef;
+  }
+});
+Object.defineProperty(exports, "useFocusOutsideRef", {
+  enumerable: true,
+  get: function get() {
+    return _FocusOutside.useFocusOutsideRef;
+  }
+});
 Object.defineProperty(exports, "useFocusVisibleRef", {
   enumerable: true,
   get: function get() {
@@ -27,4 +45,10 @@ var _InputStyling = require("./InputStyling");
 var _EventHandlers = require("./EventHandlers");
 
 var _FocusVisible = require("./FocusVisible");
+
+var _ActionWithin = require("./ActionWithin");
+
+var _FocusOutside = require("./FocusOutside");
+
+var _ClickOutside = require("./ClickOutside");
 //# sourceMappingURL=index.cjs.map

package/dist/common/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/common/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './ActionWithin';\nexport {useFocusOutsideRef} from './FocusOutside'\nexport {useClickOutsideRef} from './ClickOutside'\n"],"file":"index.cjs"}

package/dist/common/index.d.ts

@@ -1,3 +1,6 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
+export { useActionWithin } from './ActionWithin';
+export { useFocusOutsideRef } from './FocusOutside';
+export { useClickOutsideRef } from './ClickOutside';

package/dist/common/index.js

@@ -1,4 +1,7 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
+export { useActionWithin } from './ActionWithin';
+export { useFocusOutsideRef } from './FocusOutside';
+export { useClickOutsideRef } from './ClickOutside';
 //# sourceMappingURL=index.js.map

package/dist/common/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/index.ts"],"names":["CommonInteractionStyling","defaultOnMouseDownHandler","useFocusVisibleRef"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/common/index.ts"],"names":["CommonInteractionStyling","defaultOnMouseDownHandler","useFocusVisibleRef","useActionWithin","useFocusOutsideRef","useClickOutsideRef"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC;AACA,SAAQC,eAAR,QAA8B,gBAA9B;AACA,SAAQC,kBAAR,QAAiC,gBAAjC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './ActionWithin';\nexport {useFocusOutsideRef} from './FocusOutside'\nexport {useClickOutsideRef} from './ClickOutside'\n"],"file":"index.js"}

package/dist/icons/index.cjs

@@ -52,7 +52,7 @@ 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"])), function (props) {
+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;

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`;\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","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"}

package/dist/icons/index.js

@@ -24,7 +24,7 @@ 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"])), function (props) {
+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;

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`;\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","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","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;;;;AAkBA;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;AAIA,IAAMQ,aAAa,GAAGV,MAAM,CAACW,GAAV,oIACR,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAV;AAAA,CADG,EAEP,UAAAD,KAAK;AAAA,SAAIA,KAAK,CAACE,MAAV;AAAA,CAFE,CAAnB;;AAMA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAA4BH,KAA5B,EAA2CC,MAA3C,EAA2DG,OAA3D,EAA4EC,OAA5E,EAA8FC,SAA9F,EAAqH;AACtI,SAAOD,OAAO,gBACZ,MAAC,SAAD;AAAA,4BACE,KAAC,aAAD;AAAe,MAAA,SAAS,EAAEC,SAA1B;AAAqC,MAAA,KAAK,EAAEN,KAA5C;AAAmD,MAAA,MAAM,EAAEC,MAA3D;AAAmE,MAAA,OAAO,EAAEG,OAA5E;AAAqF,MAAA,IAAI,EAAC,MAA1F;AAAiG,MAAA,KAAK,EAAC,4BAAvG;AAAA,gBACGD;AADH,MADF,eAIE,KAAC,OAAD;AAAA,gBAAUE;AAAV,MAJF;AAAA,IADY,gBAQZ,KAAC,aAAD;AAAe,IAAA,SAAS,EAAEC,SAA1B;AAAqC,IAAA,KAAK,EAAEN,KAA5C;AAAmD,IAAA,MAAM,EAAEC,MAA3D;AAAmE,IAAA,OAAO,EAAEG,OAA5E;AAAqF,IAAA,IAAI,EAAC,MAA1F;AAAiG,IAAA,KAAK,EAAC,4BAAvG;AAAA,cACGD;AADH,IARF;AAYD,CAbD;;AAeA,OAAO,IAAMI,QAA4C,GAAG,SAA/CA,QAA+C,OAAiF;AAAA,MAA9ED,SAA8E,QAA9EA,SAA8E;AAAA,MAAnEH,QAAmE,QAAnEA,QAAmE;AAAA,uBAAzDV,IAAyD;AAAA,MAAzDA,IAAyD,0BAAlD,MAAkD;AAAA,0BAA1CW,OAA0C;AAAA,MAA1CA,OAA0C,6BAAhC,WAAgC;AAAA,0BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,6BAAT,EAAS;AAC3I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AArDLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AAqDF,OAAO,IAAMG,UAA8C,GAAG,SAAjDA,UAAiD,QAAiF;AAAA,MAA9EF,SAA8E,SAA9EA,SAA8E;AAAA,MAAnEH,QAAmE,SAAnEA,QAAmE;AAAA,yBAAzDV,IAAyD;AAAA,MAAzDA,IAAyD,2BAAlD,MAAkD;AAAA,4BAA1CW,OAA0C;AAAA,MAA1CA,OAA0C,8BAAhC,WAAgC;AAAA,4BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,8BAAT,EAAS;AAC7I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AAzDLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AAyDF,OAAO,IAAMI,WAA+C,GAAG,SAAlDA,WAAkD,QAAiF;AAAA,MAA9EH,SAA8E,SAA9EA,SAA8E;AAAA,MAAnEH,QAAmE,SAAnEA,QAAmE;AAAA,yBAAzDV,IAAyD;AAAA,MAAzDA,IAAyD,2BAAlD,MAAkD;AAAA,4BAA1CW,OAA0C;AAAA,MAA1CA,OAA0C,8BAAhC,WAAgC;AAAA,4BAAnBC,OAAmB;AAAA,MAAnBA,OAAmB,8BAAT,EAAS;AAC9I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AA7DLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AA6DF,SAASd,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  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"}

package/dist/index.cjs

@@ -517,5 +517,33 @@ Object.keys(_Tag).forEach(function (key) {
   });
 });
 
+var _Image = require("./Image");
+
+Object.keys(_Image).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Image[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Image[key];
+    }
+  });
+});
+
+var _ChipsInput = require("./ChipsInput");
+
+Object.keys(_ChipsInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChipsInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChipsInput[key];
+    }
+  });
+});
+
 var _assets = require("./assets");
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}

package/dist/index.d.ts

@@ -34,4 +34,6 @@ export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';
+export * from './Image';
+export * from './ChipsInput';
 export { LaerdalLogo } from './assets';

package/dist/index.js

@@ -34,5 +34,7 @@ export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';
+export * from './Image';
+export * from './ChipsInput';
 export { LaerdalLogo } from './assets';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.js"}

package/dist/styles/focus-styles.cjs

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.invertedFocusStyles = exports.focusStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = require("styled-components");
+
+var _zIndexes = require("./z-indexes");
+
+var _templateObject, _templateObject2;
+
+var focusStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.focus);
+exports.focusStyles = focusStyles;
+var invertedFocusStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.focus);
+exports.invertedFocusStyles = invertedFocusStyles;
+//# sourceMappingURL=focus-styles.cjs.map

package/dist/styles/focus-styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/focus-styles.tsx"],"names":["focusStyles","css","Z_INDEXES","focus","invertedFocusStyles"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,WAAW,OAAGC,qBAAH,qLAIXC,oBAAUC,KAJC,CAAjB;;AAOA,IAAMC,mBAAmB,OAAGH,qBAAH,uLAInBC,oBAAUC,KAJS,CAAzB","sourcesContent":["import {css} from 'styled-components';\nimport {Z_INDEXES} from './z-indexes';\n\nexport const focusStyles = css`\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ${Z_INDEXES.focus};\n`;\n\nexport const invertedFocusStyles = css`\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ${Z_INDEXES.focus};\n`;\n"],"file":"focus-styles.cjs"}

package/dist/styles/focus-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const focusStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const invertedFocusStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/focus-styles.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { css } from 'styled-components';
+import { Z_INDEXES } from './z-indexes';
+export var focusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), Z_INDEXES.focus);
+export var invertedFocusStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), Z_INDEXES.focus);
+//# sourceMappingURL=focus-styles.js.map

package/dist/styles/focus-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/focus-styles.tsx"],"names":["css","Z_INDEXES","focusStyles","focus","invertedFocusStyles"],"mappings":";;;;AAAA,SAAQA,GAAR,QAAkB,mBAAlB;AACA,SAAQC,SAAR,QAAwB,aAAxB;AAEA,OAAO,IAAMC,WAAW,GAAGF,GAAH,sKAIXC,SAAS,CAACE,KAJC,CAAjB;AAOP,OAAO,IAAMC,mBAAmB,GAAGJ,GAAH,wKAInBC,SAAS,CAACE,KAJS,CAAzB","sourcesContent":["import {css} from 'styled-components';\nimport {Z_INDEXES} from './z-indexes';\n\nexport const focusStyles = css`\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ${Z_INDEXES.focus};\n`;\n\nexport const invertedFocusStyles = css`\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ${Z_INDEXES.focus};\n`;\n"],"file":"focus-styles.js"}

package/dist/styles/index.cjs

@@ -5,6 +5,52 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  scrollBarStyling: true,
+  COLORS: true,
+  BREAKPOINTS: true,
+  BOXSHADOWS: true,
+  TYPOGRAPHY: true,
+  HeadlineXL: true,
+  HeadlineL: true,
+  HeadlineM: true,
+  HeadlineS: true,
+  HeadlineXS: true,
+  HeadlineXXS: true,
+  ParagraphTextStyle: true,
+  ParagraphXL: true,
+  ParagraphL: true,
+  ParagraphM: true,
+  ParagraphS: true,
+  ParagraphXS: true,
+  ComponentTextStyle: true,
+  ComponentXL: true,
+  ComponentL: true,
+  ComponentM: true,
+  ComponentS: true,
+  ComponentXS: true,
+  ComponentXXS: true,
+  ComponentResponsive: true,
+  ComponentXLStyling: true,
+  ComponentLStyling: true,
+  ComponentMStyling: true,
+  ComponentSStyling: true,
+  ComponentXSStyling: true,
+  ComponentXXSStyling: true,
+  ParagraphXlStyling: true,
+  ParagraphLStyling: true,
+  ParagraphMStyling: true,
+  ParagraphSStyling: true,
+  ParagraphXSStyling: true,
+  HeadlineXLStyling: true,
+  HeadlineLStyling: true,
+  HeadlineMStyling: true,
+  HeadlineSStyling: true,
+  HeadlineXSStyling: true,
+  HeadlineXXSStyling: true,
+  globalStyles: true,
+  Z_INDEXES: true
+};
 Object.defineProperty(exports, "BOXSHADOWS", {
   enumerable: true,
   get: function get() {
@@ -279,10 +325,30 @@ var _typography = require("./typography");
 
 var _global = _interopRequireDefault(require("./global"));
 
+var _types = require("../types");
+
 var _zIndexes = require("./z-indexes");
 
+var _focusStyles = require("./focus-styles");
+
+Object.keys(_focusStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _focusStyles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _focusStyles[key];
+    }
+  });
+});
+
 var _templateObject;
 
-var scrollBarStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _colors.default.white, _colors.default.neutral_200, _colors.default.neutral_400);
+var scrollBarStyling = function scrollBarStyling() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _types.Size.Small;
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == _types.Size.Medium ? '6px' : '4px', size == _types.Size.Medium ? '6px' : '4px', _colors.default.neutral_100, _colors.default.neutral_500, _colors.default.primary_700, _colors.default.primary_800);
+};
+
 exports.scrollBarStyling = scrollBarStyling;
 //# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","css","COLORS","white","neutral_200","neutral_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AAoCA;;;;AAxBO,IAAMA,gBAAgB,OAAGC,qBAAH,ybASXC,gBAAOC,KATI,EAcXD,gBAAOE,WAdI,EAoBXF,gBAAOG,WApBI,CAAtB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = css`\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","size","Size","Small","css","Medium","COLORS","neutral_100","neutral_500","primary_700","primary_800"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AACA;;AA2CA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;AAjCO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAACC,IAAD,uEAAkCC,YAAKC,KAAvC;AAAA,aAAiDC,qBAAjD,wjBAGnBH,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAHX,EAIlBJ,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAJZ,EAUdC,gBAAOC,WAVO,EAgBdD,gBAAOE,WAhBO,EAsBdF,gBAAOG,WAtBO,EA2BdH,gBAAOI,WA3BO;AAAA,CAAzB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\nimport { Size } from '../types';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\n  \n  ::-webkit-scrollbar {\n    width: ${size == Size.Medium ? '6px' : '4px'};\n    height: ${size == Size.Medium ? '6px' : '4px'};\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.primary_700};\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n\nexport * from './focus-styles';\n"],"file":"index.cjs"}