@laerdal/life-react-components 1.7.0-dev.10 → 1.7.0-dev.12

package/dist/common/FocusVisible.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["useFocusVisibleRef","focusWithinList","ref","elementRef","React","useRef","suppress","handleMouseDown","current","classList","contains","handleFocus","add","forEach","focusWithinListItem","handleBlur","remove","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\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 = !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.cjs"}
+{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["useFocusVisibleRef","focusWithinList","ref","elementRef","React","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.cjs"}

package/dist/common/FocusVisible.js

@@ -1,3 +1,5 @@
+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); }
@@ -11,40 +13,62 @@ 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;

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","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\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 = !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"}
+{"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    ", "\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.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);
+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","focusStyles","COLORS","primary_20","primary_600","primary_100","primary_800","white","neutral_300"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,wBAAwB,OAAGC,qBAAH,wdAE/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, &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active, &.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"}
+{"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

@@ -4,5 +4,5 @@ var _templateObject;
 
 import { css } from 'styled-components';
 import { COLORS, focusStyles } from '../styles';
-export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus, &.focus-state, &.focus-visible {\n    ", "\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.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);
+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","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,ycAE/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, &.hover-state {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active, &.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"}
+{"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

@@ -18,7 +18,19 @@ Object.defineProperty(exports, "defaultOnMouseDownHandler", {
 Object.defineProperty(exports, "useActionWithin", {
   enumerable: true,
   get: function get() {
-    return _HoverWithin.useActionWithin;
+    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", {
@@ -34,5 +46,9 @@ var _EventHandlers = require("./EventHandlers");
 
 var _FocusVisible = require("./FocusVisible");
 
-var _HoverWithin = require("./HoverWithin");
+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;;AACA","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './HoverWithin';\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,4 +1,6 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
-export { useActionWithin } from './HoverWithin';
+export { useActionWithin } from './ActionWithin';
+export { useFocusOutsideRef } from './FocusOutside';
+export { useClickOutsideRef } from './ClickOutside';

package/dist/common/index.js

@@ -1,5 +1,7 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
-export { useActionWithin } from './HoverWithin';
+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","useActionWithin"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC;AACA,SAAQC,eAAR,QAA8B,eAA9B","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './HoverWithin';\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":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n  pointer-events: none;\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.7.0-dev.10",
+  "version": "1.7.0-dev.12",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [

package/dist/Toggles/ToggleButton.cjs

@@ -1,81 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ToggleButton = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Button = require("../Button");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Iconbutton = require("../Button/Iconbutton");
-
-var _styles = require("../styles");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject;
-
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContent, _Iconbutton.IconButtonContent, _styles.COLORS.white, _Iconbutton.IconButtonContent, _styles.COLORS.primary_500, _Iconbutton.IconButtonContent, _styles.COLORS.neutral_300);
-
-var ToggleButton = function ToggleButton(props) {
-  var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
-
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      active = _React$useState2[0],
-      setActive = _React$useState2[1];
-
-  _react.default.useEffect(function () {
-    return setActive(props.active);
-  }, [props.active]);
-
-  var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    className: cls,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      variant: 'secondary',
-      useTransparentBackground: true,
-      shape: 'circular',
-      action: function action() {
-        setActive(!active);
-
-        if (props.onChange) {
-          props.onChange(!active);
-        }
-      },
-      iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
-      disabled: props.disabled,
-      children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
-    })
-  });
-};
-
-exports.ToggleButton = ToggleButton;
-ToggleButton.propTypes = {
-  active: _propTypes.default.bool.isRequired,
-  onChange: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  defaultState: _propTypes.default.shape({
-    icon: _propTypes.default.node.isRequired,
-    color: _propTypes.default.string
-  }).isRequired,
-  activeState: _propTypes.default.shape({
-    icon: _propTypes.default.node.isRequired,
-    color: _propTypes.default.string
-  })
-};
-var _default = ToggleButton;
-exports.default = _default;
-//# sourceMappingURL=ToggleButton.cjs.map

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","props","React","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,okBACTC,6BADS,EAOPA,6BAPO,EAQOC,eAAOC,KARd,EAaPF,6BAbO,EAkBaC,eAAOE,WAlBpB,EA0BPH,6BA1BO,EA2BOC,eAAOG,WA3Bd,CAAb;;AA8CO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BC,eAAMC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,qBAAC,kBAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAV5B;AAAA,gBAWGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;eAuCaX,Y","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.cjs"}

package/dist/Toggles/ToggleButton.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface ToggleButtonState {
-    icon: React.ReactNode;
-    color?: string;
-}
-export interface ToggleButtonProps {
-    active: boolean;
-    onChange?: (value: boolean) => void;
-    disabled?: boolean;
-    defaultState: ToggleButtonState;
-    activeState?: ToggleButtonState;
-}
-export declare const ToggleButton: React.FunctionComponent<ToggleButtonProps>;
-export default ToggleButton;

package/dist/Toggles/ToggleButton.js

@@ -1,59 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject;
-
-import React from 'react';
-import { IconButton } from '../Button';
-import styled from 'styled-components';
-import { IconButtonContent } from '../Button/Iconbutton';
-import { COLORS } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_500, IconButtonContent, COLORS.neutral_300);
-export var ToggleButton = function ToggleButton(props) {
-  var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      active = _React$useState2[0],
-      setActive = _React$useState2[1];
-
-  React.useEffect(function () {
-    return setActive(props.active);
-  }, [props.active]);
-  var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
-  return /*#__PURE__*/_jsx(Wrapper, {
-    className: cls,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      variant: 'secondary',
-      useTransparentBackground: true,
-      shape: 'circular',
-      action: function action() {
-        setActive(!active);
-
-        if (props.onChange) {
-          props.onChange(!active);
-        }
-      },
-      iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
-      disabled: props.disabled,
-      children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
-    })
-  });
-};
-ToggleButton.propTypes = {
-  active: _pt.bool.isRequired,
-  onChange: _pt.func,
-  disabled: _pt.bool,
-  defaultState: _pt.shape({
-    icon: _pt.node.isRequired,
-    color: _pt.string
-  }).isRequired,
-  activeState: _pt.shape({
-    icon: _pt.node.isRequired,
-    color: _pt.string
-  })
-};
-export default ToggleButton;
-//# sourceMappingURL=ToggleButton.js.map

package/dist/Toggles/ToggleButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","props","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,sjBACTH,iBADS,EAOPA,iBAPO,EAQOC,MAAM,CAACG,KARd,EAaPJ,iBAbO,EAkBaC,MAAM,CAACI,WAlBpB,EA0BPL,iBA1BO,EA2BOC,MAAM,CAACK,WA3Bd,CAAb;AA8CA,OAAO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BX,KAAK,CAACY,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAd,EAAAA,KAAK,CAACe,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACH,KAAK,CAACE,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACF,KAAK,CAACE,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCF,KAAK,CAACM,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EN,KAAK,CAACO,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,KAAC,UAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIF,KAAK,CAACQ,QAAV,EAAoB;AAClBR,UAAAA,KAAK,CAACQ,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGF,KAAK,CAACM,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BT,KAAK,CAACU,YAAN,CAAmBD,KAAlD,GAA0DT,KAAK,CAACU,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAET,KAAK,CAACO,QAV5B;AAAA,gBAWGL,MAAM,mDAAGF,KAAK,CAACM,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BX,KAAK,CAACU,YAAN,CAAmBC,IAAjD,GAAwDX,KAAK,CAACU,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;AAuCF,eAAeV,YAAf","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.js"}

package/dist/common/HoverWithin.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/HoverWithin.ts"],"names":["useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","React","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAC,iBAAMC,SAAN,CAAgB,YAAM;AAAA,+CACFT,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA,YAAnBU,KAAmB;AAC1BA,QAAAA,KAAK,CAACP,OAAN,CAAcQ,gBAAd,CAA+B,YAA/B,EAA6CV,gBAA7C;AACAS,QAAAA,KAAK,CAACP,OAAN,CAAcQ,gBAAd,CAA+B,YAA/B,EAA6CL,gBAA7C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA,cAAnBU,KAAmB;AAC1BA,UAAAA,KAAK,CAACP,OAAN,CAAcS,mBAAd,CAAkC,YAAlC,EAAgDX,gBAAhD;AACAS,UAAAA,KAAK,CAACP,OAAN,CAAcS,mBAAd,CAAkC,YAAlC,EAAgDN,gBAAhD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current.addEventListener('mouseenter', handleMouseEnter);\n      child.current.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current.removeEventListener('mouseenter', handleMouseEnter);\n        child.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"HoverWithin.cjs"}

package/dist/common/HoverWithin.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/HoverWithin.ts"],"names":["React","useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA,+CACFR,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA,YAAnBS,KAAmB;AAC1BA,QAAAA,KAAK,CAACN,OAAN,CAAcO,gBAAd,CAA+B,YAA/B,EAA6CT,gBAA7C;AACAQ,QAAAA,KAAK,CAACN,OAAN,CAAcO,gBAAd,CAA+B,YAA/B,EAA6CJ,gBAA7C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA,cAAnBS,KAAmB;AAC1BA,UAAAA,KAAK,CAACN,OAAN,CAAcQ,mBAAd,CAAkC,YAAlC,EAAgDV,gBAAhD;AACAQ,UAAAA,KAAK,CAACN,OAAN,CAAcQ,mBAAd,CAAkC,YAAlC,EAAgDL,gBAAhD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current.addEventListener('mouseenter', handleMouseEnter);\n      child.current.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current.removeEventListener('mouseenter', handleMouseEnter);\n        child.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"HoverWithin.js"}